:root {
  --color-brand-primary: #db1d21;
  --color-brand-neutral: #020202;
  --color-brand-light: #969696;
  --color-brand-offwhite: #f7f7f7;
  --color-page-background: #fff;
  --font-family-serif: "Crimson Text", Times New Roman, serif;
  --font-family-sans-serif: "Hanken Grotesk", "Helvetica", Arial, sans-serif;
  --font-scale: 1.25;
  --font-size-base: 1rem;
  --text-1x: calc(var(--font-size-base)   * var(--font-scale));
  --text-2x: calc(var(--text-1x)          * var(--font-scale));
  --text-3x: calc(var(--text-2x)          * var(--font-scale));
  --text-4x: calc(var(--text-3x)          * var(--font-scale));
  --text-5x: calc(var(--text-4x)          * var(--font-scale));
  --text-sub1x: calc(var(--font-size-base)   / var(--font-scale));
  --text-sub2x: calc(var(--text-sub1x)       / var(--font-scale));
  --text-sub3x: calc(var(--text-sub2x)       / var(--font-scale));
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-body: 1.25;
  --space-unit: calc(var(--line-height-body) * var(--font-size-base));
  --space-1x: var(--space-unit);
  --space-2x: calc(var(--space-unit) * 2);
  --space-3x: calc(var(--space-unit) * 3);
  --space-4x: calc(var(--space-unit) * 4);
  --space-5x: calc(var(--space-unit) * 5);
  --space-6x: calc(var(--space-unit) * 6);
  --space-7x: calc(var(--space-unit) * 7);
  --space-8x: calc(var(--space-unit) * 8);
  --space-9x: calc(var(--space-unit) * 9);
  --space-10x: calc(var(--space-unit) * 10);
  --space-11x: calc(var(--space-unit) * 11);
  --space-12x: calc(var(--space-unit) * 12);
  --space-sub1x: calc(var(--space-unit) * -1);
  --space-sub2x: calc(var(--space-unit) * -2);
  --space-sub3x: calc(var(--space-unit) * -3);
  --site-width: 1896px;
  --site-padding: 28px;
  --site-width-sm: 1876px;
  --site-padding-sm: 18px;
  --header-height: 70px;
  --header-height-sm: 52px;
  --z-header: 9999;
  --z-header-grid: 9990;
  --z-nav-pane: 9980;
  --z-wip: 300;
  --fadeout-timing: .2s;
  --fadeout-level: .6;
  --header-sticky-timing: .3s;
  --header-fade-timing: .2s;
  --nav-pane-slide-timing: .45s;
  --reveal-timing: .6s;
  --reveal-depth: 60px;
  --cursor-default: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'%3E%3Ccircle fill='%23ED1C24' cx='8' cy='8' r='8'/%3E%3C/svg%3E%0A") 8 8;
  --cursor-inverted: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'%3E%3Ccircle fill='%23FFFFFF' cx='8' cy='8' r='8'/%3E%3C/svg%3E%0A") 8 8;
}

*, :before, :after {
  box-sizing: border-box;
}

:not(dialog) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

@media (width < 480px) {
  :root {
    --line-height-body: 1.35;
  }
}

html {
  font-smoothing: antialiased;
  tap-highlight-color: transparent;
  overscroll-behavior: none;
}

@media only screen and (-webkit-device-pixel-ratio >= 1.25), only screen and (resolution >= 200dpi), only screen and (resolution >= 1.25x) {
  html {
    font-smoothing: subpixel-antialiased;
  }
}

@media (width < 480px) {
  html {
    font-size: 87.5%;
  }
}

html:focus-within {
  scroll-behavior: smooth;
}

img {
  border: 0;
  outline: 0;
}

