@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

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

img {
  max-width: 100%;
}

::-moz-selection {
  background-color: rgba(18, 18, 18, 0.77);
  color: #ffffff;
}

::selection {
  background-color: rgba(18, 18, 18, 0.77);
  color: #ffffff;
}

@font-face {
  font-family: "Acta Display";
  src: url("../fonts/ActaDisplay-Light.woff") format("woff"), url("../fonts/ActaDisplay-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
/*********************
Variables
*********************/
/*********************
Mixins
*********************/
i {
  display: block;
  position: relative;
}
i svg {
  display: block;
  margin: auto;
}

.icon-facebook svg,
.icon-twitter svg,
.icon-instagram svg,
.icon-pinterest svg {
  width: 20px;
}
@media screen and (min-width: 1440px) {
  .icon-facebook svg,
  .icon-twitter svg,
  .icon-instagram svg,
  .icon-pinterest svg {
    width: 1.74vw;
  }
}
@media screen and (min-width: 1920px) {
  .icon-facebook svg,
  .icon-twitter svg,
  .icon-instagram svg,
  .icon-pinterest svg {
    width: 1.3vw;
  }
}

.icon-email svg {
  width: 19px;
}
.icon-linkedin svg {
  width: 22px;
}
.h1 {
  font-family: "Acta Display", serif;
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .h1 {
    font-size: 48px;
  }
  .h1s {
    font-size: 42px;
  }
}
@media screen and (min-width: 1024px) {
  .h1 {
    font-size: 72px;
  }
  .h1s {
    font-size: 58px;
  }
}
@media screen and (min-width: 1280px) {
  .h1 {
    font-size: 84px;
  }
  .h1s {
    font-size: 60px;
  }
}
@media screen and (min-width: 1920px) {
  .h1 {
    font-size: 6.67vw;
  }
  .h1s {
    font-size: 5vw;
  }
}
@media screen and (min-width: 1920px) {
  .h1 {
    font-size: 5vw;
  }
  .h1s {
    font-size: 3.75vw;
  }
}

/* hero du haut (home v2) : pas de marge en mobile, 24px en desktop */
.hero-v2 {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .hero-v2 {
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 1024px) {
  .hero-v2 .h1 {
    font-size: 62px;
  }
}

.h2 {
  font-family: "Acta Display", serif;
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 28px;
  line-height: 1.23;
  letter-spacing: 0;
}
.h2b {
  line-height: 1.23;
}
@media screen and (min-width: 768px) {
  .h2 {
    font-size: 32px;
  }
  .h2b {
    font-size: 36px;
  }
  .h2s {
    font-size: 28px;
  }
}
@media screen and (min-width: 1024px) {
  .h2 {
    font-size: 36px;
  }
  .h2b {
    font-size: 40px;
  }
  .h2s {
    font-size: 32px;
  }
}
@media screen and (min-width: 1280px) {
  .h2 {
    font-size: 46px;
  }
  .h2b {
    font-size: 54px;
  }
  .h2s {
    font-size: 38px;
  }
}
@media screen and (min-width: 1920px) {
  .h2 {
    font-size: 3.61vw;
  }
  .h2b {
    font-size: 4.31vw;
  }
  .h2s {
    font-size: 2.92vw;
  }
}
@media screen and (min-width: 1920px) {
  .h2 {
    font-size: 2.71vw;
  }
  .h2b {
    font-size: 3.23vw;
  }
  .h2s {
    font-size: 2.19vw;
  }
}

.h3 {
  font-family: "Acta Display", serif;
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 22px;
  line-height: 1.44;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .h3 {
    font-size: 24px;
  }
  .h3b {
    font-size: 26px;
  }
}
@media screen and (min-width: 1024px) {
  .h3 {
    font-size: 26px;
  }
  .h3b {
    font-size: 29px;
  }
}
@media screen and (min-width: 1280px) {
  .h3 {
    font-size: 28px;
  }
  .h3b {
    font-size: 32px;
  }
}
@media screen and (min-width: 1920px) {
  .h3 {
    font-size: 2.22vw;
  }
  .h3b {
    font-size: 2.5vw;
  }
}
@media screen and (min-width: 1920px) {
  .h3 {
    font-size: 1.67vw;
  }
  .h3b {
    font-size: 1.88vw;
  }
}

.h4 {
  font-family: "Acta Display", serif;
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 18px;
  line-height: 1.44;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .h4 {
    font-size: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .h4 {
    font-size: 24px;
  }
}
@media screen and (min-width: 1280px) {
  .h4 {
    font-size: 26px;
  }
}
@media screen and (min-width: 1920px) {
  .h4 {
    font-size: 1.94vw;
  }
}
@media screen and (min-width: 1920px) {
  .h4 {
    font-size: 1.46vw;
  }
}

.p {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
}
.p strong {
  font-weight: 600;
}
.ps {
  font-size: 12px;
}
.p p + p {
  margin-top: 1.4em;
}
.p a {
  display: inline-block;
  transition: 0.5s;
}
.p a:hover {
  opacity: 0.5;
}
.p a:active {
  transform: translate3d(0, -50%, 0) scale(0.95);
  transition: 0.15s;
}
@media screen and (min-width: 768px) {
  .ps {
    font-size: 14px;
  }
}
@media screen and (min-width: 1920px) {
  .p {
    font-size: 1.11vw;
  }
  .ps {
    font-size: 0.97vw;
  }
}
@media (min-width: 1920px) {
  .p {
    font-size: 0.83vw;
  }
  .ps {
    font-size: 0.73vw;
  }
}

.pb {
  font-family: "Acta Display", serif;
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 18px;
  line-height: 1.33;
  letter-spacing: 0;
}
.pb p + p {
  margin-top: 1.33em;
}
@media screen and (min-width: 768px) {
  .pb {
    font-size: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .pb {
    font-size: 32px;
  }
}
@media screen and (min-width: 1280px) {
  .pb {
    font-size: 38px;
  }
}
@media screen and (min-width: 1920px) {
  .pb {
    font-size: 2.92vw;
  }
}
@media screen and (min-width: 1920px) {
  .pb {
    font-size: 2.19vw;
  }
}

.label {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.labels {
  line-height: 1.23;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 768px) {
  .label {
    font-size: 13px;
  }
  .labels {
    font-size: 11px;
  }
}
@media screen and (min-width: 1024px) {
  .label {
    font-size: 14px;
  }
  .labels {
    font-size: 12px;
  }
}
@media screen and (min-width: 1280px) {
  .label {
    font-size: 15px;
  }
  .labels {
    font-size: 13px;
  }
}
@media screen and (min-width: 1920px) {
  .label {
    font-size: 1.04vw;
  }
  .labels {
    font-size: 0.9vw;
  }
}
@media screen and (min-width: 1920px) {
  .label {
    font-size: 0.78vw;
  }
  .labels {
    font-size: 0.68vw;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 1.23;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.button span {
  display: block;
  position: relative;
  z-index: 2;
}
.button span + i {
  margin-left: 9px;
}
.button i {
  margin-top: -2px;
  position: relative;
}
.button i svg {
  width: 11px;
}
.button i:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 57px;
  height: 57px;
  border-radius: 50%;
  border: 1px solid #D6D3CB;
}
@media screen and (min-width: 1024px) {
  .button {
    font-size: 13px;
  }
  .button span + i {
    margin-left: 9px;
  }
  .button i {
    margin-top: -2px;
  }
  .button i svg {
    width: 11px;
  }
  .button i:before {
    width: 57px;
    height: 57px;
  }
}
@media screen and (min-width: 1920px) {
  .button {
    font-size: 0.9vw;
  }
  .button span + i {
    margin-left: 0.63vw;
  }
  .button i {
    margin-top: -0.14vw;
  }
  .button i svg {
    width: 0.76vw;
  }
  .button i:before {
    width: 3.96vw;
    height: 3.96vw;
  }
}
@media screen and (min-width: 1920px) {
  .button {
    font-size: 0.68vw;
  }
  .button span + i {
    margin-left: 0.47vw;
  }
  .button i {
    margin-top: -0.1vw;
  }
  .button i svg {
    width: 0.57vw;
  }
  .button i:before {
    width: 2.97vw;
    height: 2.97vw;
  }
}

:root {
  --app-height: 100vh;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: #F7F5F3;
  color: #6D6C6B;
}
body.noscroll {
  overflow: hidden;
}
body.is-loading {
  overflow: hidden;
  opacity: 0;
}
body.is-done-loading {
  opacity: 1;
  transition: 0.5s;
}

.main {
  position: relative;
  z-index: 2;
  flex: 1;
}

video,
img {
  display: block;
}

a {
  color: inherit;
}

.center {
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.center > .center {
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 768px) {
  .center {
    padding-left: 3.13vw;
    padding-right: 3.13vw;
  }
  .center > .center {
    padding-left: 7.81vw;
    padding-right: 7.81vw;
  }
}
@media screen and (min-width: 1280px) {
  .center > .center {
    padding-left: 14.32vw;
    padding-right: 14.32vw;
  }
}

.basic {
  padding-bottom: 7.29vw;
}

/* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
  display: inline-block;
}

/* Psuedo-element chars */
.splitting .char {
  position: relative;
}

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: inherit;
  user-select: none;
}

/* Expanded CSS Variables */
.splitting {
  /* The center word index */
  --word-center: calc((var(--word-total) - 1) / 2);
  /* The center character index */
  --char-center: calc((var(--char-total) - 1) / 2);
  /* The center character index */
  --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
  /* Pecent (0-1) of the word's position */
  --word-percent: calc(var(--word-index) / var(--word-total));
  /* Pecent (0-1) of the line's position */
  --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
  /* Percent (0-1) of the char's position */
  --char-percent: calc(var(--char-index) / var(--char-total));
  /* Offset from center, positive & negative */
  --char-offset: calc(var(--char-index) - var(--char-center));
  /* Absolute distance from center, only positive */
  --distance: calc(
     (var(--char-offset) * var(--char-offset)) / var(--char-center)
  );
  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
  --distance-sine: calc(var(--char-offset) / var(--char-center));
  /* Distance from center where 1 is far left/far right, 0 is center */
  --distance-percent: calc((var(--distance) / var(--char-center)));
}

.splitting.cells img {
  width: 100%;
  display: block;
}

@supports (display: grid) {
  .splitting.cells {
    position: relative;
    overflow: hidden;
    background-size: cover;
    visibility: hidden;
  }
  .splitting .cell-grid {
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: repeat(var(--row-total), 1fr)/repeat(var(--col-total), 1fr);
  }
  .splitting .cell {
    background: inherit;
    position: relative;
    overflow: hidden;
  }
  .splitting .cell-inner {
    background: inherit;
    position: absolute;
    visibility: visible;
    /* Size to fit the whole container size */
    width: calc(100% * var(--col-total));
    height: calc(100% * var(--row-total));
    /* Position properly */
    left: calc(-100% * var(--col-index));
    top: calc(-100% * var(--row-index));
  }
  /* Helper variables for advanced effects */
  .splitting .cell {
    --center-x: calc((var(--col-total) - 1) / 2);
    --center-y: calc((var(--row-total) - 1) / 2);
    /* Offset from center, positive & negative */
    --offset-x: calc(var(--col-index) - var(--center-x));
    --offset-y: calc(var(--row-index) - var(--center-y));
    /* Absolute distance from center, only positive */
    --distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );
    /* Absolute distance from center, only positive */
    --distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) );
  }
}
@font-face {
  font-family: "swiper-icons";
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-container-pointer-events {
  touch-action: pan-y;
}
.swiper-container-pointer-events.swiper-container-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

/* Footer (d'apres updates.sketch) : trait #D8D8D8, nav 17px, icones 19px, credit 12px souligne — tout #6D6C6B */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 30px 36px;
  border-top: 1px solid #D8D8D8;
  color: #6D6C6B;
}
/* mobile : nav en haut -> reseaux -> credit */
footer .nav { order: -1; }
footer .social { margin-top: 43px; }
footer .siteby { margin-top: 40px; }

footer .social ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .social li + li {
  margin-left: 34px;
}
footer .social a {
  display: block;
  color: #6D6C6B;
  transition: 0.5s;
}
footer .social a:hover {
  opacity: 0.5;
}
footer .social a:active {
  transform: scale(0.95);
  transition: 0.15s;
}
footer .social svg {
  display: block;
  width: 19px;
  height: 19px;
}
footer .social svg path {
  fill: currentColor;
}

footer .nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .nav li + li {
  margin-left: 30px;
}
footer .nav a {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
  color: #6D6C6B;
  transition: 0.5s;
}
footer .nav a:hover {
  opacity: 0.5;
}
footer .nav a:active {
  transform: scale(0.95);
  transition: 0.15s;
}

footer .siteby a {
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #6D6C6B;
  border-bottom: 2px solid #6D6C6B;
  padding-bottom: 2px;
  transition: 0.5s;
}
footer .siteby a:hover {
  opacity: 0.5;
}

/* desktop : reseaux a gauche . nav au centre . credit a droite */
@media screen and (min-width: 768px) {
  footer {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 4.16vw 3.65vw 1.875vw;
  }
  footer .social,
  footer .nav,
  footer .siteby {
    flex: 1;
    margin-top: 0;
  }
  footer .nav {
    order: 0;
  }
  footer .social ul {
    justify-content: flex-start;
  }
  footer .nav ul {
    justify-content: center;
  }
  footer .siteby {
    text-align: right;
  }
}

.main input.radio {
  margin: 0;
  width: 0;
  opacity: 0;
  appearance: none;
  pointer-events: none;
}
.main input.radio + label {
  display: inline-flex;
  align-items: center;
  position: relative;
  line-height: 1;
  cursor: pointer;
}
.main input.radio + label span {
  display: block;
  position: relative;
  margin-right: 13px;
  width: 19px;
  height: 19px;
}
.main input.radio + label span:before, .main input.radio + label span:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
}
.main input.radio + label span:before {
  width: 100%;
  height: 100%;
  border: 1px solid currentColor;
}
.main input.radio + label span:after {
  width: 68.421%;
  height: 68.421%;
  background-color: currentColor;
  opacity: 0;
  transition: 0.25s;
}
.main input.radio + label:hover span:after {
  opacity: 0.5;
}
.main input.radio + label:active span:after {
  opacity: 0.75;
  transition: 0.15s;
}
.main input.radio:checked + label span:after {
  opacity: 1;
}
.main input.radio:checked + label:hover span:after {
  opacity: 1;
}
@media screen and (min-width: 1440px) {
  .main input.radio + label span {
    width: 0.99vw;
    height: 0.99vw;
  }
}

.navigation.is-open + header.has-bg {
  background-color: transparent;
}

header {
  position: fixed;
  z-index: 7;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  padding-top: 6.28vw;
  padding-bottom: 6.28vw;
  color: #6D6C6B;
  transition: transform 0.18s ease-out, background-color 0.35s;
}
header.has-bg {
  background-color: rgba(145, 130, 126, 0.9);
  color: #fff;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.35s;
}
header .logo {
  width: 100%;
  padding: 0 7.24vw;
  text-align: left;
}
header .logo a {
  display: inline-block;
  pointer-events: all;
  transition: 0.5s;
}
header .logo a:hover {
  opacity: 0.5;
}
header .logo a:active {
  transform: scale(0.975);
  transition: 0.15s;
}
header .logo svg {
  width: min(41vw, 170px);
  color: currentColor;
  overflow: visible;
  /* transition: .5s;
  transition-delay: .2s; */
}
header .logo svg path {
  fill: currentColor;
}
header .hamburger {
  position: absolute;
  top: 50%;
  right: 7.24vw;
  transition: opacity 0.5s, transform 0.5s;
}
header .hamburger:hover {
  opacity: 0.5;
}
header .hamburger:active {
  transform: translate3d(0, -50%, 0) scale(0.95);
  transition: opacity 0.15s, transform 0.15s;
}
@media screen and (min-width: 768px) {
  header .hamburger {
    right: 2.97vw;
  }
}
header .openMenu {
  display: block;
  position: absolute;
  transform: translate3d(0, -50%, 0);
  top: 50%;
  right: 0;
  margin-top: -1px;
  width: 36px;
  height: 36px;
  color: currentColor;
  pointer-events: all;
  transition: color 0.5s;
}
@media screen and (min-width: 768px) {
  header .openMenu {
    width: max(48px,2.5vw);
    height: max(48px,2.5vw);
  }
}
header .openMenu span {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.5s;
  transition-delay: 0.5s;
}
header .openMenu span:nth-child(2) {
  display: none;
}
header .openMenu span:first-child {
  transform: translateY(350%);
}
header .openMenu span:last-child {
  transform: translateY(-350%);
}
@media screen and (min-width: 768px) {
  header {
    padding-top: 2.24vw;
    padding-bottom: 2.24vw;
  }
  header .openMenu span {
    height: 1.2px;
  }
  header .openMenu span:nth-child(2) {
    display: block;
  }
  header .openMenu span:first-child {
    transform: translateY(550%);
  }
  header .openMenu span:last-child {
    transform: translateY(-550%);
  }
}
@media screen and (min-width: 500px) {
  header .logo svg {
    width: clamp(170px, 18.32vw + 78.4px, 266px);
    height: auto;
  }
}
@media screen and (min-width: 1024px) {
  header .logo svg {
    width: 266px;
    height: auto;
  }
}

body.home header .logo svg,
body.single-project header .logo svg,
body.page-template-page-home-v2 header .logo svg {
  color: #fff;
}
body.home header .openMenu,
body.single-project header .openMenu,
body.page-template-page-home-v2 header .openMenu {
  color: #fff;
}

body.single-post header .logo svg {
  color: #fff;
}
@media screen and (max-width: 767px) {
  body.single-post header .openMenu {
    color: #fff;
  }
}

nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
  width: 100%;
  width: 0;
  height: 100%;
  background-color: #F7F5F3;
  color: #6D6C6B;
  overflow: scroll;
  transition: 1s;
  /* &.is-open {
    width: 100%;
    pointer-events: all;

    > ul {
      > li {
        &:last-child {
          > ul {
            > li {
              opacity: 1;
              transition-delay: .15s;
            }
          }
        }
      }
    }
  } */
}
nav.is-open {
  width: 100%;
}
nav.is-open .text li {
  opacity: 1;
}
nav.is-open .images {
  opacity: 1;
  transition-delay: 0.5s;
}
nav.is-open .images .shapes {
  opacity: 1;
  transform: scale(1);
  transition: 1s;
  transition-delay: 1s;
}
nav.is-open ~ header .logo svg {
  color: #6D6C6B;
  transition: 0.5s;
  transition-delay: 0s;
}
nav.is-open ~ header .openMenu {
  color: #6D6C6B;
  transition-delay: 0.3s;
}
@media screen and (min-width: 768px) {
  nav.is-open ~ header .openMenu {
    color: #fff;
  }
}
nav.is-open ~ header .openMenu span:first-child {
  transform: translateY(0%) rotate(45deg);
}
nav.is-open ~ header .openMenu span:nth-child(2) {
  transform: scale(0);
}
nav.is-open ~ header .openMenu span:last-child {
  transform: translateY(0%) rotate(-45deg);
}
nav .text {
  margin: auto;
  padding: 10.42vw 4.22vw;
  min-width: 70%;
}
nav .text ul + .p {
  margin-top: 40px;
}
nav .text ul li.has-sub.sub-open .sub {
  display: block;
  width: 100%;
}
nav .text .sub {
  display: none;
  overflow: hidden;
}
nav .text .sub ul {
  padding-left: 1.82vw;
}
@media screen and (max-width: 767px) {
  nav .text .pages {
    padding-top: 60px;
  }
  nav .text .pages li + li {
    margin-top: 10px;
  }
  nav .text .sub ul {
    display: flex;
    flex-direction: column;
    gap: 1.46vw;
    padding-top: 2.92vw;
    padding-bottom: 4.06vw;
  }
}
nav .text li {
  opacity: 0;
}
nav .images {
  display: none;
}
nav .social {
  margin-top: 20px;
}
nav .social ul {
  display: flex;
  align-items: center;
}
nav .social li + li {
  margin-left: 20px;
}
nav .social svg path {
  fill: currentColor;
}
nav .social a {
  display: block;
  transition: 0.5s;
}
nav .social a:hover {
  opacity: 0.5;
}
nav .social a:active {
  transform: scale(0.95);
  transition: 0.15s;
}
@media screen and (min-width: 768px) {
  nav {
    overflow: hidden;
  }
  nav .text {
    width: 100%;
    overflow: scroll;
  }
  nav .images {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    opacity: 0;
    transition: 1s;
  }
  nav .images .shapes {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    height: 100%;
    color: #D6D3CB;
    opacity: 0;
    transform: scale(0.95);
    transition: 0.5s;
    /* .line {
      width: 1px;
      height: 100%;
      background-color: currentColor;
    } */
  }
  nav .images .shapes .circle {
    position: absolute;
    top: 50%;
    margin-top: -11.2vw;
    right: -11.2vw;
    width: 22.4vw;
    height: 22.4vw;
  }
  nav .images .shapes .circle span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 22.4vw;
    height: 22.4vw;
    overflow: scroll;
  }
  nav .images .shapes .circle span:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 22.4vw;
    height: 22.4vw;
    border-radius: 50%;
    border: 1px solid currentColor;
  }
  nav .images li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.5s;
  }
  nav .images li.is-active {
    z-index: 2;
    opacity: 1;
    transition: 1s;
  }
  nav .images img,
  nav .images video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media screen and (min-width: 768px) {
  nav .text {
    display: flex;
    flex-direction: column;
    z-index: 2;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  nav .text .pages {
    display: inline-flex;
    flex-direction: column;
    margin: auto 0;
  }
  nav .text .pages li {
    display: inline-flex;
    flex-wrap: wrap;
    pointer-events: none;
  }
  nav .text .pages li .sub ul {
    display: flex;
    gap: 1.46vw;
    padding: 0.36vw 0 2.19vw 1.82vw;
  }
  nav .text .pages li a {
    opacity: 0.3;
    transition: 0.5s;
  }
  nav .text .pages li a:active {
    transform: scale(0.95);
    transition: 0.15s;
  }
  nav .text .pages li.is-active > a {
    opacity: 1;
  }
  nav .text .pages li.is-hovered > a {
    opacity: 1;
  }
  nav .text .pages li.is-unhovered > a {
    opacity: 0.4;
  }
  nav .text a {
    pointer-events: all;
  }
}
@media screen and (min-width: 1024px) {
  nav .text {
    padding-top: 110px;
    padding-bottom: 58px;
  }
  nav .text ul + .p {
    margin-top: 1.04vw;
  }
  nav .text .p {
    display: flex;
    flex-direction: column;
  }
  nav .text .social {
    margin-top: 1.77vw;
  }
  nav .text .social li + li {
    margin-left: 1.77vw;
  }
  nav .images {
    width: 50%;
  }
}
@media screen and (min-width: 1024px) {
  nav .images {
    width: 62.4vw;
  }
}
@media (min-width: 768px) and (min-aspect-ratio: 7/3) {
  nav .text .p {
    flex-direction: row;
  }
  nav .text .p p + p {
    margin-top: 0;
    margin-left: 7.55vw;
  }
}

.main.e404 {
  display: flex;
}
.main.e404 .intro {
  width: 100%;
  position: relative;
}
.main.e404 .intro .text {
  height: 100%;
  padding-top: 16.67vw;
}
.main.e404 .intro .h2 {
  position: relative;
  z-index: 2;
  line-height: 1.2;
}
.main.e404 .intro .shapes {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 11.2vw;
  height: 100%;
  color: #D6D3CB;
}
.main.e404 .intro .shapes .line {
  width: 1px;
  height: 100%;
  background-color: currentColor;
}
.main.e404 .intro .shapes .circle {
  position: absolute;
  top: 17%;
  right: -11.2vw;
  width: 22.4vw;
  height: 22.4vw;
}
.main.e404 .intro .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  overflow: hidden;
}
.main.e404 .intro .shapes .circle span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.main.e404 .intro .text,
.main.e404 .intro .image {
  position: relative;
  z-index: 2;
}
.main.e404 .intro .text {
  text-align: center;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  padding-bottom: 10.83vw;
}
.main.e404 .intro .text h1 {
  margin-bottom: 1em;
}
.main.e404 .intro .text a:hover span,
.main.e404 .intro .text a:hover i {
  opacity: 0.5;
}
.main.e404 .intro .text a:hover i {
  transform: translateX(50%);
}
.main.e404 .intro .text a:active span {
  transform: scale(0.95);
  transition: 0.15s;
}
.main.e404 .intro .text a:active i {
  transform: translateX(50%) scale(0.95);
  transition: 0.15s;
}
.main.e404 .intro .text a span,
.main.e404 .intro .text a i {
  transition: 0.5s;
}
@media screen and (max-width: 479px) {
  .main.e404 .intro .shapes .circle {
    top: 17%;
  }
  .main.e404 .intro .text {
    padding-top: 33.33vw;
  }
}
@media screen and (max-width: 767px) {
  .main.e404 .intro .shapes {
    right: 34.38vw;
  }
}
@media screen and (min-width: 768px) {
  .main.e404 .intro .text {
    margin: auto;
    width: 56.25vw;
    padding-left: 0;
    padding-right: 0;
  }
}

