.float-card{
  position: absolute;
  border-radius: 24px; overflow: hidden;
  will-change: transform;
  transform:
    translate3d(0, calc(var(--py, 0) * 1px), 0)
    translate3d(calc(var(--px, 0) * 1px), 0, 0);
}
.float-card--a{ width: clamp(110px, 14vw, 220px); height: clamp(140px, 18vw, 280px); left: 3%; top: 18%; }
.float-card--b{ width: clamp(90px, 11vw, 180px);  height: clamp(90px, 11vw, 180px);  right: 5%; top: 12%; }
.float-card--c{ width: clamp(100px, 12vw, 200px); height: clamp(120px, 14vw, 230px); right: 8%; bottom: 14%; }
.float-card--d{ width: clamp(80px, 9vw, 150px);   height: clamp(100px, 11vw, 190px); left: 8%; bottom: 10%; }

@media (max-width: 767px){
  .float-card--b{ display: none; }
  .float-card--a{ width: 96px; height: 120px; left: 4%; top: 14%; }
  .float-card--c{ width: 92px; height: 110px; right: 6%; bottom: 12%; }
  .float-card--d{ width: 84px; height: 100px; left: 10%; bottom: 8%; }
}

/* — заглушки-превью — */
.ph{ width: 100%; height: 100%; min-height: 80px; }
.ph--pine-mist{ background: var(--pine-mist); }
.ph--butter-soft{ background: var(--butter-soft); }
.ph--butter{ background: var(--butter); }
.ph--snow{ background: var(--snow); border: 1px solid var(--line); }
.ph--ink{ background: var(--ink); }

/* ———— MARQUEE ———— */
.marquee{
  overflow: hidden;
  border-top: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
  background: var(--snow);
  padding: 14px 0;
}
.marquee__track{
  display: flex; gap: 32px;
  white-space: nowrap; width: max-content;
  will-change: transform;
}
.marquee__track span{
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(18px, 1.6vw + 12px, 28px);
  text-transform: uppercase;
  color: var(--pine);
}
.marquee__track span:nth-child(even){ color: var(--stone); }

/* ———— WORKS ———— */
.works,.services,.calculator,.process,.team,.reviews{
  padding:
    clamp(56px,8vw,120px)
    max(var(--gutter), var(--safe-r))
    clamp(56px,8vw,120px)
    max(var(--gutter), var(--safe-l));
  max-width: var(--container);
  margin: 0 auto;
}
.works-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
}
.work-card{
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; min-height: 220px;
  transition: transform .25s ease;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine){
  .work-card:hover{ transform: translateY(-4px); }
}
.work-card:active{ transform: scale(.985); }

.work-card--big{ grid-column: span 3; min-height: 340px; }
.work-card--med{ grid-column: span 3; min-height: 260px; }
.work-card--small{ grid-column: span 2; min-height: 200px; }
.work-card--wide{ grid-column: span 6; min-height: 200px; }

/* Фоны карточек из данных (data-bg) */
.work-card[data-bg="pine-mist"]{ background: var(--pine-mist); color: var(--ink); }
.work-card[data-bg="butter"]{ background: var(--butter); color: var(--ink); }
.work-card[data-bg="snow"]{ background: var(--snow); border: 1.5px solid var(--line); color: var(--ink); }
.work-card[data-bg="pine"]{ background: var(--pine); color: var(--paper); }
.work-card[data-bg="ink"]{ background: var(--ink); color: var(--snow); }

.work-card__num{
  font-family: var(--font-head); font-size: 13px; opacity: .7;
}
.work-card__title{
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(18px, 1.2vw + 10px, 26px);
  line-height: 1.05;
  margin-top: auto;
}
.work-card__arrow{
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--snow);
  color: var(--pine);
  border-color: var(--pine);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine){
  .work-card:hover .work-card__arrow{
    background: var(--pine);
    color: var(--paper);
    border-color: var(--pine);
  }
}
/* На Ink-карточке стрелка Butter с иконкой Ink */
.work-card[data-bg="ink"] .work-card__arrow{
  background: var(--butter);
  color: var(--ink);
  border-color: var(--butter);
}
@media (hover: hover) and (pointer: fine){
  .work-card[data-bg="ink"]:hover .work-card__arrow{
    background: var(--butter-press);
    color: var(--ink);
    border-color: var(--butter-press);
  }
}

