.main-wrapper {
  position: relative;
  overflow: clip;
}

.page-wrapper {
  position: relative;
}

.site-grid {
  align-items: start;
}

.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }


.spacer {
  display: block;
}

.relative {
  position: relative;
}

.mt-auto { margin-top: auto; }
.site-grid.mt-30 { margin-top: 1.875em; }
.site-grid.mt-100 { margin-top: 6.25em; }

.is-uppercase {
  text-transform: uppercase;
}


.home-prose {
  color: var(--foreground);
  text-align: left;
  line-height: var(--lh-11);
}

.content-block.gap-0 { gap: 0; }
.content-block.gap-4 { gap: 0.25em; }
.content-block.gap-8 { gap: 0.5em; }
.content-block.gap-16 { gap: 1em; }

.heading-32 {
  font-family: var(--font-display);
  font-size: 2em;
  font-weight: var(--fw-regular);
  line-height: var(--lh-1);
}

.image-wrapper {
  display: block;
  margin: 0;
  overflow: hidden;
}


.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.fullsize-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.brackets-block {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75em;
}

.brackets-block.is-tight {
  gap: 0.25em;
}

.mobile-only {
  display: none;
}


.hservice_subtitle a,
.home-project_summary a {
  color: inherit;
  text-decoration: none;
  padding-inline: 0.15em;
  transition: background-color var(--duration-hover) var(--ease-hover);
}

.hservice_subtitle a:hover,
.hservice_subtitle a:focus-visible,
.home-project_summary a:hover,
.home-project_summary a:focus-visible {
  background-color: var(--primary);
}



.hero-section.is-home {
  --home-hero-pad-b: 2.5em;


  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}



.home-hero_plate {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;


  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.home-hero_plate.is-grabbing {
  cursor: grabbing;
}

.home-hero_slide {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;
  background-color: var(--background);

  --home-hero-fade: 1500ms;
  opacity: 0;
  transition: opacity var(--home-hero-fade) var(--ease-reveal);
}

.home-hero_slide.is-active {
  opacity: 1;
}


.home-hero_slide.is-snapping {
  transition:
    opacity var(--home-hero-fade) var(--ease-reveal),
    transform 320ms var(--ease-reveal);
}


.home-hero_slide.is-portrait {
  object-fit: contain;
  object-position: center center;
}


.home-hero_veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--nuit);
  opacity: var(--scroll-progress, 0);
  pointer-events: none;
}



.home-hero_content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: var(--home-hero-pad-b);
  pointer-events: none;

  opacity: max(0, calc(1 - var(--scroll-progress, 0) * 5));
}

.home-hero_content a {
  pointer-events: auto;
}


.home-hero_title-mask {
  margin-bottom: 0.375em;


  --home-hero-accent-headroom: calc(var(--fs-h2) * 0.18);
}

.home-hero_title-mask .home-hero_mask {
  padding-top: var(--home-hero-accent-headroom);
  margin-top: calc(var(--home-hero-accent-headroom) * -1);
}

.home-hero_title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-09);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}

.home-hero_eyebrow-row {
  position: relative;
  height: var(--home-hero-eyebrow-h, 2.25em);
  margin-bottom: 1.25em;
}


.home-hero_dots {
  position: absolute;
  right: 1.875em;
  bottom: var(--home-hero-pad-b);
  z-index: 3;
  display: flex;
  gap: 0.5em;
}

.home-hero_dot {
  display: block;
  width: 1.5em;
  height: 0.125em;
  background-color: var(--foreground);
  opacity: 0.35;
  transition: opacity var(--duration-hover, 0.3s) var(--ease-hover, ease),
    width var(--duration-hover, 0.3s) var(--ease-hover, ease);
}

.home-hero_dot.is-active {
  width: 2.5em;
  opacity: 1;
}

@media (max-width: 479px) {
  .home-hero_dots {
    right: var(--home-hero-pad-b);
  }
}


.home-hero_eyebrow {
  display: inline-flex;
  padding: 0.4em 0.75em;
  background-color: var(--background);
  line-height: var(--lh-11);
}

.home-hero_foot {
  height: 1.5em;
}




.home-hero_mask {
  display: block;
  overflow: hidden;
}

.home-hero_mask-inner {
  display: block;
}


[data-opening] .home-hero_plate {
  transform: translateY(-100%);
}


[data-opening] .home-hero_mask-inner {
  transform: translateY(calc(-100% - var(--home-hero-accent-headroom, 0px)));
}


@media (scripting: none) {
  [data-opening] .home-hero_plate,
  [data-opening] .home-hero_mask-inner {
    transform: none;
  }
}



.arrow-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.75em;
  color: var(--foreground);
  text-decoration: none;
}

.arrow-link_text-block {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.25em;
  height: 1.5em;
  overflow: hidden;
}

.arrow-link_text {
  font-family: var(--font-ui);
  font-size: var(--fs-text-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-12);
  transition: transform var(--duration-hover) var(--ease-hover);
}

.arrow-link:hover .arrow-link_text {
  transform: translateY(calc(-100% - 0.25em));
}