.main.about .intro {
  position: relative;
}
.main.about .intro .text {
  padding-top: 16.67vw;
}
.main.about .intro .h2 {
  position: relative;
  z-index: 2;
}
.main.about .intro .shapes {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 11.2vw;
  height: 100%;
  color: #D6D3CB;
}
.main.about .intro .shapes .line {
  width: 1px;
  height: 100%;
  background-color: currentColor;
}
.main.about .intro .shapes .circle {
  position: absolute;
  top: 17%;
  right: -11.2vw;
  width: 22.4vw;
  height: 22.4vw;
}
.main.about .intro .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  overflow: hidden;
}
.main.about .intro .shapes .circle span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.main.about .intro .text,
.main.about .intro .image {
  position: relative;
  z-index: 2;
}
.main.about .intro .text {
  text-align: center;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  padding-bottom: 10.83vw;
}
.main.about .intro .image {
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.about .intro .image img {
  width: 100%;
}
@media screen and (max-width: 479px) {
  .main.about .intro .shapes .circle {
    top: 17%;
  }
  .main.about .intro .text {
    padding-top: 33.33vw;
  }
}
@media screen and (max-width: 767px) {
  .main.about .intro .shapes {
    right: 34.38vw;
  }
}
@media screen and (min-width: 768px) {
  .main.about .intro .text {
    margin: auto;
    width: 56.25vw;
    padding-left: 0;
    padding-right: 0;
  }
  .main.about .intro .image {
    margin-left: 7.55vw;
    margin-right: 7.55vw;
  }
}
.main.about .principles {
  margin-top: 10.42vw;
  overflow: hidden;
}
.main.about .principles .headline,
.main.about .principles .body {
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.about .principles .headline + .body {
  margin-top: 10.42vw;
}
.main.about .principles .body .image img {
  width: 100%;
}
.main.about .principles .body .image + .text {
  margin-top: 7.24vw;
}
.main.about .principles .body .text .h2s + .p {
  margin-top: 2em;
}
.main.about .principles > .image {
  margin-top: 10.42vw;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.about .principles > .image img {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .main.about .principles > .image {
    margin-left: 7.55vw;
    margin-right: 7.55vw;
  }
}
@media screen and (min-width: 768px) {
  .main.about .principles .headline,
  .main.about .principles .body {
    padding-left: 7.55vw;
    padding-right: 7.55vw;
  }
  .main.about .principles .headline {
    text-align: center;
  }
  .main.about .principles .body {
    display: flex;
  }
  .main.about .principles .body .image {
    width: 34.11vw;
  }
  .main.about .principles .body .image + .text {
    margin-top: 0;
  }
  .main.about .principles .body .text {
    flex: 1;
    padding-left: 8.85vw;
  }
}
@media screen and (min-width: 1024px) {
  .main.about .principles .headline,
  .main.about .principles .body {
    padding-left: 14.06vw;
    padding-right: 14.06vw;
  }
  .main.about .principles .body .image {
    width: 28.13vw;
  }
  .main.about .principles .body .text {
    padding-left: 5.21vw;
  }
}
@media screen and (min-width: 1280px) {
  .main.about .principles .body,
  .main.about .principles .headline {
    padding-left: 16.67vw;
    padding-right: 16.67vw;
  }
  .main.about .principles .body .text {
    padding-left: 5.21vw;
  }
}
.main.about .process {
  display: flex;
  flex-direction: column;
  margin-top: 10.42vw;
  background-color: #91827E;
  color: #fff;
}
.main.about .process .text {
  order: 2;
  padding: 14.32vw 5.21vw;
  overflow: hidden;
}
.main.about .process .text .headline {
  white-space: nowrap;
}
.main.about .process .text .headline + .slider {
  margin-top: 9.74vw;
}
.main.about .process .text .slider {
  width: 100%;
  overflow: hidden;
}
.main.about .process .text .slider .swiper-slide .label {
  display: block;
}
.main.about .process .text .slider .swiper-slide .label + .h2 {
  margin-top: 1.25vw;
  margin-top: 12px;
}
.main.about .process .text .slider .swiper-slide .h2 + .p {
  margin-top: 2.08vw;
  margin-top: 24px;
}
.main.about .process .text .swiper-controls {
  display: flex;
  margin-top: 2.6vw;
  margin-top: 25px;
}
.main.about .process .text .swiper-controls a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #fff;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: 0.35s;
}
.main.about .process .text .swiper-controls a svg {
  width: 17.5%;
  height: auto;
}
.main.about .process .text .swiper-controls a.prev svg {
  transform: rotate(180deg) translateX(20%);
}
.main.about .process .text .swiper-controls a.next svg {
  transform: translateX(20%);
}
.main.about .process .text .swiper-controls a.is-disabled {
  opacity: 0.25;
}
.main.about .process .text .swiper-controls a + a {
  margin-left: 20px;
}
.main.about .process .image {
  order: 1;
  position: relative;
}
.main.about .process .image:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
}
.main.about .process .image ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main.about .process .image li {
  opacity: 0;
  transition: 1s;
}
.main.about .process .image li.is-active {
  z-index: 2;
  opacity: 1;
  transition: 2s;
}
.main.about .process .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .main.about .process {
    flex-direction: row;
  }
  .main.about .process .text {
    order: 1;
    display: flex;
    flex: 1;
  }
  .main.about .process .text .headline + .slider {
    margin-top: 0;
    margin-left: 9.74vw;
    margin-left: 4.69vw;
  }
  .main.about .process .text .h1 {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
  }
  .main.about .process .image {
    order: 2;
    width: 37.71vw;
  }
}
@media screen and (min-width: 1024px) {
  .main.about .process .text {
    padding-left: 8.44vw;
    padding-right: 16.61vw;
  }
  .main.about .process .text .headline + .slider {
    margin-left: 9.74vw;
  }
  .main.about .process .text .slider .swiper-slide .label + .h2 {
    margin-top: 1.25vw;
  }
  .main.about .process .text .slider .swiper-slide .h2 + .p {
    margin-top: 2.08vw;
  }
  .main.about .process .text .swiper-controls {
    margin-top: 2.6vw;
  }
  .main.about .process .text .swiper-controls a {
    width: 2.6vw;
    height: 2.6vw;
  }
  .main.about .process .image .shapes {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    color: #D6D3CB;
  }
  .main.about .process .image .shapes .circle {
    position: absolute;
    top: 50%;
    right: -11.2vw;
    margin-top: -11.2vw;
    width: 22.4vw;
    height: 22.4vw;
  }
  .main.about .process .image .shapes .circle span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 22.4vw;
    height: 22.4vw;
    overflow: hidden;
  }
  .main.about .process .image .shapes .circle span:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 22.4vw;
    height: 22.4vw;
    border-radius: 50%;
    border: 1px solid currentColor;
  }
}
.main.about .biography {
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.about .biography .celeste .text + .image {
  margin-top: 9.38vw;
}
.main.about .biography .celeste .image + .text {
  margin-top: 9.38vw;
}
.main.about .biography .celeste + .dedication {
  margin-top: 10.42vw;
}
.main.about .biography .text .h2 span {
  display: block;
  white-space: nowrap;
}
.main.about .biography .text .h2 span + span:before {
  content: "   ";
}
.main.about .biography .text .h2 + .p {
  margin-top: 3.65vw;
}
.main.about .biography .text .quote {
  position: relative;
  padding-left: 22px;
}
.main.about .biography .text .quote:before {
  content: "";
  content: none;
  display: block;
  position: absolute;
  top: 4px;
  left: -4px;
  width: 16px;
  height: 30px;
  background-image: url(../images/svg/quotes.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}
.main.about .biography .dedication {
  display: flex;
  flex-direction: column;
}
.main.about .biography .dedication .text {
  margin-top: 9.38vw;
}
@media screen and (min-width: 768px) {
  .main.about .biography {
    padding-left: 0;
    padding-right: 0;
  }
  .main.about .biography .celeste {
    display: flex;
    align-items: center;
    padding-left: 7.55vw;
    padding-right: 7.55vw;
  }
  .main.about .biography .celeste .image {
    order: 2;
    width: 38.07vw;
  }
  .main.about .biography .celeste .image + .text {
    margin-top: 0;
  }
  .main.about .biography .celeste .text {
    order: 1;
    flex: 1;
    padding-right: 8.49vw;
  }
  .main.about .biography .celeste .text .quote {
    padding-left: 0;
  }
  .main.about .biography .celeste .text .quote:before {
    top: 0;
    left: auto;
    right: 100%;
    margin-right: 2.24vw;
    margin-right: 43px;
    margin-right: 21px;
    margin-right: 10px;
    width: 1.77vw;
    width: 34px;
    width: 17px;
  }
  .main.about .biography .dedication {
    flex-direction: row;
    padding-left: 7.55vw;
    padding-right: 7.55vw;
  }
  .main.about .biography .dedication .image {
    width: 49.74vw;
  }
  .main.about .biography .dedication .image + .text {
    margin-top: 9.38vw;
  }
  .main.about .biography .dedication .text {
    margin-top: 0;
    flex: 1;
    padding-left: 4.95vw;
  }
}
@media screen and (min-width: 1024px) {
  .main.about .biography .celeste {
    align-items: flex-end;
    justify-content: center;
    padding-left: 7.29vw;
    padding-right: 7.29vw;
  }
  .main.about .biography .celeste .text {
    padding-right: 5.21vw;
  }
  .main.about .biography .celeste .text .quote {
    padding-right: 4.32vw;
  }
  .main.about .biography .celeste .text .quote:before {
    margin-right: 2.24vw;
    width: 1.77vw;
  }
  .main.about .biography .celeste .text + .image {
    margin-top: 4.17vw;
  }
  .main.about .biography .dedication {
    padding-right: 15.89vw;
  }
}
@media screen and (min-width: 1280px) {
  .main.about .biography .celeste {
    align-items: flex-start;
  }
  .main.about .biography .celeste .text {
    display: flex;
    padding-right: 0;
  }
  .main.about .biography .celeste .text .h2 + .p {
    margin-top: 32px;
  }
  .main.about .biography .celeste .text .quote {
    padding-left: 1.67vw;
    padding-bottom: 32px;
  }
}
@media screen and (min-width: 1440px) {
  .main.about .biography .celeste {
    align-items: center;
    padding-left: 8.33vw;
    padding-right: 8.33vw;
  }
  .main.about .biography .celeste .text .h2 + .p {
    margin-top: 48px;
  }
  .main.about .biography .celeste .text .quote {
    padding-left: 36px;
  }
}
@media screen and (min-width: 1920px) {
  .main.about .biography .celeste {
    padding-left: 6.25vw;
    padding-right: 6.25vw;
  }
  .main.about .biography .celeste .text .h2 + .p {
    margin-top: 48px;
  }
  .main.about .biography .celeste .text .quote {
    padding-left: 36px;
  }
}
.main.about .team {
  position: relative;
  margin-top: 10.42vw;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  padding-bottom: 10.42vw;
}
.main.about .team .shapes {
  position: absolute;
  z-index: 1;
  bottom: -16.67vw;
  right: 26.56vw;
  height: calc(50% + 16.67vw);
  color: #D6D3CB;
}
@media screen and (max-width: 767px) {
  .main.about .team .shapes {
    display: none;
  }
}
.main.about .team .shapes .line {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 100%;
  background-color: currentColor;
}
.main.about .team .shapes .circle {
  position: absolute;
  transform: rotate(180deg);
  bottom: 19.74vw;
  right: -11.2vw;
  width: 22.4vw;
  height: 22.4vw;
}
.main.about .team .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  overflow: hidden;
}
.main.about .team .shapes .circle span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.main.about .team .headline {
  text-align: center;
}
.main.about .team .headline + .list {
  margin-top: 7.45vw;
}
.main.about .team .list {
  position: relative;
  z-index: 2;
}
.main.about .team .list ul {
  display: grid;
  column-gap: 20px;
  row-gap: 4.48vw;
  row-gap: 43px;
}
.main.about .team .list li {
  pointer-events: none;
}
.main.about .team .list li .image {
  position: relative;
  pointer-events: all;
  cursor: pointer;
}
.main.about .team .list li .image:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 124.2253521127%;
}
.main.about .team .list li .image picture,
.main.about .team .list li .image img,
.main.about .team .list li .image video,
.main.about .team .list li .image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main.about .team .list li .image video,
.main.about .team .list li .image img {
  object-fit: cover;
}
.main.about .team .list li .image .hover {
  display: none;
}
.main.about .team .list li .image + .text {
  margin-top: 2.08vw;
  margin-top: 20px;
}
.main.about .team .list li .text {
  text-align: center;
  pointer-events: all;
}
.main.about .team .list li .text .label + .p {
  margin-top: 0.42vw;
  margin-top: 8px;
}
.main.about .team .list li a:active {
  transform: scale(0.95);
}
@media screen and (min-width: 375px) {
  .main.about .team .list ul {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 640px) {
  .main.about .team .list ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 768px) {
  .main.about .team .list ul {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .main.about .team .list li .image .hover {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba(145, 130, 126, 0.6);
    opacity: 0;
    transition: 0.35s;
  }
  .main.about .team .list li:hover .image .hover {
    opacity: 1;
  }
}
@media screen and (min-width: 1024px) {
  .main.about .team {
    padding-left: 11.46vw;
    padding-right: 11.46vw;
  }
  .main.about .team .list ul {
    column-gap: 1.04vw;
    row-gap: 4.48vw;
  }
  .main.about .team .list li .image + .text {
    margin-top: 2.08vw;
  }
  .main.about .team .list li .text .label + .p {
    margin-top: 0.42vw;
  }
}
.main.about .outro {
  position: relative;
  padding-top: 11.72vw;
  padding-bottom: 11.46vw;
}
.main.about .outro .shapes {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 26.56vw;
  height: 100%;
  color: #D6D3CB;
}
@media screen and (max-width: 767px) {
  .main.about .outro .shapes {
    display: none;
  }
}
.main.about .outro .shapes .line {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: currentColor;
}
.main.about .outro .text {
  position: relative;
  z-index: 2;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  text-align: center;
}
.main.about .outro .text .h2 + .p {
  margin-top: 2.6vw;
}
.main.about .outro .text .p {
  line-height: 2;
}
.main.about .outro .text .p span + span:before {
  content: "  |  ";
}
@media screen and (min-width: 768px) {
  .main.about .outro .text {
    margin: auto;
    width: 61.46vw;
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  .main.about .shapes {
    opacity: 0.5;
  }
}

.popups {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  pointer-events: none;
  opacity: 0;
  transition: 0.5s;
}
.popups .close {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  opacity: 0;
  appearance: none;
  border: 0;
  background-color: transparent;
  transition: 0.5s;
}
.popups .close:before, .popups .close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #71706F;
}
.popups .close:before {
  transform: rotate(45deg);
}
.popups .close:after {
  transform: rotate(-45deg);
}
.popups .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F7F5F3;
  opacity: 0;
  transition: 0.5s;
}
.popups.is-active {
  opacity: 1;
  pointer-events: all;
  transition: 0s;
}
.popups.is-active .close {
  opacity: 1;
}
.popups.is-active .background {
  opacity: 1;
}
.popups .popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: #F7F5F3;
  transition: 0.5s;
}
.popups .popup.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: all;
  transition: 1s;
}
.popups .popup.is-active .image {
  transform: translateY(0);
  opacity: 1;
  transition: 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s;
}
.popups .popup.is-active h3, .popups .popup.is-active .position, .popups .popup.is-active h4, .popups .popup.is-active .bio {
  transform: translateY(0);
  opacity: 1;
  transition: 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.popups .popup.is-active h3 {
  transition-delay: 0.5s;
}
.popups .popup.is-active .position {
  transition-delay: 0.6s;
}
.popups .popup.is-active h4 {
  transition-delay: 0.7s;
}
.popups .popup.is-active h4 + .bio {
  transition-delay: 0.8s;
}
.popups .popup.is-active .bio {
  transition-delay: 0.7s;
}
.popups .inner {
  display: flex;
  flex-direction: column;
  padding: 61px 20px;
  height: 100dvh;
  overflow: auto;
}
.popups .image {
  width: 100%;
  position: relative;
  transform: translateY(20px);
  opacity: 0;
  transition: 0.25s linear;
}
.popups .image:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 123.9740820734%;
}
.popups .image picture,
.popups .image img,
.popups .image video,
.popups .image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.popups .image video,
.popups .image img {
  object-fit: cover;
}
.popups .text {
  color: #6D6C6B;
}
.popups .text:after {
  content: "";
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 35px;
  background: linear-gradient(to top, #F7F5F3 0%, transparent 100%);
}
.popups h3, .popups .position, .popups h4, .popups .bio {
  transform: translateY(20px);
  opacity: 0;
  transition: 0.25s linear;
}
.popups h3 {
  margin-top: 56px;
  font-size: 50px;
  line-height: 1.04;
  word-spacing: 100vw;
}
.popups .p p + p {
  margin-top: 0.5em;
}
.popups .p a:active {
  transform: scale(0.95);
}
.popups .position {
  margin-top: 40px;
}
.popups .bio {
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .popups .close:before, .popups .close:after {
    transition: 0.35s;
  }
  .popups .close:hover:before, .popups .close:hover:after {
    opacity: 0.5;
  }
  .popups .close:active {
    transform: scale(0.95);
    transition: 0.15s;
  }
}
@media screen and (min-width: 1024px) {
  .popups .close {
    top: 1.67vw;
    right: 2.71vw;
    width: 2.08vw;
    height: 2.08vw;
  }
  .popups .inner {
    flex-direction: row;
    padding: 0 11.98vw 0 11.98vw;
  }
  .popups .image {
    margin: 10.28vh 0 auto;
    width: 24.11vw;
    height: auto;
  }
  .popups .text {
    display: flex;
    flex: 1;
    position: relative;
    margin: auto 0 auto 7.45vw;
    padding: 0;
    height: 100dvh;
    overflow: auto;
  }
  .popups .text:after {
    content: "";
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 12.05vh;
    background: linear-gradient(to top, #F7F5F3 0%, transparent 100%);
  }
  .popups .center {
    margin: auto;
    padding: 10.28vh 0;
  }
  .popups h3 {
    margin-top: 0;
    font-size: 4.17vw;
  }
  .popups .position {
    margin-top: 3.49vw;
  }
  .popups .bio {
    margin-top: 1.04vw;
  }
}
@media screen and (min-width: 1024px) and (min-aspect-ratio: 9/10) {
  .popups .bio {
    column-count: 2;
    column-gap: 3.85vw;
  }
}
.main.article .body .image {
  position: relative;
  width: 100%;
  height: var(--app-height);
}
.main.article .body .image:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(rgba(109, 108, 107, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.main.article .body .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main.article .body .text {
  position: relative;
  z-index: 2;
  padding-top: 10.42vw;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  padding-bottom: 10.42vw;
}
.main.article .body .text .back a span,
.main.article .body .text .back a i {
  transition: 0.5s;
}
.main.article .body .text .back a:hover span,
.main.article .body .text .back a:hover i {
  opacity: 0.5;
}
.main.article .body .text .back a:hover i {
  transform: translateX(50%);
}
.main.article .body .text .back a:active span {
  transform: scale(0.95);
  transition: 0.15s;
}
.main.article .body .text .back a:active i {
  transform: translateX(50%) scale(0.95);
  transition: 0.15s;
}
.main.article .body .text .back + .h2 {
  margin-top: 35px;
}
.main.article .body .text > * + .media,
.main.article .body .text > * + .p,
.main.article .body .text > * + .quote,
.main.article .body .text > * + .share {
  margin-top: 35px;
}
.main.article .body .text .h2 {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  padding-bottom: 5.21vw;
  color: #fff;
}
.main.article .body .text .h2 + * {
  margin-top: 0;
}
.main.article .body .text .media {
  display: flex;
  column-gap: 20px;
}
.main.article .body .text .media > * {
  flex: 1;
}
.main.article .body .text .media img,
.main.article .body .text .media video {
  width: 100%;
}
.main.article .body .text .quote .h3 + .label {
  margin-top: 20px;
}
.main.article .body .text .quote .label {
  display: block;
}
.main.article .body .text .share ul {
  display: flex;
  align-items: center;
}
.main.article .body .text .share li + li {
  margin-left: 25px;
}
.main.article .body .text .share li:first-child + li {
  margin-left: 20px;
}
.main.article .body .text .share a {
  display: block;
  transition: 0.5s;
}
.main.article .body .text .share a:hover {
  opacity: 0.5;
}
.main.article .body .text .share a:active {
  transform: scale(0.95);
  transition: 0.15s;
}
@media screen and (max-width: 767px) {
  .main.article .body .text .p {
    margin-top: 35px;
  }
}
@media screen and (min-width: 768px) {
  .main.article .body {
    display: flex;
  }
  .main.article .body .image {
    position: sticky;
    top: 0;
    width: 50%;
    height: 100vh;
  }
  .main.article .body .image:after {
    content: none;
  }
  .main.article .body .text {
    padding-top: 9.9vw;
    padding-bottom: 8.33vw;
    width: 50%;
  }
  .main.article .body .text .back + .h2 {
    margin-top: 3.65vw;
  }
  .main.article .body .text > * + .media,
  .main.article .body .text > * + .p,
  .main.article .body .text > * + .quote,
  .main.article .body .text > * + .share {
    margin-top: 3.65vw;
  }
  .main.article .body .text .h2 {
    position: relative;
    bottom: auto;
    left: auto;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    color: inherit;
  }
  .main.article .body .text .h2 + * {
    margin-top: 2.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .main.article .body .text {
    padding-left: 8.28vw;
    padding-right: 7.5vw;
  }
  .main.article .body .text .h2,
  .main.article .body .text .p,
  .main.article .body .text .quote {
    width: 88.28%;
  }
  .main.article .body .text > * + .media,
  .main.article .body .text > * + .p,
  .main.article .body .text > * + .quote {
    margin-top: 3.65vw;
  }
  .main.article .body .text > * + .share {
    margin-top: 4.9vw;
  }
  .main.article .body .text .media {
    column-gap: 1.3vw;
  }
  .main.article .body .text .quote .h3 + .label {
    margin-top: 2.08vw;
  }
  .main.article .body .text .share li + li {
    margin-left: 2.6vw;
  }
  .main.article .body .text .share li:first-child + li {
    margin-left: 2.19vw;
  }
}
.main.article .next {
  margin-top: 8.33vw;
}
.main.article .next .image {
  width: 100%;
  position: relative;
}
.main.article .next .image:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 77.0833333333%;
}
.main.article .next .image picture,
.main.article .next .image img,
.main.article .next .image video,
.main.article .next .image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main.article .next .image video,
.main.article .next .image img {
  object-fit: cover;
}
.main.article .next .text {
  background-color: #EBEAE8;
}
.main.article .next .text a {
  display: block;
  padding-top: 10.42vw;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  padding-bottom: 10.42vw;
}
.main.article .next .text a:hover .button span,
.main.article .next .text a:hover .button i {
  opacity: 0.5;
}
.main.article .next .text a:hover .button i {
  transform: translateX(50%);
}
.main.article .next .text a:active .button span {
  transform: scale(0.95);
  transition: 0.15s;
}
.main.article .next .text a:active .button i {
  transform: translateX(50%) scale(0.95);
  transition: 0.15s;
}
.main.article .next .text .label {
  display: block;
}
.main.article .next .text .label + .h2 {
  margin-top: 25px;
}
.main.article .next .text .h2 + .button {
  margin-top: 30px;
}
.main.article .next .text .button span,
.main.article .next .text .button i {
  transition: 0.5s;
}
@media screen and (min-width: 768px) {
  .main.article .next {
    display: flex;
  }
  .main.article .next .image {
    width: 50%;
  }
  .main.article .next .text {
    width: 50%;
  }
  .main.article .next .text a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  .main.article .next .text a {
    padding-left: 8.28vw;
    padding-right: 7.5vw;
  }
  .main.article .next .text .label + .h2 {
    margin-top: 2.08vw;
  }
  .main.article .next .text .h2 + .button {
    margin-top: 2.45vw;
  }
}

.main.book .intro {
  position: relative;
}
.main.book .intro .text {
  padding-top: 16.67vw;
}
.main.book .intro .h2 {
  position: relative;
  z-index: 2;
}
.main.book .intro .shapes {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 11.2vw;
  height: 100%;
  color: #D6D3CB;
}
.main.book .intro .shapes .line {
  width: 1px;
  height: 100%;
  background-color: currentColor;
}
.main.book .intro .shapes .circle {
  position: absolute;
  top: 17%;
  right: -11.2vw;
  width: 22.4vw;
  height: 22.4vw;
}
.main.book .intro .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  overflow: hidden;
}
.main.book .intro .shapes .circle span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.main.book .intro .text,
.main.book .intro .image {
  position: relative;
  z-index: 2;
}
.main.book .intro .text {
  text-align: center;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  padding-bottom: 10.83vw;
}
.main.book .intro .image {
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.book .intro .image img {
  width: 100%;
}
@media screen and (max-width: 479px) {
  .main.book .intro .shapes .circle {
    top: 17%;
  }
  .main.book .intro .text {
    padding-top: 33.33vw;
  }
}
@media screen and (max-width: 767px) {
  .main.book .intro .shapes {
    right: 34.38vw;
  }
  .main.book .intro .h1 {
    line-height: 1.15;
  }
}
@media screen and (min-width: 768px) {
  .main.book .intro .text {
    margin: auto;
    width: 56.25vw;
    padding-left: 0;
    padding-right: 0;
  }
  .main.book .intro .image {
    margin-left: 7.55vw;
    margin-right: 7.55vw;
  }
}
.main.book .details {
  padding-top: 10.42vw;
  padding-bottom: 10.42vw;
  overflow: hidden;
}
.main.book .details .body {
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.book .details .body .image img {
  width: 100%;
}
.main.book .details .body .image + .text {
  margin-top: 7.24vw;
}
.main.book .details .body .text .h2s + .p {
  margin-top: 2em;
}
.main.book .details .body .h4 + .button {
  margin-top: 1em;
}
.main.book .details .body .button + .p {
  margin-top: 3em;
}
.main.book .details .body .p + .p,
.main.book .details .body .p + ul {
  margin-top: 1.5em;
}
.main.book .details .body ul li + li {
  margin-top: 0.5em;
}
.main.book .details .body ul .button {
  display: block;
}
.main.book .details .body ul a {
  display: inline-block;
  transition: 0.5s;
}
.main.book .details .body ul a:hover {
  opacity: 0.5;
}
.main.book .details .body ul a:active {
  transform: scale(0.95);
  transition: 0.15s;
}
.main.book .details > .image {
  margin-top: 10.42vw;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.book .details > .image img {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .main.book .details > .image {
    margin-left: 7.55vw;
    margin-right: 7.55vw;
  }
}
@media screen and (min-width: 768px) {
  .main.book .details .headline,
  .main.book .details .body {
    padding-left: 7.55vw;
    padding-right: 7.55vw;
  }
  .main.book .details .headline {
    text-align: center;
  }
  .main.book .details .body {
    display: flex;
  }
  .main.book .details .body .image {
    width: 34.11vw;
  }
  .main.book .details .body .image + .text {
    margin-top: 0;
  }
  .main.book .details .body .text {
    flex: 1;
    padding-left: 8.85vw;
  }
}
@media screen and (min-width: 1024px) {
  .main.book .details .headline,
  .main.book .details .body {
    padding-left: 14.06vw;
    padding-right: 14.06vw;
  }
  .main.book .details .body .image {
    width: 28.13vw;
  }
  .main.book .details .body .text {
    padding-left: 5.21vw;
  }
}
@media screen and (min-width: 1280px) {
  .main.book .details .body,
  .main.book .details .headline {
    padding-left: 16.67vw;
    padding-right: 16.67vw;
  }
  .main.book .details .body .text {
    padding-left: 5.21vw;
  }
}

.main.home .intro {
  position: relative;
  width: 100vw;
  height: var(--app-height);
}


.main.home .hero-v2.intro {
  position: relative;
  width: 100%;
  height: var(--app-height);
}
.main.home .intro .is-hidden {
  opacity: 0;
  pointer-events: none;
}

.main.home-v2 .intro .is-hidden {
  opacity: 0;
  pointer-events: none;
}
.main.home .intro .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main.home-v2 .intro .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.main.home .intro .video:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
}

.main.home-v2 .intro .video:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
}
.main.home .intro .video video {
  display: none;
  position: absolute;
  z-index: 1;
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
}

.main.home-v2 .intro .video video {
  display: none;
  position: absolute;
  z-index: 1;
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
}
.main.home .intro .text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
  height: 100%;
  color: #fff;
  text-align: center;
}

.main.home-v2 .intro .text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
  height: 100%;
  color: #fff;
  text-align: center;
}
.main.home .intro .text .logo {
  position: absolute;
  top: 4.48vw;
  left: 0;
  width: 100%;
  padding: 0 3.22vw;
  text-align: left;
}

.main.home-v2 .intro .text .logo {
  position: absolute;
  top: 4.48vw;
  left: 0;
  width: 100%;
  padding: 0 3.22vw;
  text-align: left;
}
.main.home .intro .text .logo svg {
  height: 7.55vw;
  color: #fff;
  overflow: visible;
}

.main.home-v2 .intro .text .logo svg {
  height: 7.55vw;
  color: #fff;
  overflow: visible;
}
.main.home .intro .text .logo svg path {
  fill: currentColor;
}

.main.home-v2 .intro .text .logo svg path {
  fill: currentColor;
}
.main.home .intro .text h1 {
  text-align: left;
}

.main.home-v2 .intro .text h1 {
  text-align: left;
}
.main.home .intro .text h1 + .button {
  margin-top: 1em;
}

.main.home-v2 .intro .text h1 + .button {
  margin-top: 1em;
}
.main.home .intro .text a.button {
  color: currentColor;
}

.main.home-v2 .intro .text a.button {
  color: currentColor;
}
.main.home .intro .text a.button span {
  display: inline-block;
  transition: 0.5s;
}

.main.home-v2 .intro .text a.button span {
  display: inline-block;
  transition: 0.5s;
}
.main.home .intro .text a.button:hover span {
  opacity: 0.5;
}

.main.home-v2 .intro .text a.button:hover span {
  opacity: 0.5;
}
.main.home .intro .text a.button:active span {
  transform: scale(0.95);
  transition: 0.15s;
}

.main.home-v2 .intro .text a.button:active span {
  transform: scale(0.95);
  transition: 0.15s;
}
.main.home .intro .text p.button {
  color: currentColor;
}

.main.home-v2 .intro .text p.button {
  color: currentColor;
}
.main.home .intro .text p.button span {
  display: inline-block;
}

.main.home-v2 .intro .text p.button span {
  display: inline-block;
}
.main.home .intro .text .openMenu {
  position: absolute;
  top: 4.48vw;
  right: 4.22vw;
  width: 2.92vw;
  height: 0.52vw;
  color: #fff;
}

.main.home-v2 .intro .text .openMenu {
  position: absolute;
  top: 4.48vw;
  right: 4.22vw;
  width: 2.92vw;
  height: 0.52vw;
  color: #fff;
}
.main.home .intro .text .openMenu:before,
.main.home .intro .text .openMenu:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}

.main.home-v2 .intro .text .openMenu:before,
.main.home-v2 .intro .text .openMenu:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}
.main.home .intro .text .openMenu:before {
  top: 0;
}

