/* ==========================================================================
   «Наши работы» — reference: assets/woks.png (1672×941)
   Same frame logic as «Наши услуги»: 1 design px = var(--u), width-driven, capped.
   Shared pieces (.kicker, .btn) come from services.css / hero.css.
   ========================================================================== */

.works{
  --u:min(100cqw / 1672,1.25px);
  --kicker:#b47d27;
  --k-fs:19;
  --k-gap:41;
  --heading:#26260f;
  --body:#646150;
  position:relative;
  overflow:clip;
  background:var(--cream);
}
.works__inner{
  position:relative;z-index:1;
  width:calc(1672 * var(--u));
  margin:0 auto;
  height:calc(941 * var(--u)); /* exact frame height of the mock */
  padding:calc(var(--w-top,53) * var(--u)) 0 0;
}

/* ---------------------------------------------------------- decoration */
.works__olive{
  position:absolute;z-index:2;
  left:calc(-24 * var(--u)); /* pinned to the screen edge, not the frame: no hard cut on wide screens */
  top:calc(726 * var(--u));
  width:calc(260 * var(--u));height:calc(239 * var(--u));
  transform-origin:8% 100%;
  pointer-events:none;
}
.works__olive img{width:100%;height:100%}
.works__wave{
  position:absolute;z-index:0;
  right:0;top:0;
  width:calc(1672 * var(--u));height:calc(941 * var(--u));
  overflow:visible;pointer-events:none;
}
.works__line{fill:none;stroke:#c99a4c;stroke-width:2.2;stroke-linecap:round}

/* ------------------------------------------------------------- heading */
.works__head{display:flex;align-items:flex-start}
.works__intro{flex:none;width:calc(870 * var(--u));padding-left:calc(106 * var(--u))}
.works__title{
  margin-top:calc(var(--w-h2,19) * var(--u));
  font-family:var(--serif);
  font-variation-settings:"opsz" 36;
  font-size:max(34px,calc(72.3 * var(--u)));
  line-height:calc(62 * var(--u));
  font-weight:620;letter-spacing:0;
  color:var(--heading);
}
.works__title span{display:block}
.works__title span + span{letter-spacing:-.016em}
.works__text{
  margin:calc(var(--w-text,42) * var(--u)) 0 0 calc(106 * var(--u));
  font-size:max(14px,calc(18.6 * var(--u)));
  line-height:max(21px,calc(31 * var(--u)));
  letter-spacing:0;
  color:var(--body);
}
.works__text span{display:block}

/* --------------------------------------------------------------- grid */
.works__grid{
  display:grid;
  grid-template-columns:calc(503 * var(--u)) calc(473 * var(--u)) calc(505 * var(--u));
  grid-template-rows:calc(244 * var(--u)) calc(245 * var(--u));
  gap:calc(25 * var(--u)) calc(24 * var(--u));
  margin:calc(var(--w-grid,41) * var(--u)) 0 0 calc(73 * var(--u));
}
.tile{margin:0;position:relative}
.tile--lg{grid-row:1 / span 2}
.tile__frame{
  position:relative;isolation:isolate;
  width:100%;height:100%;
  border-radius:calc(13 * var(--u));
  overflow:hidden;
  background:#8d7c66;
  box-shadow:0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-16 * var(--u)) rgba(98,74,40,.26);
}
.tile__frame::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  pointer-events:none;
}
.tile__zoom{position:absolute;inset:0;display:block;transition:transform 1.4s var(--ease-out)}
.tile__img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.tile__img--rooftop-led-pergola{object-position:58% 50%}
.tile__img--olive-tree-deck{object-position:50% 62%}
.tile__img--pool-sunset-ipe{object-position:50% 58%}
.tile__img--rooftop-ipe-planters{object-position:50% 56%}
.tile__img--slatted-dark-pergola{object-position:50% 40%}
.motion .tile__img{top:-8%;height:116%}
@media (hover:hover){
  .tile:hover .tile__zoom{transform:scale(1.05)}
}

/* ------------------------------------------------------------- button */
.works__more{display:flex;justify-content:center;margin-top:calc(var(--w-btn,41) * var(--u))}
.works__btn{
  min-width:calc(289 * var(--u));height:calc(56 * var(--u));
  padding:0 max(20px,calc(30 * var(--u))) 0 max(22px,calc(34 * var(--u))); /* optical: label sits 2px right of centre in the mock */
  min-height:44px;
  font-size:max(14px,calc(18.3 * var(--u)));font-weight:500;
  --arrow:calc(21 * var(--u));
  gap:calc(18 * var(--u));
  color:#48471f;
  border-width:2px;border-color:#caa25b;
}
.works__btn .btn__arrow{color:#b38d50;stroke-width:1.7}

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

/* ===================================================================
   Stacked layout
   =================================================================== */
@media (max-width:1023.98px),(max-aspect-ratio:6/5){
  .works{--u:1px}
  .works__inner{width:auto;height:auto;max-width:720px;padding:64px 20px 88px}
  .works__head{display:block}
  .works__intro{width:auto;padding-left:0}
  .works__title{margin-top:12px;font-size:clamp(36px,10vw,58px);line-height:1.08}
  .works__title span + span{letter-spacing:0}
  .works__text{margin:16px 0 0;font-size:clamp(15.5px,4.2vw,18px);line-height:1.6}
  .works__text span{display:inline}
  .works__grid{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:12px;margin:28px 0 0}
  .tile--lg{grid-column:1 / -1;grid-row:auto}
  .tile__frame{height:auto;aspect-ratio:4/3;border-radius:14px}
  .tile--lg .tile__frame{aspect-ratio:16/11}
  .works__more{margin-top:28px}
  .works__btn{min-width:0;height:54px;padding:0 28px;font-size:16px;--arrow:20px;gap:14px}
  .works__olive{left:-24px;top:auto;bottom:-30px;width:220px;height:auto}
  .works__wave{top:auto;bottom:0;width:150vw;height:auto;aspect-ratio:1672/941;transform-origin:100% 100%}
}
@media (min-width:640px) and (max-width:1023.98px),(min-width:640px) and (max-aspect-ratio:6/5){
  .works__inner{max-width:1000px;padding:88px 32px 104px}
  .works__grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .tile--lg{grid-column:1 / span 2;grid-row:1 / span 2}
  .tile--lg .tile__frame{aspect-ratio:auto;height:100%}
  .tile__frame{aspect-ratio:4/3}
  .tile:nth-child(2),.tile:nth-child(3){grid-column:span 1}
}