*{box-sizing:border-box}
html,body{margin:0;background:#161512}
body{font-family:'Archivo',system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
a{color:#fff}
::selection{background:#b5532e;color:#fff}

#wip{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column}

/* background slideshow */
.bg{position:absolute;inset:0;z-index:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease;animation:ken 22s ease-in-out infinite alternate}
.slide.alt{animation-direction:alternate-reverse}
.slide.is-on{opacity:1}
.wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,21,18,.86) 0%,rgba(22,21,18,.72) 45%,rgba(22,21,18,.9) 100%)}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(22,21,18,0) 0%,rgba(22,21,18,.55) 70%,#161512 100%)}

.top,.main,.foot{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto}
.top{display:flex;justify-content:center;padding:40px 48px 8px}
.logo{height:clamp(56px,7vw,84px);width:auto;display:block;animation:rise .8s ease both}

.main{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 48px 56px}

.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.18);background:rgba(22,21,18,.45);backdrop-filter:blur(6px);border-radius:40px;padding:9px 16px 9px 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#e8e3d8;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:#d98a5c;animation:pulse 2s ease-out infinite}

h1{font-size:clamp(30px,4.6vw,62px);line-height:1.08;font-weight:800;letter-spacing:.005em;word-spacing:.08em;margin:36px 0 26px;max-width:24ch;text-wrap:balance}
.lead{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:#d8d2c5;max-width:58ch;margin:0 0 44px;text-wrap:pretty}
.lead2{display:inline-block;margin-top:12px}

.progress{width:min(420px,100%);height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;margin:0 0 46px}
.bar{width:40%;height:100%;background:linear-gradient(90deg,rgba(217,138,92,0) 0%,#d98a5c 50%,rgba(217,138,92,0) 100%);animation:line 2.8s ease-in-out infinite}

.contacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:min(1080px,100%)}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-decoration:none;color:#fff;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:22px 22px 20px;transition:transform .25s ease,border-color .25s ease,background .25s ease}
a.card:hover{transform:translateY(-3px);border-color:#b5532e;background:rgba(181,83,46,.12)}
.label{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#d98a5c;font-weight:700}
.label svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.value{font-size:19px;font-weight:700;letter-spacing:-.01em}
.value-sm{font-size:16px;overflow-wrap:anywhere}
.value-addr{font-size:17px;line-height:1.3}
.note{font-size:13px;color:#a39a88}
.hours{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;align-items:baseline}
.day{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a39a88;font-weight:700}
.time{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.4}

.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;width:min(1080px,100%);justify-content:center}
.socials a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:13px 22px;white-space:nowrap;transition:transform .25s ease,border-color .25s ease}
.socials a:hover{transform:translateY(-3px);border-color:#fff}
.socials svg{width:16px;height:16px}
.fb{fill:#1877F2}
.ig{fill:none;stroke:#E4405F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 48px 28px;font-size:11px;letter-spacing:.04em;color:#8a8473;border-top:1px solid rgba(255,255,255,.08)}

.rise{animation:rise .8s ease both}
.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}.d5{animation-delay:.5s}

@keyframes ken{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.14) translate(-1.5%,-1%)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,138,92,.55)}70%{box-shadow:0 0 0 10px rgba(217,138,92,0)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes line{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

@media (min-width:761px) and (max-width:1100px){.contacts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .top{padding:28px 22px 6px}
  .main{padding:22px 22px 36px}
  .contacts{grid-template-columns:1fr}
  .socials a{flex:1;justify-content:center}
  .foot{padding:18px 22px 26px;flex-direction:column;align-items:flex-start;gap:8px}
}
@media (prefers-reduced-motion:reduce){.slide,.dot,.bar,.rise,.logo{animation:none}.rise,.logo{opacity:1}}