.main.home-v2 .intro .text .openMenu:before {
  top: 0;
}
.main.home .intro .text .openMenu:after {
  bottom: 0;
}

.main.home-v2 .intro .text .openMenu:after {
  bottom: 0;
}
.main.home .intro .center {
  padding: 6.17vw 6vw;
}

.main.home-v2 .intro .center {
  padding: 6.17vw 6vw;
}
.main.home .intro .shapes {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 8.07vw;
  height: 100%;
  color: #D6D3CB;
}

.main.home-v2 .intro .shapes {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 8.07vw;
  height: 100%;
  color: #D6D3CB;
}
.main.home .intro .shapes .line {
  position: relative;
  width: 1px;
  overflow: hidden;
}

.main.home-v2 .intro .shapes .line {
  position: relative;
  width: 1px;
  overflow: hidden;
}
.main.home .intro .shapes .line span {
  position: absolute;
  left: 0;
  width: 100px;
  height: 0;
  background-color: currentColor;
}

.main.home-v2 .intro .shapes .line span {
  position: absolute;
  left: 0;
  width: 100px;
  height: 0;
  background-color: currentColor;
}
.main.home .intro .shapes .line:first-child {
  flex: 1;
  top: 0;
}

.main.home-v2 .intro .shapes .line:first-child {
  flex: 1;
  top: 0;
}
.main.home .intro .shapes .line:last-child {
  height: 5.36458vw;
  bottom: 0;
}

