@layer layout {
  .utility-shell {
    position: relative;
    min-block-size: 100vh;
    min-block-size: 100svh;
    isolation: isolate;
    overflow: hidden;
    background: var(--field-base);
  }

  .utility-field {
    display: none;
  }

  .utility-main {
    position: relative;
    z-index: 1;
    min-block-size: 100vh;
    min-block-size: 100svh;
    padding-block: var(--space-6);
  }

  .utility-brand {
    display: block;
    inline-size: min(12rem, 56vw);
    margin-inline: auto;
  }

  .utility-chamber {
    padding-block: var(--space-7);
    text-align: center;
  }

  .utility-principle {
    margin-block-start: var(--space-6);
  }

  .utility-copy {
    margin-block-start: var(--space-6);
    text-align: start;
  }

  .utility-return {
    margin-block-start: var(--space-7);
  }

  .utility-contact__label,
  .utility-email {
    display: block;
  }

  .utility-contact--direct {
    margin-block: var(--space-6);
    text-align: center;
  }

  .utility-mobile-break,
  .utility-portrait-break {
    display: none;
  }

}

@layer components {
  .utility-heading {
    font-size: var(--step-2);
  }

  .utility-principle {
    font-size: var(--step-1);
    font-style: italic;
    font-weight: var(--weight-body);
  }

  .utility-email--body {
    font-size: var(--step-0);
    font-style: normal;
    font-weight: var(--weight-body);
  }
}