@media (max-width: 1199px){
  .works-grid{ grid-template-columns: repeat(8, 1fr); }
  .work-card--big{ grid-column: span 4; }
  .work-card--med{ grid-column: span 4; }
  .work-card--small{ grid-column: span 3; }
  .work-card--wide{ grid-column: span 8; }
}
@media (max-width: 767px){
  .works-grid{ grid-template-columns: 1fr; }
  .work-card--big, .work-card--med, .work-card--small, .work-card--wide{ grid-column: span 1; }
  .work-card--big{ min-height: 260px; }
  .work-card--med{ min-height: 220px; }
  .work-card--small{ min-height: 180px; }
}
@media (max-height: 500px) and (orientation: landscape){
  .works-grid{ grid-template-columns: repeat(2, 1fr); }
  .work-card--big{ grid-column: span 2; min-height: 200px; }
  .work-card--med{ grid-column: span 1; min-height: 180px; }
  .work-card--small{ grid-column: span 1; min-height: 160px; }
  .work-card--wide{ grid-column: span 2; min-height: 160px; }
}

/* ———— Модалка кейса ———— */
.case-modal{
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(18,18,18,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.case-modal.is-open{ opacity: 1; pointer-events: auto; }
.case-modal__inner{
  background: var(--snow);
  border-radius: 32px 32px 0 0;
  width: 100%; max-width: 820px;
  max-height: 92svh; overflow-y: auto;
  padding: clamp(20px, 3vw, 48px);
  padding-bottom: calc(clamp(20px, 3vw, 48px) + var(--safe-b));
  transform: translateY(30px);
  transition: transform .3s ease;
}
.case-modal.is-open .case-modal__inner{ transform: translateY(0); }
.case-modal__close{
  position: sticky; top: 0; float: right;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 18px;
  z-index: 2;
}
.case-modal__cover{ border-radius: 24px; height: 220px; margin: 8px 0 20px; }
.case-modal__title{ font-size: clamp(24px, 2.6vw + 12px, 38px); margin: 0 0 12px; }
.case-modal__text{ color: var(--stone); margin: 0 0 12px; }
.case-modal__quote{
  background: var(--butter-soft);
  padding: 16px 20px;
  border-radius: 16px;
  font-style: italic;
  margin: 16px 0;
  color: var(--ink);
}
.case-modal__tags{ display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.case-modal__tag{
  background: var(--butter);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  font-size: 13px;
  color: var(--ink);
}
.case-modal__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ———— SERVICES ———— */
.services-list{ list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--line); }
.service-row{
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  align-items: center;
  gap: clamp(12px, 1.6vw, 32px);
  padding: clamp(16px, 2vw, 28px) 12px;
  border-bottom: 1.5px solid var(--line);
  cursor: pointer;
  transition: background-color .2s ease;
  border-radius: 0;
  min-height: 72px;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine){
  .service-row:hover{ background: var(--butter-soft); border-radius: 16px; }
  .service-row:hover .service-row__arrow{ transform: translateX(4px); }
}
.service-row:active{ background: var(--butter-soft); border-radius: 16px; }
.service-row__num{ font-family: var(--font-head); color: var(--stone); font-size: 14px; }
.service-row__name{
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(18px, 1.6vw + 10px, 28px);
  color: var(--ink);
}
.service-row__desc{
  color: var(--stone); font-size: 15px; margin-top: 4px;
  display: block; max-width: 40ch;
}
.service-row__meta{ text-align: right; white-space: nowrap; }
.service-row__price{
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(16px, 1.2vw + 10px, 22px);
  color: var(--ink);
}
.service-row__days{ color: var(--stone); font-size: 13px; }
.service-row__arrow{
  font-size: 22px; color: var(--pine);
  transition: transform .2s ease;
}
@media (max-width: 720px){
  .service-row{
    grid-template-columns: 40px 1fr;
    grid-template-areas: "n name" "n meta";
    row-gap: 8px;
  }
  .service-row__num{ grid-area: n; }
  .service-row__name{ grid-area: name; }
  .service-row__meta{ grid-area: meta; text-align: left; }
  .service-row__arrow{ display: none; }
}

/* ———— CALCULATOR ———— */
.calc-layout{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(20px, 2.6vw, 32px);
  align-items: start;
}
.calc-steps{
  background: var(--snow);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card-lg);
  padding: clamp(16px, 2.6vw, 32px);
}
.calc-step{ margin-bottom: 32px; }
.calc-step:last-child{ margin-bottom: 0; }
.calc-step__title{
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; font-size: 14px;
  letter-spacing: .02em; color: var(--stone);
  margin: 0 0 12px;
}
.calc-options{ display: flex; flex-wrap: wrap; gap: 10px; }
.calc-opt{
  border: 1.5px solid var(--line);
  background: var(--snow);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color .2s ease, border-color .2s ease;
  min-height: 44px;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine){
  .calc-opt:hover{ border-color: var(--pine); }
}
.calc-opt:active{ transform: scale(.97); }
.calc-opt.is-selected{
  background: var(--pine-mist);
  border: 2px solid var(--pine);
  padding: 11.5px 19.5px;
}
.calc-opt .check{
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--paper);
}
.calc-opt.is-selected .check{
  background: var(--pine);
  border-color: var(--pine);
  color: var(--paper);
}