.main.home-v2 .intro .shapes .line:last-child {
  height: 5.36458vw;
  bottom: 0;
}
@media screen and (min-width: 1440px) {
  .main.home .intro .shapes .line {
    width: 0.075vw;
  }

  .main.home-v2 .intro .shapes .line {
    width: 0.075vw;
  }
}
.main.home .intro .shapes .circle {
  position: relative;
  width: 22.4vw;
  height: 22.4vw;
}

.main.home-v2 .intro .shapes .circle {
  position: relative;
  width: 22.4vw;
  height: 22.4vw;
}
.main.home .intro .shapes .circle svg path {
  stroke: currentColor;
  stroke-width: 0.4vw;
}

.main.home-v2 .intro .shapes .circle svg path {
  stroke: currentColor;
  stroke-width: 0.4vw;
}
@media screen and (min-width: 640px) {
  .main.home .intro .shapes .circle svg path {
    stroke-width: 1px;
  }

  .main.home-v2 .intro .shapes .circle svg path {
    stroke-width: 1px;
  }
}
@media screen and (min-width: 1440px) {
  .main.home .intro .shapes .circle svg path {
    stroke-width: 0.75px;
  }

  .main.home-v2 .intro .shapes .circle svg path {
    stroke-width: 0.75px;
  }
}
.main.home .intro .shapes .circle svg #logo-circle-r {
  stroke-dasharray: 255;
  stroke-dashoffset: 255;
}

.main.home-v2 .intro .shapes .circle svg #logo-circle-r {
  stroke-dasharray: 255;
  stroke-dashoffset: 255;
}
.main.home .intro .shapes .circle svg #logo-circle-a {
  stroke-dasharray: 375;
  stroke-dashoffset: 375;
}

.main.home-v2 .intro .shapes .circle svg #logo-circle-a {
  stroke-dasharray: 375;
  stroke-dashoffset: 375;
}
.main.home .intro .shapes .circle svg #logo-circle-left {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
}

.main.home-v2 .intro .shapes .circle svg #logo-circle-left {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
}
.main.home .intro .shapes .circle svg #logo-circle-right {
  stroke-dasharray: 270;
  stroke-dashoffset: 270;
}

.main.home-v2 .intro .shapes .circle svg #logo-circle-right {
  stroke-dasharray: 270;
  stroke-dashoffset: 270;
}
.main.home .intro .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  overflow: hidden;
  /* &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: vw(430);
    height: vw(430);
    border-radius: 50%;
    border: 1px solid currentColor;
  } */
}
@media screen and (min-width: 768px) {
  .main.home .intro {
    height: 100vh;
  }

  .main.home-v2 .intro {
    height: 100vh;
  }
  .main.home .intro .text .logo {
    top: 2.24vw;
  }

  .main.home-v2 .intro .text .logo {
    top: 2.24vw;
  }
  .main.home .intro .text .logo svg {
    height: 3.65vw;
  }

  .main.home-v2 .intro .text .logo svg {
    height: 3.65vw;
  }
}
.main.home a.banner {
  display: block;
  transition: background-color 0.5s;
}

.main.home-v2 a.banner {
  display: block;
  transition: background-color 0.5s;
}
.main.home a.banner:hover {
  background-color: #ac9a95;
}

.main.home-v2 a.banner:hover {
  background-color: #ac9a95;
}
.main.home .banner {
  background-color: #91827E;
  padding: 3.33vw 5.21vw;
  text-align: center;
  color: #fff;
}

.main.home-v2 .banner {
  background-color: #91827E;
  padding: 3.33vw 5.21vw;
  text-align: center;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .main.home .banner {
    padding: 1.67vw 5.21vw;
  }

  .main.home-v2 .banner {
    padding: 1.67vw 5.21vw;
  }
}
.main.home .project {
  position: relative;
  /* padding-top: vw(203);
  padding-bottom: vw(164); */
}

.main.home-v2 .project {
  position: relative;
  /* padding-top: vw(203);
  padding-bottom: vw(164); */
}
.main.home .project .center {
  padding: 7.03vw 15.36vw;
}

