/* –––––––––––––––––––––––––––––– CONTAINER SIZING –––––––––––––––––––––––––––––––––*/
.w-narrow { width: min(calc(var(--site-max-width) * 0.5), 100%); }
.w-small { width: min(calc(var(--site-max-width) * 0.7), 100%); }
.w-wide { width: min(calc(var(--site-max-width) * 0.85), 100%); }
.w-big { max-width: calc(var(--site-max-width) * 1.2); }
.w-max { width: 100%; max-width: unset; }
/* –––––––––––––––––––––––––––––– CONTAINER MAX PADDING –––––––––––––––––––––––––––––––––*/
.max-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.max-container > .col-l {
  padding-left: max(calc((100vw - var(--site-max-width)) / 2 + var(--spacing-m) - var(--scrollbar-width) / 2), var(--spacing-m));
}

.max-container > .col-r {
  padding-right: max(
    calc((100vw - var(--site-max-width)) / 2 + var(--spacing-m) - var(--scrollbar-width) / 2),
    var(--spacing-m));
}

@media screen and (max-width: 749px) {
  .max-container > .col-l {
    padding: 0 var(--spacing-s);
  } 
}

/* –––––––––––––––––––––––––––––– QUICK SIZING –––––––––––––––––––––––––––––––––*/
.w-100 { width: 100%; }
.w-90 { width: 90%; }
.w-80 { width: 80%; }
.w-75 { width: 75%; }
.w-70 { width: 70%; }
.w-60 { width: 60%; }
.w-50 { width: 50%; }
.w-40 { width: 40%; }
.w-30 { width: 30%; }
.w-25 { width: 25%; }
.w-20 { width: 20%; }
.w-10 { width: 10%; }

.w-min-50 { min-width: 50px; }
.w-min-100 { min-width: 100px; }
.w-min-150 { min-width: 150px; }
.w-min-200 { min-width: 200px; }
.w-min-250 { min-width: 250px; }
.w-min-300 { min-width: 300px; }
.w-min-350 { min-width: 350px; }
.w-min-400 { min-width: 400px; }
.w-min-450 { min-width: 450px; }
.w-min-500 { min-width: 500px; }

.w-max-100 { max-width: 100px; }
.w-max-200 { max-width: 200px; }
.w-max-300 { max-width: 300px; }
.w-max-400 { max-width: 400px; }
.w-max-500 { max-width: 500px; }
.w-max-600 { max-width: 600px; }
.w-max-700 { max-width: 700px; }
.w-max-800 { max-width: 800px; }
.w-max-900 { max-width: 900px; }
.w-max-1000 { max-width: 1000px; }

.h-100 { height: 100%; }
.h-75 { height: 75%; }
.h-50 { height: 50%; }
.h-25 { height: 25%; }

.h-min-50 { min-height: 50px; }
.h-min-100 { min-height: 100px; }
.h-min-150 { min-height: 150px; }
.h-min-200 { min-height: 200px; }
.h-min-250 { min-height: 250px; }
.h-min-300 { min-height: 300px; }
.h-min-350 { min-height: 350px; }
.h-min-400 { min-height: 400px; }
.h-min-450 { min-height: 450px; }
.h-min-500 { min-height: 500px; }

.h-max-100 { max-height: 100px; }
.h-max-200 { max-height: 200px; }
.h-max-300 { max-height: 300px; }
.h-max-400 { max-height: 400px; }
.h-max-500 { max-height: 500px; }
.h-max-600 { max-height: 600px; }
.h-max-700 { max-height: 700px; }
.h-max-800 { max-height: 800px; }
.h-max-900 { max-height: 900px; }
.h-max-1000 { max-height: 1000px; }

.v-padding-2xs { padding-top: var(--spacing-2xs); padding-bottom: var(--spacing-2xs); }
.v-padding-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.v-padding-s { padding-top: var(--spacing-s); padding-bottom: var(--spacing-s); }
.v-padding-m { padding-top: var(--spacing-m); padding-bottom: var(--spacing-m); }
.v-padding-l { padding-top: var(--spacing-l); padding-bottom: var(--spacing-l); }
.v-padding-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.v-padding-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.v-padding-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }

.h-padding-2xs { padding-left: var(--spacing-2xs); padding-right: var(--spacing-2xs); }
.h-padding-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.h-padding-s { padding-left: var(--spacing-s); padding-right: var(--spacing-s); }
.h-padding-m { padding-left: var(--spacing-m); padding-right: var(--spacing-m); }
.h-padding-l { padding-left: var(--spacing-l); padding-right: var(--spacing-l); }
.h-padding-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.h-padding-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }
.h-padding-3xl { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); }