.calc-param{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  min-height: 56px;
}
.calc-param:last-child{ border-bottom: 0; }
.calc-param__label{ font-size: 15px; }
.calc-param__price{ color: var(--stone); font-size: 13px; margin-left: 6px; }

/* ——— «от» / «до» — мельче основных цифр ——— */
.money-prefix{
  font-size: .72em;
  font-weight: 400;
  color: var(--stone);
  opacity: .9;
  letter-spacing: .01em;
}
/* На тёмном фоне (calc-summary, dark-block) — светлее */
[data-theme="dark"] .money-prefix,
.calc-summary .money-prefix{
  color: rgba(251, 250, 247, .65);
}
/* В крупной итоговой сумме «от» / «до» ещё мельче */
.calc-summary__amount .money-prefix{
  font-size: .55em;
  opacity: .8;
}
/* В мобильной compact-строке итога — чтобы не разрасталось */
.calc-summary__compact .money-prefix{
  font-size: .7em;
}
/* В списке строк итога — не мельче 10px */
.calc-summary__list .money-prefix{
  font-size: .85em;
}

.toggle{
  position: relative;
  width: 56px; height: 32px;
  border-radius: var(--radius-pill);
  background: var(--line);
  border: 0;
  transition: background-color .2s ease;
  flex-shrink: 0;
  touch-action: manipulation;
}
.toggle::after{
  content:"";
  position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--snow);
  transition: transform .2s ease;
}
.toggle[aria-checked="true"]{ background: var(--pine); }
.toggle[aria-checked="true"]::after{ transform: translateX(24px); }

.counter{ display: inline-flex; align-items: center; gap: 8px; }
.counter button{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--snow);
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background-color .2s ease;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine){
  .counter button:hover{ border-color: var(--pine); }
}
.counter button:active{ background: var(--pine-mist); }
.counter__val{
  min-width: 32px; text-align: center;
  font-family: var(--font-head); font-size: 18px;
}

.calc-select{
  background: var(--snow);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 15px; font-family: inherit;
  min-height: 44px;
  width: 100%; max-width: 260px;
  color: var(--ink);
}
.calc-select:focus{
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 2px var(--pine);
}

