.w-embed, [data-animation-type="rive"] {
    line-height: 0;
  }

  h1,h2,h3,h4,h5,p, .h1,.h2,.h3,.h4,.h5 {
    margin: 0;
    padding: 0;
  }



  .title, h1, h2, h3, h4, .h1,.h2,.h3,.h4, blockquote, q {
    line-height: 120%;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .title, .nav-header {
    font-variation-settings: "wght" 500, "wdth" 100, "ital" 0;
  }

  .title {
    font-size: clamp(0px,10vw,200px);
  }

  h1, .h1 {
    font-variation-settings: "wght" 520, "wdth" 106, "ital" 0;
    font-size: 60px;
  }

  /* h2, .h2 {
    font-variation-settings: "wght" 520, "wdth" 106, "ital" 0;
    font-size: 40px;
  } */
/* 
  h3, .h3 {
    font-variation-settings: "wght" 520, "wdth" 106, "ital" 0;
    font-size: 30px;
  } */

  /* h4, .h4 {
    font-variation-settings: "wght" 520, "wdth" 106, "ital" 0;
    font-size: 24px;
  } */
  
  blockquote, q {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-variation-settings: "wght" 520, "wdth" 106, "ital" 0;
    vertical-align: baseline;
    background: transparent;
    quotes: none;
  }

  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  
  .tile-title {
    font-variation-settings: "wght" 500;
  }

  .nav-header {
    line-height: 100%;
    letter-spacing: 0;
    font-size: 36px;
  }

  .p-large, .p, .ui-label, .annotation, .p-small {
    font-family: "Atlasgrotesk Web";
  }

  .p-large, .p, .p-small {
    font-weight: 400;
  }
  
  button, input[type="submit"], input[type="reset"] {
		background: none;
    color: inherit;
	}

  .button {
    line-height: 100%;
    letter-spacing: 0.03em;
    font-variation-settings: "wght" 500, "wdth" 100, "ital" 0;
  }

  .ui-label, .annotation {
    font-weight: 500;
  }

  .p-large, .ui-label {
    font-size: 16px;
    line-height: 24px;
  }

  .p {
    font-size: 14px;
    line-height: 22px;
  }

  .annotation {
    font-size: 12px;
    line-height: 20px;
  }

  .p-small {
    font-size: 12px;
    line-height: 20px;
  }

  @media screen and (max-width: 991px) {
    .title {
      font-size: clamp(36px,12vw,96px);
    }

    h1, .h1 {
      font-size: 36px;
    }

    h2, .h2 {
      font-size: 28px;
    }

    h3, .h3 {
      font-size: 24px;
    }

    .nav-header {
      font-size: 20px;
    }

    .ui-label {
      font-size: 14px;
    }

    .annotation {
      font-size: 10px;
      line-height: 14px;
    }

    .bezier-point {
      transform: scale(0.667);
      stroke-width: 3px !important;
    }
  }

  .tile * {
    pointer-events: none;
  }

  .nav-scroll-indicator {
    transform: scaleY(0);
  }
  
  .nav-button-svg.menu-svg-hidden {
  	opacity: 0;
    transform: scale(0.8);
  }

  @media screen and ((max-height: 399px) or ((max-width: 991px) and (max-height: 480px)) or (max-width: 249px)) {
    .strategy-visual-container, .voice-tone-visual-container, .logo-visual-container, .typography-visual-container, .iconography-visual-container, .color-visual-container, .imagery-visual-container, .motion-visual-container {
      display: none;
    }
  }
  
  @media (any-hover: hover) {
	.tile:hover {
    background-color: var(--text--base) !important;
    color: white !important;
  }}

  /* Opening */

  .opening .tile-title {
  	opacity: 1!important;
    transform: scale(4)!important;
  }

  @media screen and (max-width: 991px) {
    .opening .tile-title {
      transform: scale(2.5)!important;
    }
  }

  :root {
    --nav-easing: cubic-bezier(.4,0,.2,1);
    --nav-easing-swoop: cubic-bezier(.6,0,0,1);
    --highest-tile-yeet: calc((max(100vw, 100vh) - 90px) / -4);
    --overscroll-progress: 0;
    --opening-margin: 120px;
    --opening-gutter: 24px;
    --opening-total-margins: calc(2 * var(--opening-margin));
    --opening-total-gutters: calc(11 * var(--opening-gutter));
    --opening-grid-width: calc(100vw - var(--opening-total-margins));
    --opening-single-column: calc((var(--opening-grid-width) - var(--opening-total-gutters)) / 12);
    --opening-col-1-left: var(--opening-margin);
    --opening-col-1-right: calc(var(--opening-margin) + var(--opening-single-column));
    --opening-col-2-left: calc(var(--opening-margin) + 1 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-2-right: calc(var(--opening-margin) + 1 * (var(--opening-single-column) + var(--opening-gutter)) + var(--opening-single-column));
    --opening-col-3-left: calc(var(--opening-margin) + 2 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-3-right: calc(var(--opening-margin) + 2 * (var(--opening-single-column) + var(--opening-gutter)) + var(--opening-single-column));
    --opening-col-4-left: calc(var(--opening-margin) + 3 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-4-right: calc(var(--opening-margin) + 3 * (var(--opening-single-column) + var(--opening-gutter)) + var(--opening-single-column));
    --opening-col-5-left: calc(var(--opening-margin) + 4 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-5-right: calc(var(--opening-margin) + 4 * (var(--opening-single-column) + var(--opening-gutter)) + var(--opening-single-column));
    --opening-col-6-left: calc(var(--opening-margin) + 5 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-6-right: calc(var(--opening-margin) + 5 * (var(--opening-single-column) + var(--opening-gutter)) + var(--opening-single-column));
    --opening-col-7-left: calc(var(--opening-margin) + 6 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-7-right: calc(var(--opening-margin) + 6 * (var(--opening-single-column) + var(--opening-gutter)) + var(--opening-single-column));
    --opening-col-8-left: calc(var(--opening-margin) + 7 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-8-right: calc(var(--opening-margin) + 7 * (var(--opening-single-column) + var(--opening-gutter)) + var(--opening-single-column));
    --opening-col-9-left: calc(var(--opening-margin) + 8 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-9-right: calc(var(--opening-margin) + 8 * (var(--opening-single-column) + var(--opening-gutter)) + var(--opening-single-column));
    --opening-col-10-left: calc(var(--opening-margin) + 9 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-10-right: calc(var(--opening-margin) + 9 * (var(--opening-single-column) + var(--opening-gutter)) + var(--opening-single-column));
    --opening-col-11-left: calc(var(--opening-margin) + 10 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-11-right: calc(var(--opening-margin) + 10 * (var(--opening-single-column) + var(--opening-gutter)) + var(--opening-single-column));
    --opening-col-12-left: calc(var(--opening-margin) + 11 * (var(--opening-single-column) + var(--opening-gutter)));
    --opening-col-12-right: calc(100vw - var(--opening-margin));
    --opening-span-1: var(--opening-single-column);
    --opening-span-2: calc(2 * var(--opening-single-column) + var(--opening-gutter));
    --opening-span-3: calc(3 * var(--opening-single-column) + 2 * var(--opening-gutter));
    --opening-span-4: calc(4 * var(--opening-single-column) + 3 * var(--opening-gutter));
    --opening-span-5: calc(5 * var(--opening-single-column) + 4 * var(--opening-gutter));
    --opening-span-6: calc(6 * var(--opening-single-column) + 5 * var(--opening-gutter));
    --opening-span-7: calc(7 * var(--opening-single-column) + 6 * var(--opening-gutter));
    --opening-span-8: calc(8 * var(--opening-single-column) + 7 * var(--opening-gutter));
    --opening-span-9: calc(9 * var(--opening-single-column) + 8 * var(--opening-gutter));
    --opening-span-10: calc(10 * var(--opening-single-column) + 9 * var(--opening-gutter));
    --opening-span-11: calc(11 * var(--opening-single-column) + 10 * var(--opening-gutter));
    --opening-span-12: calc(12 * var(--opening-single-column) + 11 * var(--opening-gutter));

    --body-margin-real: 120px;
    --body-gutter: 24px;
    --body-total-margins: calc(2 * var(--body-margin-real));
    --body-total-gutters: calc(11 * var(--body-gutter));
    --body-grid-width: min(calc(100vw - var(--body-total-margins)), 1920px);
    --body-single-column: calc((var(--body-grid-width) - var(--body-total-gutters)) / 12);
    --body-margin: calc((100vw - var(--body-grid-width)) / 2);
    --body-col-1-left: var(--body-margin);
    --body-col-1-right: calc(var(--body-margin) + var(--body-single-column));
    --body-col-2-left: calc(var(--body-margin) + 1 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-2-right: calc(var(--body-margin) + 1 * (var(--body-single-column) + var(--body-gutter)) + var(--body-single-column));
    --body-col-3-left: calc(var(--body-margin) + 2 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-3-right: calc(var(--body-margin) + 2 * (var(--body-single-column) + var(--body-gutter)) + var(--body-single-column));
    --body-col-4-left: calc(var(--body-margin) + 3 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-4-right: calc(var(--body-margin) + 3 * (var(--body-single-column) + var(--body-gutter)) + var(--body-single-column));
    --body-col-5-left: calc(var(--body-margin) + 4 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-5-right: calc(var(--body-margin) + 4 * (var(--body-single-column) + var(--body-gutter)) + var(--body-single-column));
    --body-col-6-left: calc(var(--body-margin) + 5 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-6-right: calc(var(--body-margin) + 5 * (var(--body-single-column) + var(--body-gutter)) + var(--body-single-column));
    --body-col-7-left: calc(var(--body-margin) + 6 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-7-right: calc(var(--body-margin) + 6 * (var(--body-single-column) + var(--body-gutter)) + var(--body-single-column));
    --body-col-8-left: calc(var(--body-margin) + 7 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-8-right: calc(var(--body-margin) + 7 * (var(--body-single-column) + var(--body-gutter)) + var(--body-single-column));
    --body-col-9-left: calc(var(--body-margin) + 8 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-9-right: calc(var(--body-margin) + 8 * (var(--body-single-column) + var(--body-gutter)) + var(--body-single-column));
    --body-col-10-left: calc(var(--body-margin) + 9 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-10-right: calc(var(--body-margin) + 9 * (var(--body-single-column) + var(--body-gutter)) + var(--body-single-column));
    --body-col-11-left: calc(var(--body-margin) + 10 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-11-right: calc(var(--body-margin) + 10 * (var(--body-single-column) + var(--body-gutter)) + var(--body-single-column));
    --body-col-12-left: calc(var(--body-margin) + 11 * (var(--body-single-column) + var(--body-gutter)));
    --body-col-12-right: calc(100vw - var(--body-margin));
    --body-span-1: var(--body-single-column);
    --body-span-2: calc(2 * var(--body-single-column) + var(--body-gutter));
    --body-span-3: calc(3 * var(--body-single-column) + 2 * var(--body-gutter));
    --body-span-4: calc(4 * var(--body-single-column) + 3 * var(--body-gutter));
    --body-span-5: calc(5 * var(--body-single-column) + 4 * var(--body-gutter));
    --body-span-6: calc(6 * var(--body-single-column) + 5 * var(--body-gutter));
    --body-span-7: calc(7 * var(--body-single-column) + 6 * var(--body-gutter));
    --body-span-8: calc(8 * var(--body-single-column) + 7 * var(--body-gutter));
    --body-span-9: calc(9 * var(--body-single-column) + 8 * var(--body-gutter));
    --body-span-10: calc(10 * var(--body-single-column) + 9 * var(--body-gutter));
    --body-span-11: calc(11 * var(--body-single-column) + 10 * var(--body-gutter));
    --body-span-12: calc(12 * var(--body-single-column) + 11 * var(--body-gutter));
  }

  @media (max-width: 991px) {
    :root {
      --opening-margin: 60px;
      --opening-gutter: 12px;
      --body-margin-real: 60px;
      --body-gutter: 12px;
    }
  }

  @media (max-width: 767px) {
    :root {
      --opening-margin: 32px;
      --body-margin-real: 32px;
    }
  }
.menu .tile-line.nav-l {
	transform: translate(0, -50%) scaleY(0);
	transform-origin: center top;
	background-color: var(--accent--tab);
}

.menu .tile-line.nav-r {
	transform: translate(0, -50%) scaleY(0);
	transform-origin: center bottom;
	background-color: var(--accent--tab);
}

.menu .tile-line.nav-t {
	transform: translate(50%, 0) scaleX(0);
	transform-origin: right center;
	background-color: var(--accent--tab);
}

.menu .tile-line.nav-b {
	transform: translate(50%, 0) scaleX(0);
	transform-origin: left center;
	background-color: var(--accent--tab);
}

.nav-tile.nav-tile-gridlines .tile-line {
	opacity: 0;
}

.menu-container.animating-in .nav-wrapper-gridlines {
	transition: opacity 1.5s ease-in-out 0.75s;
}

.menu-container:not(.final) .nav-wrapper-gridlines {
	opacity: 1;
}

.menu .tile-line.nav-l, .menu .tile-line.nav-r {
	height: 100vh;
}

.menu .tile-line.nav-t, .menu .tile-line.nav-b {
	width: 100vw;
}

/* Logo Draw In*/

.home-logo {
	width: 100%;
	height: 100%;
}

.home-logo path {
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1000 1000;
	stroke-dashoffset: 1000;
	fill: currentColor;
	fill-opacity: 0;
	stroke-width: 1px;
	stroke: var(--accent--tab);
	animation: drawIn 1.25s cubic-bezier(.4,0,.3,1) forwards 0.5s;
}

@keyframes drawIn {
	to {
		stroke-dashoffset: 0;
	}
}


/* Logo Movement and Fill */

.nav-container.animating-in .home-logo-container {
	transition: width 1.5s cubic-bezier(.5,0,0.05,1) 1s, height 1.5s cubic-bezier(.5,0,0.05,1) 1s, left 1.25s cubic-bezier(.5,0,0.3,1) 1.25s, bottom 1.25s cubic-bezier(.5,0,0.3,1) 1.25s;
}

.nav-container.final .home-logo-container {
	width: 100px;
	height: 100px;
	/* left: 45px;
	bottom: 44.5px; */
}

@media (max-width: 991px) {
	.nav-container.final .home-logo-container {
		/* width: 70px;
		height: 70px;
		left: 32px;
		bottom: 31.5px; */
	}
}

.nav-container.animating-in .home-logo path {
	transition: fill-opacity 0.75s ease-in-out 1.25s, stroke-opacity 0.5s ease-in-out 1.5s;
}

.nav-container.final .home-logo path {
	fill-opacity: 1;
	stroke-opacity: 0;
}

.nav-container.animating-in .nav-button-title-container {
	transition: opacity 1.25s ease-in-out 1.25s;
}

.nav-container:not(.final) .nav-button-title-container {
	opacity: 0;
}

.nav-button-svg {
	display: none !important;
}

html, body {
	overscroll-behavior: none;
}

  .nav {
	width: 100vw;
  pointer-events: all;
}

::-webkit-scrollbar { 
	display: none;
}

.nav-tile, .menu {
	pointer-events: none;
}
.nav-border-line {
	display: none;
}

.nav-container .menu {
	left: calc(var(--button-size) / -6);
	bottom: 50%;
	transform: translate(calc(50vw - var(--button-size) / 3), 50%);
}

@media (max-width: 991px) {
	.nav-container .menu {
		left: 50%;
		bottom: calc(var(--button-size) / -8);
		  transform: translate(-50%, calc(-50dvh - var(--button-size) * 3 / -8));
	}
  }

  
.tile.strategy .bezier-point {
	fill: var(--color--identity--blue);
  stroke: var(--color--identity--blue);
  stroke-width: 2px;
  position: absolute;
  z-index: 2;
  transition: left var(--tile-transition), right var(--tile-transition), fill var(--tile-transition), stroke var(--tile-transition);
}

.tile.strategy .bezier-point.point-1 {
	left: 0;
  top: 0;
}

.tile.strategy .bezier-point.point-2 {
	right: 0;
  top: calc(50% - 10px);
}

.tile.strategy .bezier-point.point-3 {
	left: 0;
  bottom: 0;
}

@media (any-hover: hover) {
.tile.strategy:hover .bezier-point {
	fill: var(--text--base);
  stroke: white;
}
}
.strategy-bezier-path {
	width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 2px;
}

.strategy-bezier-path path {
  vector-effect: non-scaling-stroke;
  stroke: var(--color--identity--blue);
  transition: opacity var(--tile-transition);
  pointer-events: none;
}

.tile.strategy:hover .strategy-bezier-path path {
  opacity: 0;
}


.strategy-sketch-path-2 {
	width: 100%;
  height: 100%;
  fill: none;
  stroke: white;
  stroke-width: clamp(1.5px, calc(4.5px - min(0.2vw, 0.2vh)), 5px);
}

.strategy-sketch-path-2 path {
  /*vector-effect: non-scaling-stroke;*/
  stroke-dasharray: 321;
  stroke-dashoffset: 321;
  opacity: 0;
  transition: stroke-dashoffset 0.3s cubic-bezier(.2,.1,0,1), opacity 0.4s;;
}

.strategy-sketch-path-1 {
	width: 100%;
  height: 100%;
  fill: none;
  stroke: white;
  stroke-width: clamp(1.5px, calc(4.5px - min(0.2vw, 0.2vh)), 5px);
}

.strategy-sketch-path-1 path {
  /*vector-effect: non-scaling-stroke;*/
  stroke-dasharray: 433;
  stroke-dashoffset: 433;
  opacity: 0;
  transition: stroke-dashoffset 0.2s cubic-bezier(.2,.1,0,1), opacity 0.4s;
}


@media (any-hover: hover) {
.tile.strategy:hover .strategy-sketch-path-1 path {
	stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 0.75s cubic-bezier(.5,0,.3,1), opacity 0.4s;
}}

@media (any-hover: hover) {
.tile.strategy:hover .strategy-sketch-path-2 path {
	stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 0.7s cubic-bezier(.2,.1,0,1) 0.3s, opacity 0.4s;
}
}


/* voice tone */


.voice-tone-quotation-mark {
	position: absolute;
  height: auto;
  width: calc(min(6vw, 8vh) + 32px);
  fill: var(--color--identity--on-yellow);
  stroke: transparent;
  stroke-width: 4px;
  transition: fill var(--tile-transition), stroke var(--tile-transition), transform var(--tile-transition);
}

.voice-tone-quotation-mark path {
  vector-effect: non-scaling-stroke;
}

.voice-tone-quotation-mark.left {
  left: 0;
  top: 0;
}

.voice-tone-quotation-mark.right {
  right: 0;
  bottom: 0;
  transform: rotateZ(180deg);
}
@media (any-hover: hover) {
.tile.voice-tone:hover .voice-tone-quotation-mark {
	stroke: white;
	fill: var(--text--base);
}

.tile.voice-tone:hover .voice-tone-quotation-mark.left {
	transform: translateX(40%);
}

.tile.voice-tone:hover .voice-tone-quotation-mark.right {
	transform: rotateZ(180deg) translateX(40%);
}}

/* typography */


.tile.typography .typography-visual-type {
	height: 500px;
	max-height: 100%;
  max-width: 100%;
  fill: var(--color--identity--on-red);
  stroke: transparent;
  stroke-width: 2px;
  transition: fill var(--tile-transition), stroke var(--tile-transition);
}

@media (any-hover: hover) {
.tile.typography:hover .typography-visual-type {
	fill: transparent;
  stroke: white;
}}

.tile.typography .typography-visual-type path {
  vector-effect: non-scaling-stroke;
}

.typography-visual-type {
	font-family: Dbsharpgroteskvariable Vf, Arial, sans-serif;
	font-variation-settings: /*"wght" 500, 'wdth' 90, */'ital' 0.0;
	-webkit-text-stroke: 2px var(--color--identity-on-red);
	transition: color var(--tile-transition), font-variation-settings var(--tile-transition), transform var(--tile-transition), -webkit-text-stroke var(--tile-transition);
  }
  
  .tile.typography:hover .typography-visual-type {
	font-variation-settings: /*"wght" 700, 'wdth' 110*/'ital' 1;
	transform: translateX(2%);
	color: var(--text--base);
  }

  
  /* Iconography */

  .iconography-visual-lock {
	height: 100%;
  fill: var(--color--identity--on-green);
  stroke: transparent;
  stroke-width: 2px;
  transition: fill var(--tile-transition), stroke var(--tile-transition);
}

@media (any-hover: hover) {
.tile.iconography:hover .iconography-visual-lock {
	fill: transparent;
  stroke: white;
}}

.iconography-visual-lock path {
  vector-effect: non-scaling-stroke;
}


/* Color */



.tile.color .color-color-block {
	transition: background-color var(--tile-transition), border var(--tile-transition), transform var(--tile-transition);
	border: 2px solid transparent;
  }
  
  @media (any-hover: hover) {
  .tile.color:hover .color-color-block {
	  background-color: transparent;
	border-color: white;
  }
  
  .tile.color:hover .color-color-block.block-1 {
	  transform: translate(calc(100% - 1px), 1px);
  }
  
  .tile.color:hover .color-color-block.block-2 {
	  transform: translate(calc(-100% + 1px), -1px);
  }}
  
  .tile.color .color-color-circle {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	stroke-width: 2px;
	stroke: transparent;
	transition: fill var(--tile-transition), stroke var(--tile-transition);
  }
  
  .tile.color .color-color-circle path {
	vector-effect: non-scaling-stroke;
  }
  
  .tile.color .color-color-block.block-1 .color-color-circle {
	  fill: var(--color--identity--on-orange);
  }
  
  .tile.color .color-color-block.block-2 .color-color-circle {
	  fill: var(--color--accent--rust);
  }
  
  @media (any-hover: hover) {
  .tile.color:hover .color-color-circle {
	  fill: transparent !important;
	stroke: white;
  }}


  /* Imagery */

  
.tile.imagery .hills {
	position: absolute;
  width: calc(100% + 8px);
  height: calc(75% + 4px);
  left: -4px;
  bottom: -4px;
	fill: var(--color--accent--azalea);
	stroke: transparent;
  stroke-width: 2px;
  z-index: 2;
	transition: fill var(--tile-transition), stroke var(--tile-transition);
}


@media (any-hover: hover) {
.tile.imagery:hover .hills {
	fill: var(--text--base);
  stroke: white;
}}

.tile.imagery .hills path, .tile.imagery .sun circle, .tile.imagery .moon path {
  vector-effect: non-scaling-stroke;
}

.tile.imagery .imagery-visual-picture-embed {
	background-color: var(--color--accent--pink);
	transition: background-color var(--tile-transition);
}

@media (any-hover: hover) {
.tile.imagery:hover .imagery-visual-picture-embed {
	background-color: transparent;
}}

.tile.imagery .imagery-visual-picture-border {
	opacity: 0;
  transition: opacity var(--tile-transition);
}

@media (any-hover: hover) {
.tile.imagery:hover .imagery-visual-picture-border {
	opacity: 1;
}}

.tile.imagery .sunandmoon {
	position: absolute;
  top: 25%;
  left: 17%;
  height: 70%;
  aspect-ratio: 1;
  transform: rotateZ(-25deg);
  transition: transform 0.7s cubic-bezier(.4,0.2,.2,1);
}

.tile.imagery .sunmoon {
	position: absolute;
  height: 30%;
  aspect-ratio: 1;
  fill: var(--color--accent--azalea);
  stroke: transparent;
  stroke-width: 2px;
  transition: fill var(--tile-transition), stroke var(--tile-transition), transform 0.7s cubic-bezier(.4,0.2,.2,1);
}

.tile.imagery .sun {
	top: 0;
  left: 35%;
}

.tile.imagery .moon {
	bottom: 0;
  left: 35%;
  transform: rotateZ(25deg);
}

@media (any-hover: hover) {
.tile.imagery:hover .sunmoon {
	fill: transparent;
  stroke: white;
}}


/* Motion */



.tile.motion .bezier-point {
	fill: var(--color--identity--on-purple);
  stroke: var(--color--identity--on-purple);
  stroke-width: 2px;
  position: absolute;
  transition: left var(--tile-transition), right var(--tile-transition), fill var(--tile-transition), stroke var(--tile-transition);
  z-index: 3;
}

.tile.motion .bezier-point.point-1 {
	left: 0;
  bottom: 0;
}

.tile.motion .bezier-point.point-2 {
	left: 25%;
  bottom: 0;
}

.tile.motion .bezier-point.point-3 {
	right: 30%;
  top: 0;
}

.tile.motion .bezier-point.point-4 {
	right: 0;
  top: 0;
}

@media (any-hover: hover) {
.tile.motion:hover .bezier-point.point-2 {
	left: 50%;
}

.tile.motion:hover .bezier-point.point-3 {
	right: 50%;
}

.tile.motion:hover .bezier-point {
	fill: var(--text--base);
  stroke: white;
}}

.tile.motion .bezier-tangent {
	position: absolute;
	height: 2px;
  background-color: var(--color--identity--on-purple);
  transition: width var(--tile-transition), background-color var(--tile-transition);
  z-index: 2;
}

.tile.motion .bezier-tangent.tangent-1 {
	bottom: 9px;
  left: 10px;
  width: calc(25% - 0px);
}

.tile.motion .bezier-tangent.tangent-2 {
	top: 9px;
  right: 10px;
  width: calc(30% - 0px);
}

@media (any-hover: hover) {
.tile.motion:hover .bezier-tangent.tangent-1 {
  width: calc(50% - 0px);
}

.tile.motion:hover .bezier-tangent.tangent-2 {
  width: calc(50% - 0px);
}


.tile.motion:hover .bezier-tangent {
	background-color: white;
}
}


.motion-bezier-path {
	width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 2px;
}

.motion-bezier-path path {
  vector-effect: non-scaling-stroke;
  stroke: var(--color--identity--on-purple);
  transition: stroke var(--tile-transition);
}

@media (any-hover: hover) {
.tile.motion:hover .motion-bezier-path path {
    stroke: white;
}}



.scroll-chevrons-container {
  opacity: 0;
  transition: opacity 1.5s;
}

.scroll-chevron {
	position: absolute;
	width: 52px;
  right: 14px;
  color: var(--color--accent--line-solid);
  transition: transform 1.6s cubic-bezier(.2,0,.3,1), color 1.5s cubic-bezier(.2,0,.3,1);
}

.scroll-chevrons-container.visible {
	opacity: 1;
}

.scroll-chevron.activated {
	transform: translateY(18px);
  color: var(--accent--tab);
  transition: transform 0.65s cubic-bezier(.6,0,.6,1), color 0.65s cubic-bezier(.6,0,.6,1);
}

.scroll-chevron.chevron-1 {
  bottom: 42px;
}

.scroll-chevron.chevron-2 {
  bottom: 30px;
}

@media (max-width: 991px) {
  .scroll-chevron {
    width: 24px;
    right: 16px;
  }
  .scroll-chevron.activated {
    transform: translateY(14px);
  }
  .scroll-chevron.chevron-1 {
    bottom: 31px;
  }
  .scroll-chevron.chevron-2 {
    bottom: 22px;
  }
}