/*** The new CSS Reset - version 1.4.4 (last updated 22.12.2021) ***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

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

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

@font-face {
  font-family: "GT Super Text";
  src: url("webfonts/GT-Super-Text-Book.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "GT Super Text";
  src: url("webfonts/GT-Super-Text-Book-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Corporate S";
  src: url("webfonts/corporate-s.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
html {
  scroll-behavior: smooth;
  --background-color: #fff;
  --gap: 18px;
  --aspect-ratio: 4 / 3;
  --columns: 9;
}
html.no-smooth {
  scroll-behavior: auto;
}
@media screen and (min-width: 1600px) {
  html {
    --gap: 24px;
  }
}
@media screen and (max-width: 699px) {
  html {
    font-size: 14px;
    --columns: 1;
    --gap: 14px;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "GT Super Text", serif;
  line-height: 1.31;
  scroll-behavior: smooth;
  margin-top: 80px;
  background-color: var(--background-color);
}
body.no-overflow {
  overflow: hidden;
  height: 100%;
}
@media screen and (max-width: 699px) {
  body {
    margin-top: 60px;
  }
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

video {
  width: 100%;
}

#skip-to-content-link {
  position: fixed;
  top: 0;
  background: black;
  color: white;
  height: 30px;
  left: 50%;
  padding: 8px;
  transform: translate(-50%, -100%);
  transition: transform 0.3s;
  z-index: 100;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#skip-to-content-link:focus {
  transform: translate(-50%, 0);
}

.max-width {
  width: 80%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1024px) {
  .max-width {
    width: 85%;
  }
}
@media (max-width: 800px) {
  .max-width {
    width: 90%;
  }
}

.serif {
  font-family: "GT Super Text", serif;
}

.sans-serif {
  font-family: "Corporate S", sans-serif;
}

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

.uppercase {
  text-transform: uppercase;
}

.p-with-margin p:not(:last-child) {
  margin-bottom: 1.2em;
}

.font-size-10 {
  font-size: 0.833rem;
}

.font-size-12 {
  font-size: 1rem;
}

.font-size-13 {
  font-size: 1.08rem;
}

.font-size-16 {
  font-size: 1.33rem;
}

.font-size-22, .block-imageText h3 {
  font-size: 1.83rem;
}

.font-size-24 {
  font-size: 2rem;
}
@media screen and (max-width: 699px) {
  .font-size-24 {
    font-size: 1.6rem;
  }
}

.font-size-32 {
  font-size: 2.66rem;
}

.font-size-43 {
  font-size: 3.58rem;
}

.line-height-1 {
  line-height: 1;
}

.hidden {
  display: none;
}

@media screen and (max-width: 699px) {
  .smartphone-hidden {
    display: none !important;
  }
}

@media screen and (max-width: 699px) {
  .smartphone-block {
    display: block !important;
  }
}

a {
  cursor: revert;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease-out;
}
a:not(.underline-on-children):hover {
  text-decoration-color: inherit;
}
a.underline-on-children {
  text-decoration: none;
  transition: none;
}
a.underline-on-children .underlined-on-parent-hover {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.04em;
  transition: text-decoration-color 0.2s ease-out;
}
a.underline-on-children:hover .underlined-on-parent-hover {
  text-decoration-color: inherit;
}

.underlined-links a {
  text-decoration: underline;
}

#main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 11;
  background-color: var(--background-color);
  border-bottom: 1px solid black;
  transition: transform 0.4s ease-out;
  padding: 10px 0;
}
#main-header .flex {
  justify-content: space-between;
  gap: 1rem;
}
.nav-up #main-header {
  transform: translateY(-100%);
}
#main-header nav a[aria-current=page] {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

#main-footer {
  padding: 3em 0;
  border-top: 1px solid black;
  --columns: 9;
}
@media screen and (max-width: 699px) {
  #main-footer {
    --columns: 1;
  }
}
#main-footer nav {
  padding-left: var(--gap);
  grid-column-end: span 2;
}
#main-footer .studios {
  grid-column-end: span 3;
}
#main-footer .studios .list li {
  margin-bottom: 1.1em;
}
#main-footer .channels {
  margin-left: 0;
  gap: 1em;
}
#main-footer .channels img {
  height: 1.3em;
}
#main-footer .contact {
  grid-column-start: 6;
  grid-column-end: -1;
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: space-between;
}
#main-footer address {
  margin-top: 2.1em;
}
#main-footer .credits {
  justify-content: end;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3em;
}
@media screen and (max-width: 699px) {
  #main-footer .main-grid .studios, #main-footer .main-grid .contact {
    grid-column-start: 1;
    grid-column-end: -1;
  }
  #main-footer .main-grid address {
    margin-top: 0;
  }
}

.flex {
  display: flex;
}
.flex.with-gap {
  gap: var(--gap);
}
.flex.align-center {
  align-items: center;
}
.flex.justify-center {
  justify-content: center;
}

.short-description .main-grid {
  padding: var(--gap);
}
.short-description .logo {
  grid-column-end: span 3;
  font-size: clamp(3vw, 3.58rem, 5vw);
}
@media screen and (max-width: 699px) {
  .short-description .logo {
    font-size: clamp(5vw, 3.58rem, 15vw);
  }
}
.short-description .description {
  grid-column-end: span 5;
  max-width: 60ch;
}

.fixed-ratio-media img, .fixed-ratio-media video {
  aspect-ratio: var(--aspect-ratio);
  object-fit: cover;
}
.fixed-ratio-media.portrait:not(.showSmallerWithBackground) {
  --aspect-ratio: 3 / 4;
}

.showSmallerWithBackground picture {
  display: block;
  aspect-ratio: var(--aspect-ratio);
  position: relative;
}
.showSmallerWithBackground .smaller-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.showSmallerWithBackground .smaller-wrapper img, .showSmallerWithBackground .smaller-wrapper video {
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.main-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--gap);
}

.team-grid {
  --columns: 3;
  margin-top: 3rem;
  row-gap: 2.4rem;
}
@media screen and (max-width: 1023px) {
  .team-grid {
    --columns: 2;
  }
}
@media screen and (max-width: 699px) {
  .team-grid {
    --columns: 1;
  }
}
.team-grid article img {
  margin-bottom: var(--gap);
}
.team-grid article .job-title {
  margin-bottom: 6px;
}
.team-grid article h3 {
  line-height: 1;
}
.team-grid article .desc {
  margin-top: var(--gap);
}

.swiper {
  position: relative;
}
.swiper video {
  object-fit: cover;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}
@media (pointer: coarse) {
  .swiper-button-prev,
.swiper-button-next {
    display: none;
  }
}

.swiper-pagination {
  position: static;
  display: flex;
}

.swiper-button-prev {
  left: 0;
  cursor: url("images/arrow-left.svg"), pointer;
  cursor: url("images/arrow-left.svg") 0 10, pointer;
}

.swiper-button-next {
  right: 0;
  cursor: url("images/arrow-right.svg"), pointer;
  cursor: url("images/arrow-right.svg") 24 10, pointer;
}

.start {
  --columns: 8;
}
@media screen and (max-width: 699px) {
  .start {
    --columns: 1;
  }
}
.start section {
  padding-top: calc(var(--gap) * 2);
  padding-bottom: calc(var(--gap) * 2);
}
.start section:not(:last-child) {
  border-bottom: 1px solid gray;
}
.start section:first-child {
  padding-top: 0;
}
.start .project-preview-block {
  padding-bottom: calc(var(--gap) * 3);
}
@media screen and (max-width: 699px) {
  .start .project-preview-block .main-grid {
    row-gap: calc(var(--gap) * 3);
  }
}
.start .project-preview-block .project-preview .previews {
  margin-bottom: calc(var(--gap) * 0.8);
  aspect-ratio: var(--aspect-ratio);
}
.start .project-preview-block .project-preview .previews .showSmallerWithBackground {
  height: 100%;
}
.start .project-preview-block .project-preview .previews .showSmallerWithBackground video {
  height: 90%;
  object-fit: contain;
}
.start .project-preview-block .project-preview .previews video {
  height: 100%;
  object-fit: cover;
}
.start .project-preview-block .project-preview header {
  display: flex;
  gap: 1.2ch;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.start .project-preview-block .project-preview header .swiper-pagination {
  flex: 0;
  white-space: nowrap;
}
.start .project-preview-block .project-preview a {
  text-decoration: none;
  display: block;
}
.start .project-preview-block.single .project-preview {
  grid-column-start: 2;
  grid-column-end: span 6;
}
@media screen and (max-width: 699px) {
  .start .project-preview-block.single .project-preview {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}
.start .project-preview-block.grid .project-preview {
  grid-column-end: span 4;
}
@media screen and (max-width: 699px) {
  .start .project-preview-block.grid .project-preview {
    grid-column-end: -1;
  }
}
.start .big-picture {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  aspect-ratio: 16/9;
}
.start .big-picture figure {
  height: 100%;
}
.start .big-picture img, .start .big-picture video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.start .big-picture .text-container {
  position: absolute;
  top: 2em;
  left: 0;
  right: 0;
}
@media screen and (max-width: 699px) {
  .start .big-picture .text-container {
    --columns: 5;
  }
}
.start .big-picture a {
  display: block;
}
.start .big-picture .info-wrapper {
  background-color: rgba(255, 255, 255, 0.75);
  grid-column-end: span 3;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0);
  transition: box-shadow 0.4s ease-out;
}
.start .big-picture .info-wrapper a {
  padding: var(--gap) var(--gap) calc(var(--gap) * 2);
}
.start .big-picture .info-wrapper:hover {
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.start .big-picture h2 {
  margin-bottom: 0.3em;
}
.start .follow-us .channels {
  margin-left: 0.5em;
}
.start .follow-us .channels.with-gap {
  gap: 0.5em;
}
.start .follow-us .channels img {
  height: 0.7em;
  width: auto;
}
@media screen and (max-width: 699px) {
  .start .follow-us {
    text-align: center;
  }
  .start .follow-us .channels {
    margin-top: 0.5em;
    margin-left: 0;
    justify-content: center;
  }
}

.channels {
  margin-left: 0.5em;
}
.channels.with-gap {
  gap: 0.5em;
}
.channels img {
  height: 0.7em;
  width: auto;
}

.project #project-header h2, .project #project-header .subtitle {
  grid-column-end: span 6;
}
@media screen and (max-width: 699px) {
  .project #project-header h2, .project #project-header .subtitle {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}
.project article main {
  margin-top: 3rem;
}
.project article main section {
  margin-bottom: 3rem;
}

.block-quote,
.block-largeImages,
.block-imageGrid {
  grid-column-start: 2;
  grid-column-end: -2;
}
@media screen and (max-width: 699px) {
  .block-quote,
.block-largeImages,
.block-imageGrid {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}

@media screen and (max-width: 699px) {
  .block-largeImages {
    margin-left: -2.5vw;
    margin-right: -2.5vw;
  }
}

.block-imageText,
.block-details {
  grid-column-start: 1;
  grid-column-end: -1;
}
@media screen and (max-width: 699px) {
  .block-imageText,
.block-details {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}

.block-quote figcaption {
  margin-top: 0.5em;
}

.block-imageText h3 {
  margin-bottom: 1rem;
}
.block-imageText .main-grid.text-position-1 .text {
  order: 2;
}
.block-imageText .main-grid.text-position-1 .image {
  order: 1;
}
@media screen and (max-width: 699px) {
  .block-imageText .main-grid.text-position- .image {
    margin-top: var(--gap);
  }
}
.block-imageText .text {
  grid-column-end: span 4;
}
@media screen and (max-width: 1023px) {
  .block-imageText .text {
    grid-column-end: span 5;
  }
}
@media screen and (max-width: 699px) {
  .block-imageText .text {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}
.block-imageText .image {
  grid-column-end: span 3;
}
@media screen and (max-width: 1023px) {
  .block-imageText .image {
    grid-column-end: span 4;
  }
}
@media screen and (max-width: 699px) {
  .block-imageText .image {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}
@media screen and (max-width: 699px) {
  .block-imageText figure.portrait {
    width: 70%;
  }
}

.block-imageGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media screen and (max-width: 1023px) {
  .block-imageGrid {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}
@media screen and (max-width: 699px) {
  .block-imageGrid {
    grid-template-columns: 1fr;
  }
}

.avoid-break {
  break-inside: avoid;
}

section.block-details {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
section.block-details ul {
  width: 44.4444444444%;
  column-gap: var(--gap);
  column-count: 2;
}
@media screen and (max-width: 1023px) {
  section.block-details ul {
    width: 66.6666666667%;
  }
}
@media screen and (max-width: 699px) {
  section.block-details ul {
    width: 100%;
  }
}
section.block-details ul li {
  margin-bottom: 1.3em;
  break-inside: avoid;
}
section.block-details ul li h3 {
  height: 1.7423rem;
}

.caption-wrapper {
  margin-top: 8px;
}
.caption-wrapper .swiper-pagination {
  width: max-content;
}

.caption-with-margin-top {
  margin-top: 8px;
}

button {
  cursor: pointer;
}

.projects {
  --background-color: hsl(0, 0%, 90%);
}
.projects #project-list-section {
  border-top: 1px solid black;
  padding-top: 3rem;
}
.projects #project-list {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.projects #project-list .inactive {
  color: #858585;
}
.projects #project-list button {
  display: flex;
  align-items: center;
  gap: 5px;
}
.projects #project-list .sort-icon {
  height: 0.5em;
  width: auto;
  color: #777;
  display: block;
}
.projects #project-list .current-order .sort-icon {
  color: #000;
}
.projects #project-list .current-order.reverse .sort-icon {
  transform: rotate(180deg);
}
.projects #project-list .list-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr) minmax(0, 2fr) minmax(4ch, auto);
  column-gap: var(--gap);
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid black;
}
.projects #project-list .list-grid .sectors .flex {
  gap: 0 1ch;
  flex-wrap: wrap;
}
.projects #project-list .list-grid .year {
  letter-spacing: -0.05em;
}
@media screen and (max-width: 699px) {
  .projects #project-list .list-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .projects #project-list .list-grid .project-title {
    font-size: 1.2em;
  }
  .projects #project-list .list-grid .project-title, .projects #project-list .list-grid .location {
    width: 100%;
  }
}

.project-previews {
  --preview-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--preview-columns), minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: calc(var(--gap) * 4);
  margin-top: 3rem;
  margin-bottom: 5rem;
}
@media screen and (max-width: 1023px) {
  .project-previews {
    --preview-columns: 2;
  }
}
@media screen and (max-width: 699px) {
  .project-previews {
    margin-top: 2rem;
    --preview-columns: 1;
    row-gap: calc(var(--gap) * 2);
  }
}
.project-previews article > a {
  display: block;
  transition: none;
}
.project-previews article > a:hover {
  text-decoration: none;
}
.project-previews .preview {
  margin-bottom: var(--gap);
  aspect-ratio: var(--aspect-ratio);
}
.project-previews .preview video {
  height: 100%;
  object-fit: cover;
}
.project-previews h3 {
  margin-bottom: 6px;
}
.project-previews .categories {
  margin-top: 6px;
}

.practice #page-header {
  align-items: baseline;
  padding-bottom: calc(var(--gap) * 2);
  border-bottom: 1px solid black;
}
.practice #page-header h2 {
  grid-column-end: span 2;
}
@media screen and (max-width: 1023px) {
  .practice #page-header h2 {
    grid-column-end: span 3;
  }
}
@media screen and (max-width: 699px) {
  .practice #page-header h2 {
    grid-column-end: -1;
  }
}
.practice #page-header #toc {
  grid-column-start: 3;
  grid-column-end: -1;
}
@media screen and (max-width: 1023px) {
  .practice #page-header #toc {
    grid-column-start: 4;
  }
}
@media screen and (max-width: 699px) {
  .practice #page-header #toc {
    grid-column-start: 1;
  }
}
.practice section {
  padding-top: calc(var(--gap) * 4);
  padding-bottom: calc(var(--gap) * 4);
  scroll-margin-top: 2rem;
}
.practice section:not(:last-child) {
  border-bottom: 1px solid black;
}
.practice section .text {
  max-width: 50ch;
  margin-top: 1em;
}
.practice section .text.two-columns {
  max-width: none;
  column-count: 2;
  column-gap: var(--gap);
}
@media screen and (max-width: 699px) {
  .practice section .text.two-columns {
    column-count: 1;
  }
}
.practice section .image {
  margin-top: 3rem;
}
.practice section .image .small {
  grid-column-start: 3;
  grid-column-end: -3;
}
@media screen and (max-width: 699px) {
  .practice section .image .small {
    grid-column-start: 1;
    grid-column-end: -1;
    padding-left: 15%;
    padding-right: 15%;
  }
}
.practice section .image .medium {
  grid-column-start: 2;
  grid-column-end: -2;
}
@media screen and (max-width: 699px) {
  .practice section .image .medium {
    grid-column-start: 1;
    grid-column-end: -1;
    padding-left: 7.5%;
    padding-right: 7.5%;
  }
}
.practice section .image .large {
  grid-column-start: 1;
  grid-column-end: -1;
}
.practice #awards-grid {
  margin-top: 1em;
  max-width: 70ch;
}
.practice #awards-grid li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap);
  margin-bottom: 3px;
}

.subtitle, .caption, blockquote {
  max-width: 60ch;
}

.list-with-style ol, .list-with-style ul {
  list-style: initial;
  padding-left: 1em;
}
.list-with-style ol li, .list-with-style ul li {
  margin-bottom: 0.25em;
}

/*# sourceMappingURL=cdc.css.map */
