/* ═══════════════════════════════════════════════
   LISOVSKA DESIGN · V7 «СТУДІЯ»
   1:1 за макетом PRIVE Ремонт: майже-чорний,
   нейтральний гротеск regular, тонкі лінії.
   ═══════════════════════════════════════════════ */
:root{
  --bg:#101010;
  --bg2:#161616;
  --ink:#F2F2F0;
  --ink-dim:rgba(242,242,240,.55);
  --line:rgba(242,242,240,.14);
  --sans:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:15px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:400}

/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:40px;
  padding:18px 40px;transition:background .35s;
}
.nav.is-solid{background:rgba(16,16,16,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav__logo{display:flex;flex-direction:column;font-size:19px;letter-spacing:.06em;line-height:1.15}
.nav__logo span{display:inline}
.nav__logo i{font-style:normal;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}
.nav__links{display:flex;gap:26px;margin-left:auto}
.nav__links a{font-size:13.5px;color:var(--ink-dim);transition:color .3s}
.nav__links a:hover{color:var(--ink)}

/* ── КНОПКИ (outline, тонкие) ── */
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:13px 24px;
  border:1px solid var(--line);font-size:13.5px;font-weight:300;letter-spacing:.02em;
  transition:all .3s var(--ease);white-space:nowrap;
}
.btn i{font-style:normal;transition:transform .3s}
.btn:hover{border-color:var(--ink);background:rgba(242,242,240,.05)}
.btn:hover i{transform:translate(3px,-3px)}
.btn--big{padding:22px 40px;font-size:15px}

/* ── HERO ── */
.hero{position:relative;height:92svh;min-height:600px;display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.28) 55%,rgba(10,10,10,.1) 100%),
  linear-gradient(180deg,rgba(10,10,10,.35),transparent 30%,transparent 70%,rgba(16,16,16,1) 100%)}
.hero__inner{position:relative;z-index:2;padding:0 40px;max-width:900px}
.hero__h1{font-size:clamp(44px,6.4vw,92px);line-height:1.06;letter-spacing:-.01em;margin-bottom:34px}
.hero__sub{color:var(--ink-dim);font-size:15.5px;margin-bottom:38px}
.hero__sub br{content:""}

/* ── SECTION / LABEL ── */
.section{padding:110px 40px;display:grid;grid-template-columns:220px 1fr;gap:40px;max-width:1360px;margin:0 auto}
.about__label{display:flex;align-items:flex-start;gap:14px;font-size:14px;color:var(--ink-dim);white-space:nowrap}
.about__label i{flex:1;max-width:90px;height:1px;background:var(--ink-dim);margin-top:11px;display:block}

/* ── ПРО НАС ── */
.about__h{font-size:clamp(22px,2.4vw,32px);line-height:1.42;max-width:760px;margin-bottom:34px}
.about__row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.about__p{color:var(--ink-dim);max-width:440px;font-size:14.5px}
.about__more{font-size:13.5px;color:var(--ink-dim);border-bottom:1px solid transparent;transition:all .3s;display:inline-flex;gap:8px;align-items:center}
.about__more:hover{color:var(--ink)}
.about__more i{font-style:normal}

/* ── 3 ФОТО ── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 40px;max-width:1360px;margin:0 auto}
.tile{margin:0;overflow:hidden;cursor:zoom-in}
.tile img{width:100%;aspect-ratio:4/3.4;object-fit:cover;transition:transform .7s var(--ease)}
.tile:hover img{transform:scale(1.045)}

/* ── ПОСЛУГИ ── */
.services__list{border-top:1px solid var(--line)}
.srv{border-bottom:1px solid var(--line)}
.srv summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:70px 1fr auto 60px;
  align-items:center;gap:20px;padding:30px 0;transition:padding .3s;
}
.srv summary::-webkit-details-marker{display:none}
.srv summary:hover{padding-left:14px}
.srv b{font-weight:300;color:var(--ink-dim);font-size:15px}
.srv h3{font-size:clamp(17px,1.7vw,22px);font-weight:300}
.srv__price{color:var(--ink-dim);font-size:14px;white-space:nowrap}
.srv__plus{position:relative;width:16px;height:16px;justify-self:end}
.srv__plus::before,.srv__plus::after{content:"";position:absolute;background:var(--ink-dim);transition:transform .3s}
.srv__plus::before{left:0;right:0;top:7px;height:1px}
.srv__plus::after{top:0;bottom:0;left:7px;width:1px}
.srv[open] .srv__plus::after{transform:rotate(90deg)}
.srv>p{color:var(--ink-dim);font-size:14.5px;max-width:560px;padding:0 0 28px 90px}