@media screen and (max-width: 749px) {
  .w-m-100 { width: 100%; }
  .w-m-75 { width: 75%; }
  .w-m-50 { width: 50%; }
  .w-m-25 { width: 25%; }

  .h-m-100 { height: 100%; }
  .h-m-75 { height: 75%; }
  .h-m-50 { height: 50%; }
  .h-m-25 { height: 25%; }
}

/* –––––––––––––––––––––––––––––– POSITIONING –––––––––––––––––––––––––––––––––*/
.p-relative { position: relative; }

/* –––––––––––––––––––––––––––––– VISIBILITY –––––––––––––––––––––––––––––––––*/
.overflow-hidden { overflow: hidden; }

.z-1 { z-index: 1; }

@media screen and (max-width: 749px) {
  .hide-m { display: none !important; }
}

@media screen and (min-width: 750px) {
  .show-m { display: none !important; }
}

/* –––––––––––––––––––––––––––––– FLEX & GRID –––––––––––––––––––––––––––––––––*/
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }


.justify-center { justify-content: center; justify-items: center; }
.justify-between { justify-content: space-between; justify-items: space-between; }
.justify-around { justify-content: space-around; justify-items: space-around; }
.justify-evenly { justify-content: space-evenly; justify-items: space-evenly; }
.justify-start { justify-content: flex-start; justify-items: flex-start; }
.justify-end { justify-content: flex-end; justify-items: flex-end; }

.align-center { align-items: center; align-content: center; }
.align-start { align-items: flex-start; align-content: flex-start; }
.align-end { align-items: flex-end; align-content: flex-end; }
.align-stretch { align-items: stretch; align-content: stretch; }
.align-baseline { align-items: baseline; align-content: baseline; }

.grid { display: grid; }
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 2fr; }
.grid-auto { grid-template-columns: auto; }
.grid-1-1 { grid-template-columns: 1fr 1fr; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }
.grid-1-3 { grid-template-columns: 1fr 3fr; }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-2-3 { grid-template-columns: 2fr 3fr; }
.grid-3-1 { grid-template-columns: 3fr 1fr; }
.grid-3-2 { grid-template-columns: 3fr 2fr; }
.grid-1-auto { grid-template-columns: 1fr auto; }
.grid-2-auto { grid-template-columns: 2fr auto; }
.grid-3-auto { grid-template-columns: 3fr auto; }
.grid-auto-1 { grid-template-columns: auto 1fr; }
.grid-auto-2 { grid-template-columns: auto 2fr; }
.grid-auto-3 { grid-template-columns: auto 3fr; }
.grid-auto-auto { grid-template-columns: auto auto; }

.grid-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
.grid-2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
.grid-1-2-1 { grid-template-columns: 1fr 2fr 1fr; }
.grid-1-1-2 { grid-template-columns: 1fr 1fr 2fr; }
.grid-2-2-1 { grid-template-columns: 2fr 2fr 1fr; }
.grid-2-1-2 { grid-template-columns: 2fr 1fr 2fr; }
.grid-1-2-2 { grid-template-columns: 1fr 2fr 2fr; }
.grid-2-2-2 { grid-template-columns: 2fr 2fr 2fr; }
.grid-auto-1-1 { grid-template-columns: auto 1fr 1fr; }
.grid-1-auto-1 { grid-template-columns: 1fr auto 1fr; }
.grid-1-1-auto { grid-template-columns: 1fr 1fr auto; }
.grid-auto-2-1 { grid-template-columns: auto 2fr 1fr; }
.grid-2-auto-1 { grid-template-columns: 2fr auto 1fr; }
.grid-2-1-auto { grid-template-columns: 2fr 1fr auto; }
.grid-auto-auto-auto { grid-template-columns: auto auto auto; }

.grid-colspan-1 { grid-column: span 1; }
.grid-colspan-2 { grid-column: span 2; }
.grid-colspan-3 { grid-column: span 3; }
.grid-colspan-4 { grid-column: span 4; }
.grid-colspan-5 { grid-column: span 5; }
.grid-colspan-6 { grid-column: span 6; }
.grid-colspan-7 { grid-column: span 7; }
.grid-colspan-8 { grid-column: span 8; }
.grid-colspan-9 { grid-column: span 9; }
.grid-colspan-10 { grid-column: span 10; }

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }

