:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.studio-intro__section {
  height: 100vh;
  justify-content: center;
}
.inner {
  gap: calc(var(--space-s) / 2);
}
.intro__link {
  height: 1em;
  width: 1em;
  fill: var(--secondary);
  align-self: flex-end;
  cursor: pointer;
}
.etch-dialog {
  /* Placement Offset */
  --etch-dialog-y-placement--offset: 25px;
  --etch-dialog-x-placement--offset: 25px;

  /* Close Button */
  --etch-dialog-close-btn-top-position: 5px;
  --etch-dialog-close-btn-right-position: 5px;
  --etch-dialog-close-btn-background-color: transparent;
  --etch-dialog-close-btn-hover-background-color: transparent;
  --etch-dialog-close-btn-outline: 2px solid #2466e8;
  --etch-dialog-close-btn-outline-offset: 2px;
  --etch-dialog-close-btn-svg-size: 20px;

  /* Dialog Element */
  width: 90%;
  max-width: var(--etch-dialog-max-width); /* set by props */
  border: none;
  padding: var(--etch-dialog-padding, 1em);
  background-color: var(--etch-dialog-background-color); /* set by props */
  overflow: visible;

  /* Content Body Wrapper */
  :where(.etch-dialog__body-wrapper) {
    overflow: hidden;
  }

  /* Dialog Placements */
  &:where([data-etch-dialog-placement='center']) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &:where([data-etch-dialog-placement='center-left']) {
    top: 50%;
    left: var(--etch-dialog-x-placement--offset);
    transform: translateY(-50%);
  }

  &:where([data-etch-dialog-placement='center-right']) {
    top: 50%;
    right: var(--etch-dialog-x-placement--offset);
    left: auto;
    transform: translateY(-50%);
  }

  &:where([data-etch-dialog-placement='top-left']) {
    top: var(--etch-dialog-y-placement--offset);
    left: var(--etch-dialog-x-placement--offset);
  }

  &:where([data-etch-dialog-placement='top-center']) {
    top: var(--etch-dialog-y-placement--offset);
    left: 50%;
    transform: translateX(-50%);
  }

  &:where([data-etch-dialog-placement='top-right']) {
    top: var(--etch-dialog-y-placement--offset);
    right: var(--etch-dialog-x-placement--offset);
    left: auto;
  }

  &:where([data-etch-dialog-placement='bottom-left']) {
    bottom: var(--etch-dialog-y-placement--offset);
    left: var(--etch-dialog-x-placement--offset);
    top: auto;
  }

  &:where([data-etch-dialog-placement='bottom-center']) {
    bottom: var(--etch-dialog-y-placement--offset);
    left: 50%;
    top: auto;
    transform: translateX(-50%);
  }

  &:where([data-etch-dialog-placement='bottom-right']) {
    bottom: var(--etch-dialog-y-placement--offset);
    right: var(--etch-dialog-x-placement--offset);
    left: auto;
    top: auto;
  }

  /* Backdrop */
  &::backdrop {
    background-color: var(--etch-dialog-backdrop-color);
  }

  /* Close Button */
  :where(.etch-dialog__close) {
    position: absolute;
    top: var(--etch-dialog-close-btn-top-position);
    right: var(--etch-dialog-close-btn-right-position);
    background-color: var(--etch-dialog-close-btn-background-color);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  :where(.etch-dialog__close:hover) {
    background-color: var(--etch-dialog-close-btn-hover-background-color);
  }

  :where(.etch-dialog__close:focus-visible) {
    outline: var(--etch-dialog-close-btn-outline);
    outline-offset: var(--etch-dialog-close-btn-outline-offset);
  }

  /* Close Button Variants */
  :where(.etch-dialog-close--label-icon) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  :where(.etch-dialog-close--label-icon svg),
  :where(.etch-dialog-close--icon-only svg) {
    width: var(--etch-dialog-close-btn-svg-size);
    height: var(--etch-dialog-close-btn-svg-size);
  }
}
.dialog__inner {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.signup-form__heading {
  color: white;
  padding-bottom: var(--space-s);
}
.ewk-hero-bergen__control {
  position: absolute;
  inset-block-end: var(--space-s, 0.75rem);
  inset-inline-end: var(--gutter, 1rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: color-mix(in srgb, currentColor 9%, transparent);
  color: inherit;
  cursor: pointer;
  transition: background-color var(--transition, 0.3s ease);
  &[hidden] { visibility: hidden; }
  &.etch-builder-block { visibility: visible; }
  &:hover { background-color: color-mix(in srgb, currentColor 18%, transparent); }
  &:focus-visible {
    outline: var(--focus-width, 2px) solid var(--focus-color);
    outline-offset: var(--focus-offset, 2px);
  }
  .ewk-hero-bergen__play-icon { display: none; }
  &[data-bergen-paused] {
    .ewk-hero-bergen__pause-icon { display: none; }
    .ewk-hero-bergen__play-icon { display: block; }
  }
  @media (prefers-reduced-motion: reduce) {
    transition: none;
    &[hidden] { display: none; }
  }
}
.ewk-hero-bergen__fog {
  grid-area: 1 / 1;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  color: var(--white);
}
.ewk-hero-bergen__hint {
  position: absolute;
  inset-block-end: var(--space-l, 1.5rem);
  inset-inline: var(--space-m, 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s, 0.75rem);
  margin: 0;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: var(--text-xs, 0.75rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity var(--transition, 0.3s ease);
  &::before,
  &::after {
    content: '';
    flex-shrink: 0;
    inline-size: 2em;
    block-size: 0.0625rem;
    background-color: currentColor;
  }
  [data-bergen-state='forming' i] > &,
  [data-bergen-state='wiped' i] > &,
  [data-bergen-state='off' i] > & { opacity: 0; }
  @media (prefers-reduced-motion: reduce) { transition: none; }
}
.ewk-hero-bergen__icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex-shrink: 0;
}
.ewk-hero-bergen {
  --bergen-shade: 0.7;
  --bergen-tall: 100;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--container-gap, 2rem);
  min-block-size: calc(var(--bergen-tall) * 1svh);
  padding-block: var(--section-space-l, 4rem);
  overflow: clip;
  color: var(--text-light);
  touch-action: pan-y pinch-zoom;
  &[data-bergen-overlay='soft' i] { --bergen-shade: 0.62; }
  &[data-bergen-overlay='heavy' i] { --bergen-shade: 0.82; }
  &[data-bergen-height='tall' i] { --bergen-tall: 85; }
  &[data-bergen-height='medium' i] { --bergen-tall: 70; }
  &:has(> .ewk-hero-bergen__control) {
    @media (prefers-reduced-motion: no-preference) {
      --bergen-bar: calc(3rem + 2 * var(--space-s, 0.75rem));
      padding-block-end: calc(var(--section-space-l, 4rem) + var(--bergen-bar));
      background-color: var(--neutral-ultra-dark);
      > .ewk-hero-bergen__glass { inset-block-end: var(--bergen-bar); }
      > .ewk-hero-bergen__hint { inset-block-end: calc(var(--space-l, 1.5rem) + var(--bergen-bar)); }
    }
  }
}
.ewk-hero-bergen__glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.ewk-hero-bergen__photo {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  &[data-image-position='center' i] { object-position: center; }
  &[data-image-position='top' i] { object-position: top; }
  &[data-image-position='bottom' i] { object-position: bottom; }
  &[data-image-position='left' i] { object-position: left; }
  &[data-image-position='right' i] { object-position: right; }
  &[data-image-position='top-left' i] { object-position: top left; }
  &[data-image-position='top-right' i] { object-position: top right; }
  &[data-image-position='bottom-left' i] { object-position: bottom left; }
  &[data-image-position='bottom-right' i] { object-position: bottom right; }
}
.ewk-hero-bergen__shade {
  grid-area: 1 / 1;
  background-color: var(--black);
  opacity: var(--bergen-shade);
}
.ewk-intro-section {
  :has(> &) {
    container-type: inline-size;
  }
  display: flex;
  flex-direction: column;
  gap: var(--space-m, 1rem);

  &[data-mobile-alignment='center' i] {
    align-items: center;
    text-align: center;

    .ewk-intro-section__badge {
      margin-inline: auto;
    }

    .ewk-intro-section__button-group {
      justify-content: center;
    }
  }

  &[data-mobile-alignment='left' i] {
    align-items: flex-start;
    text-align: start;

    .ewk-intro-section__badge {
      margin-inline: 0;
    }

    .ewk-intro-section__button-group {
      justify-content: flex-start;
    }
  }

  @container (inline-size >= 43.75rem) {
    &[data-alignment='left' i] {
      align-items: flex-start;
      text-align: start;

      .ewk-intro-section__badge {
        margin-inline: 0;
      }

      .ewk-intro-section__button-group {
        justify-content: flex-start;
      }
    }

    &[data-alignment='center' i] {
      align-items: center;
      text-align: center;

      .ewk-intro-section__badge {
        margin-inline: auto;
      }

      .ewk-intro-section__button-group {
        justify-content: center;
      }
    }
  }
}
.ewk-intro-section__lede {
  max-inline-size: 55ch;
  margin: 0;
  text-wrap: pretty;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.ewk-intro-section__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
  max-inline-size: 60ch;
}
.ewk-intro-section__badge-icon {
  inline-size: 1em;
  block-size: 1em;
  flex-shrink: 0;
}
.ewk-intro-section__badge {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-s, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: max-content;
  margin: 0;
}
.ewk-intro-section__button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s, 0.75rem);
  margin-block-start: var(--space-xs, 0.5rem);
}
.ewk-intro-section__headline {
  max-inline-size: 30ch;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;

  &:is(h1) {
    font-size: var(--h1);
  }
  &:is(h2) {
    font-size: var(--h2);
  }
}
.ewk-hero-milano__container {
  padding-block-start: var(--section-space-l, 4rem);
  color: var(--text-dark);
}
.ewk-hero-milano__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--white);
  opacity: var(--overlay-opacity);
}
.ewk-hero-milano {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-block-size: 90vh;
  isolation: isolate;
}
.ewk-hero-milano__media-wrapper {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
}
.ewk-hero-milano__media {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;

  &[data-image-position='center'] { object-position: center; }
  &[data-image-position='top'] { object-position: top; }
  &[data-image-position='bottom'] { object-position: bottom; }
  &[data-image-position='left'] { object-position: left; }
  &[data-image-position='right'] { object-position: right; }
  &[data-image-position='top left'] { object-position: top left; }
  &[data-image-position='top right'] { object-position: top right; }
  &[data-image-position='bottom left'] { object-position: bottom left; }
  &[data-image-position='bottom right'] { object-position: bottom right; }
}
.ewk-hero-quito__caption {
  grid-area: stack;
  align-self: end;
  justify-self: start;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-s, 0.75rem);
  max-inline-size: min(26ch, calc(100% - var(--gutter, 1rem) * 2));
  margin-block: var(--space-xl, 2rem);
  margin-inline: max(var(--gutter, 1rem), calc((100% - var(--content-width, 100rem)) / 2));
  color: var(--text-light);
  font-size: var(--text-l, 1.25rem);
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: anywhere;
  &::before {
    content: '';
    inline-size: 2.5rem;
    block-size: 0.125rem;
    background-color: currentColor;
  }
}
.ewk-hero-quito__image {
  grid-area: stack;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 0;
  object-fit: cover;
  &[data-image-position='center' i] { object-position: center; }
  &[data-image-position='top' i] { object-position: top; }
  &[data-image-position='bottom' i] { object-position: bottom; }
  &[data-image-position='left' i] { object-position: left; }
  &[data-image-position='right' i] { object-position: right; }
  &[data-image-position='top-left' i] { object-position: top left; }
  &[data-image-position='top-right' i] { object-position: top right; }
  &[data-image-position='bottom-left' i] { object-position: bottom left; }
  &[data-image-position='bottom-right' i] { object-position: bottom right; }
}
.ewk-hero-quito__window {
  :has(> &) { container-type: inline-size; }
  display: grid;
  grid-template-areas: 'stack';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  margin-inline: calc(var(--gutter, 1rem) * -1);
  aspect-ratio: 4 / 5;
  max-block-size: 88svh;
  overflow: clip;
  background-color: var(--neutral-ultra-light);
  @container (inline-size >= 43.75rem) { aspect-ratio: 16 / 9; }
  @container (inline-size >= 75rem) { aspect-ratio: 2 / 1; }
}
.ewk-hero-quito {
  --quito-top: 0px;
  --quito-tall: 220;
  --quito-shade: 70%;
  --quito-q: 1;
  --quito-t: 0px;
  --quito-s: 0px;
  --quito-b: 0px;
  --quito-shift: 0px;
  --quito-fade: 1;
  --quito-lift: 0px;
  --quito-cap: 0;
  padding-block: var(--section-space-l, 4rem) 0;
  padding-inline: var(--gutter, 1rem);
  overflow-x: clip;
  &[data-quito-overlay='soft' i] { --quito-shade: 55%; }
  &[data-quito-overlay='heavy' i] { --quito-shade: 85%; }
  &[data-quito-live] {
    justify-content: flex-start;
    min-block-size: calc(var(--quito-tall) * 1svh - var(--quito-top));
    padding-block: 0;
    .ewk-hero-quito__stage {
      position: sticky;
      inset-block-start: var(--quito-top);
      display: grid;
      grid-template-areas: 'stack';
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      block-size: calc(100svh - var(--quito-top));
    }
    .ewk-hero-quito__container {
      grid-area: stack;
      align-self: start;
      margin-block-start: var(--section-space-m, 3rem);
      opacity: var(--quito-fade);
      translate: 0 calc(var(--quito-lift) * -1);
    }
    .ewk-hero-quito__window {
      grid-area: stack;
      aspect-ratio: auto;
      max-block-size: none;
      clip-path: inset(calc(var(--quito-t) * var(--quito-q)) calc(var(--quito-s) * var(--quito-q)) calc(var(--quito-b) * var(--quito-q)) round calc(var(--radius, 0.5rem) * var(--quito-q)));
    }
    .ewk-hero-quito__image {
      translate: 0 calc(var(--quito-shift) * var(--quito-q));
      scale: calc(1 + 0.12 * var(--quito-q));
    }
    .ewk-hero-quito__shade { opacity: var(--quito-cap); }
    .ewk-hero-quito__caption {
      visibility: hidden;
      opacity: var(--quito-cap);
      translate: 0 calc((1 - var(--quito-cap)) * 0.75rem);
    }
    &[data-quito-shown] .ewk-hero-quito__caption { visibility: visible; }
  }
}
.ewk-hero-quito__shade {
  grid-area: stack;
  z-index: 1;
  background-image: linear-gradient(to top, color-mix(in srgb, var(--black) var(--quito-shade), transparent), color-mix(in srgb, var(--black) calc(var(--quito-shade) * 0.45), transparent) 34%, transparent 70%);
  pointer-events: none;
}
.ewk-hero-quito__stage {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap, 2rem);
  inline-size: 100%;
}