/* ==========================================================================
   «Наши услуги» — reference: assets/whatwedo.png (1672×941)
   1 design px = var(--u). The frame scales with the page width (no height fit:
   this section scrolls) and is capped so ultra-wide screens don't get giant cards.
   ========================================================================== */

.services{
  --u:min(100cqw / 1672,1.25px);
  --kicker:#b47d27;
  --heading:#26260f;
  --body:#615d48;
  --card:#faf6f1;
  position:relative;
  overflow:clip;
  background:var(--cream);
}
.services__inner{
  position:relative;
  width:calc(1672 * var(--u));
  margin:0 auto;
  height:calc(941 * var(--u)); /* exact frame height of the mock */
  padding:calc(var(--s-top,41.6) * var(--u)) 0 0;
}

/* blurred olive-leaf shadow (tools/services_layers.py), box in design px incl. 24px bleed */
.services__shadow{
  position:absolute;z-index:0;
  right:calc(-24 * var(--u));top:calc(-24 * var(--u)); /* pinned to the screen edge */
  width:calc(356 * var(--u));height:calc(261 * var(--u));
  transform-origin:100% 0;
  pointer-events:none;
}
.services__shadow img{width:100%;height:100%}

/* ------------------------------------------------------------- heading */
.services .kicker,.services__title,.services__lead{position:relative;z-index:1;margin-left:calc(100 * var(--u))}

.kicker{
  display:flex;align-items:center;
  font-size:max(11px,calc(var(--k-fs,17) * var(--u)));line-height:1;
  font-weight:600;letter-spacing:.19em;word-spacing:.04em;text-transform:uppercase;
  color:var(--kicker);
}
.kicker__text{margin-right:-.19em}
.kicker__line{
  display:block;flex:none;
  width:calc(71 * var(--u));height:max(1px,calc(1.5 * var(--u)));
  margin-left:calc(var(--k-gap,24) * var(--u));
  background:linear-gradient(90deg,#c69a50,#d4ad6a);
  transform-origin:left center;
}

.services__title{
  margin-top:calc(var(--s-h2,7) * var(--u));
  font-family:var(--serif);
  font-variation-settings:"opsz" 24; /* wider, sturdier cut of the same family — matches the mock's proportions */
  font-size:max(34px,calc(var(--h2-fs,76.8) * var(--u)));
  line-height:calc(var(--h2-lh,74) * var(--u));
  font-weight:590;letter-spacing:.024em;
  color:var(--heading);
}

.services__lead{
  margin-top:calc(var(--s-lead,6) * var(--u));
  font-size:max(15px,calc(var(--lead-fs,21.5) * var(--u)));
  line-height:max(22px,calc(28.5 * var(--u)));
  letter-spacing:.03em;
  color:var(--body);
}
.services__lead span{display:block}

/* ---------------------------------------------------------------- grid */
.services__grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(2,calc(773 * var(--u)));
  column-gap:calc(24 * var(--u));
  row-gap:calc(22 * var(--u));
  margin:calc(var(--s-grid,35) * var(--u)) 0 0 calc(52 * var(--u));
}