.arrow-link_arrow-block {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 1.25em;
  height: 1.25em;
  overflow: hidden;
}

.arrow-link_icon-line {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  width: 2.5em;
  height: 2.5em;
  transition: transform var(--duration-hover) var(--ease-hover);
}

.arrow-link_arrow {
  width: 1.25em;
}

.arrow-link_arrow.is-second {
  margin-top: auto;
}

.arrow-link:hover .arrow-link_icon-line {
  transform: translate(50%, -50%);
}



.default-section.is-home-second {

  padding-top: 25em;
}

.home-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.home-intro_sticky {
  position: sticky;
  top: calc(100svh - 48em);

  min-height: 48em;
  width: 100%;
}


.site-grid.home-intro_second-row {
  margin-top: -0.5em;
}

.h1.text-right {
  text-align: right;
}


.h1.text-right.is-left {
  max-width: none;
  margin-left: auto;
}

.home-intro_tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75em;
}



.home-projects {
  display: flex;
  flex-direction: column;
  gap: 5em;
  width: 100%;
  margin-top: 5em;
}

.home-project {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;

  grid-template-columns: 1fr minmax(0, 55em) 1fr;
  gap: 1.25em;
  width: 100%;
  padding-top: 2.5em;
}

.home-project_thumbs-col,
.home-project_card {
  grid-row: span 2;
}


.home-project_rule {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background-color: var(--border);
}


.home-project_rule[data-reveal] {
  opacity: 1;
}

.home-project_thumbs-col {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.home-project_thumbs {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1.25em;
  width: 11em;
}


.home-project_thumbs .home-project_thumb {
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: -1px;
}


.home-project_thumbs .home-project_thumb {
  aspect-ratio: 1 / 1;
}

.home-project_thumbs .home-project_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-project_thumbs .home-project_thumb:hover,
.home-project_thumbs .home-project_thumb:focus-visible {
  outline-color: var(--border);
}

.home-project_thumbs .home-project_thumb.is-active {
  outline-color: var(--primary);
}


.home-project_card {
  position: relative;
  display: block;

  align-self: center;
  width: 100%;
  aspect-ratio: var(--card-ratio);

  max-height: 80vh;
  margin-inline: auto;
  overflow: hidden;
  color: var(--foreground);
  text-decoration: none;
  background-color: var(--background);
}

@supports (width: min-content) {
  .home-project_card {
    width: min(100%, calc(80vh * var(--card-ratio)));
  }
}


.home-project_card.is-surface {
  background-color: var(--surface);
}

.video-embed {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-project_media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.home-project_media[hidden] {
  display: none;
}

.video-frame {
  position: absolute;
  top: 0.625em;
  left: 0.625em;
  z-index: 30;
  width: calc(100% - 1.25em);
  height: calc(100% - 1.25em);
  color: var(--foreground);
  pointer-events: none;
}

.video-frame_corner {
  position: absolute;
  z-index: 30;
  width: 0.625em;
}

.video-frame_corner.is-tl { inset: 0 auto auto 0; }
.video-frame_corner.is-tr { inset: 0 0 auto auto; transform: rotate(90deg); }
.video-frame_corner.is-br { inset: auto 0 0 auto; transform: rotate(180deg); }
.video-frame_corner.is-bl { inset: auto auto 0 0; transform: rotate(-90deg); }


.home-project_meta {
  position: absolute;
  top: 1.25em;
  left: 1.25em;
  right: 1.25em;
  z-index: 50;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  border-bottom: var(--border-hairline) solid var(--border);
  transition: opacity var(--duration-info-fade) var(--ease-hover);
}

.home-project_card:hover .home-project_meta,
.home-project_card:focus-visible .home-project_meta {
  opacity: 0;
}

.home-project_meta-item {
  display: flex;
  flex: none;
  align-items: flex-end;
  padding: 0 1.25em 0.375em;
  border-right: var(--border-hairline) solid var(--border);
}

.home-project_meta-value {
  font-family: var(--font-display);
  font-size: 6.25em;
  line-height: var(--lh-08);
}

.home-project_meta-label {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  padding: 0 1.25em 0.75em;
  text-align: right;
}

.content-block.home-project_title {
  gap: 0.5em;
}

.home-project_summary-wrapper {
  margin-top: auto;
}


.home-projects_cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25em;
  margin-top: 5em;
  padding-top: 10em;
  border-top: 1px solid var(--border);
}

.home-projects_cta-label {
  margin-right: 0.75em;
}



.services-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5em;
  margin-top: 7.5em;
  padding-bottom: 7.5em;
}

.hservice-item {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  color: var(--foreground);
  transform: scale(0.75);
  transition: transform var(--duration-hover-slow) var(--ease-hover);
}

.hservice-item.is-active {
  transform: none;
}

.hservice_top-block {
  display: flex;
  flex: none;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.5em;
}

.content-block.gap-0.hservice_content {
  width: auto;
}


.heading-32.hservice_index {
  color: var(--foreground);
  line-height: var(--lh-1);
}


.hservice_title-inner {
  display: inline-block;
  padding-inline: 0.15em;
  background-color: transparent;
  transition: background-color var(--duration-hover) var(--ease-hover);
}

