@font-face{font-family:SCRDSans;src:url('/website/assets/helvetica-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:SCRDSans;src:url('/website/assets/helvetica-roman.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

.renders-page .hero.renders-video-hero{
  height:auto;
  min-height:0;
  max-height:none;
  padding:0;
  border-bottom:0;
  background:#111;
  box-shadow:none;
}

.renders-video-hero .hero-media{position:relative;overflow:hidden;box-sizing:content-box;aspect-ratio:30/13;padding-bottom:86px}

.renders-page .renders-hero-video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  background:#111;
}

.renders-video-hero .hero-captions{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,12,11,.58),rgba(8,12,11,.27) 52%,transparent 85%),linear-gradient(0deg,rgba(8,12,11,.28),transparent 62%);
}

.renders-video-hero .hero-caption{
  position:absolute;
  left:clamp(24px,5.4vw,104px);
  right:clamp(24px,5vw,96px);
  bottom:clamp(70px,8.6vw,164px);
  opacity:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.48));
}

.renders-video-hero .hero-caption:first-child{opacity:1}

.renders-video-hero .hero-caption-label{
  display:block;
  margin-bottom:22px;
  color:#dbe5b5;
  font:600 clamp(12px,1.1vw,16px)/1.35 RockHero,Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.8);
}

.renders-page .renders-video-hero .hero-caption-title{
  max-width:1600px;
  margin:0;
  color:#f4f5f2;
  font-family:SCRDSans,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(52px,6vw,92px);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.044em;
  text-transform:none;
  white-space:normal;
}

.renders-video-hero .hero-caption-title span{display:block}

.renders-hero-title{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px!important;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

@media(max-width:900px){
  .renders-video-hero .hero-media{
    height:clamp(490px,70vw,630px);
    aspect-ratio:auto;
  }
  .renders-page .renders-hero-video{
    object-fit:cover;
    object-position:54% center;
  }
  .renders-video-hero .hero-captions{
    background:linear-gradient(0deg,rgba(8,12,11,.66),rgba(8,12,11,.08) 76%,transparent);
  }
  .renders-video-hero .hero-caption{left:24px;right:24px;bottom:clamp(52px,7vw,90px)}
  .renders-video-hero .hero-caption-label{margin-bottom:16px;font-size:12px}
  .renders-page .renders-video-hero .hero-caption-title{font-size:clamp(44px,11.5vw,66px);line-height:.99}
}

@media(max-width:600px){
  .renders-video-hero .hero-media{height:clamp(480px,125vw,580px)}
}

.renders-page .renders-intro{
  position:relative;
  isolation:isolate;
  width:min(1240px,100%);
  max-width:none;
  margin:0 auto;
  padding:clamp(110px,10vw,158px) clamp(32px,6vw,88px);
  display:grid;
  grid-template-columns:.78fr 2.1fr 1.05fr;
  gap:clamp(38px,5.5vw,86px);
  align-items:start;
  background:#171b1a;
  color:#f4f5f2;
  box-shadow:0 0 0 100vmax #171b1a;
  clip-path:inset(0 -100vmax);
  font-family:ProjectSans,"Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align:left;
  scroll-margin-top:70px;
}

.renders-page .renders-intro::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:0;
  width:100vw;
  height:100%;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  transform:translateX(-50%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.9),#000 48%,rgba(0,0,0,.66));
}

.renders-page .renders-intro::after{
  content:"";
  position:absolute;
  z-index:0;
  right:-25%;
  top:-78%;
  width:65%;
  aspect-ratio:1;
  border:1px solid rgba(219,229,181,.12);
  border-radius:50%;
  background:radial-gradient(circle,rgba(192,209,139,.09),transparent 66%);
  pointer-events:none;
}

.renders-page .renders-intro>.renders-eyebrow,
.renders-page .renders-intro>h2,
.renders-page .renders-intro>.renders-summary{position:relative;z-index:2}

