:root{
  --gold:#c89a47;
  --gold-soft:#dfbd76;
  --dark:#080808;
  --cream:#f4eee4;
  --text:#f5f1e8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#070707;color:var(--text);font-family:Arial, Helvetica, sans-serif}
a{text-decoration:none;color:inherit}
.screen{position:relative;min-height:100svh;overflow:hidden}
.approved-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;
}
.hotspot{position:absolute;z-index:5;border-radius:6px}
.hero-catalog-link{left:5%;top:74%;width:19.5%;height:6.5%}
.hero-projects-link{left:25.2%;top:74%;width:15.5%;height:6.5%}
.scroll-hotspot{left:43%;bottom:2%;width:15%;height:10%}

.catalog-open-link{left:3.8%;top:40%;width:19%;height:7%}
.catalog-download-link{left:3.8%;top:47.8%;width:17.5%;height:6.5%}
.catalog-footer-download{right:8%;bottom:1.4%;width:12%;height:4.8%}
.catalog-thumbs-area{left:4%;bottom:6%;width:92%;height:20%}

.site-note{
  position:fixed;left:12px;bottom:12px;z-index:20;background:rgba(0,0,0,.55);color:#d9c393;
  border:1px solid rgba(200,154,71,.35);padding:8px 12px;border-radius:999px;font-size:12px;
  backdrop-filter:blur(6px);opacity:.5
}
.site-note:hover{opacity:1}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:50;display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-inner{position:relative;width:min(1200px,96vw);height:min(92vh,860px);display:grid;grid-template-rows:auto 1fr auto;gap:12px}
.modal-top{display:flex;align-items:center;justify-content:space-between;color:#fff}
.modal-title{font-family:Georgia,serif;font-size:28px;color:var(--gold-soft)}
.close{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:50%;width:44px;height:44px;font-size:28px;line-height:1;cursor:pointer}
.viewer{min-height:0;background:#111;border:1px solid rgba(200,154,71,.35);border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.viewer img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.viewer-controls{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.viewer-controls button,.viewer-controls a{
  cursor:pointer;background:#111;color:#fff;border:1px solid var(--gold);padding:12px 18px;border-radius:4px;text-transform:uppercase;
}
.viewer-controls span{color:#d9c393;min-width:110px;text-align:center}
@media (max-width:800px){
  .approved-bg{object-position:center top}
  .hero-catalog-link{left:7%;top:73%;width:42%;height:7%}
  .hero-projects-link{left:51%;top:73%;width:35%;height:7%}
  .catalog-open-link{left:4%;top:39%;width:40%;height:7%}
  .catalog-download-link{left:4%;top:47%;width:38%;height:7%}
  .modal{padding:10px}.modal-title{font-size:20px}
}
/* Mobile fix LK */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  .screen {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  .hero {
    width: 100vw;
    min-height: 100vh;
    background-position: center center;
    background-size: cover;
  }

  nav {
    display: none;
  }

  .hero-content,
  .content,
  .hero-text {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    padding-left: 22px;
    padding-right: 22px;
    max-width: 92vw;
  }

  h1,
  .hero h1 {
    font-size: 34px;
    line-height: 1.1;
    max-width: 92vw;
    word-break: normal;
  }

  .btn,
  .hero button,
  .hero a {
    max-width: 92vw;
  }@media (max-width: 768px) {
  .approved-bg {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hotspot {
    max-width: 92vw !important;
  }

  .hero-catalog-link {
    left: 6% !important;
  }

  .hero-projects-link {
    left: 6% !important;
  }
}@media (max-width: 768px) {
  .approved-bg {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hotspot {
    max-width: 92vw !important;
  }

  .hero-catalog-link {
    left: 6% !important;
  }

  .hero-projects-link {
    left: 6% !important;
  }
}
}