/* ── ЧОМУ МИ ── */
.why__row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.why__item{border-left:1px solid var(--line);padding-left:30px}
.why__item:first-child{border-left:none;padding-left:0}
.why__num{
  font-size:clamp(64px,6.5vw,104px);line-height:1;font-weight:200;color:transparent;
  -webkit-text-stroke:1px rgba(242,242,240,.5);display:block;margin-bottom:22px;
}
.why__item h3{font-size:19px;margin-bottom:12px;font-weight:400}
.why__item p{color:var(--ink-dim);font-size:14px;max-width:260px}

/* ── ПРОЄКТИ ── */
.projects{display:block}
.projects__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.projects__row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proj{position:relative;margin:0;overflow:hidden;cursor:zoom-in}
.proj img{width:100%;aspect-ratio:4/3.2;object-fit:cover;transition:transform .7s var(--ease)}
.proj:hover img{transform:scale(1.045)}
.proj figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:56px 20px 18px;
  background:linear-gradient(transparent,rgba(10,10,10,.82));display:grid;grid-template-columns:1fr auto;align-items:end;
}
.proj b{font-weight:400;font-size:17px;display:block}
.proj span{grid-column:1;color:var(--ink-dim);font-size:12.5px}
.proj i{grid-column:2;grid-row:1/3;font-style:normal;border:1px solid var(--line);width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s}
.proj:hover i{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ── ФОРМА ── */
.cta{grid-template-columns:1fr 1.2fr auto;align-items:start;background:var(--bg2);max-width:none;padding:100px 40px}
.cta__left h2{font-size:clamp(34px,4vw,56px);line-height:1.1;margin-bottom:20px}
.cta__left p{color:var(--ink-dim);font-size:14.5px}
.cta__form{display:grid;gap:14px;max-width:560px}
.cta__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cta__form input[type="text"],.cta__form input[type="tel"],.cta__form textarea{
  background:transparent;border:1px solid var(--line);color:var(--ink);padding:15px 16px;
  font:inherit;font-size:14px;width:100%;resize:vertical;
}
.cta__form input:focus,.cta__form textarea:focus{outline:none;border-color:var(--ink-dim)}
.cta__form input.is-err{border-color:#a44}
.cta__check{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-dim);cursor:pointer}
.cta__check input{accent-color:var(--ink)}
.cta__ok{color:#9FB8A8;font-size:14px}
#leadSubmit{align-self:start;margin-top:0}

/* ── FOOTER ── */
.foot{
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  padding:34px 40px;border-top:1px solid var(--line);
}
.foot__contacts{display:flex;gap:34px;color:var(--ink-dim);font-size:13.5px}
.foot__links{display:flex;gap:20px;flex-wrap:wrap}
.foot__links a{font-size:12.5px;color:var(--ink-dim)}
.foot__links a:hover{color:var(--ink)}

/* ── LIGHTBOX ── */
.lightbox{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;background:rgba(8,8,8,.93)}
.lightbox.is-open{display:flex}
.lightbox img{max-width:92vw;max-height:90vh;object-fit:contain}
.lightbox__x{position:absolute;top:20px;right:28px;font-size:22px}

/* ── REVEAL ── */
.js .reveal{opacity:0;transform:translateY(26px)}

@media(max-width:1000px){
  .section{grid-template-columns:1fr;gap:26px;padding:80px 20px}
  .cta{grid-template-columns:1fr;gap:34px}
  .why__row{grid-template-columns:1fr;gap:34px}
  .why__item{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:26px}
  .why__item:first-child{border-top:none;padding-top:0}
}
@media(max-width:760px){
  .nav{padding:14px 18px}
  .nav__links{display:none}
  .hero__inner{padding:0 20px}
  .tiles{grid-template-columns:1fr;padding:0 20px}
  .projects__row{grid-template-columns:1fr}
  .srv summary{grid-template-columns:44px 1fr auto 30px;gap:10px}
  .srv>p{padding-left:54px}
  .cta__row{grid-template-columns:1fr}
  .foot{flex-direction:column;align-items:flex-start}
}