.renders-page .renders-eyebrow{
  margin:0;
  color:#aeb7b3;
  font:600 10.5px/1.5 ProjectLabel,ProjectSans,Arial,sans-serif;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.renders-page .renders-eyebrow::before{
  content:"";
  display:block;
  width:30px;
  height:1px;
  margin-bottom:20px;
  background:#d5dfa9;
}

.renders-page .renders-intro h2{
  margin:0;
  color:#f4f5f2;
  font:300 clamp(48px,5.1vw,76px)/.99 ProjectSans,"Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:-.044em;
  text-transform:none;
}

.renders-page .renders-intro h2::after{display:none}
.renders-page .renders-intro h2 span{display:block;width:max-content;max-width:100%}
.renders-page .renders-intro h2 span:nth-child(2){transform:translateX(.14em);color:#dbe5b5}
.renders-page .renders-intro h2 span:nth-child(3){transform:translateX(.04em)}

.renders-page .renders-summary{
  max-width:370px;
  margin:12px 0 0!important;
  color:#c0c8c4!important;
  font-size:17px;
  line-height:1.72!important;
}

.renders-page .renders-blueprint{
  position:absolute;
  z-index:1;
  left:50%;
  top:0;
  width:100vw;
  height:100%;
  transform:translateX(-50%);
  pointer-events:none;
}

.renders-page .renders-blueprint svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:rgba(205,215,210,.13);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}

.renders-page .renders-blueprint svg circle{fill:#dbe5b5;stroke:#171b1a;stroke-width:4}

.renders-page .renders-node{
  position:absolute;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border:1px solid #454e4a;
  background:rgba(23,27,26,.93);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  color:#c8cecb;
  font:600 8.5px/1 ProjectLabel,ProjectSans,Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),border-color .25s ease;
}

.renders-page .renders-node b{color:#dbe5b5;font-size:8.5px}
.renders-page .renders-node small{font:inherit;white-space:nowrap}
.renders-page .renders-node--depth{left:7%;top:36px;transition-delay:.1s}
.renders-page .renders-node--proportion{left:37%;top:36px;transition-delay:.25s}
.renders-page .renders-node--rooms{right:7%;bottom:36px;transition-delay:.4s}
.renders-page .renders-intro:hover .renders-node{border-color:#65706a}
.renders-page .renders-intro.motion-reveal:not(.is-visible) .renders-node{opacity:0;transform:translateY(10px)}

@media(max-width:1100px) and (min-width:901px){
  .renders-page .renders-intro{grid-template-columns:.75fr 2fr}
  .renders-page .renders-summary{grid-column:2;max-width:560px}
}

@media(max-width:900px){
  .renders-page .renders-intro{display:block;padding:88px 24px}
  .renders-page .renders-intro::after{right:-58%;top:17%;width:115%}
  .renders-page .renders-eyebrow{margin-bottom:28px}
  .renders-page .renders-blueprint svg{stroke:rgba(205,215,210,.11)}
  .renders-page .renders-node{padding:8px 10px}
  .renders-page .renders-node--depth{left:24px;top:24px}
  .renders-page .renders-node--proportion{left:auto;right:24px;top:24px}
  .renders-page .renders-node--rooms{right:24px;bottom:24px}
  .renders-page .renders-intro h2{margin:24px 0 30px;font-size:clamp(43px,11vw,62px);line-height:1.01}
  .renders-page .renders-intro h2 span:nth-child(2),.renders-page .renders-intro h2 span:nth-child(3){transform:none}
  .renders-page .renders-summary{max-width:600px;margin:0!important;font-size:16.5px}
}

@media(max-width:420px){
  .renders-page .renders-node{min-width:34px;justify-content:center;padding:8px}
  .renders-page .renders-node small{display:none}
}

@media(prefers-reduced-motion:reduce){
  .renders-page .renders-node{transition:none}
  .renders-page .renders-intro.motion-reveal:not(.is-visible) .renders-node{opacity:1;transform:none}
}