/* FORMRENT — сторінка «Наші проєкти» */
.pj-page { color:#061a3d; background:#f4f7fb; }

/* ---------- Hero ---------- */
.pj-hero__tags { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 0; padding:0; list-style:none; }
.pj-hero__tags li { display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.055); color:#dbe4ef; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(8px); transition:border-color .3s,background .3s,transform .3s; }
.pj-hero__tags li i { color:#ffdd00; font-size:12px; }
.pj-hero__tags li:hover { border-color:rgba(255,221,0,.5); background:rgba(255,221,0,.09); transform:translateY(-3px); }

/* ---------- Смуга навігації по об'єктах ---------- */
.pj-index { position:relative; z-index:5; overflow:hidden; background:linear-gradient(105deg,#061a3d,#0b3172 55%,#082d73); }
.pj-index::after { content:""; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:60px 60px; mask-image:linear-gradient(90deg,#000,transparent 85%); pointer-events:none; }
.pj-index__inner { position:relative; z-index:2; display:flex; align-items:center; gap:34px; padding:22px 0; }
.pj-index__label { flex:0 0 auto; display:flex; align-items:center; gap:11px; color:#ffdd00; font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.pj-index__label i { width:8px; height:8px; border-radius:50%; background:#ffdd00; box-shadow:0 0 0 4px rgba(255,221,0,.14),0 0 14px #ffdd00; }
.pj-index__links { display:flex; flex:1; gap:10px; overflow-x:auto; scrollbar-width:none; }
.pj-index__links::-webkit-scrollbar { display:none; }
.pj-index__links a { position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:12px; padding:13px 20px; border:1px solid rgba(255,255,255,.15); color:#cdd8e8; font-size:12px; font-weight:700; white-space:nowrap; transition:color .3s,border-color .3s,background .3s,transform .3s; }
.pj-index__links a b { color:#ffdd00; font-size:11px; letter-spacing:.08em; }
.pj-index__links a:hover { color:#fff; border-color:rgba(255,221,0,.6); background:rgba(255,221,0,.09); transform:translateY(-3px); }
.pj-index__links a.is-active { color:#061a3d; border-color:#ffdd00; background:#ffdd00; }
.pj-index__links a.is-active b { color:rgba(6,26,61,.55); }

/* ---------- Секція проєкту ---------- */
.pj-project { position:relative; padding:104px 0 96px; scroll-margin-top:140px; background:#f4f7fb; }
.pj-project--alt { background:#fff; }
.pj-project + .pj-project { border-top:1px solid #e4eaf3; }

/* блок проєкту */
.pj-cover { position:relative; isolation:isolate; overflow:hidden; height:clamp(430px,52vw,660px); color:#fff; background:#061a3d; box-shadow:0 30px 80px rgba(5,25,60,.18); }
.pj-cover>img { width:100%; height:100%; display:block; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.pj-cover:hover>img { transform:scale(1.045); }
.pj-cover__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,16,40,.62) 0%,rgba(3,16,40,.18) 38%,rgba(3,14,36,.93) 100%); }
.pj-cover__grid { position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:74px 74px; mask-image:linear-gradient(115deg,#000,transparent 70%); }
.pj-cover__frame { position:absolute; inset:18px; border:1px solid rgba(255,255,255,.2); pointer-events:none; transition:inset .5s,border-color .5s; }
.pj-cover:hover .pj-cover__frame { inset:11px; border-color:rgba(255,221,0,.75); }
.pj-cover__top { position:absolute; top:38px; right:44px; left:44px; z-index:3; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.pj-cover__num { display:flex; align-items:center; gap:14px; font-size:11px; font-weight:800; letter-spacing:.18em; }
.pj-cover__num strong { font-size:clamp(38px,4.6vw,64px); line-height:.9; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1px rgba(255,221,0,.9); }
.pj-cover__loc { display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border:1px solid rgba(255,255,255,.24); background:rgba(4,18,44,.45); font-size:11px; font-weight:700; letter-spacing:.04em; backdrop-filter:blur(10px); }
.pj-cover__loc i { color:#ffdd00; }
.pj-cover__copy { position:absolute; right:44px; bottom:42px; left:44px; z-index:3; }
.pj-cover__eyebrow { margin:0 0 14px; color:#ffdd00; font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.pj-cover__copy h2 { max-width:900px; margin:0; font-size:clamp(32px,3.8vw,58px); line-height:1.06; letter-spacing:-.05em; }
.pj-cover__chips { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 0; padding:0; list-style:none; }
.pj-cover__chips li { display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); font-size:11px; font-weight:700; backdrop-filter:blur(8px); }
.pj-cover__chips i { color:#ffdd00; font-size:11px; }

/* опис + характеристики */
.pj-body { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr); gap:clamp(38px,5vw,86px); margin-top:64px; align-items:start; }
.pj-body__label { margin:0 0 14px; color:#b88600; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.pj-body h3 { margin:0 0 22px; color:#061a3d; font-size:clamp(26px,2.6vw,38px); line-height:1.14; letter-spacing:-.04em; }
.pj-body__text { padding-left:30px; border-left:3px solid #ffdd00; }
.pj-body__text p { margin:0 0 18px; color:#5a6879; font-size:16px; line-height:1.85; }
.pj-body__text p:last-child { margin-bottom:0; }
.pj-tasks { display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; margin:28px 0 0; padding:0; list-style:none; }
.pj-tasks li { display:flex; align-items:flex-start; gap:12px; color:#1d2e4c; font-size:13px; font-weight:600; line-height:1.6; }
.pj-tasks i { flex:0 0 26px; width:26px; height:26px; display:grid; place-items:center; margin-top:1px; color:#061a3d; background:#ffdd00; border-radius:50%; font-size:10px; }

.pj-specs { position:relative; overflow:hidden; padding:36px 34px 32px; color:#fff; background:linear-gradient(150deg,#082d73,#061a3d); box-shadow:0 26px 60px rgba(6,26,61,.22); }
.pj-specs::before { content:""; position:absolute; top:0; bottom:0; left:0; width:4px; background:linear-gradient(#ffdd00 0 52%,#1764bb 52%); }
.pj-specs::after { content:""; position:absolute; top:-140px; right:-140px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,221,0,.16),transparent 66%); }
.pj-specs>* { position:relative; z-index:2; }
.pj-specs h4 { display:flex; align-items:center; gap:13px; margin:0 0 8px; font-size:17px; letter-spacing:-.02em; }
.pj-specs h4 i { width:42px; height:42px; display:grid; place-items:center; flex:0 0 42px; color:#061a3d; background:#ffdd00; font-size:15px; }
.pj-specs dl { margin:22px 0 0; }
.pj-specs dl>div { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.pj-specs dt { color:#8ea3c0; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pj-specs dd { margin:0; text-align:right; color:#fff; font-size:13px; font-weight:700; }
.pj-specs .slab-button { width:100%; margin-top:26px; }

/* ---------- Фотогалерея ---------- */
.pj-gallery { margin-top:76px; }
.pj-gallery__head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid #dde5f0; }
.pj-project--alt .pj-gallery__head { border-color:#e9eef6; }
.pj-gallery__head p { margin:0 0 12px; color:#b88600; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.pj-gallery__head h3 { margin:0; color:#061a3d; font-size:clamp(24px,2.4vw,34px); line-height:1.1; letter-spacing:-.04em; }
.pj-gallery__count { flex:0 0 auto; display:flex; align-items:center; gap:12px; color:#61708a; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.pj-gallery__count strong { color:#061a3d; font-size:34px; line-height:1; letter-spacing:-.05em; }
.pj-gallery__count i { color:#ffdd00; }

.pj-gallery__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(150px,15vw,215px); gap:14px; }
.pj-photo { position:relative; isolation:isolate; overflow:hidden; display:block; padding:0; border:0; cursor:pointer; background:#061a3d; box-shadow:0 14px 36px rgba(6,26,61,.1); transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s; }
.pj-photo--big { grid-column:span 2; grid-row:span 2; }
.pj-photo--wide { grid-column:span 2; }
.pj-photo>img { width:100%; height:100%; display:block; object-fit:cover; transition:transform 1s cubic-bezier(.16,1,.3,1),filter .5s; }
.pj-photo__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,16,40,0) 42%,rgba(3,14,36,.9) 100%); opacity:.82; transition:opacity .4s; }
.pj-photo__frame { position:absolute; inset:0; border:1px solid rgba(255,221,0,0); transition:inset .45s,border-color .45s; pointer-events:none; }
.pj-photo__index { position:absolute; top:15px; left:16px; z-index:3; display:flex; align-items:center; gap:8px; color:#fff; font-size:10px; font-weight:800; letter-spacing:.16em; }
.pj-photo__index::before { content:""; width:22px; height:2px; background:#ffdd00; transition:width .35s; }
.pj-photo__zoom { position:absolute; top:13px; right:13px; z-index:3; width:38px; height:38px; display:grid; place-items:center; color:#061a3d; background:#ffdd00; font-size:12px; opacity:0; transform:translateY(-8px) scale(.85); transition:opacity .35s,transform .35s; }
.pj-photo__caption { position:absolute; right:18px; bottom:16px; left:18px; z-index:3; display:flex; flex-direction:column; text-align:left; transform:translateY(6px); transition:transform .4s; }
.pj-photo__caption small { margin-bottom:7px; color:#ffdd00; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.pj-photo__caption strong { color:#fff; font-size:13px; font-weight:700; line-height:1.4; letter-spacing:-.01em; }
.pj-photo--big .pj-photo__caption strong { font-size:clamp(15px,1.5vw,21px); }
.pj-photo:hover { transform:translateY(-6px); box-shadow:0 26px 60px rgba(6,26,61,.24); }
.pj-photo:hover>img { transform:scale(1.07); filter:saturate(1.06) contrast(1.03); }
.pj-photo:hover .pj-photo__shade { opacity:1; }
.pj-photo:hover .pj-photo__frame { inset:7px; border-color:rgba(255,221,0,.75); }
.pj-photo:hover .pj-photo__zoom { opacity:1; transform:none; }
.pj-photo:hover .pj-photo__caption { transform:none; }
.pj-photo:hover .pj-photo__index::before { width:38px; }
.pj-photo:focus-visible { outline:3px solid #ffdd00; outline-offset:3px; }

/* ---------- Лайтбокс ---------- */
.pj-lightbox { position:fixed; inset:0; z-index:200; display:grid; grid-template-rows:auto 1fr auto; opacity:0; visibility:hidden; transition:opacity .35s,visibility .35s; }
.pj-lightbox.is-open { opacity:1; visibility:visible; }
.pj-lightbox__backdrop { position:absolute; inset:0; background:rgba(3,12,29,.94); backdrop-filter:blur(12px); }
.pj-lightbox__bar { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px clamp(18px,4vw,46px); border-bottom:1px solid rgba(255,255,255,.09); }
.pj-lightbox__title { min-width:0; }
.pj-lightbox__title small { display:block; margin-bottom:7px; color:#ffdd00; font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.pj-lightbox__title strong { display:block; overflow:hidden; color:#fff; font-size:clamp(14px,1.7vw,20px); font-weight:700; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.pj-lightbox__tools { display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.pj-lightbox__counter { color:#8ea3c0; font-size:12px; font-weight:800; letter-spacing:.14em; }
.pj-lightbox__counter b { color:#fff; }
.pj-lightbox__close { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; font-size:16px; cursor:pointer; transition:color .3s,background .3s,border-color .3s,transform .3s; }
.pj-lightbox__close:hover { color:#061a3d; border-color:#ffdd00; background:#ffdd00; transform:rotate(90deg); }
.pj-lightbox__stage { position:relative; z-index:2; display:grid; place-items:center; min-height:0; padding:clamp(16px,3vw,34px) clamp(60px,8vw,110px); }
.pj-lightbox__stage img { max-width:100%; max-height:100%; display:block; object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.55); animation:pjZoomIn .45s cubic-bezier(.16,1,.3,1) both; }
.pj-lightbox__nav { position:absolute; top:50%; z-index:3; width:56px; height:56px; display:grid; place-items:center; transform:translateY(-50%); border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:#fff; font-size:16px; cursor:pointer; backdrop-filter:blur(10px); transition:color .3s,background .3s,border-color .3s; }
.pj-lightbox__nav:hover { color:#061a3d; border-color:#ffdd00; background:#ffdd00; }
.pj-lightbox__nav--prev { left:clamp(10px,2vw,30px); }
.pj-lightbox__nav--next { right:clamp(10px,2vw,30px); }
.pj-lightbox__thumbs { position:relative; z-index:2; display:flex; gap:10px; padding:16px clamp(18px,4vw,46px) 22px; overflow-x:auto; border-top:1px solid rgba(255,255,255,.09); scrollbar-width:none; }
.pj-lightbox__thumbs::-webkit-scrollbar { display:none; }
.pj-lightbox__thumbs button { flex:0 0 auto; width:104px; height:66px; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:none; cursor:pointer; opacity:.5; transition:opacity .3s,border-color .3s,transform .3s; }
.pj-lightbox__thumbs img { width:100%; height:100%; display:block; object-fit:cover; }
.pj-lightbox__thumbs button:hover { opacity:.85; transform:translateY(-3px); }
.pj-lightbox__thumbs button.is-active { opacity:1; border-color:#ffdd00; box-shadow:0 0 0 1px #ffdd00; }
@keyframes pjZoomIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }

/* ---------- Фінальний CTA ---------- */
.pj-cta { position:relative; isolation:isolate; overflow:hidden; padding:96px 0; color:#fff; background:linear-gradient(115deg,#061a3d,#0b3172 60%,#082d73); }
.pj-cta::after { content:""; position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:76px 76px; mask-image:linear-gradient(100deg,#000,transparent 78%); }
.pj-cta__inner { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:56px; }
.pj-cta h2 { max-width:720px; margin:0; font-size:clamp(32px,4vw,58px); line-height:1.04; letter-spacing:-.05em; }
.pj-cta h2 span { color:transparent; -webkit-text-stroke:1px rgba(255,221,0,.9); }
.pj-cta p { max-width:560px; margin:22px 0 0; color:#bccbdf; font-size:16px; line-height:1.8; }
.pj-cta__actions { flex:0 0 auto; display:flex; flex-direction:column; gap:12px; }

/* ---------- Адаптив ---------- */
@media(max-width:1180px) {
  .pj-body { grid-template-columns:1fr; }
  .pj-gallery__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pj-cta__inner { flex-direction:column; align-items:flex-start; gap:34px; }
}
@media(max-width:900px) {
  .pj-project { padding:74px 0 68px; }
  .pj-cover__top { top:24px; right:24px; left:24px; }
  .pj-cover__copy { right:24px; bottom:26px; left:24px; }
  .pj-body { margin-top:44px; }
  .pj-body__text { padding-left:20px; }
  .pj-tasks { grid-template-columns:1fr; }
  .pj-gallery { margin-top:54px; }
  .pj-gallery__head { flex-direction:column; align-items:flex-start; gap:18px; }
  .pj-gallery__grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:150px; gap:10px; }
  .pj-lightbox__thumbs button { width:82px; height:54px; }
}
@media(max-width:600px) {
  .pj-index__inner { flex-direction:column; align-items:flex-start; gap:16px; padding:18px 0; }
  .pj-index__links { width:100%; }
  .pj-cover { height:400px; }
  .pj-cover__chips li { font-size:10px; padding:8px 12px; }
  .pj-specs { padding:28px 22px; }
  .pj-photo--big { grid-column:span 2; grid-row:span 2; }
  .pj-photo--wide { grid-column:span 2; }
  .pj-lightbox__nav { width:44px; height:44px; }
  .pj-lightbox__stage { padding:14px 8px; }
  .pj-lightbox__nav--prev { left:6px; }
  .pj-lightbox__nav--next { right:6px; }
}
@media(prefers-reduced-motion:reduce) {
  .pj-photo,.pj-photo>img,.pj-cover>img,.pj-lightbox__stage img { transition:none!important; animation:none!important; }
}