/* ---------------------------------------------------------------- card */
.card{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;height:100%;
  border-radius:calc(16 * var(--u));
  overflow:hidden;
  background:var(--card);
  box-shadow:
    0 calc(14 * var(--u)) calc(34 * var(--u)) calc(-16 * var(--u)) rgba(98,74,40,.22),
    0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(98,74,40,.05);
  transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
/* hairline light rim drawn over the photo, as in the mock */
.card::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62);
  pointer-events:none;
}
.card:focus-visible{outline:2px solid #b47e30;outline-offset:4px;border-radius:calc(16 * var(--u))}

.card__media{
  position:relative;flex:none;overflow:hidden;
  height:calc(246 * var(--u));
  background:#8b7a63;
}
.services__item:nth-child(n+3) .card__media{height:calc(227 * var(--u))}
.card__zoom{position:absolute;inset:0;display:block;transition:transform 1.4s var(--ease-out)}
.card__img{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:cover;
}
/* framing of each photo inside the wide desktop crop */
.card__img--lit-retractable-pergola{object-position:50% 66%}
.card__img--raised-deck-stairs{object-position:50% 34%}
.card__img--plunge-pool-loungers{object-position:50% 58%}
.card__img--spa-deck-fence{object-position:50% 36%}
/* parallax room (js moves the image ±7%) */
.motion .card__img{top:-8%;height:116%}

.card__body{
  position:relative;flex:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  min-height:calc(93 * var(--u));
  padding:calc(var(--b-top,15.5) * var(--u)) calc(118 * var(--u)) calc(9.5 * var(--u)) calc(33 * var(--u));
}
.services__item:nth-child(n+3) .card__body{min-height:calc(92 * var(--u));padding-top:calc(var(--b-top2,16.5) * var(--u))}

.card__title{
  font-family:var(--serif);
  font-variation-settings:"opsz" 48;
  font-size:max(20px,calc(var(--t-fs,31.6) * var(--u)));
  line-height:calc(36 * var(--u));
  font-weight:560;letter-spacing:-.006em;
  color:#232310;
}
.card__text{
  margin-top:calc(var(--d-gap,1) * var(--u));
  font-size:max(13px,calc(var(--d-fs,18.6) * var(--u)));
  line-height:max(18px,calc(24 * var(--u)));
  letter-spacing:.016em;
  color:var(--body);
}

.card__arrow{
  position:absolute;
  right:calc(29 * var(--u));top:calc(50% + 2 * var(--u));
  width:calc(57 * var(--u));height:calc(57 * var(--u));
  min-width:40px;min-height:40px;
  translate:0 -50%;
  border-radius:50%;
  display:grid;place-items:center;
}
.card__arrow::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,#c08c42,#9a6b25);
  transform:scale(.4);opacity:0;
  transition:transform .6s var(--ease-out),opacity .4s var(--ease-out);
}
.card__arrow svg{position:relative;width:100%;height:100%;overflow:visible;fill:none;stroke:#b9832c;stroke-linecap:round;stroke-linejoin:round}
.card__arrow circle{stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
.card__arrow path{stroke-width:1.7;transition:transform .6s var(--ease-out),stroke .3s}

@media (hover:hover){
  .card:hover{
    transform:translateY(calc(-6 * var(--u)));
    box-shadow:
      0 calc(26 * var(--u)) calc(48 * var(--u)) calc(-20 * var(--u)) rgba(98,74,40,.32),
      0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(98,74,40,.06);
  }
  .card:hover .card__zoom{transform:scale(1.06)}
  .card:hover .card__arrow::before{transform:scale(1);opacity:1}
  .card:hover .card__arrow svg{stroke:#fffaf0}
  .card:hover .card__arrow path{transform:translateX(calc(3 * var(--u)))}
}

/* ------------------------------------------------- motion start states */
.motion [data-s-reveal],.motion [data-card]{visibility:hidden}

/* ===================================================================
   Stacked layout — same breakpoint as the hero
   =================================================================== */
@media (max-width:1023.98px),(max-aspect-ratio:6/5){
  .services{--u:1px}
  .services__inner{width:auto;height:auto;max-width:720px;padding:72px 20px 56px}
  .services__shadow{right:-40px;top:-20px;width:240px;height:auto}
  .services .kicker,.services__title,.services__lead{margin-left:0}
  .kicker{font-size:12px;letter-spacing:.18em}
  .kicker__text{margin-right:-.18em}
  .kicker__line{width:48px;margin-left:16px}
  .services__title{margin-top:12px;font-size:clamp(40px,11vw,60px);line-height:1.05}
  .services__lead{margin-top:14px;font-size:clamp(15.5px,4.2vw,18px);line-height:1.55}
  .services__lead span{display:inline}

  .services__grid{grid-template-columns:1fr;gap:16px;margin:32px 0 0}
  .card{border-radius:16px}
  .card__media,.services__item:nth-child(n+3) .card__media{height:auto;aspect-ratio:16/10}
  .card__body,.services__item:nth-child(n+3) .card__body{min-height:0;padding:18px 80px 20px 20px}
  .card__title{font-size:clamp(22px,6vw,28px);line-height:1.2}
  .card__text{margin-top:6px;font-size:15px;line-height:1.45}
  .card__arrow{right:18px;width:48px;height:48px}
}
@media (min-width:640px) and (max-width:1023.98px),(min-width:640px) and (max-aspect-ratio:6/5){
  .services__inner{max-width:1000px;padding:88px 32px 64px}
  .services__grid{grid-template-columns:1fr 1fr;gap:20px}
  .card__media,.services__item:nth-child(n+3) .card__media{aspect-ratio:4/3}
  .card__body,.services__item:nth-child(n+3) .card__body{padding:18px 72px 20px 20px}
  .card__title{font-size:24px}
  .card__arrow{width:44px;height:44px;min-width:44px;min-height:44px}
}