@media (max-width: 749px) {
  .grid-m-1 { grid-template-columns: 1fr; }
  .grid-m-1-1 { grid-template-columns: 1fr 1fr; }
  .grid-m-1-2 { grid-template-columns: 1fr 2fr; }
  .grid-m-2-1 { grid-template-columns: 2fr 1fr; }
  .grid-m-1-auto { grid-template-columns: 1fr auto; }
  .grid-m-2-auto { grid-template-columns: 2fr auto; }
  .grid-m-auto-1 { grid-template-columns: auto 1fr; }
  .grid-m-auto-2 { grid-template-columns: auto 2fr; }
  .grid-m-auto-auto { grid-template-columns: auto auto; }
  .grid-m-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-m-2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
  .grid-m-1-2-1 { grid-template-columns: 1fr 2fr 1fr; }
  .grid-m-1-1-2 { grid-template-columns: 1fr 1fr 2fr; }
  .grid-m-2-2-1 { grid-template-columns: 2fr 2fr 1fr; }
  .grid-m-2-1-2 { grid-template-columns: 2fr 1fr 2fr; }
  .grid-m-1-2-2 { grid-template-columns: 1fr 2fr 2fr; }
  .grid-m-2-2-2 { grid-template-columns: 2fr 2fr 2fr; }
  .grid-m-auto-1-1 { grid-template-columns: auto 1fr 1fr; }
  .grid-m-1-auto-1 { grid-template-columns: 1fr auto 1fr; }
  .grid-m-1-1-auto { grid-template-columns: 1fr 1fr auto; }
  .grid-m-auto-2-1 { grid-template-columns: auto 2fr 1fr; }
  .grid-m-2-auto-1 { grid-template-columns: 2fr auto 1fr; }
  .grid-m-2-1-auto { grid-template-columns: 2fr 1fr auto; }
  .grid-m-auto-auto-auto { grid-template-columns: auto auto auto; }

  .grid-colspan-m-1 { grid-column: span 1; }
  .grid-colspan-m-2 { grid-column: span 2; }
  .grid-colspan-m-3 { grid-column: span 3; }
  .grid-colspan-m-4 { grid-column: span 4; }
  .grid-colspan-m-5 { grid-column: span 5; }
  .grid-colspan-m-6 { grid-column: span 6; }
  .grid-colspan-m-7 { grid-column: span 7; }
  .grid-colspan-m-8 { grid-column: span 8; }
  .grid-colspan-m-9 { grid-column: span 9; }
  .grid-colspan-m-10 { grid-column: span 10; }

  .order-m--5 { order: -5; }
  .order-m--4 { order: -4; }
  .order-m--3 { order: -3; }
  .order-m--2 { order: -2; }
  .order-m--1 { order: -1; }
  .order-m-0 { order: 0; }
  .order-m-1 { order: 1; }
  .order-m-2 { order: 2; }
  .order-m-3 { order: 3; }
  .order-m-4 { order: 4; }
  .order-m-5 { order: 5; }
  .order-m-6 { order: 6; }
  .order-m-7 { order: 7; }
  .order-m-8 { order: 8; }
  .order-m-9 { order: 9; }
  .order-m-10 { order: 10; }
}

/* –––––––––––––––––––––––––––––– DISTANCES BETWEEN ELEMENTS –––––––––––––––––––––––––––––––––*/
.mb-0   { margin-bottom: 0px; }
.mb-2xs { margin-bottom: var(--spacing-2xs); }
.mb-xs  { margin-bottom: var(--spacing-xs); }
.mb-s   { margin-bottom: var(--spacing-s); }
.mb-m   { margin-bottom: var(--spacing-m); }
.mb-l   { margin-bottom: var(--spacing-l); }
.mb-xl  { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }

.mt-0   { margin-top: 0px; }
.mt-2xs { margin-top: var(--spacing-2xs); }
.mt-xs  { margin-top: var(--spacing-xs); }
.mt-s   { margin-top: var(--spacing-s); }
.mt-m   { margin-top: var(--spacing-m); }
.mt-l   { margin-top: var(--spacing-l); }
.mt-xl  { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }

.gap-0 { gap: 0px !important; }
.gap-2xs { gap: var(--spacing-2xs); }
.gap-xs { gap: var(--spacing-xs); }
.gap-s { gap: var(--spacing-s); }
.gap-m { gap: var(--spacing-m); }
.gap-l { gap: var(--spacing-l); }
.gap-xl { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }
.gap-3xl { gap: var(--spacing-3xl); }

.spacer-flex { flex-grow: 1; }

.spacerv-2xs { height: var(--spacing-2xs); }
.spacerv-xs { height: var(--spacing-xs); }
.spacerv-s { height: var(--spacing-s); }
.spacerv-m { height: var(--spacing-m); }
.spacerv-l { height: var(--spacing-l); }
.spacerv-xl { height: var(--spacing-xl); }
.spacerv-2xl { height: var(--spacing-2xl); }
.spacerv-3xl { height: var(--spacing-3xl); }

.spacerh-2xs { width: var(--spacing-2xs); }
.spacerh-xs { width: var(--spacing-xs); }
.spacerh-s { width: var(--spacing-s); }
.spacerh-m { width: var(--spacing-m); }
.spacerh-l { width: var(--spacing-l); }
.spacerh-xl { width: var(--spacing-xl); }
.spacerh-2xl { width: var(--spacing-2xl); }
.spacerh-3xl { width: var(--spacing-3xl); }