.main.home-v2 .project .center {
  padding: 7.03vw 15.36vw;
}
@media screen and (max-width: 639px) {
  .main.home .project .center {
    padding: 6.67vw 7.6vw;
  }

  .main.home-v2 .project .center {
    padding: 6.67vw 7.6vw;
  }
}
.main.home .project .header {
  text-align: center;
}

.main.home-v2 .project .header {
  text-align: center;
}
.main.home .project .video,
.main.home .project .image {
  margin-left: auto;
}

.main.home-v2 .project .video,
.main.home-v2 .project .image {
  margin-left: auto;
}
.main.home .project .video a .text,
.main.home .project .image a .text {
  transition: 0.5s;
}

.main.home-v2 .project .video a .text,
.main.home-v2 .project .image a .text {
  transition: 0.5s;
}
.main.home .project .video a:hover .text,
.main.home .project .image a:hover .text {
  opacity: 0.5;
}

.main.home-v2 .project .video a:hover .text,
.main.home-v2 .project .image a:hover .text {
  opacity: 0.5;
}
.main.home .project .video a:active .text,
.main.home .project .image a:active .text {
  transform: scale(0.95);
  transition: 0.15s;
}

.main.home-v2 .project .video a:active .text,
.main.home-v2 .project .image a:active .text {
  transform: scale(0.95);
  transition: 0.15s;
}
.main.home .project .video .text,
.main.home .project .image .text {
  display: inline-flex;
  flex-direction: column;
  margin-top: 2.24vw;
}

.main.home-v2 .project .video .text,
.main.home-v2 .project .image .text {
  display: inline-flex;
  flex-direction: column;
  margin-top: 2.24vw;
}
.main.home .project .video video {
  display: none;
  width: 100%;
}

.main.home-v2 .project .video video {
  display: none;
  width: 100%;
}
.main.home .project .image img {
  width: 100%;
}

.main.home-v2 .project .image img {
  width: 100%;
}
.main.home .project .bookImage {
  margin-left: 15.36vw;
  margin-right: 15.36vw;
}

.main.home-v2 .project .bookImage {
  margin-left: 15.36vw;
  margin-right: 15.36vw;
}
.main.home .project .bookText {
  padding: 6.67vw 7.6vw;
}

.main.home-v2 .project .bookText {
  padding: 6.67vw 7.6vw;
}
.main.home .project .bookText .h2s + .p {
  margin-top: 2em;
}

.main.home-v2 .project .bookText .h2s + .p {
  margin-top: 2em;
}
.main.home .project .bookText .h4 + .button {
  margin-top: 1em;
}

.main.home-v2 .project .bookText .h4 + .button {
  margin-top: 1em;
}
.main.home .project .bookText .button + .p {
  margin-top: 3em;
}

.main.home-v2 .project .bookText .button + .p {
  margin-top: 3em;
}
.main.home .project .bookText .p + .p,
.main.home .project .bookText .p + ul {
  margin-top: 1.5em;
}

.main.home-v2 .project .bookText .p + .p,
.main.home-v2 .project .bookText .p + ul {
  margin-top: 1.5em;
}
.main.home .project .text:last-child {
  padding-bottom: 0;
}

.main.home-v2 .project .text:last-child {
  padding-bottom: 0;
}
.main.home .project .text .h3 {
  text-transform: uppercase;
}

.main.home-v2 .project .text .h3 {
  text-transform: uppercase;
}
.main.home .project .text .h4 {
  margin-top: 0.94vw;
}

.main.home-v2 .project .text .h4 {
  margin-top: 0.94vw;
}
.main.home .project .text .button {
  display: inline-block;
  margin-top: 5.26vw;
}

.main.home-v2 .project .text .button {
  display: inline-block;
  margin-top: 5.26vw;
}
.main.home .project .text .button span {
  display: inline-block;
  transition: 0.5s;
}

.main.home-v2 .project .text .button span {
  display: inline-block;
  transition: 0.5s;
}
.main.home .project .text .button:hover span {
  opacity: 0.5;
}

.main.home-v2 .project .text .button:hover span {
  opacity: 0.5;
}
.main.home .project .text .button:active span {
  transform: scale(0.95);
  transition: 0.15s;
}

.main.home-v2 .project .text .button:active span {
  transform: scale(0.95);
  transition: 0.15s;
}
@media screen and (min-width: 768px) {
  .main.home .project .pb {
    width: 45vw;
  }

  .main.home-v2 .project .pb {
    width: 45vw;
  }
  .main.home .project .text .h4 {
    margin-top: 0.47vw;
  }

  .main.home-v2 .project .text .h4 {
    margin-top: 0.47vw;
  }
  .main.home .project .text .button {
    margin-top: 1.25vw;
  }

  .main.home-v2 .project .text .button {
    margin-top: 1.25vw;
  }
  .main.home .project .video,
.main.home .project .image {
    width: 70.83vw;
  }

  .main.home-v2 .project .video,
.main.home-v2 .project .image {
    width: 70.83vw;
  }
  .main.home .project .video.has-book,
.main.home .project .image.has-book {
    display: flex;
    width: 100%;
    padding: 0 7.6vw;
  }

  .main.home-v2 .project .video.has-book,
.main.home-v2 .project .image.has-book {
    display: flex;
    width: 100%;
    padding: 0 7.6vw;
  }
  .main.home .project .video .bookImage,
.main.home .project .image .bookImage {
    margin: 0;
    width: 40%;
  }

  .main.home-v2 .project .video .bookImage,
.main.home-v2 .project .image .bookImage {
    margin: 0;
    width: 40%;
  }
  .main.home .project .video .bookText,
.main.home .project .image .bookText {
    flex: 1;
    padding-top: 0;
    padding-right: 0;
  }

  .main.home-v2 .project .video .bookText,
.main.home-v2 .project .image .bookText {
    flex: 1;
    padding-top: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 1024px) {
  .main.home .project .video.has-book,
.main.home .project .image.has-book {
    width: 70.83vw;
    padding-left: 0;
  }

  .main.home-v2 .project .video.has-book,
.main.home-v2 .project .image.has-book {
    width: 70.83vw;
    padding-left: 0;
  }
  .main.home .project .video .bookImage,
.main.home .project .image .bookImage {
    width: 50%;
  }

  .main.home-v2 .project .video .bookImage,
.main.home-v2 .project .image .bookImage {
    width: 50%;
  }
  .main.home .project .video .bookText,
.main.home .project .image .bookText {
    padding-left: 5.21vw;
  }

  .main.home-v2 .project .video .bookText,
.main.home-v2 .project .image .bookText {
    padding-left: 5.21vw;
  }
}
@media screen and (min-width: 1440px) {
  .main.home .project .video .bookImage,
.main.home .project .image .bookImage {
    width: 60%;
  }

  .main.home-v2 .project .video .bookImage,
.main.home-v2 .project .image .bookImage {
    width: 60%;
  }
}
.main.home .projects .center {
  padding: 7.03vw 15.36vw;
}

.main.home-v2 .projects .center {
  padding: 7.03vw 15.36vw;
}
.main.home .projects .slider {
  overflow: hidden;
}

.main.home-v2 .projects .slider {
  overflow: hidden;
}
.main.home .projects .swiper {
  padding-right: 18.33vw;
}

.main.home-v2 .projects .swiper {
  padding-right: 18.33vw;
}
.main.home .projects .swiper-slide {
  padding-right: 0.94vw;
}

.main.home-v2 .projects .swiper-slide {
  padding-right: 0.94vw;
}
.main.home .projects .slideTitle {
  height: auto;
}

.main.home-v2 .projects .slideTitle {
  height: auto;
}
.main.home .projects .slideTitle .inner {
  position: relative;
  width: 100%;
}

.main.home-v2 .projects .slideTitle .inner {
  position: relative;
  width: 100%;
}
.main.home .projects .slideTitle .inner:before {
  content: "";
  display: block;
  height: 0;
  padding-top: 131.027%;
}

.main.home-v2 .projects .slideTitle .inner:before {
  content: "";
  display: block;
  height: 0;
  padding-top: 131.027%;
}
.main.home .projects .slideTitle .innertube {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 1.88vw;
}

.main.home-v2 .projects .slideTitle .innertube {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 1.88vw;
}
.main.home .projects .slideTitle h2 {
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.main.home-v2 .projects .slideTitle h2 {
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.main.home .projects .image {
  position: relative;
  width: 100%;
}

.main.home-v2 .projects .image {
  position: relative;
  width: 100%;
}
.main.home .projects .image:before {
  content: "";
  display: block;
  height: 0;
  padding-top: 131.027%;
}

.main.home-v2 .projects .image:before {
  content: "";
  display: block;
  height: 0;
  padding-top: 131.027%;
}
.main.home .projects .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main.home-v2 .projects .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main.home .projects .text {
  margin-top: 2.24vw;
}

.main.home-v2 .projects .text {
  margin-top: 2.24vw;
}
.main.home .projects .text .h3 {
  text-transform: uppercase;
}

.main.home-v2 .projects .text .h3 {
  text-transform: uppercase;
}
.main.home .projects .text .h4 {
  margin-top: 0.94vw;
}

.main.home-v2 .projects .text .h4 {
  margin-top: 0.94vw;
}
@media screen and (min-width: 768px) {
  .main.home .projects .p {
    width: 34.11vw;
  }

  .main.home-v2 .projects .p {
    width: 34.11vw;
  }
  .main.home .projects .text .h4 {
    margin-top: 0.47vw;
  }

  .main.home-v2 .projects .text .h4 {
    margin-top: 0.47vw;
  }
}
.main.home .about {
  position: relative;
  padding-top: 10.57vw;
  padding-bottom: 8.54vw;
}

.main.home-v2 .about {
  position: relative;
  padding-top: 10.57vw;
  padding-bottom: 8.54vw;
}
.main.home .about .header {
  text-align: center;
}

.main.home-v2 .about .header {
  text-align: center;
}
.main.home .about .video {
  margin-top: 5.1vw;
}

.main.home-v2 .about .video {
  margin-top: 5.1vw;
}
.main.home .about .video video {
  display: none;
  width: 100%;
}

.main.home-v2 .about .video video {
  display: none;
  width: 100%;
}
.main.home .about .image {
  margin-top: 5.1vw;
}

.main.home-v2 .about .image {
  margin-top: 5.1vw;
}
.main.home .about .image img {
  width: 100%;
}

.main.home-v2 .about .image img {
  width: 100%;
}
.main.home .about .text {
  margin-top: 5.26vw;
}

.main.home-v2 .about .text {
  margin-top: 5.26vw;
}
.main.home .about .text .button {
  display: inline-block;
  margin-top: 5.26vw;
}

.main.home-v2 .about .text .button {
  display: inline-block;
  margin-top: 5.26vw;
}
.main.home .about .text .button span {
  display: inline-block;
  transition: 0.5s;
}

.main.home-v2 .about .text .button span {
  display: inline-block;
  transition: 0.5s;
}
.main.home .about .text .button:hover span {
  opacity: 0.5;
}

.main.home-v2 .about .text .button:hover span {
  opacity: 0.5;
}
.main.home .about .text .button:active span {
  transform: scale(0.95);
  transition: 0.15s;
}

.main.home-v2 .about .text .button:active span {
  transform: scale(0.95);
  transition: 0.15s;
}
.main.home .about .shapes {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  color: #D6D3CB;
}

.main.home-v2 .about .shapes {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  color: #D6D3CB;
}
.main.home .about .shapes .line {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}

.main.home-v2 .about .shapes .line {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}
.main.home .about .shapes .circle {
  position: absolute;
  transform: rotate(-22deg);
  top: -7.03vw;
  right: 17.19vw;
  width: 22.4vw;
  height: 22.4vw;
}

.main.home-v2 .about .shapes .circle {
  position: absolute;
  transform: rotate(-22deg);
  top: -7.03vw;
  right: 17.19vw;
  width: 22.4vw;
  height: 22.4vw;
}
.main.home .about .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 22.4vw;
  height: 22.4vw;
  overflow: hidden;
}

.main.home-v2 .about .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 22.4vw;
  height: 22.4vw;
  overflow: hidden;
}
.main.home .about .shapes .circle span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 22.4vw;
  height: 22.4vw;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.main.home-v2 .about .shapes .circle span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 22.4vw;
  height: 22.4vw;
  border-radius: 50%;
  border: 1px solid currentColor;
}
@media screen and (min-width: 768px) {
  .main.home .about .video,
.main.home .about .image {
    width: 70.83vw;
  }

  .main.home-v2 .about .video,
.main.home-v2 .about .image {
    width: 70.83vw;
  }
  .main.home .about .text {
    margin-left: auto;
    margin-right: 7.03vw;
    width: 40.99vw;
    padding: 0;
  }

  .main.home-v2 .about .text {
    margin-left: auto;
    margin-right: 7.03vw;
    width: 40.99vw;
    padding: 0;
  }
  .main.home .about .text .button {
    margin-top: 1.25vw;
  }

  .main.home-v2 .about .text .button {
    margin-top: 1.25vw;
  }
}
.main.home .ideas {
  padding-top: 7.14vw;
  padding-bottom: 8.7vw;
}

.main.home-v2 .ideas {
  padding-top: 7.14vw;
  padding-bottom: 8.7vw;
}
.main.home .ideas .images {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8.85vw;
  column-gap: 8.85vw;
  margin-top: 5.05vw;
}

.main.home-v2 .ideas .images {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8.85vw;
  column-gap: 8.85vw;
  margin-top: 5.05vw;
}
.main.home .ideas .images .video,
.main.home .ideas .images .image,
.main.home .ideas .images video,
.main.home .ideas .images img {
  width: 100%;
}

.main.home-v2 .ideas .images .video,
.main.home-v2 .ideas .images .image,
.main.home-v2 .ideas .images video,
.main.home-v2 .ideas .images img {
  width: 100%;
}
.main.home .ideas .images video {
  display: none;
}

.main.home-v2 .ideas .images video {
  display: none;
}
.main.home .ideas .text {
  margin-top: 8.75vw;
  text-align: center;
}

.main.home-v2 .ideas .text {
  margin-top: 8.75vw;
  text-align: center;
}
.main.home .ideas .text .button {
  display: inline-block;
  margin-top: 5.26vw;
}

.main.home-v2 .ideas .text .button {
  display: inline-block;
  margin-top: 5.26vw;
}
.main.home .ideas .text .button span {
  display: inline-block;
  transition: 0.5s;
}

.main.home-v2 .ideas .text .button span {
  display: inline-block;
  transition: 0.5s;
}
.main.home .ideas .text .button:hover span {
  opacity: 0.5;
}

.main.home-v2 .ideas .text .button:hover span {
  opacity: 0.5;
}
.main.home .ideas .text .button:active span {
  transform: scale(0.95);
  transition: 0.15s;
}

.main.home-v2 .ideas .text .button:active span {
  transform: scale(0.95);
  transition: 0.15s;
}
@media screen and (min-width: 768px) {
  .main.home .ideas .header,
.main.home .ideas .images {
    padding-left: 11.46vw;
    padding-right: 11.46vw;
  }

  .main.home-v2 .ideas .header,
.main.home-v2 .ideas .images {
    padding-left: 11.46vw;
    padding-right: 11.46vw;
  }
  .main.home .ideas .images {
    grid-template-columns: 1fr 1fr;
  }

  .main.home-v2 .ideas .images {
    grid-template-columns: 1fr 1fr;
  }
  .main.home .ideas .text {
    padding-left: 19.27vw;
    padding-right: 19.27vw;
  }

  .main.home-v2 .ideas .text {
    padding-left: 19.27vw;
    padding-right: 19.27vw;
  }
  .main.home .ideas .text .button {
    margin-top: 1.25vw;
  }

  .main.home-v2 .ideas .text .button {
    margin-top: 1.25vw;
  }
}
.main.home .hero img {
  width: 100%;
}