@media (orientation: portrait) and (max-width: 44.99rem),
  (orientation: landscape) and (max-width: 39.99rem) {
  @layer layout {
    .utility-mobile-break {
      display: initial;
    }

    .utility-page--privacy .utility-field--a {
      --utility-field-opacity: 0.33357825;
      --utility-field-base-opacity: calc(var(--utility-field-opacity) * (1 - var(--field-breath-depth)));
      --utility-field-exchange-opacity: calc(var(--utility-field-opacity) * var(--field-breath-depth) / (1 - var(--utility-field-base-opacity)));
      --utility-field-mask: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.08) 10%,
        rgb(0 0 0 / 0.35) 20%,
        #000 34%,
        #000 68%,
        rgb(0 0 0 / 0.55) 82%,
        transparent 100%
      );

      display: block;
      position: absolute;
      z-index: 0;
      inset: 0;
      overflow: hidden;
      -webkit-mask-image: var(--utility-field-mask);
      mask-image: var(--utility-field-mask);
      pointer-events: none;
    }

    .utility-page--support .utility-field--b {
      --utility-field-opacity: 0.25518736125;
      --utility-field-base-opacity: calc(var(--utility-field-opacity) * (1 - var(--field-breath-depth)));
      --utility-field-exchange-opacity: calc(var(--utility-field-opacity) * var(--field-breath-depth) / (1 - var(--utility-field-base-opacity)));
      --utility-field-mask: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.2) 0%,
        rgb(0 0 0 / 0.42) 10%,
        rgb(0 0 0 / 0.72) 20%,
        #000 32%,
        #000 var(--utility-support-release-start, 82%),
        transparent var(--utility-support-release-end, 100%)
      );

      display: block;
      position: absolute;
      z-index: 0;
      inset: 0;
      overflow: hidden;
      -webkit-mask-image: var(--utility-field-mask);
      mask-image: var(--utility-field-mask);
      pointer-events: none;
    }

    .utility-page--contact .utility-field--c {
      --utility-field-opacity: 0.2168258625;
      --utility-field-base-opacity: calc(var(--utility-field-opacity) * (1 - var(--field-breath-depth)));
      --utility-field-exchange-opacity: calc(var(--utility-field-opacity) * var(--field-breath-depth) / (1 - var(--utility-field-base-opacity)));
      --utility-field-mask: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.18) 0%,
        rgb(0 0 0 / 0.4) 11%,
        rgb(0 0 0 / 0.72) 22%,
        #000 34%,
        #000 74%,
        rgb(0 0 0 / 0.76) 86%,
        rgb(0 0 0 / 0.38) 95%,
        transparent 100%
      );

      display: block;
      position: absolute;
      z-index: 0;
      inset: 0;
      overflow: hidden;
      -webkit-mask-image: var(--utility-field-mask);
      mask-image: var(--utility-field-mask);
      pointer-events: none;
    }

    .utility-page--privacy .utility-field__material {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      aspect-ratio: 832 / 1890;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      transform: translate(-50%, -50%);
    }

    .utility-page--support .utility-field__material {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      aspect-ratio: 764 / 2059;
      inset-block-start: 0;
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }

    .utility-page--contact .utility-field__material {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      aspect-ratio: 884 / 1778;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      transform: translate(-50%, -50%);
    }

    .utility-page--privacy .utility-field__material--base,
    .utility-page--support .utility-field__material--base,
    .utility-page--contact .utility-field__material--base {
      opacity: var(--utility-field-base-opacity);
    }

    .utility-page--privacy .utility-field__material--left,
    .utility-page--privacy .utility-field__material--right,
    .utility-page--support .utility-field__material--left,
    .utility-page--support .utility-field__material--right,
    .utility-page--contact .utility-field__material--left,
    .utility-page--contact .utility-field__material--right {
      opacity: calc(
        var(--utility-field-exchange-opacity)
        * (1 + var(--field-phase) * var(--utility-field-direction))
      );
    }

    .utility-page--privacy .utility-field__material--left,
    .utility-page--support .utility-field__material--left,
    .utility-page--contact .utility-field__material--left {
      --utility-field-direction: 1;

      -webkit-mask-image: linear-gradient(to right, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
      mask-image: linear-gradient(to right, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
    }

    .utility-page--privacy .utility-field__material--right,
    .utility-page--support .utility-field__material--right,
    .utility-page--contact .utility-field__material--right {
      --utility-field-direction: -1;

      -webkit-mask-image: linear-gradient(to left, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
      mask-image: linear-gradient(to left, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
    }

    .utility-page--privacy .utility-main {
      --utility-mobile-brand-block-size: 2.9011rem;
      --utility-mobile-chamber-edge: calc(
        var(--space-5)
        + var(--utility-mobile-brand-block-size)
        + var(--space-5)
      );

      display: grid;
      min-block-size: 100vh;
      min-block-size: 100svh;
      padding-block: var(--utility-mobile-chamber-edge);
      grid-template-rows: 1fr;
    }

    .utility-page--support .utility-main {
      --utility-mobile-brand-block-size: 2.9011rem;
      --utility-mobile-chamber-edge: calc(
        var(--space-5)
        + var(--utility-mobile-brand-block-size)
        + var(--space-5)
      );

      display: grid;
      min-block-size: 100vh;
      min-block-size: 100svh;
      padding-block: var(--utility-mobile-chamber-edge);
      grid-template-rows: 1fr;
    }

    .utility-page--contact .utility-main {
      --utility-mobile-brand-block-size: 2.9011rem;
      --utility-mobile-chamber-edge: calc(
        var(--space-5)
        + var(--utility-mobile-brand-block-size)
        + var(--space-5)
      );

      display: grid;
      min-block-size: 100vh;
      min-block-size: 100svh;
      padding-block: var(--utility-mobile-chamber-edge);
      grid-template-rows: 1fr;
    }

    .utility-page--privacy .utility-brand,
    .utility-page--support .utility-brand,
    .utility-page--contact .utility-brand {
      position: absolute;
      z-index: 1;
      inset-block-start: var(--space-5);
      inset-inline-start: 50%;
      margin-inline: 0;
      transform: translateX(-50%);
    }

    .utility-page--privacy .utility-chamber,
    .utility-page--support .utility-chamber,
    .utility-page--contact .utility-chamber {
      align-self: center;
      padding-block: 0;
    }

    .utility-page--privacy .utility-principle,
    .utility-page--privacy .utility-copy,
    .utility-page--support .utility-principle,
    .utility-page--support .utility-copy,
    .utility-page--contact .utility-principle,
    .utility-page--contact .utility-copy {
      margin-block-start: var(--space-5);
    }

    .utility-page--contact .utility-principle {
      white-space: nowrap;
    }

    .utility-page--privacy .utility-copy,
    .utility-page--contact .utility-copy {
      inline-size: min(100%, 17rem);
      margin-inline: auto;
    }

    .utility-page--privacy .utility-return,
    .utility-page--support .utility-return,
    .utility-page--contact .utility-return {
      margin-block-start: var(--space-6);
    }

    .utility-page--support .utility-contact--direct {
      margin-block-start: var(--space-5);
      margin-block-end: 0;
    }

    .utility-page--contact .utility-contact--direct {
      margin-block: var(--space-5);
      text-align: start;
    }
  }

  @layer components {
    .utility-page--privacy .utility-heading,
    .utility-page--support .utility-heading,
    .utility-page--contact .utility-heading {
      font-size: var(--mobile-section-heading-size);
    }

    .utility-page--contact .utility-principle {
      font-size: 18px;
    }

    .utility-page--support .utility-email--body {
      font-size: inherit;
    }

    .utility-page--contact .utility-email--body {
      font-size: inherit;
    }
  }
}

@media (orientation: portrait) and (min-width: 45rem) {
  @layer layout {
    .utility-portrait-break {
      display: initial;
    }

    .utility-page--privacy .utility-field,
    .utility-page--support .utility-field,
    .utility-page--contact .utility-field {
      --utility-field-base-opacity: calc(var(--utility-field-opacity) * (1 - var(--field-breath-depth)));
      --utility-field-exchange-opacity: calc(var(--utility-field-opacity) * var(--field-breath-depth) / (1 - var(--utility-field-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset: 0;
      overflow: hidden;
      -webkit-mask-image: var(--utility-field-mask);
      mask-image: var(--utility-field-mask);
      pointer-events: none;
    }

    .utility-page--privacy .utility-field--a {
      --utility-field-opacity: 0.470934;
      --utility-field-size: max(118vw, 75svh);
      --utility-field-y: 50%;
      --utility-field-translate-y: -50%;
      --utility-field-mask: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.08) 10%,
        rgb(0 0 0 / 0.35) 20%,
        #000 34%,
        #000 68%,
        rgb(0 0 0 / 0.55) 82%,
        transparent 100%
      );
    }

    .utility-page--support .utility-field--b {
      --utility-field-opacity: 0.276165;
      --utility-field-size: max(118vw, 75svh);
      --utility-field-y: 50%;
      --utility-field-translate-y: -50%;
      --utility-field-mask: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.2) 0%,
        rgb(0 0 0 / 0.42) 10%,
        rgb(0 0 0 / 0.72) 20%,
        #000 32%,
        #000 76%,
        rgb(0 0 0 / 0.78) 87%,
        rgb(0 0 0 / 0.4) 95%,
        transparent 100%
      );
    }

    .utility-page--contact .utility-field--c {
      --utility-field-opacity: 0.2107575;
      --utility-field-size: max(121vw, 75svh);
      --utility-field-y: 50%;
      --utility-field-translate-y: -50%;
      --utility-field-mask: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.18) 0%,
        rgb(0 0 0 / 0.4) 11%,
        rgb(0 0 0 / 0.72) 22%,
        #000 34%,
        #000 74%,
        rgb(0 0 0 / 0.76) 86%,
        rgb(0 0 0 / 0.38) 95%,
        transparent 100%
      );
    }

    .utility-page--privacy .utility-field__material,
    .utility-page--support .utility-field__material,
    .utility-page--contact .utility-field__material {
      position: absolute;
      inline-size: var(--utility-field-size);
      max-inline-size: none;
      block-size: auto;
      aspect-ratio: 1086 / 1448;
      inset-block-start: var(--utility-field-y);
      inset-inline-start: 50%;
      transform: translate(-50%, var(--utility-field-translate-y));
    }

    .utility-page--privacy .utility-field__material--base,
    .utility-page--support .utility-field__material--base,
    .utility-page--contact .utility-field__material--base {
      opacity: var(--utility-field-base-opacity);
    }

    .utility-page--privacy .utility-field__material--left,
    .utility-page--privacy .utility-field__material--right,
    .utility-page--support .utility-field__material--left,
    .utility-page--support .utility-field__material--right,
    .utility-page--contact .utility-field__material--left,
    .utility-page--contact .utility-field__material--right {
      opacity: calc(
        var(--utility-field-exchange-opacity)
        * (1 + var(--field-phase) * var(--utility-field-direction))
      );
    }

    .utility-page--privacy .utility-field__material--left,
    .utility-page--support .utility-field__material--left,
    .utility-page--contact .utility-field__material--left {
      --utility-field-direction: 1;

      -webkit-mask-image: linear-gradient(to right, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
      mask-image: linear-gradient(to right, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
    }

    .utility-page--privacy .utility-field__material--right,
    .utility-page--support .utility-field__material--right,
    .utility-page--contact .utility-field__material--right {
      --utility-field-direction: -1;

      -webkit-mask-image: linear-gradient(to left, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
      mask-image: linear-gradient(to left, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
    }

    .utility-page--privacy .utility-main,
    .utility-page--support .utility-main,
    .utility-page--contact .utility-main {
      --utility-portrait-brand-block-size: 2.9011rem;
      --utility-portrait-chamber-edge: calc(var(--space-section) + var(--space-7));

      display: grid;
      min-block-size: 100vh;
      min-block-size: 100svh;
      padding-block: var(--utility-portrait-chamber-edge);
      grid-template-rows: 1fr;
    }

    .utility-page--privacy .utility-main {
      --utility-portrait-chamber-edge: calc(
        var(--space-section)
        + var(--utility-portrait-brand-block-size)
        + var(--space-6)
      );
    }

    .utility-page--support .utility-main,
    .utility-page--contact .utility-main {
      /* Protect logo-to-title space when a chamber becomes content-driven. */
      --utility-portrait-chamber-edge: calc(
        var(--space-section)
        + var(--utility-portrait-brand-block-size)
        + (var(--space-5) + var(--space-6)) / 2
      );
    }

    .utility-page--privacy .utility-brand,
    .utility-page--support .utility-brand,
    .utility-page--contact .utility-brand {
      position: absolute;
      z-index: 1;
      inset-block-start: var(--space-section);
      inset-inline-start: 50%;
      inline-size: min(12rem, 56vw);
      margin-inline: 0;
      transform: translateX(-50%);
    }

    .utility-page--privacy .utility-chamber,
    .utility-page--support .utility-chamber,
    .utility-page--contact .utility-chamber {
      align-self: center;
      padding-block: 0;
    }

    .utility-page--privacy .utility-copy,
    .utility-page--support .utility-copy,
    .utility-page--contact .utility-copy {
      max-inline-size: 35rem;
      margin-inline: auto;
    }

    .utility-page--contact .utility-copy {
      inline-size: fit-content;
    }

    .utility-page--support .utility-principle,
    .utility-page--support .utility-copy,
    .utility-page--contact .utility-principle,
    .utility-page--contact .utility-copy {
      margin-block-start: calc((var(--space-5) + var(--space-6)) / 2);
    }

    .utility-page--support .utility-contact--direct {
      margin-block-start: var(--space-5);
      margin-block-end: 0;
    }

    .utility-page--support .utility-return,
    .utility-page--contact .utility-return {
      margin-block-start: var(--space-6);
    }

  }
}

@media (orientation: landscape) and (min-width: 40rem) {
  @layer layout {
    .utility-shell {
      min-block-size: 100vh;
      min-block-size: 100svh;
    }

    .utility-field {
      --utility-field-base-opacity: calc(var(--utility-field-opacity) * (1 - var(--field-breath-depth)));
      --utility-field-exchange-opacity: calc(var(--utility-field-opacity) * var(--field-breath-depth) / (1 - var(--utility-field-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset: 0;
      overflow: hidden;
      -webkit-mask-image: var(--utility-field-mask);
      mask-image: var(--utility-field-mask);
      pointer-events: none;
    }

    .utility-field--a {
      --utility-field-opacity: 0.6156;
      --utility-field-size: 116.588903vw;
      --utility-field-y: 50%;
      --utility-field-translate-y: -49%;
      --utility-field-mask: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.08) 10%,
        rgb(0 0 0 / 0.35) 20%,
        #000 34%,
        #000 68%,
        rgb(0 0 0 / 0.55) 82%,
        transparent 100%
      );
    }

    .utility-field--b {
      --utility-field-opacity: 0.3591;
      --utility-field-size: 108vw;
      --utility-field-y: 50%;
      --utility-field-translate-y: -50%;
      --utility-field-mask: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.2) 0%,
        rgb(0 0 0 / 0.42) 10%,
        rgb(0 0 0 / 0.72) 20%,
        #000 32%,
        #000 76%,
        rgb(0 0 0 / 0.78) 87%,
        rgb(0 0 0 / 0.4) 95%,
        transparent 100%
      );
    }

    .utility-field--c {
      --utility-field-opacity: 0.2736;
      --utility-field-size: 100vw;
      --utility-field-y: 50%;
      --utility-field-translate-y: -50%;
      --utility-field-mask: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.18) 0%,
        rgb(0 0 0 / 0.4) 11%,
        rgb(0 0 0 / 0.72) 22%,
        #000 34%,
        #000 74%,
        rgb(0 0 0 / 0.76) 86%,
        rgb(0 0 0 / 0.38) 95%,
        transparent 100%
      );
    }

    .utility-field__material {
      position: absolute;
      inline-size: var(--utility-field-size);
      max-inline-size: none;
      block-size: auto;
      inset-block-start: var(--utility-field-y);
      inset-inline-start: 50%;
      transform: translate(-50%, var(--utility-field-translate-y));
    }

    .utility-field__material--base {
      opacity: var(--utility-field-base-opacity);
    }

    .utility-field__material--left,
    .utility-field__material--right {
      opacity: calc(
        var(--utility-field-exchange-opacity)
        * (1 + var(--field-phase) * var(--utility-field-direction))
      );
    }

    .utility-field__material--left {
      --utility-field-direction: 1;

      -webkit-mask-image: linear-gradient(to right, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
      mask-image: linear-gradient(to right, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
    }

    .utility-field__material--right {
      --utility-field-direction: -1;

      -webkit-mask-image: linear-gradient(to left, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
      mask-image: linear-gradient(to left, #000 0%, #000 27%, rgb(0 0 0 / 0.72) 39%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.22) 61%, transparent 73%);
    }

    .utility-field--c .utility-field__material--left {
      --utility-field-direction: -1;
    }

    .utility-field--c .utility-field__material--right {
      --utility-field-direction: 1;
    }

    .utility-main {
      display: grid;
      min-block-size: 100vh;
      min-block-size: 100svh;
      padding-block: clamp(3.5rem, 6vh, 5rem) clamp(4rem, 8vh, 6rem);
      grid-template-rows: auto 1fr;
    }

    .utility-brand {
      inline-size: min(15.25rem, 23.5vw);
    }

    .utility-chamber {
      align-self: center;
      padding-block: clamp(4rem, 9vh, 7rem);
    }

    .utility-principle {
      margin-block-start: clamp(2.5rem, 5vh, 4rem);
    }

    .utility-copy {
      margin-block-start: clamp(2.5rem, 5vh, 4rem);
    }

    .utility-page--support .utility-contact--direct {
      margin-block-start: calc(var(--space-6) * 0.72);
      margin-block-end: 0;
    }

    .utility-page--support .utility-return {
      margin-block-start: calc(var(--space-7) * 0.55);
    }
  }
}