/* ===================================================================
   ФРЕГАТ — рекламное агентство.
   Палитра снята с самих фотографий: пасмурное небо, снег, бетон,
   порошковая сталь + фирменный красный.
   Manrope (заголовки) · Golos Text (текст)
   =================================================================== */

:root{
  /* ground */
  --paper:#edeff1;         /* пасмурный серо-голубой */
  --paper-deep:#e3e7ea;
  --surface:#fcfcfd;
  --surface-2:#f6f8f9;

  /* ink */
  --ink:#191d21;           /* мягкий графит, не чистый чёрный */
  --ink-2:#39424b;
  --muted:#626d77;
  --faint:#8d97a0;

  /* structure */
  --line:#dce1e5;
  --line-soft:#e6eaed;

  /* accent */
  --red:#d01e25;
  --red-deep:#a9151b;
  --red-wash:#fbeded;

  /* elevation */
  --sh-1:0 1px 2px rgba(25,29,33,.05), 0 2px 8px rgba(25,29,33,.04);
  --sh-2:0 2px 4px rgba(25,29,33,.05), 0 8px 24px rgba(25,29,33,.07);
  --sh-3:0 4px 8px rgba(25,29,33,.06), 0 18px 48px rgba(25,29,33,.11);

  /* geometry */
  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
  --wrap:1180px;

  --f-disp:'Manrope',system-ui,sans-serif;
  --f-body:'Golos Text',system-ui,sans-serif;

  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:26px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:800;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
.eyebrow{
  display:inline-block;font-family:var(--f-disp);font-weight:700;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red);margin-bottom:16px;
}
.eyebrow--muted{color:var(--faint)}
.lede{font-size:18px;color:var(--muted);max-width:60ch;text-wrap:pretty}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-disp);font-weight:700;font-size:15px;line-height:1;
  padding:16px 26px;border:1px solid transparent;border-radius:var(--r-s);
  cursor:pointer;white-space:nowrap;
  transition:background .22s var(--ease),border-color .22s var(--ease),
             color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--red{background:var(--red);color:#fff;box-shadow:0 2px 6px rgba(208,30,37,.22),0 10px 24px rgba(208,30,37,.16)}
.btn--red:hover{background:var(--red-deep);box-shadow:0 3px 10px rgba(208,30,37,.26),0 14px 32px rgba(208,30,37,.2)}
.btn--soft{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1)}
.btn--soft:hover{border-color:#c3ccd3;box-shadow:var(--sh-2)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#0e1114}

/* =================== HEADER =================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(237,239,241,.78);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-stuck{background:rgba(252,252,253,.9);border-bottom-color:var(--line-soft);box-shadow:0 1px 20px rgba(25,29,33,.05)}
.site-header__inner{display:flex;align-items:center;gap:28px;height:78px}
.brand{flex:0 0 auto}
.brand img{height:44px;width:auto}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__link{
  position:relative;font-size:15px;color:var(--ink-2);
  padding:9px 14px;border-radius:8px;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav__link:hover{color:var(--ink);background:rgba(25,29,33,.045)}
.nav__link[aria-current="page"]{color:var(--red)}

.site-header__side{display:flex;align-items:center;gap:14px}
.site-header__phone{font-family:var(--f-disp);font-weight:700;font-size:16px;white-space:nowrap;transition:color .2s var(--ease)}
.site-header__phone:hover{color:var(--red)}

.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer;
}
.burger span{display:block;height:2px;width:17px;margin-inline:auto;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =================== HERO =================== */
.hero{padding:76px 0 92px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:760px;height:760px;right:-260px;top:-320px;border-radius:50%;
  background:radial-gradient(circle,rgba(208,30,37,.07),transparent 68%);
}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
.hero__title{font-size:clamp(38px,5.1vw,62px)}
.hero__title em{font-style:normal;color:var(--red)}
.hero__sub{margin:22px 0 32px;font-size:18.5px;color:var(--muted);max-width:44ch;text-wrap:pretty}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

.trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.trust li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--muted)}
.trust svg{width:17px;height:17px;flex:0 0 auto;color:var(--red)}