/* Карточка-результат: Ink */
.calc-summary{
  position: sticky;
  top: calc(var(--header-h) + var(--safe-t) + 16px);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-card-lg);
  padding: clamp(20px, 2.6vw, 32px);
}
.calc-summary__title{
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; font-size: 13px;
  letter-spacing: .02em;
  color: var(--butter);
  margin: 0 0 8px;
}
.calc-summary__amount{
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(28px, 2.6vw + 16px, 42px);
  color: var(--butter);
  line-height: 1.05;
}
.calc-summary__days{ color: var(--paper); font-size: 14px; margin-top: 6px; }
.calc-summary__list{
  list-style: none; margin: 20px 0; padding: 0;
  font-size: 14px; color: var(--stone);
  display: flex; flex-direction: column; gap: 6px;
}
.calc-summary__list li{ display: flex; justify-content: space-between; gap: 12px; }
.calc-summary__note{
  font-size: 12px; color: var(--stone); margin: 16px 0;
}
.calc-summary__actions{ display: flex; flex-direction: column; gap: 10px; }
.calc-summary__actions .btn{ width: 100%; }

.calc-summary .btn--primary{ background: var(--butter); color: var(--ink); }
@media (hover: hover) and (pointer: fine){
  .calc-summary .btn--primary:hover{ background: var(--butter-press); }
}

.calc-summary__placeholder{ color: rgba(251,250,247,.7); font-size: 16px; padding: 20px 0; }
.calc-summary__compact{ display: none; }

@media (max-width: 900px){
  .calc-layout{ grid-template-columns: 1fr; }
  .calc-summary{
    position: fixed;
    left: 0; right: 0;
    bottom: var(--safe-b);
    z-index: 90;
    border-radius: 24px 24px 0 0;
    padding: 16px 20px calc(16px + var(--safe-b));
    transform: translateY(calc(100% - 64px));
    transition: transform .3s ease;
    max-height: 80svh; overflow-y: auto;
    top: auto;
  }
  .calc-summary.is-expanded{ transform: translateY(0); }
  .calc-summary__compact{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; cursor: pointer;
    min-height: 44px;
    margin-bottom: 8px;
  }
  .calc-summary__compact .calc-summary__amount{ font-size: 24px; }
  .calc-summary__compact-toggle{
    background: transparent; border: 0;
    color: var(--butter); font-size: 20px;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

.toggle{
  position: relative;
  width: 56px; height: 32px;
  border-radius: var(--radius-pill);
  background: var(--line);
  border: 0;
  transition: background-color .2s ease;
  flex-shrink: 0;
  touch-action: manipulation;
}
.toggle::after{
  content:"";
  position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--snow);
  transition: transform .2s ease;
}
.toggle[aria-checked="true"]{ background: var(--pine); }
.toggle[aria-checked="true"]::after{ transform: translateX(24px); }

.counter{ display: inline-flex; align-items: center; gap: 8px; }
.counter button{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--snow);
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background-color .2s ease;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine){
  .counter button:hover{ border-color: var(--pine); }
}
.counter button:active{ background: var(--pine-mist); }
.counter__val{
  min-width: 32px; text-align: center;
  font-family: var(--font-head); font-size: 18px;
}

.calc-select{
  background: var(--snow);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 15px; font-family: inherit;
  min-height: 44px;
  width: 100%; max-width: 260px;
  color: var(--ink);
}
.calc-select:focus{
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 2px var(--pine);
}

/* Карточка-результат: Ink */
.calc-summary{
  position: sticky;
  top: calc(var(--header-h) + var(--safe-t) + 16px);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-card-lg);
  padding: clamp(20px, 2.6vw, 32px);
}
.calc-summary__title{
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; font-size: 13px;
  letter-spacing: .02em;
  color: var(--butter);
  margin: 0 0 8px;
}
.calc-summary__amount{
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(28px, 2.6vw + 16px, 42px);
  color: var(--butter);
  line-height: 1;
}
.calc-summary__days{ color: var(--paper); font-size: 14px; margin-top: 6px; }
.calc-summary__list{
  list-style: none; margin: 20px 0; padding: 0;
  font-size: 14px; color: var(--stone);
  display: flex; flex-direction: column; gap: 6px;
}
.calc-summary__list li{ display: flex; justify-content: space-between; gap: 12px; }
.calc-summary__note{
  font-size: 12px; color: var(--stone); margin: 16px 0;
}
.calc-summary__actions{ display: flex; flex-direction: column; gap: 10px; }
.calc-summary__actions .btn{ width: 100%; }