.main.home-v2 .hero img {
  width: 100%;
}
.main.home .button {
  color: #353535;
}

.main.home-v2 .button {
  color: #353535;
}

.device-desktop .main.home .hero .video video.desktop,
.device-desktop .main.home .project .video video.desktop,
.device-desktop .main.home .about .video video.desktop,
.device-desktop .main.home .ideas .video video.desktop {
  display: block;
}


.device-desktop .main.home-v2 .hero .video video.desktop,
.device-desktop .main.home-v2 .project .video video.desktop,
.device-desktop .main.home-v2 .about .video video.desktop,
.device-desktop .main.home-v2 .ideas .video video.desktop {
  display: block;
}

.device-mobile .main.home .hero .video video.mobile,
.device-mobile .main.home .project .video video.mobile,
.device-mobile .main.home .about .video video.mobile,
.device-mobile .main.home .ideas .video video.mobile {
  display: block;
}


.device-mobile .main.home-v2 .hero .video video.mobile,
.device-mobile .main.home-v2 .project .video video.mobile,
.device-mobile .main.home-v2 .about .video video.mobile,
.device-mobile .main.home-v2 .ideas .video video.mobile {
  display: block;
}

body.home header .logo svg path,
body.home header .hamburger {
  opacity: 0;
}

:root {
  --video-width: 640;
  --video-height: 360;
}

.main.ideas {
  padding-bottom: 14.38vw;
}
.main.ideas .intro {
  position: relative;
  padding-top: 16.67vw;
  padding-bottom: 10.83vw;
}
@media screen and (max-width: 479px) {
  .main.ideas .intro {
    padding-top: 33.33vw;
  }
}
.main.ideas .intro .shapes {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 22.71vw;
  height: 100%;
  color: #D6D3CB;
}
.main.ideas .intro .shapes .line {
  width: 1px;
  height: 100%;
  background-color: currentColor;
}
.main.ideas .intro .shapes .circle {
  position: absolute;
  top: 55%;
  margin-top: -11.2vw;
  right: -11.2vw;
  width: 22.4vw;
  height: 22.4vw;
}
@media screen and (max-width: 479px) {
  .main.ideas .intro .shapes .circle {
    top: 70%;
  }
}
.main.ideas .intro .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  overflow: hidden;
}
.main.ideas .intro .shapes .circle span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.main.ideas .intro .text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
@media screen and (min-width: 768px) {
  .main.ideas .intro .text {
    margin: auto;
    width: 53.65vw;
    padding-left: 0;
    padding-right: 0;
  }
}
.main.ideas .blocks li {
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.ideas .blocks li a {
  display: flex;
  flex-direction: column;
}
.main.ideas .blocks li a:hover .button span,
.main.ideas .blocks li a:hover .button i {
  opacity: 0.5;
}
.main.ideas .blocks li a:hover .button i {
  transform: translateX(50%);
}
.main.ideas .blocks li a:active .button span {
  transform: scale(0.95);
  transition: 0.15s;
}
.main.ideas .blocks li a:active .button i {
  transform: translateX(50%) scale(0.95);
  transition: 0.15s;
}
.main.ideas .blocks li a .button span,
.main.ideas .blocks li a .button i {
  transition: 0.5s;
}
.main.ideas .blocks li + li {
  margin-top: 14.58vw;
}
.main.ideas .blocks li.module .media {
  position: relative;
}
.main.ideas .blocks li.module .media:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.main.ideas .blocks li.module .media picture,
.main.ideas .blocks li.module .media img,
.main.ideas .blocks li.module .media video,
.main.ideas .blocks li.module .media iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main.ideas .blocks li.module .media video,
.main.ideas .blocks li.module .media img {
  object-fit: cover;
}
.main.ideas .blocks li.module .media:before {
  padding-top: calc(var(--video-height) / var(--video-width) * 100%);
}
.main.ideas .blocks li.module .media.hover {
  cursor: pointer;
}
.main.ideas .blocks li.module .media.hover.started img {
  transition: 0.5s;
  opacity: 0.5;
}
.main.ideas .blocks li.module .media.hover.started iframe {
  opacity: 1;
  pointer-events: all;
  transition-delay: 0.25s;
}
.main.ideas .blocks li.module .media.hover.started .playButton {
  transition: 0.5s;
  opacity: 0;
  pointer-events: none;
}
.main.ideas .blocks li.module .media.hover:hover .playButton svg {
  opacity: 0.75;
}
.main.ideas .blocks li.module .media.hover:active .playButton svg {
  transform: scale(0.95);
  transition: 0.15s;
}
.main.ideas .blocks li.module .media iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: 0.5s;
}
.main.ideas .blocks li.module .media .playButton {
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
  left: 50%;
}
.main.ideas .blocks li.module .media .playButton i {
  display: block;
}
.main.ideas .blocks li.module .media .playButton svg {
  display: block;
  width: 80px;
  height: 80px;
  transition: 0.5s;
}
.main.ideas .blocks li.module .media + .text {
  margin-top: 5.21vw;
}
.main.ideas .blocks li.article .image {
  order: 1;
  position: relative;
}
.main.ideas .blocks li.article .image:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 128.2442748092%;
}
.main.ideas .blocks li.article .image picture,
.main.ideas .blocks li.article .image img,
.main.ideas .blocks li.article .image video,
.main.ideas .blocks li.article .image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main.ideas .blocks li.article .image video,
.main.ideas .blocks li.article .image img {
  object-fit: cover;
}
.main.ideas .blocks li.article .text {
  order: 2;
  margin-top: 5.21vw;
}
.main.ideas .blocks li .text .h2 + .p,
.main.ideas .blocks li .text .h2 + .button {
  margin-top: 10px;
}
.main.ideas .blocks li .text .p + .button {
  margin-top: 25px;
}
@media screen and (min-width: 768px) {
  .main.ideas .blocks li a {
    flex-direction: row;
    pointer-events: none;
  }
  .main.ideas .blocks li a .media,
  .main.ideas .blocks li a .image {
    pointer-events: all;
  }
  .main.ideas .blocks li a .text .h2,
  .main.ideas .blocks li a .text .p,
  .main.ideas .blocks li a .text .button {
    pointer-events: all;
  }
  .main.ideas .blocks li.module {
    display: flex;
    align-items: center;
  }
  .main.ideas .blocks li.module .media,
  .main.ideas .blocks li.module .text {
    width: 50%;
  }
  .main.ideas .blocks li.module .media + .text {
    margin-top: 0;
  }
  .main.ideas .blocks li.module .text {
    padding-left: 5.21vw;
  }
  .main.ideas .blocks li.article .image,
  .main.ideas .blocks li.article .text {
    width: 50%;
  }
  .main.ideas .blocks li.article .image {
    order: 2;
  }
  .main.ideas .blocks li.article .text {
    order: 1;
    margin-top: 10.42vw;
    padding-right: 5.21vw;
  }
  .main.ideas .blocks li.article.alt .image {
    order: 1;
  }
  .main.ideas .blocks li.article.alt .text {
    order: 2;
    padding-right: 0vw;
    padding-left: 5.21vw;
  }
}
@media screen and (min-width: 1280px) {
  .main.ideas .blocks li.module {
    padding-left: 7.55vw;
    padding-right: 7.55vw;
  }
  .main.ideas .blocks li.module .media {
    width: 53.65vw;
  }
  .main.ideas .blocks li.module .text {
    flex: 1;
    padding-left: 4.95vw;
    padding-right: 3.8vw;
  }
  .main.ideas .blocks li.article {
    padding-left: 15.36vw;
    padding-right: 19.27vw;
  }
  .main.ideas .blocks li.article .image {
    width: 34.11vw;
  }
  .main.ideas .blocks li.article .text {
    flex: 1;
    padding-right: 8.75vw;
  }
  .main.ideas .blocks li.article.alt .text {
    padding-right: 0;
    padding-left: 8.75vw;
  }
  .main.ideas .blocks li .text .h2 + .p,
  .main.ideas .blocks li .text .h2 + .button {
    margin-top: 2.08vw;
  }
  .main.ideas .blocks li .text .p + .button {
    margin-top: 2.6vw;
  }
}

.main.press .list {
  position: relative;
  padding: 20.83vw 4.22vw;
}
.main.press .list .years {
  display: none;
}
.main.press .list .articleList h2 + ul {
  margin-top: 30px;
}
.main.press .list .articleList li .button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0.5em;
}
.main.press .list .articleList li .button p:not(:first-child) {
  text-transform: none;
  letter-spacing: 0.025em;
}
.main.press .list .articleList li + li {
  margin-top: 30px;
}
.main.press .list .articleList + .articleList {
  margin-top: 30px;
}
.main.press .list .shapes {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 26.82vw;
  height: 100%;
  color: #D6D3CB;
  opacity: 0;
}
.main.press .list .shapes .line {
  width: 1px;
  height: 100%;
  background-color: currentColor;
}
.main.press .list .shapes .circle {
  opacity: 0;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  right: -11.2vw;
  width: 22.4vw;
  height: 22.4vw;
}
.main.press .list .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  overflow: hidden;
}
.main.press .list .shapes .circle span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  border-radius: 50%;
  border: 1px solid currentColor;
}
@media screen and (max-width: 479px) {
  .main.press .list .articleList h2 + ul {
    margin-top: 30px;
  }
  .main.press .list .articleList li .button {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0.5em;
  }
  .main.press .list .articleList li .button p {
    line-height: 1.4;
  }
  .main.press .list .articleList li .button p:not(:first-child) {
    margin-top: 0.25em;
    width: 85%;
  }
  .main.press .list .articleList li + li {
    margin-top: 40px;
  }
  .main.press .list .articleList + .articleList {
    margin-top: 30px;
  }
  .main.press .list .shapes .circle {
    top: 17%;
  }
}
@media screen and (max-width: 767px) {
  .main.press .list .shapes {
    right: 17.19vw;
  }
}
@media screen and (min-width: 768px) {
  .main.press .list {
    display: flex;
    padding: 16.3vw 19.64vw;
  }
  .main.press .list .years {
    display: block;
    margin-right: 5.1vw;
  }
  .main.press .list .years ul:hover a {
    opacity: 0.31;
  }
  .main.press .list .years ul:hover a.is-active:not(:hover) {
    opacity: 0.62;
  }
  .main.press .list .years ul a {
    opacity: 0.31;
    transition: 0.35s;
    line-height: 2;
  }
  .main.press .list .years ul a.is-active {
    opacity: 1;
  }
  .main.press .list .years ul a:hover {
    opacity: 1;
  }
  .main.press .list .articles {
    flex: 1;
  }
  .main.press .list .articleList h2 {
    display: none;
  }
  .main.press .list .articleList h2 + ul {
    margin-top: 0;
  }
  .main.press .list .articleList li .button {
    display: block;
    margin-top: 0.25em;
  }
  .main.press .list .articleList li .button p {
    display: inline;
  }
  .main.press .list .articleList li .button p + p:before {
    content: "|";
    margin-left: 0.5em;
    margin-right: 0.66em;
  }
  .main.press .list .articleList li + li {
    margin-top: 2.29vw;
  }
  .main.press .list .articleList a {
    transition: 0.5s;
  }
  .main.press .list .articleList a:hover {
    opacity: 0.5;
  }
  .main.press .list .articleList a:active {
    transform: scale(0.975);
    transition: 0.15s;
  }
  .main.press .list .articleList + .articleList {
    margin-top: 2.29vw;
  }
  .main.press .list .articleList.is-active {
    display: block;
  }
}
.main.press .hero img,
.main.press .hero video {
  display: block;
  width: 100%;
}
.main.press .hero iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640/360;
}

.device-desktop .main.press .hero .mobile {
  display: none;
}

.device-mobile .main.press .hero .desktop {
  display: none;
}

