*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#111;color:#fff;font-family:Inter,Arial,sans-serif}
body{overflow:hidden}
button,a{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
.hero{position:relative;width:100vw;height:100svh;min-height:520px;overflow:hidden;background:#111}
.slides,.slide,.shade{position:absolute;inset:0}
.slide{opacity:0;background-size:cover;background-position:center;transition:opacity 1.25s ease}
.slide.active{opacity:1}
.shade{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.04) 38%,rgba(0,0,0,.48) 100%);pointer-events:none}
.topbar{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:30px 34px}
.brand{display:flex;flex-direction:column;gap:5px}
.brand-name{font-size:19px;line-height:1;font-weight:500;letter-spacing:.13em}
.brand-sub{font-size:9px;letter-spacing:.19em;opacity:.82}
.contact-trigger,.socials a,.controls button{border:0;background:none;cursor:pointer}
.contact-trigger{font-size:10px;letter-spacing:.16em;padding:4px 0}
.project-caption{position:absolute;z-index:5;left:34px;bottom:32px;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.project-name{font-size:12px;letter-spacing:.13em;font-weight:500}
.project-meta{margin-top:7px;font-size:10px;letter-spacing:.1em;opacity:.82}
.controls{position:absolute;z-index:5;right:34px;bottom:27px;display:flex;align-items:center;gap:13px}
.controls button{font-size:31px;line-height:1;padding:0 2px;opacity:.9}
.counter{font-size:9px;letter-spacing:.13em;min-width:42px;text-align:center}
.counter .dash{opacity:.45;margin:0 4px}
.socials{position:absolute;z-index:5;right:34px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.socials a{font-size:9px;letter-spacing:.15em;opacity:.88;transition:opacity .2s}
.socials a:hover,.contact-trigger:hover{opacity:.55}
.contact-panel{position:fixed;z-index:20;inset:0;background:rgba(15,15,15,.97);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.contact-panel.open{opacity:1;visibility:visible}
.close{position:absolute;right:34px;top:22px;background:none;border:0;color:#fff;font-size:32px;font-weight:200;cursor:pointer}
.contact-inner{width:min(600px,calc(100% - 68px))}
.eyebrow{font-size:10px;letter-spacing:.18em;margin:0 0 24px;opacity:.6}
.contact-inner h1{
  font-size:clamp(55px,9vw,120px);
  line-height:.9;
  letter-spacing:.08em;
  font-weight:500;
  margin:0
}

.contact-subtitle{
  font-size:9px;
  letter-spacing:.22em;
  margin:16px 0 60px;
  opacity:.75
}
.contact-details{display:flex;flex-direction:column;gap:9px;font-size:12px;letter-spacing:.04em}
.contact-details p{margin:0 0 7px}
.contact-socials{display:flex;gap:24px;margin-top:38px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.contact-socials a:hover{opacity:.5}
.note{margin-top:70px;font-size:9px;line-height:1.6;letter-spacing:.03em;opacity:.35;max-width:430px}
@media (max-width:700px){
  .topbar{padding:22px 20px}
  .brand-name{font-size:16px}
  .brand-sub{font-size:7px}
  .project-caption{left:20px;bottom:22px}
  .controls{right:20px;bottom:18px}
  .socials{right:20px;top:auto;bottom:88px;transform:none;flex-direction:row;gap:15px}
  .socials a{font-size:8px}
  .project-name{font-size:10px}
  .project-meta{font-size:8px}
  .close{right:20px;top:14px}
  .contact-inner{width:calc(100% - 40px)}
  .contact-inner h1{margin-bottom:44px}
}