/* В карточке результата CTA — Butter (data-theme=dark → --accent=butter) */
.calc-summary .btn--primary{ background: var(--butter); color: var(--ink); }
@media (hover: hover) and (pointer: fine){
  .calc-summary .btn--primary:hover{ background: var(--butter-press); }
}

.calc-summary__placeholder{ color: rgba(251,250,247,.7); font-size: 16px; padding: 20px 0; }
.calc-summary__compact{ display: none; }

@media (max-width: 900px){
  .calc-layout{ grid-template-columns: 1fr; }
  .calc-summary{
    position: fixed;
    left: 0; right: 0;
    bottom: var(--safe-b);
    z-index: 90;
    border-radius: 24px 24px 0 0;
    padding: 16px 20px calc(16px + var(--safe-b));
    transform: translateY(calc(100% - 64px));
    transition: transform .3s ease;
    max-height: 80svh; overflow-y: auto;
    top: auto;
  }
  .calc-summary.is-expanded{ transform: translateY(0); }
  .calc-summary__compact{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; cursor: pointer;
    min-height: 44px;
    margin-bottom: 8px;
  }
  .calc-summary__compact .calc-summary__amount{ font-size: 24px; }
  .calc-summary__compact-toggle{
    background: transparent; border: 0;
    color: var(--butter); font-size: 20px;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ———— PROCESS ———— */
.process-track{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
  position: relative;
}
.process-step{
  background: var(--snow);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 12px;
  font-size: 15px;
  flex: 1 1 auto;
  min-height: 48px;
}
.process-num{
  font-family: var(--font-head); font-weight: 600;
  font-size: 14px;
  background: var(--pine);
  color: var(--paper);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
@media (max-width: 720px){
  .process-track{ flex-direction: column; }
  .process-step{ flex-basis: auto; }
}

/* ———— TEAM ———— */
.team-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}
.team-card{
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
}
.team-card:nth-child(odd){ background: var(--pine-mist); color: var(--ink); }
.team-card:nth-child(even){ background: var(--butter-soft); color: var(--ink); }
.team-card__avatar{ width: 100%; aspect-ratio: 1/1; border-radius: 20px; overflow: hidden; }
.team-card__name{
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; font-size: 16px;
}
.team-card__role{ color: var(--stone); font-size: 13px; }
.team-note{ display: inline-block; margin-top: 20px; }

/* ———— REVIEWS ———— */
.reviews-track{
  display: flex; gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
@media (hover: hover) and (pointer: fine){
  .reviews-track{ cursor: grab; }
  .reviews-track:active{ cursor: grabbing; }
}
.review-card{
  flex: 0 0 min(360px, 82vw);
  background: var(--snow);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-snap-align: start;
  transition: transform .25s ease, border-color .25s ease;
}
.review-card::before{
  content: "“";
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: var(--pine);
  margin-bottom: 4px;
}
@media (hover: hover) and (pointer: fine){
  .review-card:hover{ border-color: var(--pine); }
}
.review-card__text{ font-size: 15px; color: var(--ink); flex: 1; }
.review-card__author{ font-size: 13px; color: var(--stone); }

/* ———— CONTACTS + FOOTER (Ink) ———— */
.dark-block{
  background: var(--ink);
  color: var(--paper);
  min-height: var(--vh-full);
  display: flex; flex-direction: column;
}
.contacts{
  padding:
    clamp(56px,7vw,100px)
    max(var(--gutter), var(--safe-r))
    0
    max(var(--gutter), var(--safe-l));
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  flex: 1 0 auto;
}
.contacts__title{ font-size: clamp(30px, 4vw + 12px, 64px); }
.contacts__sub{
  color: rgba(251,250,247,.65);
  max-width: 48ch;
  margin: 16px 0 40px;
}
.contacts__grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 3.4vw, 56px);
  margin-bottom: 48px;
}
.contacts__side{ display: flex; flex-direction: column; gap: 18px; }
.contacts__line{
  display: flex; flex-direction: column; gap: 2px;
  font-size: 14px;
  color: var(--stone);
}
.contacts__line a{
  color: var(--paper);
  font-size: 17px;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
@media (hover: hover) and (pointer: fine){
  .contacts__line a:hover{ color: var(--butter); }
}
.contacts__socials{ display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.contacts__socials a{
  color: var(--butter);
  font-size: 14px;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
@media (hover: hover) and (pointer: fine){
  .contacts__socials a:hover{ text-decoration: underline; }
}
@media (max-width: 760px){
  .contacts__grid{ grid-template-columns: 1fr; }
}

.site-footer{
  background: var(--ink);
  color: var(--stone);
  padding: 0 max(var(--gutter), var(--safe-r)) 0 max(var(--gutter), var(--safe-l));
  max-width: 100%;
}
.footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  align-items: center; justify-content: space-between;
  padding: 24px 0;
  border-top: 1px solid rgba(251,250,247,.12);
}
.footer-left{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--paper); }
.footer-left img{ border-radius: 6px; }
.footer-legal{ font-size: 12px; max-width: 60ch; margin: 0; color: var(--stone); }

/* ———— SANDBOX ———— */
.sandbox{
  position: relative;
  height: 460px;
  margin-top: 12px;
  overflow: hidden;
  border-top: 1px solid rgba(251,250,247,.12);
  padding-bottom: var(--safe-b);
  touch-action: pan-y;
}
.sandbox__fallback{
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 32px; align-content: flex-start;
}
.sandbox__fallback[hidden]{ display: none; }
.sandbox__hint{
  position: absolute;
  bottom: calc(16px + var(--safe-b));
  right: 20px;
  color: var(--butter);
  opacity: .7;
  pointer-events: none;
}
.sandbox__scroll-rail{
  position: absolute;
  top: 0; right: 0;
  width: 24px; height: 100%;
  z-index: 10;
  touch-action: pan-y;
  background: transparent;
}

.sticker{
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px;
  min-height: 56px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--butter);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  white-space: nowrap;
  box-shadow: 0 0 0 4px var(--snow);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: grab;
  transform-origin: center center;
}
.sticker:focus-visible{ outline-offset: 8px; }

.sticker--butter{ background: var(--butter); }
.sticker--butter-soft{ background: var(--butter-soft); }
.sticker--pine-mist{ background: var(--pine-mist); }
.sticker--snow{ background: var(--snow); }
.sticker--rose-soft{ background: var(--rose-soft); }

@media (hover: hover) and (pointer: fine){
  .sticker:hover{ z-index: 5; }
}
.sticker:active{ cursor: grabbing; }

.sticker--shape{
  padding: 0;
  width: 90px; height: 70px;
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: 70px;
  touch-action: none;
}
.sticker--shape svg{ width: 100%; height: 100%; }
.sticker--badge{
  padding: 0;
  width: 86px; height: 64px;
  border-radius: 50%;
  background: var(--ink);
  border-color: var(--snow);
  box-shadow: 0 0 0 4px var(--snow);
  min-height: 64px;
}
.sticker--badge img{ width: 100%; height: 100%; border-radius: 50%; }

.sandbox.is-static .sticker{
  position: static;
  transform: none !important;
  box-shadow: none;
  border-color: var(--ink);
}

@media (max-width: 767px) {
  .sandbox { height: min(70svh, 560px); }
  .sticker { 
    font-size: 14px; 
    padding: 8px 16px; 
    min-height: 44px;
  }
  .sticker--shape { 
    width: 64px; 
    height: 64px; 
    min-height: 64px; 
  }
  .sticker--badge { 
    width: 60px; 
    height: 60px; 
    min-height: 60px; 
  }
}
@media (max-height: 500px) and (orientation: landscape){
  .sandbox{
    height: calc(var(--vh-full) - var(--header-h) - var(--safe-t) - var(--safe-b));
  }
}
@media (max-width: 900px){
  .dark-block{ padding-bottom: 0; }
  body{ padding-bottom: 0; }
}