.hservice-item.is-active .hservice_title-inner {
  background-color: var(--primary);
}

.text-14.hservice_subtitle {
  margin-top: 0.75em;
  text-align: right;
  text-transform: uppercase;
  line-height: var(--lh-15);
}



.home-video-outer {
  position: relative;
  height: 200vh;
  overflow: clip;
}

.home-video-wrapper {
  position: absolute;
  top: -100vh;
  width: 100%;
  height: calc(100% + 100vh);
}

.scroll-camera {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
}

.scroll-camera_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}


.render-embed {
  position: relative;
  aspect-ratio: 1.66;
  height: min(100%, 60.24vw);
  width: auto;
  max-width: 100%;
}

.home-video_media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--background);
}

.home-video_word-mask {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 120;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


.home-video_word {
  margin: 0;
  padding-block: 0.2em;
  margin-block: -0.2em;
  clip-path: inset(100% 0 0 0);
  font-family: var(--font-display);

  font-size: 15.5625vw;
  font-weight: var(--fw-regular);
  line-height: var(--lh-08);
  color: var(--foreground);
  white-space: nowrap;
}

.home-video_text {
  position: absolute;
  z-index: 140;

  top: 6.5em;
  bottom: 2.5em;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container-width), calc(100% - 5em));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.text-30.home-prose.home-video_description {
  max-width: 24em;
  text-align: left;
}

.h3.home-video_caption {
  margin: 0;
}


.mobile-scroll-badge-wrapper.is-movie {
  position: absolute;
  inset: 0;
  z-index: 160;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 2.5em 2.5em 0;
  pointer-events: none;
}

.mobile-scroll-badge {
  display: inline-flex;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  height: 1.75em;
  padding: 0 0.5em 0 1em;
  border: var(--border-hairline) solid var(--border);
  color: var(--foreground);
}

.size-14 {
  flex: none;
  width: 0.875em;
}



@media (max-width: 479px) {
  .spacer {
    display: none;
  }

  .site-grid {
    display: flex;
    flex-direction: column;
  }

  .col-span-1,
  .col-span-2,
  .col-span-3,
  .col-span-4 {
    grid-column: auto;

    min-width: 0;
  }

  .mobile-only {
    display: block;
  }



  .hero-section.is-home {
    --home-hero-pad-b: 1.5em;
  }

  .home-hero_eyebrow {
    max-width: 100%;
    padding: 0.4em 0.5em;
  }

  .arrow-link_text {
    font-size: var(--fs-text-16);
  }



  .default-section.is-home-second {
    padding-top: 10em;
  }

  .home-intro_sticky {
    position: static;

    min-height: 0;
  }

  .site-grid.home-intro_second-row {
    margin-top: 1.875em;
  }

  .h1.text-right,
  .h1.text-right.is-left {
    text-align: left;
    max-width: none;
    margin-left: 0;

    font-size: var(--fs-heading-200-mobile);
  }

  .home-intro_tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    margin-block: 1.25em;
  }



  .home-project {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    padding-top: 1.875em;
  }


  .home-project_card { order: 1; }
  .home-project_thumbs-col { order: 2; }
  .home-project_title { order: 3; }
  .home-project_summary-wrapper { order: 4; margin-top: 0; }

  .home-project_thumbs {
    flex-direction: row;
    width: 100%;
    gap: 0.5em;
  }

  .home-project_thumbs > * {
    flex: 1 1 0;
    min-width: 0;
  }

  .home-project_meta-value {
    font-size: 3.5em;
  }

  .home-project_meta {
    top: 0.75em;
    left: 0.75em;
    right: 0.75em;
  }

  .home-project_meta-item {
    padding: 0 0.625em 0.25em;
  }

  .home-project_meta-label {
    padding: 0 0 0.375em 0.625em;
  }

  .home-projects_cta {
    flex-direction: column;
    align-items: stretch;
    padding-top: 2.5em;
  }

  .home-projects_cta-label {
    margin-right: 0;
  }



  .services-block {
    align-items: flex-start;
    margin-top: 3.75em;
    padding-bottom: 3.75em;
    gap: 2.5em;
  }

  .hservice-item {
    align-items: flex-start;
    width: 100%;
    transform: scale(1);
  }


  .hservice_top-block {
    align-items: baseline;
  }

  .text-14.hservice_subtitle {
    text-align: left;
    margin-left: 0;
  }



  .home-video_word {
    font-size: 4em;
  }


  .render-embed {
    position: static;
  }


  .home-video_text {
    top: calc(2 * var(--space-nav-y) + var(--cta-height-base-mobile));
    bottom: 1em;
    width: calc(100% - 2em);
  }

  .text-30.home-prose.home-video_description {
    font-size: var(--fs-text-16);
    max-width: none;
  }

  .h3.home-video_caption {
    font-size: var(--fs-text-14);
  }

  .mobile-scroll-badge-wrapper.is-movie {
    padding: 0 1em 1em 0;
  }

  .mobile-scroll-badge {
    gap: 0.25em;
    height: 1.5em;
    padding: 0 0.375em 0 0.625em;
  }

}