/* –––––––––––––––––––––––––––––– OPACITY –––––––––––––––––––––––––––––––––*/

.op-0 { opacity: 0; }
.op-10 { opacity: 0.1; }
.op-20 { opacity: 0.2; }
.op-30 { opacity: 0.3; }
.op-40 { opacity: 0.4; }
.op-50 { opacity: 0.5; }
.op-60 { opacity: 0.6; }
.op-70 { opacity: 0.7; }
.op-80 { opacity: 0.8; }
.op-90 { opacity: 0.9; }
.op-100 { opacity: 1; }

/* –––––––––––––––––––––––––––––– IMAGES –––––––––––––––––––––––––––––––––*/
.media-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.media-absolute {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.media-cover {
  object-fit: cover;
}

.media-contain {
  object-fit: contain;
}

/* –––––––––––––––––––––––––––––– ANIMATIONS –––––––––––––––––––––––––––––––––*/
.a-fade-in {
  opacity: 0;
  transition: opacity var(--transition-normal) var(--cubic-bezier);
  transition-delay: var(--transition-delay)
}

.a-triggered.a-fade-in,.a-triggered .a-fade-in {
  opacity: 1
}

.a-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-normal) var(--cubic-bezier),transform var(--transition-normal) var(--cubic-bezier);
  transition-delay: var(--transition-delay)
}

.a-triggered.a-fade-up,.a-triggered .a-fade-up {
  opacity: 1;
  transform: translateY(0)
}

.a-fade-down {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity var(--transition-normal) var(--cubic-bezier),transform var(--transition-normal) var(--cubic-bezier);
  transition-delay: var(--transition-delay)
}

.a-triggered.a-fade-down,.a-triggered .a-fade-down {
  opacity: 1;
  transform: translateY(0)
}

.a-slide-up>div {
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0
}

.a-slide-up>div>span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform var(--transition-slow) var(--cubic-bezier);
  transition-delay: var(--transition-delay)
}

.a-triggered.a-slide-up span,.a-triggered .a-slide-up span {
  transform: translateY(0)
}

.a-delay-1 { --transition-delay: var(--stagger-base) !important; }
.a-delay-2 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier)) !important; }
.a-delay-3 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 2) !important; }
.a-delay-4 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 3) !important; }
.a-delay-5 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 4) !important; }
.a-delay-6 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 5) !important; }
.a-delay-7 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 6) !important; }
.a-delay-8 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 7) !important; }
.a-delay-9 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 8) !important; }
.a-delay-10 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 9) !important; }
.a-delay-11 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 10) !important; }
.a-delay-12 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 11) !important; }
.a-delay-13 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 12) !important; }
.a-delay-14 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 13) !important; }
.a-delay-15 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 14) !important; }
.a-delay-16 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 15) !important; }
.a-delay-17 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 16) !important; }
.a-delay-18 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 17) !important; }
.a-delay-19 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 18) !important; }
.a-delay-20 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 19) !important; }
.a-delay-21 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 20) !important; }
.a-delay-22 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 21) !important; }
.a-delay-23 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 22) !important; }
.a-delay-24 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 23) !important; }
.a-delay-25 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 24) !important; }
.a-delay-26 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 25) !important; }
.a-delay-27 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 26) !important; }
.a-delay-28 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 27) !important; }
.a-delay-29 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 28) !important; }
.a-delay-30 { --transition-delay: calc(var(--stagger-base) * var(--stagger-multiplier) * 29) !important; }

/* –––––––––––––––––––––––––––––– FADE MASK –––––––––––––––––––––––––––––––––*/
.mask-fade-r-l,
.mask-fade-l-r,
.mask-fade-t-b,
.mask-fade-b-t {
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

.mask-fade-r-l {
  mask-image: linear-gradient(to left, transparent 50%, black 100%);
  -webkit-mask-image: linear-gradient(to left, transparent 50%, black 100%);
}

.mask-fade-l-r {
  mask-image: linear-gradient(to right, transparent 50%, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 50%, black 100%);
}

.mask-fade-t-b {
  mask-image: linear-gradient(to bottom, transparent 50%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 100%);
}

.mask-fade-b-t {
  mask-image: linear-gradient(to top, transparent 50%, black 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 50%, black 100%);
}

/* –––––––––––––––––––––––––––––– PARALLAX –––––––––––––––––––––––––––––––––*/
.p-set {
  --p-ratio: 0.5;
}

/* –––––––––––––––––––––––––––––– FILTERS –––––––––––––––––––––––––––––––––*/
.filter-white {
  filter: brightness(0) invert(1);
}

.filter-black {
  filter: brightness(0);
}