.main.project .hero {
  position: relative;
}
.main.project .hero + .next {
  margin-top: 8.33vw;
}
.main.project .hero:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.25;
}
.main.project .hero .image {
  position: relative;
  width: 100%;
  height: var(--app-height);
}
.main.project .hero .image picture.desktop {
  display: none;
}
@media (min-aspect-ratio: 1/1) {
  .main.project .hero .image picture.mobile {
    display: none;
  }
  .main.project .hero .image picture.desktop {
    display: block;
  }
}
.main.project .hero .image picture,
.main.project .hero .image video,
.main.project .hero .image img,
.main.project .hero .image iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main.project .hero .image iframe {
  background-color: #000;
}
.main.project .hero .text {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 5.21vw;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  padding-bottom: 5.21vw;
  color: #fff;
}
.main.project .hero .text:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.main.project .hero .text h1,
.main.project .hero .text h2,
.main.project .hero .text form,
.main.project .hero .text p {
  position: relative;
  z-index: 2;
}
.main.project .hero .text h1 + .button {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .main.project .hero .text h1 + p.label {
    margin-top: -0.5em;
  }
}
.main.project .hero .text form {
  margin-top: 20px;
}
.main.project .hero .text form input {
  position: relative;
  z-index: 2;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: #fff;
  background: transparent;
  outline: none;
}
.main.project .hero .text form input::placeholder {
  color: currentColor;
  opacity: 0.7;
}
.main.project .hero .text form input:-ms-input-placeholder {
  color: currentColor;
  opacity: 0.7;
}
.main.project .hero .text form input::-ms-input-placeholder {
  color: currentColor;
  opacity: 0.7;
}
.main.project .hero .text form + .label {
  margin-top: 20px;
}
@media screen and (min-width: 1440px) {
  .main.project .hero .text form + .label {
    margin-top: 1.04vw;
  }
}
.main.project .hero .text p {
  margin-top: 2px;
}
.main.project .hero .text .label {
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .main.project .hero .image {
    height: 100vh;
  }
  .main.project .hero .text form input {
    border-width: 2px;
  }
}
@media screen and (min-width: 1024px) {
  .main.project .hero .text {
    padding-left: 7.55vw;
    padding-right: 7.55vw;
    padding-bottom: 6.04vw;
  }
  .main.project .hero .text form {
    margin-top: 1.04vw;
  }
  .main.project .hero .text p {
    margin-top: 1.04vw;
  }
}
@media screen and (min-width: 1280px) {
  .main.project .hero .text .label {
    display: block;
    margin-top: -1em;
  }
}
.main.project .intro {
  position: relative;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  padding-top: 16.67vw;
  padding-bottom: 16.67vw;
  padding-top: 16.67vw;
  padding-bottom: 8.33vw;
}
.main.project .intro .shapes {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 14.84vw;
  height: 100%;
  color: #D6D3CB;
}
.main.project .intro .shapes .line {
  width: 1px;
  height: 100%;
  background-color: currentColor;
}
.main.project .intro .shapes .circle {
  position: absolute;
  bottom: 7.03vw;
  right: -11.2vw;
  width: 22.4vw;
  height: 22.4vw;
}
.main.project .intro .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  overflow: hidden;
}
.main.project .intro .shapes .circle span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22.4vw;
  height: 22.4vw;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.main.project .intro .image {
  position: relative;
  z-index: 2;
}
.main.project .intro .image img,
.main.project .intro .image video,
.main.project .intro .image iframe {
  width: 100%;
}
.main.project .intro .image .iframe {
  position: relative;
}
.main.project .intro .image .iframe:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.main.project .intro .image .iframe picture,
.main.project .intro .image .iframe img,
.main.project .intro .image .iframe video,
.main.project .intro .image .iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main.project .intro .image .iframe video,
.main.project .intro .image .iframe img {
  object-fit: cover;
}
.main.project .intro .image + .text {
  margin-top: 5.21vw;
}
.main.project .intro .text {
  position: relative;
  z-index: 2;
}
.main.project .intro .text li .label + .p {
  margin-top: 5px;
}
.main.project .intro .text li + li {
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .main.project .intro {
    display: flex;
    align-items: flex-end;
  }
  .main.project .intro .shapes .circle {
    top: 6.93vw;
    bottom: auto;
  }
  .main.project .intro .image {
    width: 57.6vw;
  }
  .main.project .intro .image + .text {
    margin-top: 0;
  }
  .main.project .intro .text {
    flex: 1;
    padding-left: 4.95vw;
  }
}
@media screen and (min-width: 1024px) {
  .main.project .intro {
    padding-left: 7.55vw;
    padding-right: 7.55vw;
  }
  .main.project .intro .text {
    padding-bottom: 2.34vw;
  }
  .main.project .intro .text li .label + .p {
    margin-top: 0.52vw;
  }
  .main.project .intro .text li + li {
    margin-top: 2.08vw;
  }
}
.main.project .description {
  padding-bottom: 9.58vw;
}
.main.project .description .iframe .hover {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(247, 245, 243, 0.75);
  opacity: 0;
  transition: 0.5s;
}
.main.project .description .iframe .hover:hover {
  opacity: 1;
}
.main.project .description .iframe .hover span {
  display: none;
  position: relative;
  text-align: center;
  cursor: pointer;
  transition: 0.5s;
}
.main.project .description .iframe .hover span:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.main.project .description .iframe .hover span:hover {
  transform: scale(1.05);
}
.main.project .description .iframe .hover span:active {
  transform: scale(1.025);
  filter: contrast(0.25);
  transition: 0.1s;
}
.main.project .description .iframe .hover span.is-active {
  display: block;
}
@media screen and (min-width: 1440px) {
  .main.project .description .iframe .hover span:before {
    width: 7.81vw;
    height: 7.81vw;
    margin-left: -3.91vw;
    margin-top: -3.91vw;
  }
}
.main.project .description .image img,
.main.project .description .image video,
.main.project .description .image iframe {
  width: 100%;
}
.main.project .description .image .iframe {
  position: relative;
}
.main.project .description .image .iframe:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.main.project .description .image .iframe picture,
.main.project .description .image .iframe img,
.main.project .description .image .iframe video,
.main.project .description .image .iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main.project .description .image .iframe video,
.main.project .description .image .iframe img {
  object-fit: cover;
}
.main.project .description .image + .text {
  margin-top: 13.54vw;
  margin-top: 8.33vw;
}
.main.project .description .text {
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.project .description .text .h2 + .columns {
  margin-top: 40px;
}
@media screen and (min-width: 768px) {
  .main.project .description .image {
    padding-left: 7.55vw;
    padding-right: 7.55vw;
  }
  .main.project .description .text {
    padding-left: 10.42vw;
    padding-right: 10.42vw;
  }
  .main.project .description .text .columns .p {
    column-count: 2;
    column-gap: 6.25vw;
  }
}
@media screen and (min-width: 1024px) {
  .main.project .description .text {
    padding-left: 15.36vw;
    padding-right: 30.99vw;
  }
  .main.project .description .text .h2 + .columns {
    margin-top: 4.17vw;
  }
  .main.project .description .text .columns {
    padding-right: 4.11vw;
  }
  .main.project .description .text .columns .p {
    column-gap: 4.11vw;
  }
}
.main.project .body .image:last-child {
  margin-bottom: 16.67vw;
  margin-bottom: 8.33vw;
}
.main.project .body .image + .image {
  margin-top: 16.67vw;
  margin-top: 8.33vw;
}
.main.project .body .image.hang, .main.project .body .image.regular {
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.project .body .image.columns {
  display: flex;
  flex-direction: column;
  align-items: center;
  column-gap: 5.21vw;
  row-gap: 5.21vw;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
}
.main.project .body .image img,
.main.project .body .image video,
.main.project .body .image iframe {
  width: 100%;
}
.main.project .body .image .iframe {
  position: relative;
}
.main.project .body .image .iframe:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.main.project .body .image .iframe picture,
.main.project .body .image .iframe img,
.main.project .body .image .iframe video,
.main.project .body .image .iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main.project .body .image .iframe video,
.main.project .body .image .iframe img {
  object-fit: cover;
}
.main.project .body .image .iframe .hover {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(247, 245, 243, 0.75);
  opacity: 0;
  transition: 0.5s;
}
.main.project .body .image .iframe .hover:hover {
  opacity: 1;
}
.main.project .body .image .iframe .hover span {
  display: none;
  position: relative;
  text-align: center;
  cursor: pointer;
  transition: 0.5s;
}
.main.project .body .image .iframe .hover span:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.main.project .body .image .iframe .hover span:hover {
  transform: scale(1.05);
}
.main.project .body .image .iframe .hover span:active {
  transform: scale(1.025);
  filter: contrast(0.25);
  transition: 0.1s;
}
.main.project .body .image .iframe .hover span.is-active {
  display: block;
}
@media screen and (min-width: 1440px) {
  .main.project .body .image .iframe .hover span:before {
    width: 7.81vw;
    height: 7.81vw;
    margin-left: -3.91vw;
    margin-top: -3.91vw;
  }
}
.main.project .body .paragraph,
.main.project .body .list {
  padding-top: 10.42vw;
  padding-bottom: 10.42vw;
  padding-top: 8.33vw;
  padding-bottom: 8.33vw;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  text-align: center;
}
.main.project .body .list .h2 + ul {
  margin-top: 20px;
}
@media screen and (min-width: 640px) {
  .main.project .body .image.columns {
    flex-direction: row;
  }
}
@media screen and (min-width: 768px) {
  .main.project .body .image.shape {
    display: flex;
  }
  .main.project .body .image.shape .shapes {
    flex: 1;
    position: relative;
    color: #D6D3CB;
  }
  .main.project .body .image.shape .shapes .line {
    position: absolute;
    top: 51.79487%;
    width: 100%;
    height: 1px;
    background-color: currentColor;
  }
  .main.project .body .image.shape .shapes .circle {
    position: absolute;
    top: 51.79487%;
    margin-top: -11.2vw;
    left: 50%;
    margin-left: -11.2vw;
    width: 22.4vw;
    height: 22.4vw;
  }
  .main.project .body .image.shape .shapes .circle span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 22.4vw;
    height: 22.4vw;
    overflow: hidden;
  }
  .main.project .body .image.shape .shapes .circle span:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 22.4vw;
    height: 22.4vw;
    border-radius: 50%;
    border: 1px solid currentColor;
  }
  .main.project .body .image.shape .img {
    width: 61.25vw;
  }
  .main.project .body .image.shape.left .shapes {
    order: 2;
  }
  .main.project .body .image.shape.left .img {
    order: 1;
  }
  .main.project .body .image.shape.right .shapes {
    order: 1;
  }
  .main.project .body .image.shape.right .img {
    order: 2;
  }
  .main.project .body .image.columns {
    column-gap: 8.85vw;
    padding-left: 11.46vw;
    padding-right: 11.46vw;
  }
  .main.project .body .image.hang {
    padding-left: 7.55vw;
    padding-right: 7.55vw;
  }
  .main.project .body .image.hang img,
  .main.project .body .image.hang video {
    width: 61.46vw;
  }
  .main.project .body .image.hang.right img,
  .main.project .body .image.hang.right video {
    margin-left: auto;
    margin-right: 0;
  }
  .main.project .body .image.hang.left img,
  .main.project .body .image.hang.left video {
    margin-left: 0;
    margin-right: auto;
  }
  .main.project .body .image.regular {
    padding-left: 7.55vw;
    padding-right: 7.55vw;
  }
  .main.project .body .paragraph {
    padding-left: 11.46vw;
    padding-right: 11.46vw;
  }
  .main.project .body .list .text ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .main.project .body .list .text li {
    padding-left: 20px;
    padding-right: 20px;
  }
  .main.project .body .list .text li + li {
    border-left: 1px solid #6D6C6B;
  }
}
@media screen and (min-width: 1024px) {
  .main.project .body .paragraph {
    padding-left: 19.27vw;
    padding-right: 19.27vw;
  }
  .main.project .body .list {
    padding-left: 7.55vw;
    padding-right: 7.55vw;
  }
  .main.project .body .list .h2 + ul {
    margin-top: 1.04vw;
  }
  .main.project .body .list .text li {
    padding-left: 1.04vw;
    padding-right: 1.04vw;
  }
}
.main.project .next .image {
  width: 100%;
  position: relative;
}
.main.project .next .image:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 77.0833333333%;
}
.main.project .next .image picture,
.main.project .next .image img,
.main.project .next .image video,
.main.project .next .image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main.project .next .image video,
.main.project .next .image img {
  object-fit: cover;
}
.main.project .next .text {
  background-color: #EBEAE8;
}
.main.project .next .text a {
  display: block;
  padding-top: 10.42vw;
  padding-left: 5.21vw;
  padding-right: 5.21vw;
  padding-bottom: 10.42vw;
}
.main.project .next .text a:hover .button span,
.main.project .next .text a:hover .button i {
  opacity: 0.5;
}
.main.project .next .text a:hover .button i {
  transform: translateX(50%);
}
.main.project .next .text a:active .button span {
  transform: scale(0.95);
  transition: 0.15s;
}
.main.project .next .text a:active .button i {
  transform: translateX(50%) scale(0.95);
  transition: 0.15s;
}
.main.project .next .text .label {
  display: block;
}
.main.project .next .text .label + .h2 {
  margin-top: 25px;
}
.main.project .next .text .h2 + .button {
  margin-top: 30px;
}
.main.project .next .text .button span,
.main.project .next .text .button i {
  transition: 0.5s;
}
@media screen and (min-width: 768px) {
  .main.project .next {
    display: flex;
  }
  .main.project .next .image {
    width: 50%;
  }
  .main.project .next .text {
    width: 50%;
  }
  .main.project .next .text a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  .main.project .next .text a {
    padding-left: 8.28vw;
    padding-right: 7.5vw;
  }
  .main.project .next .text .label + .h2 {
    margin-top: 2.08vw;
  }
  .main.project .next .text .h2 + .button {
    margin-top: 2.45vw;
  }
}

body.page-template-page-home.device-mobile .description .iframe .hover {
  display: none;
}
body.page-template-page-home.device-desktop .description .iframe iframe {
  pointer-events: none;
}

.main.projects {
  overflow: hidden;
}
.main.projects .screen {
  display: flex;
  flex-direction: column;
  height: var(--app-height);
}
.main.projects .screen .images picture.desktop {
  display: none;
}
@media (min-aspect-ratio: 1/1) {
  .main.projects .screen .images picture.mobile {
    display: none;
  }
  .main.projects .screen .images picture.desktop {
    display: block;
  }
}
.main.projects .screen .images img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .main.projects .screen {
    height: auto;
  }
  .main.projects .screen .list {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #F7F5F3;
    overflow: scroll;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
    padding-top: 13.39vw;
    display: none;
  }
  .main.projects .screen .list .main {
    display: none;
  }
  .main.projects .screen .list .more {
    display: block;
  }
  .main.projects .screen .list.show-main .main {
    display: block;
  }
  .main.projects .screen .list.show-main .more {
    display: none;
  }
  .main.projects .screen .list.is-open {
    opacity: 1;
    pointer-events: all;
  }
  .main.projects .screen .list ul {
    display: inline-flex;
    flex-direction: column;
    margin: auto 0;
    padding-top: 3rem;
  }
  .main.projects .screen .list .button {
    justify-content: center;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
  }
  .main.projects .screen .list .button .closeAll {
    display: inline-flex;
    align-items: center;
  }
  .main.projects .screen .list .button .x {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    margin-bottom: 1px;
  }
  .main.projects .screen .list .button .x:before, .main.projects .screen .list .button .x:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
  }
  .main.projects .screen .list .button .x:before {
    transform: rotate(-45deg);
  }
  .main.projects .screen .list .button .x:after {
    transform: rotate(45deg);
  }
  .main.projects .screen .list li + li.toggle {
    margin-top: 2em;
  }
  .main.projects .screen .list li.soon + li {
    margin-top: 1em;
  }
  .main.projects .screen .list li.soon .label {
    margin-top: -0.5em;
  }
  .main.projects .screen .list li a {
    display: block;
    position: relative;
    line-height: 1.62;
  }
  .main.projects .screen .list li a span {
    display: block;
  }
  .main.projects .screen .list li:active {
    transform: scale(0.95);
    transition: 0.15s;
  }
  .main.projects .screen .images {
    flex: 1;
    position: relative;
    z-index: 1;
    min-height: 1px;
    padding: 16.67vw 8.33vw;
  }
  .main.projects .screen .images li {
    position: relative;
    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .5s;

    &.is-active {
      z-index: 2;
      opacity: 1;
      transition: 1s;
    } */
  }
  .main.projects .screen .images li + li {
    margin-top: 8.33vw;
  }
  .main.projects .screen .images .image {
    width: 100%;
    height: auto;
  }
  .main.projects .screen .images .image img {
    display: block;
    position: static;
    width: 100%;
    aspect-ratio: 2/3;
  }
  .main.projects .screen .images .text {
    text-align: center;
    padding-top: 3.33vw;
  }
  .main.projects .screen .images .text h3 {
    display: flex;
    flex-direction: column;
  }
  .main.projects .screen .slides {
    padding-top: 30px;
    padding-bottom: 30px;
    background: #fff;
    z-index: 2;
  }
  .main.projects .screen .slides .paginate {
    text-align: center;
  }
  .main.projects .screen .slides .slider {
    position: relative;
    padding-top: 20px;
    overflow: hidden;
  }
  .main.projects .screen .slides .slider .swiper-slide a span {
    display: block;
    position: relative;
    text-align: center;
  }
  .main.projects .screen .slides .slider .swiper-slide a span span {
    width: 100%;
    position: absolute;
    transform: none;
    bottom: 0;
    left: 0;
    margin-bottom: -1em;
  }
  .main.projects .screen .slides .slider .swiper-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .main.projects .screen .slides .slider .swiper-controls a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 4px;
    pointer-events: all;
  }
  .main.projects .screen .slides .slider .swiper-controls a svg {
    width: 17.5%;
    width: 25%;
    height: auto;
  }
  .main.projects .screen .slides .slider .swiper-controls a.prev svg {
    transform: rotate(180deg) translateX(20%);
  }
  .main.projects .screen .slides .slider .swiper-controls a.next svg {
    transform: translateX(20%);
  }
  .main.projects .screen .slides .slider .swiper-controls a.is-disabled {
    opacity: 0.25;
  }
  .main.projects .screen .slides .button {
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }
  .main.projects .screen .slides .button .viewAll {
    display: inline-flex;
    align-items: center;
  }
  .main.projects .screen .slides .button .hamburger {
    width: 12px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    margin-right: 8px;
    margin-bottom: 1px;
  }
  .main.projects .screen .slides .button .hamburger:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
  }
}
@media screen and (min-width: 768px) {
  .main.projects .screen {
    height: 100vh;
    flex-direction: row;
  }
  .main.projects .screen .list {
    display: flex;
    z-index: 2;
    margin: 0;
    width: 100%;
    padding-left: 3.65vw;
    padding-right: 3.65vw;
    overflow: scroll;
  }
  .main.projects .screen .list .main {
    display: none;
  }
  .main.projects .screen .list .more {
    display: block;
  }
  .main.projects .screen .list.show-main .main {
    display: block;
  }
  .main.projects .screen .list.show-main .more {
    display: none;
  }
  .main.projects .screen .list ul {
    display: inline-flex;
    flex-direction: column;
    margin: auto 0;
    padding-top: 3rem;
  }
  .main.projects .screen .list li {
    display: inline-flex;
    pointer-events: none;
  }
  .main.projects .screen .list .button {
    display: none;
  }
  .main.projects .screen .list li {
    transform-origin: left;
  }
  .main.projects .screen .list li.soon + li {
    margin-top: 1.5em;
  }
  .main.projects .screen .list li.soon + .main + .more {
    margin-top: 2.5em;
  }
  .main.projects .screen .list li + li {
    margin-top: 0.5em;
  }
  .main.projects .screen .list li + li.toggle {
    margin-top: 1em;
  }
  .main.projects .screen .list li.toggle a {
    opacity: 0.75;
  }
  .main.projects .screen .list li.toggle:hover a {
    opacity: 1;
  }
  .main.projects .screen .list li a {
    display: block;
    position: relative;
    opacity: 0.4;
    line-height: 1.55;
    transition: 0.35s;
  }
  .main.projects .screen .list li a span {
    display: block;
  }
  .main.projects .screen .list li a:before {
    display: block;
    position: absolute;
    transform: translateX(-100%);
    bottom: 50%;
    left: 0;
    margin-bottom: 0.05em;
    width: 0;
    height: 1px;
    background-color: currentColor;
    opacity: 0.5;
    transition: 0.35s;
  }
  .main.projects .screen .list li a span {
    display: block;
    position: relative;
    transform-origin: left;
    transition: 0.35s;
  }
  .main.projects .screen .list li a span span {
    position: absolute;
    transform: none;
    bottom: 0;
    left: 0;
    margin-bottom: -0.5em;
    white-space: nowrap;
  }
  .main.projects .screen .list li a:active span {
    transform: scale(0.95);
    transition: 0.15s;
  }
  .main.projects .screen .list li.is-active {
    /* a {
      &:before {
        transform: translateX(0);
        width: .5238em;
      }

      span {
        transform: translateX(0);
      }
    } */
  }
  .main.projects .screen .list li.is-active a {
    opacity: 1;
  }
  .main.projects .screen .list li.is-hovered {
    /* a {
      &:before {
        transform: translateX(0);
        width: .5238em;
        transition-delay: .05s;
      }

      span {
        transform: translateX(0);
      }
    } */
  }
  .main.projects .screen .list li.is-hovered a {
    opacity: 1;
  }
  .main.projects .screen .list li.is-unhovered {
    /* a {
      &:before {
        transform: translateX(-100%);
        width: 0;
        transition-delay: 0s;
      }

      span {
        transform: translateX(-.7619em);
      }
    } */
  }
  .main.projects .screen .list li.is-unhovered a {
    opacity: 0.4;
  }
  .main.projects .screen .list a {
    pointer-events: all;
  }
  .main.projects .screen .images {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
  }
  .main.projects .screen .images .swiper {
    width: 100%;
    height: 100%;
  }
  .main.projects .screen .images li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.5s;
  }
  .main.projects .screen .images li.is-active {
    z-index: 2;
    opacity: 1;
    transition: 1s;
  }
  .main.projects .screen .images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .main.projects .screen .images .text {
    display: none;
  }
  .main.projects .screen .slides {
    display: none;
  }
}
@media screen and (min-width: 768px) and (min-height: 700px) {
  .main.projects {
    display: flex;
    /* ~ footer {
      padding-top: vh(80, 1265);
      padding-bottom: vh(80, 1265);
    } */
  }
  .main.projects .screen {
    width: 100%;
  }
  .main.projects .screen .list {
    /* padding-top: vh(80, 1265);
    padding-bottom: vh(80, 1265); */
    padding-top: 8.96vw;
    padding-bottom: 6.61vw;
  }
}
@media screen and (min-height: 700px) and (min-width: 768px) {
  .main.projects {
    display: flex;
    position: relative;
  }
  .main.projects .screen {
    /* position: absolute;
    height: 100%;
    width: 100%; */
  }
}
@media screen and (min-width: 1024px) {
  .main.projects .screen .list {
    padding-left: 3.65vw;
    padding-right: 3.65vw;
  }
  .main.projects .screen .images {
    width: 62.4vw;
  }
}