/* hero mosaic — реальные объекты */
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px}
.mosaic figure{position:relative;overflow:hidden;border-radius:var(--r-m);box-shadow:var(--sh-2);background:var(--paper-deep)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic figure:nth-child(1){grid-row:span 2;aspect-ratio:3/4.34}
.mosaic figure:nth-child(2){aspect-ratio:4/3}
.mosaic figure:nth-child(3){aspect-ratio:4/3}
.mosaic figcaption{
  position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;
  font-size:12.5px;color:#fff;
  background:linear-gradient(transparent,rgba(12,15,18,.74));
}

/* =================== SECTION SHELL =================== */
.sec{padding:96px 0}
.sec--surface{background:var(--surface)}
.sec--deep{background:var(--paper-deep)}
.sec--ink{background:var(--ink);color:#eef1f3}
.sec--ink .lede,.sec--ink .muted{color:#98a3ad}

.sec__head{margin-bottom:52px;max-width:62ch}
.sec__head h2{font-size:clamp(28px,3.5vw,42px)}
.sec__head .lede{margin-top:18px}
.sec__head--split{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:36px}
.sec__head--split .sec__headtext{max-width:56ch}

.textlink{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--red);
}
.textlink span{border-bottom:1.5px solid transparent;transition:border-color .2s var(--ease)}
.textlink:hover span{border-bottom-color:var(--red)}
.textlink svg{width:16px;height:16px;transition:transform .22s var(--ease)}
.textlink:hover svg{transform:translateX(3px)}

/* =================== УСЛУГИ =================== */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-m);padding:28px 24px 30px;
  box-shadow:var(--sh-1);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#cfd8de}
.tile__icon{
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--red-wash);color:var(--red);
  border-radius:13px;margin-bottom:20px;
}
.tile__icon svg{width:24px;height:24px}
.tile h3{font-size:18px;margin-bottom:9px;letter-spacing:-.012em}
.tile p{font-size:14.5px;color:var(--muted);line-height:1.55}

