/* ==========================================================================
   CTA «Давайте создадим ваше пространство» — reference: ../sources/section_3.png (1672×941)
   Background = real work #51 + fitted cream haze (tools/cta_layers.py).
   1 design px = var(--u); layers are 1672×1073 design px (frame + 132px of extra floor).
   ========================================================================== */

.cta{
  --u:min(100cqw / 1672,1.25px);
  position:relative;
  overflow:clip;
  isolation:isolate;
  background:#fbf4ea;
}

/* --------------------------------------------------------------- layers */
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__layer{
  position:absolute;left:0;top:0;
  width:100%;height:auto;aspect-ratio:1672/1073;
}
.cta__layer img{width:100%;height:100%;object-fit:cover}

.cta__light{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* morning sun spilling in from the top-left window */
.cta__sun{
  position:absolute;left:-12%;top:-30%;
  width:70%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(255,247,232,.85),rgba(255,242,222,.4) 45%,rgba(255,240,220,0) 100%);
  mix-blend-mode:screen;
  opacity:.45;
}
/* a glint travelling along the wet deck (parked off-screen at rest) */
.cta__glint{
  position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(104deg,transparent 38%,rgba(255,232,196,.0) 42%,rgba(255,236,204,.55) 50%,rgba(255,232,196,0) 58%,transparent 62%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%);
  mask-image:linear-gradient(to bottom,transparent,#000 35%);
  mix-blend-mode:soft-light;
  transform:translateX(-110%);
}
/* soft hand-off from the cream section above (no hard photo edge at the seam) */
.cta::before{
  content:"";position:absolute;z-index:1;left:0;right:0;top:0;
  height:calc(110 * var(--u));min-height:60px;
  background:linear-gradient(var(--cream),rgba(248,244,237,0));
  pointer-events:none;
}
/* full veil: js scrubs it away as the section scrolls in («утренняя дымка рассеивается») */
.cta__fog{position:absolute;inset:0;z-index:1;background:#faf4ec;opacity:0;pointer-events:none}

/* -------------------------------------------------------------- content */
.cta__inner{
  position:relative;z-index:2;
  height:calc(941 * var(--u));
  display:flex;flex-direction:column;align-items:center;
  padding-top:calc(var(--c-top,242) * var(--u));
  padding-left:calc(8 * var(--u)); /* the mock's copy sits 4px right of centre */
  text-align:center;
}

.cta__title{
  font-family:var(--serif);
  font-variation-settings:"opsz" 36;
  font-size:max(36px,calc(88 * var(--u)));
  line-height:calc(90 * var(--u));
  font-weight:450;letter-spacing:0;
  color:#17190a;
}
.cta__line{display:block}
.cta__line + .cta__line{letter-spacing:.007em}

.cta__rule{
  display:block;
  width:calc(52 * var(--u));height:max(1px,calc(2 * var(--u)));
  margin:calc(var(--c-rule,29) * var(--u)) 0 0 calc(-6 * var(--u));
  background:linear-gradient(90deg,#c9a463,#d6b57a,#c9a463);
}

.cta__lead{
  margin-top:calc(var(--c-lead,20) * var(--u));
  font-size:max(15px,calc(27 * var(--u)));
  line-height:calc(40 * var(--u));
  letter-spacing:.026em;
  color:#454031;
}
.cta__lead span{display:block}

.cta__actions{
  display:flex;gap:calc(29 * var(--u));
  margin:calc(var(--c-btns,51) * var(--u)) 0 0 calc(-3 * var(--u));
}
.cta__btn{
  justify-content:space-between;
  height:calc(93 * var(--u));min-height:48px;
  font-size:max(15px,calc(25 * var(--u)));font-weight:600;letter-spacing:.01em;
  --arrow:calc(22 * var(--u));
  gap:calc(24 * var(--u));
}
.cta__btn .btn__arrow{stroke-width:1.6}
.cta__btn--primary{
  width:calc(414 * var(--u));
  padding:0 calc(45 * var(--u)) 0 calc(72 * var(--u));
  color:#fff;
  border-color:rgba(214,170,96,.55);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(230,190,120,.45),transparent 60%),
    linear-gradient(180deg,#c49a54 0%,#ae8038 52%,#97702f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,.35),
    0 calc(18 * var(--u)) calc(38 * var(--u)) calc(-14 * var(--u)) rgba(150,104,36,.55),
    0 0 calc(40 * var(--u)) rgba(232,190,120,.25);
}
.cta__btn--primary.is-shine::before{animation:cta-shine 1.1s var(--ease-out)}
@keyframes cta-shine{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
.cta__btn--secondary{
  width:calc(387 * var(--u));
  padding:0 calc(46 * var(--u)) 0 calc(66 * var(--u));
  color:#191a06;
  background:rgba(253,248,240,.82);
  border:max(1px,calc(1.6 * var(--u))) solid #c9a46a;
  box-shadow:0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-18 * var(--u)) rgba(150,110,50,.3);
}
.cta__btn--secondary .btn__arrow{color:#3a3820}

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

/* ===================================================================
   Stacked layout
   =================================================================== */
@media (max-width:1023.98px),(max-aspect-ratio:6/5){
  .cta{--u:1px}
  .cta__layer{inset:0;width:auto;height:auto;aspect-ratio:auto}
  .cta__layer img{object-position:50% 72%}
  .cta__inner{height:auto;min-height:min(100svh,760px);justify-content:center;padding:96px 20px 104px}
  .cta__title{font-size:clamp(32px,9vw,64px);line-height:1.08}
  .cta__line + .cta__line{letter-spacing:0}
  .cta__rule{width:44px;height:2px;margin:22px 0 0}
  .cta__lead{margin-top:20px;max-width:34em;font-size:clamp(16px,4.3vw,19px);line-height:1.55;letter-spacing:.01em}
  .cta__lead span{display:inline}
  .cta__actions{flex-direction:column;align-self:center;width:100%;max-width:420px;margin:32px 0 0;gap:14px}
  .cta__btn{width:auto;height:60px;font-size:17px;--arrow:20px;gap:16px}
  .cta__btn--primary{padding:0 28px 0 32px}
  .cta__btn--secondary{padding:0 28px 0 32px}
  .cta__sun{width:120%;left:-40%;top:-40%}
}
@media (min-width:640px) and (max-width:1023.98px),(min-width:640px) and (max-aspect-ratio:6/5){
  .cta__actions{flex-direction:row;width:auto;max-width:none}
  .cta__btn{width:300px}
}