body.page-template-page-video header, body.page-template-page-video footer {
  display: none !important;
}

.main.video .intro {
  position: relative;
  width: 100vw;
  height: var(--app-height);
}
.main.video .intro .is-hidden {
  opacity: 0;
  pointer-events: none;
}
.main.video .intro .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.main.video .intro .video:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
}
.main.video .intro .video video {
  position: absolute;
  z-index: 1;
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
  left: 50%;
  /* min-width: 100%;
  min-height: 100%; */
  height: 97.5%;
  border: 1px solid #000;
}
.main.video .intro .center {
  padding: 6.67vw 7.6vw;
}
.main.video .intro .text {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  height: 100%;
  color: #fff;
  text-align: center;
}
.main.video .intro .text h1 {
  font-size: 48px;
  line-height: 1.2;
  width: 400px;
}
.main.video .intro .shapes {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 50vw;
  margin-right: -300px;
  height: 100%;
  color: #D6D3CB;
}
.main.video .intro .shapes.color-black {
  color: #000;
}
.main.video .intro .shapes .line {
  position: relative;
  width: 3px;
  overflow: hidden;
  flex: 1;
}
.main.video .intro .shapes .line span {
  position: absolute;
  left: 0;
  width: 100px;
  height: 0;
  background-color: currentColor;
}
.main.video .intro .shapes .line:first-child {
  top: 0;
}
.main.video .intro .shapes .line:last-child {
  height: 5.36458vw;
  bottom: 0;
}
@media screen and (min-width: 1440px) {
  .main.video .intro .shapes .line {
    width: 2px;
  }
}
.main.video .intro .shapes .circle {
  position: relative;
  width: 599px;
  height: 599px;
}
.main.video .intro .shapes .circle svg path {
  stroke: currentColor;
  stroke-width: 1px;
}
@media screen and (min-width: 640px) {
  .main.video .intro .shapes .circle svg path {
    stroke-width: 1px;
  }
}
@media screen and (min-width: 1440px) {
  .main.video .intro .shapes .circle svg path {
    stroke-width: 0.75px;
  }
}
.main.video .intro .shapes .circle svg #logo-circle-r {
  stroke-dasharray: 255;
  stroke-dashoffset: 255;
}
.main.video .intro .shapes .circle svg #logo-circle-a {
  stroke-dasharray: 375;
  stroke-dashoffset: 375;
}
.main.video .intro .shapes .circle svg #logo-circle-left {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
}
.main.video .intro .shapes .circle svg #logo-circle-right {
  stroke-dasharray: 270;
  stroke-dashoffset: 270;
}
.main.video .intro .shapes .circle span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 599px;
  height: 599px;
  overflow: hidden;
  /* &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: vw(430);
    height: vw(430);
    border-radius: 50%;
    border: 1px solid currentColor;
  } */
}
@media screen and (min-width: 768px) {
  .main.video .intro {
    height: 100vh;
  }
}

/* ============================================================
   Home V2 — sections (mobile-first, d'apres updates.sketch 414px)
   ============================================================ */

/* Reveal in-view (home v2) : meme anim que le bundle (gsap y:20/opacity:0 -> 0/1,
   duration 1.5s, ease Power4.easeOut ~ easeOutQuint, stagger 0.2s gere en JS) */
.main.home .anim-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s cubic-bezier(0.23, 1, 0.32, 1), transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.main.home .anim-up.is-in {
  opacity: 1;
  transform: none;
}

/* Media Content : MOBILE — toujours texte en haut puis image (les 2 blocs), image full-bleed 9/16 */
.main.home .media-content {
  display: flex;
  flex-direction: column;
  gap: 114px;
  padding-top: 80px;
  padding-bottom: 118px;
  color: #6D6C6B;
}
.main.home .media-content.media-right {
  flex-direction: column-reverse;
  padding-top: 0;
}
.main.home .media-content .text {
  padding: 0 30px;
  text-align: left;
}
.main.home .media-content.media-right .text {
  padding-top: 4px;
}
/* titre = .h2 (Acta Light), body = .p (Lato Light) du theme : on surcharge juste taille/ecart */
.main.home .media-content .h2 {
  font-size: 24px;
  line-height: 29px;
}
.main.home .media-content .p {
  margin-top: 12px;
  font-size: 20px;
  line-height: 29px;
}
.main.home .media-content .button {
  display: inline-block;
  margin-top: 22px;
  color: #353535;
}
/* image : full-bleed, ratio 416x274 en mobile */
.main.home .media-content .image {
  width: 100%;
  aspect-ratio: 416 / 274;
}
.main.home .media-content .image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.main.home .media-content .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Media Content : DESKTOP (>=1440) — cote a cote + bascule gauche/droite */
@media screen and (min-width: 1440px) {
  .main.home .media-content {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 5.72vw;
    padding: 0 0 11.145vw;
  }
  .main.home .media-content.media-left {
    flex-direction: row-reverse;
  }
  .main.home .media-content.media-right {
    flex-direction: row;
  }
  .main.home .media-content .h2 {
    font-size: 40px;
    line-height: 46px;
  }
  .main.home .media-content .text {
    flex: 0 1 auto;
    align-self: flex-end;
    width: max(394px, 20.52vw);
    padding: 0 0 2.18vw;
  }
  .main.home .media-content .text:has(.button) {
    padding-bottom: 4.16vw;
  }
  /* gap titre -> texte : 28px sans cta, 18px avec cta */
  .main.home .media-content .p {
    margin-top: 28px;
  }
  .main.home .media-content .text:has(.button) .p {
    margin-top: 18px;
  }
  /* gap texte -> cta */
  .main.home .media-content .button {
    margin-top: 54px;
  }
  .main.home .media-content .image {
    flex: 0 0 64.42vw;
    width: 64.42vw;
    min-width: 0;
    aspect-ratio: 1237 / 748;
  }
  .main.home .media-content.media-left .image {
    padding-left: 24px;
  }
  .main.home .media-content.media-right .image {
    padding-right: 24px;
  }
  .main.home .media-content .image picture,
  .main.home .media-content .image img {
    height: 100%;
  }
}

/* Hero du bas (footer_hero) : width 100%, ratio 416x650 plafonne a 81.25svh en mobile */
.main.home .hero-footer .image {
  width: 100%;
  aspect-ratio: 416 / 650;
  max-height: 81.25svh;
  overflow: hidden;
}
.main.home .hero-footer .image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.main.home .hero-footer .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .main.home .hero-footer .image {
    width: 100%;
    aspect-ratio: 1920 / 1080;
    max-height: 98.18svh;
  }
  .main.home .hero-footer .image picture,
  .main.home .hero-footer .image img {
    height: 100%;
  }
}

/* Media Pair : 2 images ~3/4 portrait — empile en mobile, cote a cote en desktop */
.main.home .media-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 30px 120px;
}
.main.home .media-pair .image {
  width: 66.18vw;
  max-width: 100%;
  aspect-ratio: 274 / 351;
}
.main.home .media-pair .image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.main.home .media-pair .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .main.home .media-pair {
    flex-direction: row;
    justify-content: center;
    gap: 6.56vw;
    padding: 0 6.56vw 9.45vw;
  }
  .main.home .media-pair .image {
    width: 31.66vw;
    max-width: 100%;
    aspect-ratio: 608 / 780;
  }
}

/* Home V2 — video dans les boites media (meme rendu que l'image).
   A reporter dans la source SCSS lors du prochain build. */
.main.home .media-content .image video,
.main.home .media-pair .image video,
.main.home .hero-footer .image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portfolio : slider (tagline Acta + nom + image), nav 01/02/03 */
.main.home .portfolio {
  padding: 0 30px 118px;
  color: #6D6C6B;
  text-align: center;
}
/* textes : empiles, cross-fade au changement de tab */
.main.home .portfolio .texts {
  display: grid;
  margin-top: 24px;
}
.main.home .portfolio .slide-text {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.main.home .portfolio .slide-text.is-active {
  opacity: 1;
  visibility: visible;
}
.main.home .portfolio .tagline {
  font-family: "Acta Display", serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 26px;
  color: #6D6C6B;
}
.main.home .portfolio .name {
  margin-top: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #353535;
}
/* nav 01 / 02 / 03 */
.main.home .portfolio .nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-top: 40px;
  border-bottom: 1px solid #D8D8D8;
}
.main.home .portfolio .nav .num {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  color: #C3C3C3;
  transition: color 0.3s;
}
.main.home .portfolio .nav .num .n {
  display: block;
}
.main.home .portfolio .nav .num .line {
  display: block;
  height: 1px;
  margin-top: 14px;
  background: transparent;
  transition: background 0.3s;
}
.main.home .portfolio .nav .num.is-active {
  color: #6D6C6B;
}
.main.home .portfolio .nav .num.is-active .line {
  background: #6D6C6B;
}
/* label */
.main.home .portfolio .label {
  margin-top: 50px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #353535;
}
.main.home .portfolio .label a {
  color: inherit;
  text-decoration: none;
}
/* images : empilees, cross-fade au changement de tab */
.main.home .portfolio .slides {
  margin-top: 30px;
  display: grid;
  justify-items: center;
}
.main.home .portfolio .slide {
  grid-area: 1 / 1;
  width: 100%;

  aspect-ratio: 353 / 437;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.main.home .portfolio .slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.main.home .portfolio .slide picture {
  display: block;
  width: 100%;
  height: 100%;
}
.main.home .portfolio .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* MOBILE : ordre image -> tagline -> titre -> tabs -> The Portfolio */
@media screen and (max-width: 1279px) {
  .main.home .portfolio .pf-inner {
    display: flex;
    flex-direction: column;
  }
  .main.home .portfolio .slides {
    order: -1;
    margin-top: 0;
  }
  .main.home .portfolio .nav .num {
    flex: 1;
    text-align: center;
  }
}
@media screen and (min-width: 1280px) {
  /* 2 colonnes : texte a gauche (tagline+nom centres, label en bas), image a droite pleine hauteur */
  .main.home .portfolio {
    padding: 0 0 10.15vw;
    text-align: left;
  }
  .main.home .portfolio .texts {
    margin-top: 0;
  }
  .main.home .portfolio .pf-inner {
    position: relative;
    display: flex;
    align-items: stretch;
  }
  .main.home .portfolio .pf-left {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }
  .main.home .portfolio .tagline {
    font-size: 40px;
    line-height: 46px;
    max-width: 431px;
  }
  .main.home .portfolio .name {
    margin-top: 34px;
    font-size: 15px;
    max-width: 248px;
  }
  .main.home .portfolio .nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13.28vw;
    margin: 0;
    z-index: 2;
    /* ligne full-width au-dessus de l'image, mais chiffres groupes finissant a gauche de l'image */
    justify-content: flex-end;
    gap: 36px;
    padding-right: calc(45.10vw + 24px);
  }
  .main.home .portfolio .nav .num {
    width: 100px;
     text-align: left;
  }
  .main.home .portfolio .nav .num .line {
    margin-top: 20px;
  }
  .main.home .portfolio .label {
    margin-top: 5.46vw;
    max-width: 142px;
  }
  /* image a droite */
  .main.home .portfolio .slides {
    flex: 0 0 auto;
    align-content: start;
    justify-items: end;
    margin-top: 0;
    padding-right: 24px;
  }
  .main.home .portfolio .slide {
    width: 45.10vw;
    aspect-ratio: 866 / 1073;
  }
}