/* =================== НАПРАВЛЕНИЯ =================== */
.dirs{display:flex;flex-direction:column;gap:22px}
.dir{
  display:grid;grid-template-columns:1.06fr 1fr;gap:0;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-1);
}
.dir__shot{position:relative;min-width:0;min-height:330px;background:var(--paper-deep)}
.dir__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dir--flip .dir__shot{order:2}
.dir__body{padding:44px 46px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.dir__body h3{font-size:25px;margin-bottom:12px}
.dir__body>p{font-size:16px;color:var(--muted);max-width:46ch;margin-bottom:24px;text-wrap:pretty}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.checks li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-2)}
.checks li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--red-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d01e25' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* =================== РАБОТЫ (превью на главной) =================== */
.peek{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.peek a{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--r-m);background:var(--paper-deep);box-shadow:var(--sh-1);
}
.peek img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.peek a:hover img{transform:scale(1.05)}
.peek figcaption,.peek__cap{
  position:absolute;inset:auto 0 0 0;padding:30px 14px 13px;
  font-size:13px;color:#fff;
  background:linear-gradient(transparent,rgba(12,15,18,.78));
}
.peek a.peek__more{
  display:grid;place-content:center;text-align:center;gap:8px;
  background:var(--ink);color:#fff;
  transition:background .22s var(--ease);
}
.peek a.peek__more:hover{background:#0e1114}
.peek__more strong{font-family:var(--f-disp);font-size:30px;display:block;line-height:1}
.peek__more span{font-size:13.5px;color:#a6b0b9}

/* =================== ЭТАПЫ (здесь нумерация оправдана) =================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}
.step{
  position:relative;padding:30px 28px 32px;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-m);box-shadow:var(--sh-1);
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--f-disp);font-weight:800;font-size:14px;
  color:var(--red);letter-spacing:.06em;
  display:block;margin-bottom:14px;
}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.55}

/* =================== ПРЕИМУЩЕСТВА =================== */
.merits{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 44px}
.merit{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:6px 0}
.merit__icon{
  width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.07);color:#fff;border-radius:13px;
}
.merit__icon svg{width:22px;height:22px}
.merit h3{font-size:18px;margin-bottom:7px}
.merit p{font-size:15px;color:#98a3ad;line-height:1.56;max-width:44ch}

/* =================== ЦИФРЫ =================== */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.figure-cell{padding:4px 0}
.figure-cell__n{
  display:block;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(38px,4.4vw,54px);line-height:1;color:var(--red);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.figure-cell__l{display:block;margin-top:12px;font-size:14.5px;color:var(--muted);max-width:20ch}

/* =================== ЗАЯВКА =================== */
.cta-sec{padding:96px 0}
.cta{
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-3);
}
.cta__text{padding:56px 52px;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center}
.cta__text h2{font-size:clamp(27px,3.2vw,38px)}
.cta__text p{margin-top:16px;font-size:16.5px;color:#9aa5af;max-width:38ch}
.cta__contacts{margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:9px}
.cta__contacts a,.cta__contacts span{font-size:15px;color:#c3ccd3}
.cta__contacts a{font-family:var(--f-disp);font-weight:700;font-size:19px;color:#fff;transition:color .2s var(--ease)}
.cta__contacts a:hover{color:var(--red)}

.form{padding:48px 52px;display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.field input{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:14px 16px;font-size:16px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.field input::placeholder{color:var(--faint)}
.field input:focus{outline:none;background:var(--surface);border-color:var(--red);box-shadow:0 0 0 3px rgba(208,30,37,.12)}
.field input[aria-invalid="true"]{border-color:var(--red);background:var(--red-wash)}
.field__err{font-size:13px;color:var(--red);min-height:0}
.field__err:empty{display:none}

.consent{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--muted);cursor:pointer;line-height:1.5}
.consent input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--red);cursor:pointer}
.form__submit{align-self:flex-start;margin-top:2px}
.form__note{
  display:none;font-size:14.5px;padding:14px 16px;border-radius:var(--r-s);
  background:#e8f4ec;border:1px solid #bfdfcb;color:#1d5c34;
}
.form__note.is-shown{display:block}

/* =================== ПОРТФОЛИО =================== */
.gallery-head{padding:52px 0 8px}
.gallery-head h1{font-size:clamp(32px,4.4vw,50px)}
.gallery-head .lede{margin-top:16px}

.filters{
  position:sticky;top:78px;z-index:40;
  display:flex;flex-wrap:wrap;gap:9px;
  padding:20px 0;margin-bottom:14px;
  background:var(--paper);
}
.filters::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--line)}
.chip{
  font-family:var(--f-disp);font-weight:600;font-size:14px;
  padding:9px 17px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.chip:hover{border-color:#c1cad1}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip__n{opacity:.5;margin-left:6px;font-variant-numeric:tabular-nums}

.grid{columns:4;column-gap:16px;padding-bottom:40px}
.card{
  break-inside:avoid;margin-bottom:16px;position:relative;display:block;width:100%;
  padding:0;border:none;background:var(--paper-deep);
  border-radius:var(--r-m);overflow:hidden;cursor:zoom-in;
  box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.card img{width:100%;height:auto;display:block}
.card__cap{
  position:absolute;inset:auto 0 0 0;padding:34px 14px 13px;
  font-family:var(--f-body);font-size:13.5px;color:#fff;text-align:left;
  background:linear-gradient(transparent,rgba(12,15,18,.8));
  opacity:0;transition:opacity .26s var(--ease);
}
.card:hover .card__cap,.card:focus-visible .card__cap{opacity:1}
.grid__empty{font-size:16px;color:var(--muted);padding:40px 0}

/* лайтбокс */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  place-items:center;
  background:rgba(16,19,22,.94);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:64px 72px 86px;
}
.lightbox.is-open{display:grid}
.lightbox img{max-width:100%;max-height:calc(100vh - 220px);width:auto;height:auto;border-radius:var(--r-s);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.lightbox figure{display:flex;flex-direction:column;align-items:center;gap:16px}
.lightbox figcaption{font-size:15px;color:#c3ccd3;text-align:center}
.lightbox figcaption b{display:block;font-family:var(--f-disp);font-weight:700;font-size:17px;color:#fff;margin-bottom:4px}
.lb-btn{
  position:absolute;display:grid;place-items:center;
  width:50px;height:50px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.lb-btn:hover{background:rgba(255,255,255,.2)}
.lb-btn svg{width:22px;height:22px}
.lb-close{top:22px;right:24px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.06)}
.lb-count{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-size:13.5px;color:#8d97a0;font-variant-numeric:tabular-nums;
}

/* =================== FOOTER =================== */
.site-footer{background:var(--ink);color:#c3ccd3;padding:68px 0 26px}
.site-footer__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:44px}
.site-footer__logo{height:42px;width:auto;margin-bottom:18px}
.site-footer__brand p{font-size:14.5px;color:#8d97a0;max-width:32ch;margin-bottom:22px}
.socials{display:flex;gap:9px}
.socials a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.06);color:#c3ccd3;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.socials a:hover{background:var(--red);color:#fff}
.socials svg{width:19px;height:19px}
.site-footer__h{font-family:var(--f-disp);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#7b858e;margin-bottom:16px}
.site-footer__col a,.site-footer__col p{display:block;font-size:14.5px;color:#c3ccd3;margin-bottom:10px;transition:color .2s var(--ease)}
.site-footer__col a:hover{color:#fff}
.site-footer__col p{color:#8d97a0}
.site-footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  font-size:13.5px;color:#7b858e;
}
.site-footer__bottom a:hover{color:#c3ccd3}

/* =================== ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ =================== */
/* Прячем только когда скрипт точно работает — иначе без JS страница
   осталась бы пустой. Класс .js ставится инлайном в <head>. */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rise.is-in{opacity:1;transform:none}

/* =================== АДАПТИВ =================== */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .mosaic figure:nth-child(1){grid-row:auto;aspect-ratio:3/4}
  .mosaic figure:nth-child(2),.mosaic figure:nth-child(3){aspect-ratio:3/4}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .grid{columns:3}
  .site-footer__top{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  html{scroll-padding-top:78px}
  .nav{
    position:fixed;inset:78px 0 auto 0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:8px 26px 20px;box-shadow:var(--sh-2);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform .28s var(--ease),opacity .28s var(--ease),visibility .28s;
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible}
  .nav__link{padding:14px 4px;border-bottom:1px solid var(--line-soft);border-radius:0;font-size:16px}
  .burger{display:flex}
  .site-header__side{margin-left:auto}
  .site-header__phone{display:none}
  .sec,.cta-sec{padding:68px 0}
  .hero{padding:52px 0 68px}
  .sec__head{margin-bottom:36px}
  .sec__head--split{flex-direction:column;align-items:flex-start;gap:18px}
  .dir,.dir--flip{grid-template-columns:1fr}
  .dir--flip .dir__shot{order:0}
  /* только aspect-ratio: вместе с min-height он задавал бы минимальную
     ширину 384px и распирал карточку за пределы экрана */
  .dir__shot{min-height:0;aspect-ratio:16/10}
  .dir__body{padding:32px 28px}
  .steps{grid-template-columns:1fr}
  .merits{grid-template-columns:1fr;gap:14px}
  .figures{grid-template-columns:1fr 1fr;gap:32px 20px}
  .cta{grid-template-columns:1fr}
  .cta__text{padding:40px 30px}
  .form{padding:34px 30px 40px}
  .filters{top:78px;padding:16px 0}
  .grid{columns:2}
  .card__cap{opacity:1}
  .lightbox{padding:56px 16px 78px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
  .site-footer__top{grid-template-columns:1fr 1fr;gap:32px}
}

@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding-inline:18px}
  .tiles{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .peek{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr 1fr}
  .mosaic figure:nth-child(3){display:none}
  .figures{grid-template-columns:1fr;gap:26px}
  .grid{columns:1}
  .hero__cta .btn{flex:1 1 100%}
  .site-footer__top{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .rise{opacity:1;transform:none}
}