*{box-sizing:border-box}
:root{--nav-top:7vh}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;background:#000}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:#fff;background:#000;overflow-x:hidden}
a{color:inherit;text-decoration:none;cursor:pointer}
button,[role="button"]{cursor:pointer}

.loading-screen{
  position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;
  opacity:1;visibility:visible;transition:opacity .55s ease,visibility .55s ease
}
.loading-logo{width:min(28vw,420px);min-width:210px;height:auto;display:block}
.loading-screen.is-hidden{opacity:0;visibility:hidden}

.background-video{
  position:fixed;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;transition:opacity .8s ease;transform:translateZ(0);will-change:opacity
}
.background-video.is-hidden{opacity:0}

main{position:relative;z-index:1}
.panel{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding:8vh 6vw;scroll-snap-align:start
}
.dark-panel{background:#000}
.impact-headline{
  margin:0;text-align:center;font-size:clamp(32px,4.2vw,68px);line-height:.92;
  font-weight:800;font-style:italic;letter-spacing:-.035em;text-transform:uppercase;
  text-shadow:0 2px 18px rgba(0,0,0,.3)
}
.section-headline{margin-bottom:22px}
p{margin:0;font-size:clamp(15px,1.3vw,20px);letter-spacing:.06em;text-align:center}

.logo-home-link{
  position:fixed;z-index:11;left:50%;top:0;transform:translateX(-50%);
  display:block;width:0;height:0
}
.floating-logo{
  position:fixed;z-index:10;left:50%;top:50%;width:min(25vw,420px);min-width:210px;
  height:auto;transform:translate3d(-50%,-50%,0);will-change:top,width,transform;backface-visibility:hidden
}

.main-navigation{
  position:fixed;z-index:9;top:var(--nav-top);left:50%;transform:translate(-50%,-10px);
  display:flex;gap:clamp(24px,4vw,70px);white-space:nowrap;
  font-size:clamp(13px,1vw,17px);letter-spacing:.14em;
  opacity:0;pointer-events:none;transition:opacity .45s ease,transform .45s ease
}
.main-navigation.is-visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.main-navigation a{
  position:relative;display:inline-block;font-weight:400;
  -webkit-text-stroke:0 transparent;text-shadow:none;
  transition:-webkit-text-stroke .14s ease,text-shadow .14s ease,opacity .14s ease
}
.main-navigation a:hover,.main-navigation a:focus-visible{
  -webkit-text-stroke:1.35px currentColor;
  text-shadow:.025em 0 currentColor,-.025em 0 currentColor
}

.global-scroll-cue{
  position:fixed;z-index:12;left:50%;bottom:3.4vh;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  opacity:1;transition:opacity .45s ease,transform .55s cubic-bezier(.4,0,.2,1)
}
.global-scroll-cue.is-hidden{opacity:0;transform:translate(-50%,34px);pointer-events:none}
.scroll-label{
  font-size:clamp(6px,.45vw,8px);font-weight:400;letter-spacing:.28em;line-height:1;
  color:rgba(255,255,255,.88)
}
.scroll-chevron{position:relative;display:block;width:30px;height:18px;animation:chevronPulse 1.8s ease-in-out infinite}
.scroll-chevron::before,.scroll-chevron::after{
  content:"";position:absolute;top:5px;width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.88)
}
.scroll-chevron::before{right:14px;transform:rotate(43deg);transform-origin:right center}
.scroll-chevron::after{left:14px;transform:rotate(-43deg);transform-origin:left center}
@keyframes chevronPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

footer{
  position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;white-space:nowrap
}
.footer-links{display:flex;gap:24px}
.footer-links a{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transition:opacity .16s ease
}
.footer-links a:hover,.footer-links a:focus-visible{opacity:.65}
.copyright{font-size:9px;letter-spacing:.18em;opacity:.62}

.custom-cursor{
  position:fixed;z-index:200;left:0;top:0;width:12px;height:12px;border:1px solid #fff;
  border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);
  transition:width .16s ease,height .16s ease,background .16s ease,opacity .2s ease;
  mix-blend-mode:difference
}
.custom-cursor.is-visible{opacity:1}
.custom-cursor.is-hovering{width:24px;height:24px;background:rgba(255,255,255,.18)}

@media (pointer:fine){
  body,.interactive,.main-navigation a,footer a{cursor:none}
}
@media (pointer:coarse){
  .custom-cursor{display:none}
}

@media(max-width:700px){
  .loading-logo{width:58vw;min-width:0;max-width:300px}
  .panel{padding-inline:28px}
  .floating-logo{width:58vw;min-width:0;max-width:300px}
  .impact-headline{font-size:clamp(25px,8vw,34px)}
  .main-navigation{gap:18px;font-size:10px}
  p{max-width:30ch}
  .global-scroll-cue{bottom:3vh;gap:12px}
  .scroll-chevron{width:26px;height:16px}
  .scroll-chevron::before,.scroll-chevron::after{width:19px;height:2px}
  .scroll-chevron::before{right:12px}
  .scroll-chevron::after{left:12px}
  .footer-links a{font-size:11px;animation-iteration-count:1!important}
}


#about{
  background-image:url("assets/glauerlauer-about-us.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}


#contact{
  background:transparent;
  isolation:isolate;
}

#contact::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(0,0,0,.32);
  pointer-events:none;
}


.service-list{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  text-align:center;
  white-space:nowrap;
}

.service-list span{
  display:block;
  font-size:clamp(15px,1.45vw,23px);
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.25;
}


@media(max-width:900px){
  .service-list{
    white-space:normal;
    max-width:92vw;
  }
  .service-list span{
    line-height:1.45;
  }
}

.contact-phone{display:inline-block;margin-top:20px;}