video {
  backface-visibility: hidden;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

html {
  background-color: var(--color-page-background);
}

body {
  width: 100%;
  height: 100%;
  font-family: var(--font-family-sans-serif);
  font-weight: var(--font-weight-regular);
  font-size: 100%;
  line-height: var(--line-height-body);
  color: var(--color-brand-neutral);
  cursor: var(--cursor-default), auto;
  margin: 0;
  padding: 0;
  position: relative;
}

main {
  min-width: 100%;
  height: 100%;
  position: relative;
}

footer {
  max-width: 100%;
  padding: 0 var(--site-padding);
  position: relative;
}

@media (width < 480px) {
  footer {
    padding: 0 var(--site-padding-sm);
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans-serif);
  font-weight: var(--font-weight-regular);
  text-wrap: pretty;
  margin: 0;
  padding: 0;
}

p, figure {
  margin: 0;
  padding: 0;
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

:is(ol, ul) li {
  margin: 0;
  padding: 0;
}

sup {
  vertical-align: baseline;
  font: 50% var(--font-family-sans-serif);
  line-height: 0;
  position: relative;
  top: -.6em;
}

small {
  font: var(--font-weight-regular) var(--text-sub2x) var(--font-family-sans-serif);
  text-transform: uppercase;
  padding-top: .5rem;
  display: inline-block;
}

a, a:visited {
  text-underline-position: under;
  color: var(--color-brand-neutral);
  cursor: var(--cursor-default), auto;
  border: 0;
  outline: 0;
  text-decoration: none;
}

:is(a, a:visited):hover {
  cursor: var(--cursor-default), auto;
}

img, video {
  width: 100%;
  height: auto;
}

.o-site-container, .o-site-container-full {
  max-width: var(--site-width);
  padding: 0 var(--site-padding);
  margin: 0 auto;
  position: relative;
}

@media (width < 480px) {
  .o-site-container, .o-site-container-full {
    max-width: var(--site-width-sm);
    padding: 0 var(--site-padding-sm);
  }
}

.o-site-container-full {
  max-width: 100%;
}

.o-site-section {
  padding-top: var(--space-8x);
}

.o-site-section-large {
  padding-top: var(--space-10x);
}

.o-site-section, .o-site-section-large {
  position: relative;
}

@media (width < 768px) {
  .o-site-section, .o-site-section-large {
    padding-top: var(--space-6x);
  }
}

.o-content-section {
  padding-top: var(--space-4x);
  position: relative;
}

@media (width < 768px) {
  .o-content-section {
    padding-top: 1.5rem;
  }
}

@media (width < 1024px) {
  .o-filter-section {
    padding-top: var(--space-2x);
  }
}

@media (width < 768px) {
  .o-filter-section {
    padding-top: 1.5rem;
  }
}

.o-site-grid {
  grid-template-rows: 1fr auto;
  height: 100%;
  min-height: 100vh;
  display: grid;
}

.o-title-grid {
  grid-template-columns: 1fr 40%;
  display: grid;
}

@media (width < 1536px) {
  .o-title-grid {
    grid-template-columns: 1fr 55%;
  }
}

@media (width < 768px) {
  .o-title-grid {
    grid-template-columns: 1fr;
  }
}

.o-frame {
  display: block;
  position: relative;
  overflow: hidden;
}

.o-frame > img, .o-frame > picture, .o-frame > video, .o-frame video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.c-text-title {
  font: var(--font-weight-regular) var(--text-5x) var(--font-family-sans-serif);
  font-optical-sizing: auto;
  letter-spacing: -.1rem;
  line-height: 1.1;
}

@media (width < 768px) {
  .c-text-title {
    font-size: var(--text-4x);
  }
}

@media (width < 480px) {
  .c-text-title {
    font-size: var(--text-3x);
  }
}

.c-text-lead {
  font: var(--text-4x) var(--font-family-serif);
  letter-spacing: -.03rem;
  line-height: 1.2;
}

@media (width < 1024px) {
  .c-text-lead {
    font-size: var(--text-3x);
  }
}

@media (width < 768px) {
  .c-text-lead {
    font-size: var(--text-2x);
    line-height: 1.1;
  }
}

.c-text-body {
  font: var(--text-1x) var(--font-family-sans-serif);
  font-optical-sizing: auto;
  letter-spacing: -.02rem;
  line-height: 1.75rem;
}

@media (width < 768px) {
  .c-text-body {
    font-size: 1rem;
    line-height: 1.4rem;
  }
}

@media (width < 480px) {
  .c-text-body {
    line-height: var(--line-height-body);
  }
}

.c-text-header {
  font: var(--font-weight-regular) var(--text-2x) var(--font-family-sans-serif);
  letter-spacing: -.02rem;
}

.c-page-title {
  font-weight: 400;
}

.c-page-synopsis {
  font: var(--text-1x) var(--font-family-sans-serif);
  letter-spacing: -.02rem;
  line-height: 1.6rem;
}

@media (width < 768px) {
  .c-page-synopsis {
    padding-top: var(--space-3x);
  }
}

.c-bullet {
  vertical-align: text-bottom;
  background-color: var(--color-brand-neutral);
  border-radius: 50%;
  width: 1em;
  height: 1em;
  display: inline-block;
}

.c-arrow-mask {
  height: 1em;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.c-arrow {
  white-space: nowrap;
  display: inline-block;
}

@keyframes arrow-carousel {
  0% {
    transform: translateX(0);
  }

  49% {
    transform: translateX(1.2ch);
  }

  50% {
    opacity: 0;
    transform: translateX(-1.2ch);
  }

  51% {
    opacity: 1;
    transform: translateX(-1.2ch);
  }

  100% {
    transform: translateX(0);
  }
}

.c-link-default {
  position: relative;
}

.c-link-default:before {
  background-color: var(--color-brand-primary);
  visibility: hidden;
  content: "";
  width: 100%;
  height: 1px;
  transition: all .1s ease-in;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
}

.c-link-default:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.c-link-default:hover + .c-arrow-mask .c-arrow {
  animation: .4s cubic-bezier(.4, 0, .2, 1) forwards arrow-carousel;
}

.c-link-default.is-selected:before {
  visibility: visible;
  transform: scaleX(1);
}

.c-link-default.is-inverted {
  color: #fff;
}

.c-link-default.is-inverted:before {
  background-color: #fff;
}

.c-link-default.is-inverted:hover {
  cursor: var(--cursor-inverted), auto;
}

.c-button {
  font-size: clamp(var(--text-1x), 2.5vw, var(--text-2x));
  letter-spacing: -.02rem;
}

.c-header {
  width: 100%;
  height: var(--header-height);
  z-index: var(--z-header);
  will-change: transform;
  visibility: hidden;
  transition: transform var(--header-sticky-timing) ease-in,
                visibility 0s var(--header-sticky-timing) ease;
  background-color: #0000;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(0, -100%, 0);
}

@media (width < 480px) {
  .c-header {
    height: var(--header-height-sm);
  }
}

.c-header.is-opaque {
  background-color: #fff;
}

.c-header.is-visible {
  visibility: visible;
  transition: transform var(--header-sticky-timing) ease-in,
                    visibility var(--header-sticky-timing) ease,
                    background-color var(--header-fade-timing) ease;
  transform: translate3d(0, 0, 0);
}

.c-header-grid {
  padding-top: var(--space-1x);
  z-index: var(--z-header-grid);
  grid-template-columns: 85px 1fr 85px;
  display: grid;
}

.c-header-logo {
  visibility: visible;
  width: 85px;
  height: 25px;
  transition-delay: .12s;
}

@media (width < 480px) {
  .c-header-logo {
    width: 68px;
    height: 20px;
  }
}

.c-header-logo .fill-default {
  fill: var(--color-brand-primary);
}

.c-header-logo .fill-white {
  fill: #fff;
}

.c-header-nav {
  justify-content: flex-end;
  gap: var(--space-2x);
  font-size: var(--text-2x);
  letter-spacing: -.02rem;
  margin-top: -.2rem;
  margin-left: auto;
  display: flex;
}

@media (width < 1280px) {
  .c-header-nav {
    font-size: var(--space-1x);
    letter-spacing: -.01rem;
    margin-top: .1rem;
  }
}

@media (width < 768px) {
  .c-header-nav {
    display: none;
  }
}

.c-hamburger {
  margin-left: auto;
}

@media (width < 480px) {
  .c-hamburger {
    padding-top: -2px;
  }
}

.c-nav-pane {
  background-color: var(--color-brand-primary);
  visibility: hidden;
  min-width: 100%;
  height: 100dvh;
  z-index: var(--z-nav-pane);
  cursor: var(--cursor-inverted), auto;
  will-change: transform;
  transition-property: transform, height, top;
  transition-duration: var(--nav-pane-slide-timing);
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  inset: -100dvh 0 0;
}

.c-nav-pane.is-active {
  transition-delay: .1s;
  transform: translateY(100%);
}

.c-nav-pane-grid {
  grid-gap: 0;
  grid-template-rows: 1fr 2fr;
  grid-template-columns: 1fr;
  height: 100svh;
  display: grid;
}

@media (width < 480px) {
  .c-nav-pane-grid {
    grid-template-rows: 1fr 7%;
  }
}

@media (width < 1024px) and (orientation: landscape) {
  .c-nav-pane-grid {
    grid-template-rows: 1fr 5%;
  }
}

.c-nav-pane-logo {
  width: 100%;
  padding-top: var(--space-3x);
  padding-bottom: var(--space-2x);
  align-self: end;
}

@media (width < 1280px) {
  .c-nav-pane-logo {
    padding-bottom: var(--space-1x);
  }
}

@media (width < 480px) {
  .c-nav-pane-logo img {
    display: none;
  }
}

@media (width < 1024px) and (orientation: landscape) {
  .c-nav-pane-logo img {
    display: none;
  }
}

@media (height < 730px) and (orientation: landscape) {
  .c-nav-pane-logo img {
    display: none;
  }
}

.c-nav-grid {
  grid-template-columns: 1fr 30%;
  padding-top: 11vh;
  display: grid;
}

@media (width < 768px) {
  .c-nav-grid {
    grid-template-columns: 1fr;
  }

  .c-nav-grid .c-nav-contact {
    order: 2;
  }

  .c-nav-grid .c-nav-links {
    order: 1;
  }
}

@media (height < 820px) {
  .c-nav-grid {
    padding-top: 9vh;
  }
}

@media (width < 1024px) and (orientation: landscape) {
  .c-nav-grid {
    grid-template-columns: 1fr 30%;
    padding-top: 7vh;
  }

  .c-nav-grid .c-nav-contact {
    order: 1;
  }

  .c-nav-grid .c-nav-links {
    order: 2;
  }
}

.c-nav-links {
  padding-left: var(--space-6x);
  font-weight: var(--font-weight-light);
  font-size: var(--text-4x);
  letter-spacing: -.01rem;
  color: #fff;
}

@media (width < 1280px) {
  .c-nav-links {
    padding-left: var(--space-4x);
  }
}

@media (width < 1024px) {
  .c-nav-links {
    padding-left: 0;
    padding-top: var(--space-2x);
    font-weight: var(--font-weight-regular);
  }
}

.c-nav-links li {
  padding-top: .4rem;
}

.c-nav-links li:first-child {
  padding-top: 0;
}

.c-nav-links .c-link-default:before {
  bottom: .1em;
}

.c-nav-contact {
  color: #fff;
  padding-top: 2px;
}

@media (width < 1024px) {
  .c-nav-contact {
    padding-top: var(--space-2x);
  }
}

@media (width < 480px) {
  .c-nav-contact {
    align-self: end;
  }
}

.c-contact-lead {
  font-size: var(--text-3x);
}

@media (width < 768px) {
  .c-contact-lead {
    display: none;
  }
}

@media (width < 1024px) and (orientation: landscape) {
  .c-contact-lead {
    font-size: var(--text-2x);
    display: block;
  }
}

.c-contact-body {
  padding-top: var(--space-2x);
  font-size: var(--text-1x);
  line-height: 1.8rem;
}

@media (width < 768px) {
  .c-contact-body {
    padding-top: 0;
  }
}

@media (width < 1024px) and (orientation: landscape) {
  .c-contact-body {
    padding-top: var(--space-3x);
  }
}

.c-contact-body p:nth-child(2) {
  padding-top: var(--space-1x);
}

@media (width < 1280px) {
  .c-contact-body p:nth-child(2) {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.c-contact-social {
  padding-top: var(--space-1x);
}

.c-contact-social img {
  max-width: 28px;
  display: inline-block;
}

@media (width < 1280px) {
  .c-contact-social img {
    max-width: 25px;
  }
}

@media (width < 1024px) {
  .c-contact-social img {
    max-width: 20px;
  }
}

.c-contact-social a {
  margin-right: .8rem;
}

.c-footer-grid {
  grid-column-gap: 10px;
  padding-top: var(--space-7x);
  padding-bottom: var(--space-1x);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

@media (width < 768px) {
  .c-footer-grid {
    padding-top: var(--space-6x);
  }
}

.c-footer-social img {
  max-width: 28px;
  display: inline-block;
}

@media (width < 768px) {
  .c-footer-social img {
    max-width: 25px;
  }
}

.c-footer-social a {
  margin-right: .9rem;
}

.c-footer-copyright {
  text-align: left;
  letter-spacing: -.02rem;
  justify-content: flex-end;
  align-items: center;
  font-size: 1rem;
  display: flex;
}

.c-frame-thumb {
  aspect-ratio: 2000 / 1236;
}

.c-frame-principal {
  aspect-ratio: 1920 / 1275;
}

.c-frame-news {
  aspect-ratio: 768 / 510;
}

.c-frame-project-hero {
  aspect-ratio: 2560 / 1440;
}

.c-frame-project-l {
  aspect-ratio: 3000 / 1688;
}

.c-frame-project-p {
  aspect-ratio: 2354 / 2770;
}

.c-frame-project-v {
  aspect-ratio: 2770 / 1840;
}

.c-frame-project-v-paperssing {
  aspect-ratio: 1920 / 1080;
}

.c-thumb-unit {
  position: relative;
}

.c-thumb-unit .c-frame-thumb {
  will-change: opacity;
  transition-property: opacity;
  transition-duration: var(--fadeout-timing);
  transition-timing-function: ease-out;
}

@media (width >= 768px) {
  .c-thumb-unit .c-frame-thumb:hover {
    opacity: var(--fadeout-level);
  }
}

.c-thumb-unit figcaption {
  padding-top: .8rem;
  padding-bottom: var(--space-1x);
}

.c-thumb-name {
  font-size: var(--text-1x);
  letter-spacing: -.02rem;
  line-height: 1.8rem;
  display: block;
}

.c-thumb-type {
  letter-spacing: -.02rem;
  color: var(--color-brand-light);
  padding-top: .2rem;
  font-size: 1rem;
  display: block;
}

.c-thumb-wip {
  position: relative;
}

.c-thumb-wip:before {
  width: 100%;
  height: 100%;
  color: var(--color-brand-offwhite);
  content: "Documentation in progress";
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-wip);
  will-change: opacity;
  transition-property: opacity;
  transition-duration: var(--fadeout-timing);
  background-color: #0000;
  font-size: 1rem;
  transition-timing-function: linear;
  position: absolute;
  top: 1rem;
  left: 0;
}

.c-thumb-wip:hover:before {
  opacity: 1;
}

.c-thumb-wip.in-black:before {
  color: var(--color-brand-neutral);
}

.c-thumb-wip figcaption {
  padding-top: .8rem;
  padding-bottom: var(--space-1x);
}

@media (width < 1024px) {
  .c-expand-head:after {
    float: right;
    font-weight: var(--font-weight-light);
    font-size: var(--text-3x);
    content: "+";
    padding-left: .2rem;
    line-height: 1rem;
  }
}

@media (width < 1024px) {
  .c-expand-head.active:after {
    content: "−";
  }
}

.c-expand-head:hover {
  cursor: var(--cursor-default), auto;
}

@media (width < 1024px) {
  .c-expand-body {
    will-change: max-height;
    max-height: 0;
    transition: max-height var(--header-fade-timing) ease-out;
    overflow: hidden;
  }
}

.c-filter-grid {
  grid-column-gap: 0;
  grid-template-columns: 3rem 1fr;
  display: grid;
}

@media (width < 1024px) {
  .c-filter-grid {
    grid-template-columns: 1fr;
  }
}

.c-filter-expand-head {
  font-size: clamp(1rem, 2vw, var(--text-1x));
  align-items: center;
  margin-bottom: clamp(.1rem, 2vw, .2rem);
  display: flex;
}

@media (width < 1024px) {
  .c-filter-expand-head {
    font-size: var(--text-2x);
  }
}

@media (width < 1024px) {
  .c-filter-expand-head.active .c-bullet {
    background-color: #000;
    border-radius: 50%;
  }
}

@media (width < 1320px) {
  .c-filter-expand-head .c-bullet {
    align-self: start;
    margin-top: .25rem;
  }
}

@media (width < 1024px) {
  .c-filter-expand-head .c-bullet {
    vertical-align: middle;
    background-color: #0000;
    border: 1px solid #000;
    border-radius: 50%;
    align-self: auto;
    margin-top: .3rem;
    margin-right: 1rem;
  }
}

.c-filter-header {
  float: left;
  font-size: var(--text-2x);
  letter-spacing: -.02rem;
  padding-top: .3rem;
  display: none;
}

@media (width < 1024px) {
  .c-filter-header {
    display: inline;
  }
}

@media (width < 1024px) {
  .c-filter-expand-body {
    max-height: 0;
    margin-bottom: var(--space-1x);
    will-change: max-height;
    transition: max-height var(--fadeout-timing) ease-out;
    overflow: hidden;
  }
}

.c-filter-expand-body li {
  margin-right: var(--text-2x);
  font-size: clamp(var(--text-1x), 2.5vw, var(--text-2x));
  letter-spacing: -.02rem;
  display: inline-block;
}

@media (width < 1320px) {
  .c-filter-expand-body li {
    margin-bottom: .6rem;
  }
}

@media (width < 1024px) {
  .c-filter-expand-body li {
    font-size: var(--text-2x);
    margin-bottom: .2rem;
    margin-right: 0;
    display: block;
  }
}

@media (width < 1024px) {
  .c-filter-expand-body li:first-child {
    padding-top: 1rem;
  }
}

.c-filter-expand-body .is-disabled {
  color: var(--color-brand-light);
}

#svg-ht {
  transform-box: fill-box;
  transform-origin: 50%;
  animation-fill-mode: forwards;
}

.ht-hover-in {
  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  animation-name: ht_hover_in;
  animation-duration: .12s;
  animation-delay: .15s;
  animation-fill-mode: forwards;
}

@keyframes ht_hover_in {
  100% {
    fill: #fff;
    transform: rotate(135deg);
  }
}

.ht-hover-out {
  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  animation-name: ht_hover_out;
  animation-duration: .12s;
  animation-fill-mode: forwards;
  transform: rotate(135deg);
}

@keyframes ht_hover_out {
  100% {
    fill: #db1d21;
    transform: rotate(0);
  }
}

#svg-hm {
  transform-box: fill-box;
  transform-origin: 50%;
  animation-fill-mode: forwards;
}

.hm-show {
  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  animation-name: hm_show;
  animation-duration: .12s;
  animation-delay: .1s;
  animation-fill-mode: forwards;
}

@keyframes hm_show {
  100% {
    transform: translateY(5.76px);
  }
}

.hm-hover-in {
  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  animation-name: hm_hover_in_1, hm_hover_in_2;
  animation-duration: .12s, .12s;
  animation-delay: 0s, .15s;
  animation-fill-mode: forwards;
  transform: translateY(5.76px);
}

@keyframes hm_hover_in_1 {
  100% {
    transform: translateY(0);
  }
}

@keyframes hm_hover_in_2 {
  100% {
    fill: #fff;
    transform: rotate(135deg);
  }
}

.hm-hover-out {
  fill: #fff;
  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  animation-name: hm_hover_out_1, hm_hover_out_2;
  animation-duration: .12s, .12s;
  animation-delay: 0s, .15s;
  animation-fill-mode: forwards;
  transform: rotate(135deg);
}

@keyframes hm_hover_out_1 {
  100% {
    fill: #db1d21;
    transform: rotate(0);
  }
}

@keyframes hm_hover_out_2 {
  100% {
    transform: translateY(5.76px);
  }
}

#svg-hb {
  transform-box: fill-box;
  transform-origin: 50%;
  animation-fill-mode: forwards;
}

.hb-show {
  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  animation-name: hb_show;
  animation-duration: .12s;
  animation-delay: .1s;
  animation-fill-mode: forwards;
}

@keyframes hb_show {
  100% {
    transform: translateY(-5.76px);
  }
}

.hb-hover-in {
  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  animation-name: hb_hover_in_1, hb_hover_in_2;
  animation-duration: .12s, .12s;
  animation-delay: 0s, .15s;
  animation-fill-mode: forwards;
  transform: translateY(-5.76px);
}

@keyframes hb_hover_in_1 {
  100% {
    transform: translateY(0);
  }
}

@keyframes hb_hover_in_2 {
  100% {
    fill: #fff;
    transform: rotate(45deg);
  }
}

.hb-hover-out {
  fill: #fff;
  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  animation-name: hb_hover_out_1, hb_hover_out_2;
  animation-duration: .12s, .12s;
  animation-delay: 0s, .15s;
  animation-fill-mode: forwards;
  transform: rotate(45deg);
}

@keyframes hb_hover_out_1 {
  100% {
    fill: #db1d21;
    transform: rotate(0);
  }
}

@keyframes hb_hover_out_2 {
  100% {
    transform: translateY(-5.76px);
  }
}

.index-lead {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.index-lead .c-text-lead {
  font-size: var(--text-3x);
}

@media (width < 768px) {
  .index-lead .c-text-lead {
    font-size: var(--text-2x);
    line-height: 1.15;
  }
}

@media (width < 480px) {
  .index-lead .c-text-lead {
    font-size: var(--text-1x);
    line-height: 1.45rem;
  }
}

.index-lead > div {
  padding-top: var(--space-2x);
}

.index-overview .c-text-title {
  font-weight: var(--font-weight-medium);
}

@media (width < 480px) {
  .index-overview .c-text-title {
    font-weight: var(--font-weight-regular);
  }
}

.index-overview .c-text-lead {
  padding-top: 1rem;
}

@media (width < 768px) {
  .index-overview .c-text-lead {
    padding-top: var(--space-3x);
  }
}

.index-reachout {
  padding-top: var(--space-6x);
}

@media (width < 768px) {
  .index-reachout {
    padding-top: var(--space-5x);
  }
}

.index-showcase {
  padding-top: var(--space-7x);
}

@media (width < 768px) {
  .index-showcase {
    padding-top: var(--space-4x);
  }
}

.showcase-header {
  align-items: center;
  display: flex;
}

.showcase-header .c-bullet {
  margin-right: var(--text-1x);
  font-size: clamp(1rem, 2vw, var(--text-1x));
}

.showcase-title {
  font-size: clamp(var(--text-1x), 2.5vw, var(--text-2x));
  letter-spacing: -.02rem;
}

@media (width < 768px) {
  .showcase-title {
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
  }
}

.showcase-grid {
  grid-column-gap: var(--space-2x);
  grid-row-gap: var(--space-3x);
  padding-top: var(--text-1x);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (width < 1024px) {
  .showcase-grid {
    grid-column-gap: var(--space-1x);
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width < 768px) {
  .showcase-grid {
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr;
  }
}

.showcase-grid .wide-2 {
  grid-column: span 2;
}

@media (width < 1024px) {
  .showcase-grid .wide-2 {
    grid-column: span 1;
  }
}

.index-upcoming {
  padding-top: var(--space-3x);
}

.studio-section {
  margin-top: var(--space-6x);
  padding-top: 0;
}

@media (width < 1280px) {
  .studio-section {
    margin-top: var(--space-4x);
    border-top: 1px solid #333;
    padding-top: .7rem;
  }
}

.studio-section.has-line {
  padding-top: var(--space-1x);
  border-top: 1px solid #333;
}

@media (width < 768px) {
  .studio-overview {
    padding-top: var(--space-3x);
  }
}

.overview-1 {
  padding-right: 20%;
  display: inline-block;
  position: relative;
}

@media (width < 1536px) {
  .overview-1 {
    padding-right: 0;
  }
}

.overview-2 {
  font: var(--font-weight-medium) var(--text-2x) var(--font-family-sans-serif);
  etter-spacing: -.02rem;
  display: none;
}

@media (width < 768px) {
  .overview-2 {
    padding-top: 2rem;
    display: block;
  }
}

.overview-3 {
  text-indent: 6rem;
  padding: 0 20% 0 10rem;
  display: inline-block;
  position: relative;
}

@media (width < 1536px) {
  .overview-3 {
    padding: 0;
  }
}

@media (width < 1024px) {
  .overview-3 {
    text-indent: 4rem;
  }
}

@media (width < 768px) {
  .overview-3 {
    text-indent: 0;
    padding-top: 1rem;
    display: block;
  }
}

.studio-principal {
  max-width: 960px;
  padding-top: var(--space-6x);
  margin-inline: auto;
}

.principal-grid {
  grid-column-gap: var(--space-2x);
  padding-top: var(--space-1x);
  grid-template-columns: 50% 1fr;
  grid-template-areas: "pb pp";
  display: grid;
}

@media (width < 1024px) {
  .principal-grid {
    grid-column-gap: 0;
    grid-row-gap: var(--space-1x);
    grid-template-columns: 1fr;
    grid-template-areas: "pp"
                         "pb";
  }
}

.principal-bio {
  grid-area: pb;
}

.principal-portrait {
  grid-area: pp;
}

.bio-body {
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
  display: flex;
}

@media (width < 1024px) {
  .bio-body {
    padding-top: var(--space-1x);
  }
}

.bio-body p {
  letter-spacing: -.02rem;
  text-indent: 2rem;
}

.bio-body p:first-child {
  text-indent: 0;
}

.bio-social {
  margin-top: auto;
}

.bio-social .c-bullet {
  margin-bottom: .2em;
  margin-right: 1em;
}

.bio-social ul, .bio-social li {
  display: inline-block;
}

.bio-social ul {
  padding-top: var(--space-2x);
}

.bio-social li {
  padding-right: 1rem;
}

.services {
  padding-top: var(--space-1x);
}

.services .c-bullet {
  width: .6em;
  height: .6em;
  margin-bottom: .35em;
  margin-left: .15em;
  margin-right: .15em;
}

.services .c-bullet:first-child {
  margin-left: 0;
}

.services-list {
  padding-top: var(--space-1x);
  display: none;
}

.services-list .c-bullet {
  width: .7em;
  height: .7em;
  margin-bottom: .3em;
  margin-right: .3em;
}

.recognitions-grid {
  grid-column-gap: 40px;
  grid-template-columns: 30% repeat(2, 1fr);
  grid-template-areas: "hr aw jr"
                       ". ft ft";
  display: grid;
}

@media (width < 1536px) {
  .recognitions-grid {
    grid-template-columns: 20% repeat(2, 1fr);
  }
}

@media (width < 1280px) {
  .recognitions-grid {
    grid-row-gap: var(--space-1x);
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "hr ."
                         "aw jr"
                         "ft ft";
  }
}

@media (width < 1024px) {
  .recognitions-grid {
    grid-column-gap: 40px;
    grid-row-gap: 0;
    grid-template-columns: 1fr;
    grid-template-areas: "hr"
                         "aw"
                         "jr"
                         "ft";
  }
}

.grid-header {
  grid-area: hr;
}

.grid-awards {
  padding-right: var(--space-2x);
  grid-area: aw;
}

@media (width < 1536px) {
  .grid-awards {
    padding-right: 0;
  }
}

@media (width < 1024px) {
  .grid-awards {
    padding-top: var(--space-1x);
    padding-right: 0;
  }
}

.grid-features {
  grid-area: ft;
}

.grid-jury {
  grid-area: jr;
}

:is(.grid-awards, .grid-features, .grid-jury) .c-expand-body {
  padding-top: var(--space-1x);
}

@media (width < 1024px) {
  :is(.grid-awards, .grid-features, .grid-jury) .c-expand-body {
    padding-top: .4rem;
  }
}

:is(.grid-awards, .grid-features, .grid-jury) .c-expand-body.is-expanded {
  margin-top: .8rem;
  margin-bottom: var(--space-2x);
  padding-top: 0;
}

.list-only-margin {
  margin-bottom: var(--space-3x);
}

@media (width < 1280px) {
  .list-only-margin {
    margin-bottom: var(--space-2x);
  }
}

@media (width < 1024px) {
  .list-only-margin {
    margin-bottom: 0;
  }
}

.awards li {
  border-bottom: 1px solid #333;
  margin-bottom: .5rem;
  padding-bottom: .3rem;
}

.awards .count {
  float: right;
  margin-left: 10px;
  font-size: 1rem;
  display: inline-block;
}

.awards .c-bullet {
  margin-bottom: .1em;
}

.features li {
  align-items: baseline;
  display: flex;
}

.features li:after {
  content: "";
  border-bottom: 1px solid #333;
  flex: 1;
  order: 2;
  margin-bottom: 3px;
}

.features .fdate {
  order: 3;
  font-size: 1rem;
  display: block;
}

.contact {
  padding-top: var(--space-1x);
}

.news-grid {
  grid-column-gap: 3rem;
  grid-row-gap: var(--space-3x);
  padding-top: var(--space-3x);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  position: relative;
}

@media (width < 1280px) {
  .news-grid {
    grid-column-gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width < 1024px) {
  .news-grid {
    padding-top: var(--space-2x);
  }
}

@media (width < 768px) {
  .news-grid {
    grid-column-gap: 0;
    grid-template-columns: 1fr;
    padding-top: 2rem;
  }
}

.news-title {
  font-size: var(--text-1x);
  letter-spacing: -.02rem;
  padding-top: 1rem;
  padding-bottom: .7rem;
}

@media (width < 1024px) {
  .news-title {
    font-size: 1rem;
  }
}

.news-title + p {
  letter-spacing: -.02rem;
}

.news-meta {
  font-size: var(--text-sub1x);
  text-transform: uppercase;
  color: var(--color-brand-light);
  padding-top: 1rem;
  display: inline-block;
}

.news-link {
  will-change: opacity;
}

@media (width >= 768px) {
  .news-link:hover {
    opacity: .6;
    transition-property: opacity;
    transition-duration: var(--fadeout-timing);
    transition-timing-function: ease-out;
  }
}

.news-link:hover .c-arrow-mask .c-arrow {
  animation: .4s cubic-bezier(.4, 0, .2, 1) forwards arrow-carousel;
}

.work-outter-grid {
  grid-row-gap: var(--space-4x);
  padding: 0;
  padding-top: var(--space-3x);
  grid-template-rows: 1fr auto;
  align-items: end;
  margin: 0;
  display: grid;
}

@media (width < 1024px) {
  .work-outter-grid {
    padding-top: var(--space-2x);
  }
}

@media (width < 768px) {
  .work-outter-grid {
    grid-row-gap: var(--space-3x);
    grid-template-columns: 1fr;
    padding-top: 2rem;
  }
}

.work-inner-grid {
  grid-column-gap: var(--space-1x);
  grid-row-gap: var(--space-3x);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (width < 1024px) {
  .work-inner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width < 768px) {
  .work-inner-grid {
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr;
  }
}

.project-meta-grid {
  grid-column-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

@media (width < 1024px) {
  .project-meta-grid {
    grid-column-gap: 0;
    grid-template-columns: 1fr;
  }
}

.project-meta-grid .c-expand-head {
  font-size: var(--text-1x);
  letter-spacing: -.02rem;
  border-top: 1px solid #333;
  margin-top: .1rem;
  padding-top: .5rem;
}

@media (width < 768px) {
  .project-meta-grid .c-expand-head {
    font-size: 1rem;
  }
}

.project-meta-grid .c-expand-head:after {
  float: right;
  font-weight: var(--font-weight-light);
  font-size: var(--text-2x);
  content: "+";
  padding-left: .2rem;
  line-height: 1.25rem;
}

.project-meta-grid .c-expand-head.active:after {
  content: "−";
}

.project-meta-grid .c-expand-body {
  font-size: var(--text-1x);
  letter-spacing: -.02rem;
  will-change: max-height;
  max-height: 0;
  transition: max-height var(--header-fade-timing) ease-out;
  margin-top: .5rem;
  margin-bottom: 0;
  overflow: hidden;
}

@media (width < 768px) {
  .project-meta-grid .c-expand-body {
    font-size: 1rem;
  }
}

.project-meta-grid .c-expand-body.is-expanded {
  margin-top: .5rem;
  margin-bottom: 1.5rem;
}

.project-title {
  font-size: var(--text-3x);
  letter-spacing: -.02rem;
  padding-right: 2rem;
}

@media (width < 480px) {
  .project-title {
    font-size: var(--text-2x);
  }
}

@media (width < 1024px) {
  .project-meta {
    padding-top: var(--space-3x);
  }
}

.project-meta h2:first-of-type {
  margin-top: var(--space-2x);
}

.project-content {
  margin-bottom: var(--space-4x);
}

@media (width < 1280px) {
  .project-content {
    margin-bottom: var(--space-3x);
  }
}

@media (width < 768px) {
  .project-content {
    padding-top: var(--space-3x);
  }
}

.text-unit {
  grid-column-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 5rem;
  margin-bottom: 4rem;
  display: grid;
}

@media (width < 1024px) {
  .text-unit {
    grid-column-gap: 0;
    grid-template-columns: 1fr;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
}

.text-unit p {
  grid-column: 2 / 3;
  margin: 0;
}

.text-unit p + p {
  text-indent: 4rem;
}

.image-unit {
  margin: 0 auto 1rem;
}

.image-unit:last-child {
  margin-bottom: 0;
}

.image-unit.stacked {
  grid-column-gap: 1rem;
  grid-row-gap: 0;
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

@media (width < 768px) {
  .image-unit.stacked {
    grid-column-gap: 0;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }
}

.view-work {
  margin-top: var(--space-4x);
}

@media (width < 768px) {
  .u-md-block {
    display: block;
  }
}

@media (width < 768px) {
  .u-md-hidden {
    display: none;
  }
}

@media (width < 1024px) {
  .u-lg-block {
    display: block;
  }
}

.u-lg-only {
  display: none;
}

@media (width < 1024px) {
  .u-lg-only {
    display: block;
  }
}

.u-inline {
  display: inline;
}

.u-visible {
  visibility: visible;
}

.u-invisible {
  visibility: hidden;
}

.u-hidden {
  display: none;
}

.u-center {
  text-align: center;
  align-items: center;
}

.u-clearfix:after {
  clear: both;
  content: "";
  display: table;
}

.u-overflow-hidden {
  overflow: hidden;
}

@media (width < 1024px) {
  .u-lg-text-left {
    text-align: left;
  }
}

.u-text-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  -webkit-text-decoration-color: var(--color-brand-primary);
  text-decoration-color: var(--color-brand-primary);
  text-underline-offset: -.1em;
}

.u-fadeout {
  opacity: 0;
  transition-duration: var(--fadeout-timing);
}

.u-delay-250 {
  transition-delay: .25s;
}

.u-cursor-default {
  cursor: var(--cursor-default), auto;
}

.u-cursor-inverted {
  cursor: var(--cursor-inverted), auto;
}

.u-reveal, .u-grid-reveal {
  will-change: opacity, transform;
  opacity: 0;
  transform: translateY(var(--reveal-depth));
}

:is(.u-reveal, .u-grid-reveal).is-revealed {
  opacity: 1;
  transition: all var(--reveal-timing) cubic-bezier(.25, .46, .45, .94);
  transform: translateY(0);
}

.u-secure {
  direction: rtl;
  unicode-bidi: bidi-override;
}

.u-secure span {
  display: none;
}