@font-face{font-family:"Neue Haas Display";src:url("/assets/fonts/NeueHaasDisplayLight.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Neue Haas Display";src:url("/assets/fonts/NeueHaasDisplayRoman.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Neue Haas Display";src:url("/assets/fonts/NeueHaasDisplayBold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --black:#1D1D1B;
  --white:#FFFFFF;
  --teal:#00FFCE;
  --grey-300:#C3C3C3;
  --gutter:clamp(16px,4.5vw,90px);
  --logo-top:clamp(24px,4vw,75px);
  --logo-w:clamp(170px,16vw,320px);
  --logo-h:calc(var(--logo-w) * 0.3277); /* logo aspect 543:178 */
  --content-top:calc(var(--logo-top) + var(--logo-h) + clamp(12px,1.5vw,28px)); /* where scrolling content starts */
}

*,*::before,*::after{box-sizing:border-box}
.scroller{scroll-behavior:smooth}
html,body{margin:0}
body{
  color:var(--white);
  font-family:"Neue Haas Display",Arial,Helvetica,sans-serif;
  font-weight:400;
  line-height:1.15;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Aerial photo, greyscale, fixed behind both screens. Dark fallback if the image is missing. */
  background:var(--black) url("/assets/img/hero.jpg") center/cover no-repeat fixed;
}
@supports (-webkit-touch-callout:none){ body{background-attachment:scroll} } /* iOS ignores fixed */

/* Drone footage behind both screens. Poster/body image shows until it loads, or if it fails. */
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1)}

/* Darken and desaturate the photo so white type always reads */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:rgba(29,29,27,.5);
  backdrop-filter:grayscale(1);
  -webkit-backdrop-filter:grayscale(1);
}

/* Content scrolls in its own area below the fixed logo, fading out just beneath it */
.scroller{
  position:fixed;left:0;right:0;bottom:0;top:var(--content-top);
  overflow-y:auto;overflow-x:hidden;outline:none;
  scroll-snap-type:y proximity;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 clamp(16px,2vw,40px));
          mask-image:linear-gradient(to bottom,transparent 0,#000 clamp(16px,2vw,40px));
}

.screen{
  scroll-snap-align:start;
  min-height:calc(100vh - var(--content-top));
  min-height:calc(100svh - var(--content-top));
  display:flex;flex-direction:column;
  padding:clamp(16px,2vw,40px) var(--gutter) clamp(24px,3vw,48px);
}

/* Logo stays fixed while the page scrolls beneath it */
.site-header{position:fixed;top:var(--logo-top);left:var(--gutter);z-index:10;pointer-events:none}
.logo{display:block;width:var(--logo-w);height:auto}

.screen-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,5vh,80px) 0}

/* Translucent panels, as in the mockup */
.panel{
  background:rgba(255,255,255,.12);
  padding:clamp(28px,3vw,58px) clamp(24px,3vw,60px);
}
.panel--dark{background:rgba(29,29,27,.82)}

h1{margin:0 0 clamp(24px,3vw,48px);font-weight:700;font-size:clamp(28px,2.9vw,56px);letter-spacing:-.02em}
.intro p{margin:0;font-weight:700;font-size:clamp(18px,1.9vw,38px);letter-spacing:-.02em;line-height:1.2;max-width:64ch}
.intro p + p{margin-top:clamp(14px,1.6vw,32px)}

.scroll{
  display:flex;align-self:center;
  margin-top:clamp(40px,6vh,80px);
  color:var(--teal);
  border-radius:50%;
}
.scroll svg{width:clamp(40px,3.2vw,64px);height:auto;display:block}
.scroll:hover svg{transform:translateY(3px)}
.scroll svg{transition:transform .2s}

/* Company cards */
.companies{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(16px,2.5vw,50px)}
/* Second screen sizes against height as well as width so it always fits below the logo */
.company{display:flex;flex-direction:column;padding-top:clamp(20px,min(3vw,4.5vh),58px);padding-bottom:clamp(20px,min(3vw,4.5vh),58px)}
.company .wordmark{margin:0 0 clamp(16px,min(3vw,4vh),56px);height:clamp(44px,min(5.2vw,9vh),104px);display:flex;align-items:center}
.company .wordmark img{height:100%;width:auto;max-width:100%;display:block}
.company .wordmark--highdale img{height:52%}
.company.company--sevet p{max-width:22ch} /* longer copy: run wider so it sits on three lines like Highdale */
.company p{margin:0 0 clamp(18px,min(3.5vw,4.5vh),68px);font-weight:400;font-size:clamp(20px,min(2.6vw,4.4vh),52px);letter-spacing:-.03em;line-height:1.02;flex:1;max-width:17ch}

.btn{
  align-self:flex-start;
  display:inline-block;
  padding:.35em 1.1em;
  border:3px solid var(--white);border-radius:999px;
  color:var(--white);text-decoration:none;
  font-weight:300;font-size:clamp(17px,min(1.8vw,3.2vh),36px);letter-spacing:-.02em;
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--teal);border-color:var(--teal);color:var(--black)}

a:focus-visible{outline:3px solid var(--teal);outline-offset:4px}

.contact{margin:clamp(16px,min(3vw,3.5vh),56px) 0 0;color:var(--teal);font-weight:300;font-size:clamp(16px,min(1.8vw,3.2vh),36px);letter-spacing:-.02em}
.contact strong{font-weight:700}
.contact a{color:inherit}

.legal{margin:clamp(12px,min(2vw,2.5vh),40px) 0 0;font-weight:300;font-size:clamp(12px,.95vw,18px);color:var(--grey-300)}

@media (prefers-reduced-motion:reduce){
  .scroller{scroll-behavior:auto}
  .bg-video{display:none}
  .scroll svg,.btn{transition:none}
}