@layer reset, tokens, base, layout, components, utilities;

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
}

@layer tokens {
  :root {
    /* Provisional typography; Stage 4 will art-direct these values. */
    --font-live: "Atkinson Hyperlegible Next", "Helvetica Neue", Arial, sans-serif;
    --weight-body: 350;
    --weight-heading: 400;
    --weight-label: 550;
    --leading-body: 1.7;
    --leading-heading: 1.16;
    --tracking-heading: 0.06em;
    --tracking-label: 0.08em;
    --step--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.86rem);
    --step-status: clamp(0.8775rem, 0.84375rem + 0.135vw, 0.9675rem);
    --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --step-1: clamp(1.25rem, 1.14rem + 0.48vw, 1.58rem);
    --step-2: clamp(1.72rem, 1.44rem + 1.2vw, 2.55rem);
    --step-3: clamp(2.25rem, 1.76rem + 2.08vw, 3.7rem);

    --color-ivory: #f8f4e9;
    --color-ink: #263b43;
    --color-ink-soft: #506169;
    --color-amber: #c98d35;
    --color-gold: #dfbb66;
    --color-aquamarine: #62bfc1;
    --color-cyan: #67cbd2;
    --color-leaf: #9aaa50;
    --color-jade: #589d88;
    --color-focus: #176f78;

    /* Central controls for the future continuous field. */
    --field-base: var(--color-ivory);
    --field-amber: var(--color-amber);
    --field-aquamarine: var(--color-aquamarine);
    --field-warm-green: var(--color-leaf);
    --field-cool-green: var(--color-jade);
    --field-opacity: 0;
    --field-blur: 6rem;
    --field-phase: 0;
    --field-breath-depth: 0.03;

    --container-reading: 44rem;
    --container-content: 72rem;
    --container-wide: 90rem;
    --gutter: 2.125rem;

    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4.5rem;
    --space-section: clamp(4rem, 9vw, 9rem);
    --space-sanctuary-sequence: calc(var(--space-section) * 0.775);
    --space-sanctuary-products: calc(var(--space-sanctuary-sequence) * 0.625);

    --radius-small: 0.375rem;
    --radius-artwork: 0.75rem;
    --shadow-soft: 0 1.25rem 4rem rgb(38 59 67 / 0.08);
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

html.semantic-position-restoring {
  scroll-behavior: auto;
  overflow-anchor: none;
}

html.semantic-position-restoring body {
  overflow-anchor: none;
}

  body,
  h1,
  h2,
  p,
  figure,
  blockquote {
    margin: 0;
  }

  img,
  picture,
  svg {
    display: block;
    max-inline-size: 100%;
  }

  img {
    block-size: auto;
  }
}

@layer base {
  html {
    background: var(--field-base);
    color: var(--color-ink);
    font-family: var(--font-live);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }

  body {
    min-block-size: 100vh;
    font-size: var(--step-0);
    font-weight: var(--weight-body);
    line-height: var(--leading-body);
  }

  h1,
  h2 {
    font-weight: var(--weight-heading);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    text-transform: uppercase;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--step-3);
  }

  h2 {
    font-size: var(--step-2);
  }

  a {
    color: inherit;
    text-underline-offset: 0.24em;
  }

  p,
  blockquote {
    text-wrap: pretty;
  }

  :focus-visible {
    outline: 0.16rem solid var(--color-focus);
    outline-offset: 0.28rem;
  }
}

@layer layout {
  .site-shell {
    isolation: isolate;
    position: relative;
    overflow: clip;
  }

  .field-canvas {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--field-base);
    pointer-events: none;
  }

  .container {
    inline-size: min(100% - (2 * var(--gutter)), var(--container-content));
    margin-inline: auto;
  }

  .container--reading,
  .reading-width {
    max-inline-size: var(--container-reading);
  }

  .container--wide {
    inline-size: min(100% - (2 * var(--gutter)), var(--container-wide));
  }

  .section {
    padding-block: var(--space-section);
  }

  .section--hero {
    display: grid;
    position: relative;
    min-block-size: min(48rem, 100svh);
    place-items: center;
    text-align: center;
  }

  .section--hero.viewport-navigation-target {
    min-block-size: max(
      100svh,
      100dvh,
      var(--navigation-viewport-height, 100svh)
    );
  }

  .hero-field {
    display: none;
  }

  .flow > * + * {
    margin-block-start: var(--space-4);
  }

  .flow--large > * + * {
    margin-block-start: var(--space-6);
  }

  .hero-title-tablet-break {
    display: none;
  }

  .section--hero #hero-title {
    font-size: var(--step-3);
  }

  .centered {
    text-align: center;
  }

  .centered > img,
  .centered > .reading-width {
    margin-inline: auto;
  }

  .site-footer {
    padding-block: var(--space-6);
  }

  .breakthrough-composition {
    --breakthrough-object-position: center center;

    position: relative;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100vh;
    block-size: 100svh;
    block-size: 100dvh;
  }

  .breakthrough-composition.viewport-navigation-target {
    block-size: max(
      100svh,
      var(--navigation-viewport-height, 100svh)
    );
  }

  .section--breakthrough {
    padding-block: 0;
  }

  .section--intro#sanctuaries {
    position: relative;
    display: grid;
    min-block-size: 100vh;
    min-block-size: 100svh;
    padding-block: var(--space-section);
    place-items: center;
  }

  .section--intro#sanctuaries.viewport-navigation-target {
    min-block-size: max(
      100svh,
      var(--navigation-viewport-height, 100svh)
    );
  }

  .breakthrough-media,
  .breakthrough-media img {
    inline-size: 100%;
    block-size: 100%;
  }

  .breakthrough-media img {
    object-fit: cover;
    object-position: var(--breakthrough-object-position);
  }

  .breakthrough-field-clone {
    display: none;
  }

  .sanctuaries-field-continuum,
  .sanctuaries-field-score,
  .sanctuaries-field-a-region,
  .dream-field-continuum,
  .featured-field-continuum {
    position: relative;
    isolation: isolate;
  }

  .featured-field-stage {
    position: relative;
  }

  .sanctuaries-field-a,
  .sanctuaries-field-b,
  .sanctuaries-field-b2,
  .sanctuaries-field-c,
  .sanctuaries-field-c2,
  .dream-field-aprime,
  .dream-field-bprime,
  .featured-field-cprime,
  .featured-field-c2prime,
  .featured-field-bprime,
  .featured-field-heroprime {
    display: none;
  }

  .mobile-sanctuary-clone {
    display: none;
  }

  .chromaphi-copy-break {
    display: none;
  }

  .breakthrough-credit {
    position: absolute;
    z-index: 2;
    inset-block-end: max(1.5rem, env(safe-area-inset-bottom));
    inset-inline-end: clamp(1.5rem, 3vw, 3rem);
    max-inline-size: calc(50% - 3rem);
    color: rgb(248 237 210 / 0.9);
    font-size: clamp(0.793rem, 0.744rem + 0.146vw, 0.915rem);
    font-weight: 300;
    letter-spacing: 0.025em;
    line-height: 1.35;
    text-align: end;
    text-shadow:
      0 1px 3px rgb(15 25 30 / 0.65),
      0 0 1px rgb(15 25 30 / 0.45);
  }

  .breakthrough-credit cite {
    font-style: italic;
  }

  .product {
    display: grid;
    gap: var(--space-4);
  }

  .product-title {
    position: relative;
    inset-block-start: var(--space-2);
    margin-block-end: var(--space-2);
  }

  .product-media img {
    inline-size: 100%;
  }

  .featured-product {
    display: grid;
    gap: var(--space-6);
  }

  .featured-identity,
  .featured-identity-text {
    display: grid;
  }

  .featured-identity {
    gap: var(--space-4);
  }

  .featured-identity-text {
    gap: var(--space-2);
  }

  .phone-media img {
    inline-size: min(100%, 27.5rem);
    margin-inline: auto;
  }

  @media (orientation: portrait) and (max-width: 44.99rem),
    (orientation: landscape) and (max-width: 39.99rem) {
    :root {
      --mobile-body-size: clamp(0.91rem, 0.895rem + 0.06vw, 0.96rem);
      --mobile-section-heading-size: clamp(1.63rem, 1.37rem + 1.14vw, 2.42rem);
    }

    body {
      font-size: var(--mobile-body-size);
      font-weight: 325;
      line-height: 1.75;
    }

    .section--intro h2,
    .product-title,
    .featured-identity-text h2 {
      font-size: var(--mobile-section-heading-size);
    }

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

      isolation: isolate;
      overflow: hidden;
      min-block-size: 100vh;
      min-block-size: 100svh;
      min-block-size: 100dvh;
      padding-block: 0;
      grid-template-rows:
        minmax(15.75rem, 46.5fr)
        auto
        minmax(18.125rem, 53.5fr);
      place-items: start center;
    }

    .breakthrough-composition {
      --breakthrough-object-position: 52.5% center;
    }

    .hero-field {
      display: block;
      position: absolute;
      z-index: -1;
      inset: 0;
      -webkit-mask-image:
        radial-gradient(ellipse 105% 72% at 50% -8%, #000 0%, #000 48%, rgb(0 0 0 / 0.65) 58%, rgb(0 0 0 / 0.16) 67%, transparent 75%),
        radial-gradient(ellipse 72% 88% at -8% 5%, #000 0%, #000 44%, rgb(0 0 0 / 0.6) 57%, rgb(0 0 0 / 0.24) 70%, rgb(0 0 0 / 0.06) 79%, transparent 84%),
        radial-gradient(ellipse 76% 94% at 108% 3%, #000 0%, #000 44%, rgb(0 0 0 / 0.6) 58%, rgb(0 0 0 / 0.24) 73%, rgb(0 0 0 / 0.06) 83%, transparent 89%);
      -webkit-mask-composite: source-over;
      mask-image:
        radial-gradient(ellipse 105% 72% at 50% -8%, #000 0%, #000 48%, rgb(0 0 0 / 0.65) 58%, rgb(0 0 0 / 0.16) 67%, transparent 75%),
        radial-gradient(ellipse 72% 88% at -8% 5%, #000 0%, #000 44%, rgb(0 0 0 / 0.6) 57%, rgb(0 0 0 / 0.24) 70%, rgb(0 0 0 / 0.06) 79%, transparent 84%),
        radial-gradient(ellipse 76% 94% at 108% 3%, #000 0%, #000 44%, rgb(0 0 0 / 0.6) 58%, rgb(0 0 0 / 0.24) 73%, rgb(0 0 0 / 0.06) 83%, transparent 89%);
      mask-composite: add;
      pointer-events: none;
    }

    .hero-field__material {
      position: absolute;
      max-inline-size: none;
      inline-size: 104vw;
      block-size: auto;
      inset-block-start: -8.5svh;
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }

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

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

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

      -webkit-mask-image: linear-gradient(to right, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
      mask-image: linear-gradient(to right, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
    }

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

      -webkit-mask-image: linear-gradient(to left, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
      mask-image: linear-gradient(to left, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
    }

    .section--hero .container {
      display: contents;
    }

    .section--hero .hero-lockup {
      grid-row: 1;
      align-self: end;
      justify-self: center;
      inline-size: min(22.75rem, 69vw);
      margin-block-end: clamp(2.25rem, 5svh, 2.625rem);
      translate: 0 -3.5svh;
    }

    .section--hero .container > * + * {
      margin-block-start: 0;
    }

    .section--hero #hero-title {
      grid-row: 2;
      margin-block-end: 0;
    }

    .section--hero .hero-title-line {
      display: block;
    }

    .section--hero .action-list {
      grid-row: 3;
      align-self: start;
      flex-direction: column;
      row-gap: 0.125rem;
      margin-block-start: var(--space-4);
      translate: 0 2.5svh;
    }

    .breakthrough-credit__title {
      display: block;
    }

    .breakthrough-credit__separator {
      display: none;
    }

    .breakthrough-media {
      filter: brightness(calc(1 - var(--field-breath-depth)));
    }

    .breakthrough-field-clone {
      display: block;
      position: absolute;
      z-index: 1;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: var(--breakthrough-object-position);
      filter: brightness(calc(1 + var(--field-breath-depth)));
      opacity: calc(0.5 + var(--field-phase) * var(--breakthrough-field-direction) * 0.5);
      pointer-events: none;
    }

    .breakthrough-field-clone--left {
      --breakthrough-field-direction: 1;

      -webkit-mask-image: linear-gradient(to right, #000 0%, #000 24%, rgb(0 0 0 / 0.7) 38%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.2) 62%, transparent 76%);
      mask-image: linear-gradient(to right, #000 0%, #000 24%, rgb(0 0 0 / 0.7) 38%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.2) 62%, transparent 76%);
    }

    .breakthrough-field-clone--right {
      --breakthrough-field-direction: -1;

      -webkit-mask-image: linear-gradient(to left, #000 0%, #000 24%, rgb(0 0 0 / 0.7) 38%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.2) 62%, transparent 76%);
      mask-image: linear-gradient(to left, #000 0%, #000 24%, rgb(0 0 0 / 0.7) 38%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.2) 62%, transparent 76%);
    }

    .field-clones-promoted :is(
      .hero-field__material--left,
      .hero-field__material--right,
      .breakthrough-field-clone--left,
      .breakthrough-field-clone--right,
      .mobile-sanctuary-clone--left,
      .mobile-sanctuary-clone--right,
      .dream-field-aprime__material--left,
      .dream-field-aprime__material--right,
      .dream-field-bprime__material--left,
      .dream-field-bprime__material--right,
      .featured-field-cprime__material--left,
      .featured-field-cprime__material--right,
      .featured-field-c2prime__material--left,
      .featured-field-c2prime__material--right,
      .featured-field-heroprime__material--left,
      .featured-field-heroprime__material--right
    ) {
      will-change: opacity;
    }

    .product-media.field-clones-promoted {
      will-change: transform;
    }

    .sanctuaries-title-line {
      display: block;
    }

    .product-title {
      justify-self: center;
      text-align: center;
    }

    .section--intro#sanctuaries h2,
    #sanctuary-67 .product-title,
    #bees-in-sound .product-title,
    #cedar-in-sound .product-title,
    #gold-in-sound .product-title {
      position: relative;
      isolation: isolate;
    }

    .section--intro#sanctuaries h2::before,
    #sanctuary-67 .product-title::before,
    #bees-in-sound .product-title::before,
    #cedar-in-sound .product-title::before,
    #gold-in-sound .product-title::before {
      content: "";
      position: absolute;
      z-index: -1;
      inline-size: min(150%, calc(100vw - 1rem));
      block-size: calc(100% + 3.5rem);
      inset-block-start: 50%;
      inset-inline-start: 50%;
      background: radial-gradient(
        ellipse at center,
        rgb(248 244 233 / 0.86) 0%,
        rgb(248 244 233 / 0.68) 28%,
        rgb(248 244 233 / 0.34) 52%,
        rgb(248 244 233 / 0.1) 68%,
        transparent 82%
      );
      pointer-events: none;
      transform: translate(-50%, -50%);
    }

    #sanctuary-67 .product-copy,
    #bees-in-sound .product-copy,
    #cedar-in-sound .product-copy,
    #gold-in-sound .product-copy {
      inline-size: calc(100% - 1.25rem);
      justify-self: center;
    }

    .chromaphi-explanation {
      inline-size: calc(100% - 1.25rem);
      text-align: start;
    }

    .chromaphi-explanation p + p {
      margin-block-start: 1.5em;
    }

    .section--chromaphi .bridge-copy {
      inline-size: calc(100% - 1.25rem);
      margin-inline: auto;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      text-align: start;
    }

    .chromaphi-copy-break {
      display: initial;
    }

    .sanctuaries-field-a-region > .section {
      position: relative;
      z-index: 1;
    }

    .sanctuaries-field-continuum {
      --mobile-sanctuary-gain: 0.85;
    }

    .sanctuaries-field-a {
      --mobile-sanctuary-opacity: 0.6;
      --mobile-sanctuary-base-opacity: calc(var(--mobile-sanctuary-opacity) * var(--mobile-sanctuary-gain) * (1 - var(--field-breath-depth)));
      --mobile-sanctuary-exchange-opacity: calc(var(--mobile-sanctuary-opacity) * var(--mobile-sanctuary-gain) * var(--field-breath-depth) / (1 - var(--mobile-sanctuary-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset-block-start: var(--mobile-field-top, 52svh);
      inset-inline: 0;
      block-size: calc(140vw * 1890 / 832);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent var(--mobile-a-mask-0, 0%),
        rgb(0 0 0 / 0.08) var(--mobile-a-mask-8, 8%),
        rgb(0 0 0 / 0.28) var(--mobile-a-mask-15, 15%),
        rgb(0 0 0 / 0.62) var(--mobile-a-mask-22, 22%),
        #000 var(--mobile-a-mask-30, 30%),
        #000 var(--mobile-a-mask-76, 76%),
        rgb(0 0 0 / 0.82) var(--mobile-a-mask-78, 78%),
        rgb(0 0 0 / 0.6) var(--mobile-a-mask-81, 81%),
        rgb(0 0 0 / 0.34) var(--mobile-a-mask-85, 85%),
        rgb(0 0 0 / 0.14) var(--mobile-a-mask-89, 89%),
        rgb(0 0 0 / 0.03) var(--mobile-a-mask-93, 93%),
        transparent var(--mobile-a-mask-95, 95%),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent var(--mobile-a-mask-0, 0%),
        rgb(0 0 0 / 0.08) var(--mobile-a-mask-8, 8%),
        rgb(0 0 0 / 0.28) var(--mobile-a-mask-15, 15%),
        rgb(0 0 0 / 0.62) var(--mobile-a-mask-22, 22%),
        #000 var(--mobile-a-mask-30, 30%),
        #000 var(--mobile-a-mask-76, 76%),
        rgb(0 0 0 / 0.82) var(--mobile-a-mask-78, 78%),
        rgb(0 0 0 / 0.6) var(--mobile-a-mask-81, 81%),
        rgb(0 0 0 / 0.34) var(--mobile-a-mask-85, 85%),
        rgb(0 0 0 / 0.14) var(--mobile-a-mask-89, 89%),
        rgb(0 0 0 / 0.03) var(--mobile-a-mask-93, 93%),
        transparent var(--mobile-a-mask-95, 95%),
        transparent 100%
      );
      pointer-events: none;
    }

    .sanctuaries-field-a__material--base {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-start: 0;
      inset-inline-start: 50%;
      opacity: var(--mobile-sanctuary-base-opacity);
      transform: translateX(-50%);
    }

    .sanctuaries-field-a__material--warm,
    .sanctuaries-field-a__material--cool {
      display: none;
    }

    .sanctuaries-field-b {
      --mobile-sanctuary-opacity: 0.6;
      --mobile-sanctuary-base-opacity: calc(var(--mobile-sanctuary-opacity) * var(--mobile-sanctuary-gain) * (1 - var(--field-breath-depth)));
      --mobile-sanctuary-exchange-opacity: calc(var(--mobile-sanctuary-opacity) * var(--mobile-sanctuary-gain) * var(--field-breath-depth) / (1 - var(--mobile-sanctuary-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset-block-start: var(--mobile-field-top, 128svh);
      inset-inline: 0;
      block-size: calc(140vw * 2059 / 764);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.03) var(--mobile-b-mask-5, 5%),
        rgb(0 0 0 / 0.08) var(--mobile-b-mask-12, 12%),
        rgb(0 0 0 / 0.18) var(--mobile-b-mask-20, 20%),
        rgb(0 0 0 / 0.32) var(--mobile-b-mask-28, 28%),
        rgb(0 0 0 / 0.52) var(--mobile-b-mask-36, 36%),
        rgb(0 0 0 / 0.78) var(--mobile-b-mask-44, 44%),
        #000 var(--mobile-b-mask-48, 48%),
        rgb(0 0 0 / 0.9) var(--mobile-b-mask-55, 55%),
        rgb(0 0 0 / 0.88) var(--mobile-b-mask-84, 84%),
        rgb(0 0 0 / 0.65) var(--mobile-b-mask-90, 90%),
        rgb(0 0 0 / 0.22) var(--mobile-b-mask-96, 96%),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.03) var(--mobile-b-mask-5, 5%),
        rgb(0 0 0 / 0.08) var(--mobile-b-mask-12, 12%),
        rgb(0 0 0 / 0.18) var(--mobile-b-mask-20, 20%),
        rgb(0 0 0 / 0.32) var(--mobile-b-mask-28, 28%),
        rgb(0 0 0 / 0.52) var(--mobile-b-mask-36, 36%),
        rgb(0 0 0 / 0.78) var(--mobile-b-mask-44, 44%),
        #000 var(--mobile-b-mask-48, 48%),
        rgb(0 0 0 / 0.9) var(--mobile-b-mask-55, 55%),
        rgb(0 0 0 / 0.88) var(--mobile-b-mask-84, 84%),
        rgb(0 0 0 / 0.65) var(--mobile-b-mask-90, 90%),
        rgb(0 0 0 / 0.22) var(--mobile-b-mask-96, 96%),
        transparent 100%
      );
      pointer-events: none;
    }

    .sanctuaries-field-b__material--base {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-start: 0;
      inset-inline-start: 50%;
      opacity: var(--mobile-sanctuary-base-opacity);
      transform: translateX(-50%);
    }

    .sanctuaries-field-b__material--warm,
    .sanctuaries-field-b__material--cool {
      display: none;
    }

    .sanctuaries-field-b2 {
      --mobile-sanctuary-opacity: 0.53;
      --mobile-sanctuary-base-opacity: calc(var(--mobile-sanctuary-opacity) * var(--mobile-sanctuary-gain) * (1 - var(--field-breath-depth)));
      --mobile-sanctuary-exchange-opacity: calc(var(--mobile-sanctuary-opacity) * var(--mobile-sanctuary-gain) * var(--field-breath-depth) / (1 - var(--mobile-sanctuary-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset-block-start: var(--mobile-field-top, 254svh);
      inset-inline: 0;
      block-size: calc(140vw * 1778 / 884);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.04) var(--mobile-b2-mask-4, 4%),
        rgb(0 0 0 / 0.12) var(--mobile-b2-mask-10, 10%),
        rgb(0 0 0 / 0.28) var(--mobile-b2-mask-18, 18%),
        rgb(0 0 0 / 0.52) var(--mobile-b2-mask-27, 27%),
        rgb(0 0 0 / 0.78) var(--mobile-b2-mask-36, 36%),
        #000 var(--mobile-b2-mask-44, 44%),
        rgb(0 0 0 / 0.94) var(--mobile-b2-mask-78, 78%),
        rgb(0 0 0 / 0.7) var(--mobile-b2-mask-86, 86%),
        rgb(0 0 0 / 0.3) var(--mobile-b2-mask-94, 94%),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.04) var(--mobile-b2-mask-4, 4%),
        rgb(0 0 0 / 0.12) var(--mobile-b2-mask-10, 10%),
        rgb(0 0 0 / 0.28) var(--mobile-b2-mask-18, 18%),
        rgb(0 0 0 / 0.52) var(--mobile-b2-mask-27, 27%),
        rgb(0 0 0 / 0.78) var(--mobile-b2-mask-36, 36%),
        #000 var(--mobile-b2-mask-44, 44%),
        rgb(0 0 0 / 0.94) var(--mobile-b2-mask-78, 78%),
        rgb(0 0 0 / 0.7) var(--mobile-b2-mask-86, 86%),
        rgb(0 0 0 / 0.3) var(--mobile-b2-mask-94, 94%),
        transparent 100%
      );
      pointer-events: none;
    }

    .sanctuaries-field-b2__material--base {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-start: 0;
      inset-inline-start: 50%;
      opacity: var(--mobile-sanctuary-base-opacity);
      transform: translateX(-50%);
    }

    .sanctuaries-field-c {
      --mobile-sanctuary-opacity: 0.52;
      --mobile-sanctuary-base-opacity: calc(var(--mobile-sanctuary-opacity) * var(--mobile-sanctuary-gain) * (1 - var(--field-breath-depth)));
      --mobile-sanctuary-exchange-opacity: calc(var(--mobile-sanctuary-opacity) * var(--mobile-sanctuary-gain) * var(--field-breath-depth) / (1 - var(--mobile-sanctuary-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset-block-start: var(--mobile-field-top, 349svh);
      inset-inline: 0;
      block-size: calc(140vw * 1778 / 884);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.03) var(--mobile-c-mask-4, 4%),
        rgb(0 0 0 / 0.1) var(--mobile-c-mask-10, 10%),
        rgb(0 0 0 / 0.24) var(--mobile-c-mask-18, 18%),
        rgb(0 0 0 / 0.45) var(--mobile-c-mask-27, 27%),
        rgb(0 0 0 / 0.72) var(--mobile-c-mask-36, 36%),
        rgb(0 0 0 / 0.92) var(--mobile-c-mask-44, 44%),
        #000 var(--mobile-c-mask-52, 52%),
        #000 var(--mobile-c-mask-82, 82%),
        rgb(0 0 0 / 0.68) var(--mobile-c-mask-89, 89%),
        rgb(0 0 0 / 0.28) var(--mobile-c-mask-95, 95%),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.03) var(--mobile-c-mask-4, 4%),
        rgb(0 0 0 / 0.1) var(--mobile-c-mask-10, 10%),
        rgb(0 0 0 / 0.24) var(--mobile-c-mask-18, 18%),
        rgb(0 0 0 / 0.45) var(--mobile-c-mask-27, 27%),
        rgb(0 0 0 / 0.72) var(--mobile-c-mask-36, 36%),
        rgb(0 0 0 / 0.92) var(--mobile-c-mask-44, 44%),
        #000 var(--mobile-c-mask-52, 52%),
        #000 var(--mobile-c-mask-82, 82%),
        rgb(0 0 0 / 0.68) var(--mobile-c-mask-89, 89%),
        rgb(0 0 0 / 0.28) var(--mobile-c-mask-95, 95%),
        transparent 100%
      );
      pointer-events: none;
    }

    .sanctuaries-field-c__content {
      position: absolute;
      inset: 0;
    }

    .sanctuaries-field-c__material--base {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-start: 0;
      inset-inline-start: 50%;
      opacity: var(--mobile-sanctuary-base-opacity);
      transform: translateX(-50%);
    }

    .sanctuaries-field-c__material--cool,
    .sanctuaries-field-c__material--warm {
      display: none;
    }

    .sanctuaries-field-c2 {
      --mobile-sanctuary-opacity: 0.52;
      --mobile-sanctuary-base-opacity: calc(var(--mobile-sanctuary-opacity) * var(--mobile-sanctuary-gain) * (1 - var(--field-breath-depth)));
      --mobile-sanctuary-exchange-opacity: calc(var(--mobile-sanctuary-opacity) * var(--mobile-sanctuary-gain) * var(--field-breath-depth) / (1 - var(--mobile-sanctuary-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset-block-start: var(--mobile-field-top, 0px);
      inset-inline: 0;
      block-size: calc(140vw * 1778 / 884);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.03) var(--mobile-c2-mask-art-top, 5%),
        rgb(0 0 0 / 0.12) var(--mobile-c2-mask-art-mid, 18%),
        #000 var(--mobile-c2-mask-peak, 25%),
        rgb(0 0 0 / 0.84) var(--mobile-c2-mask-release, 29%),
        rgb(0 0 0 / 0.58) var(--mobile-c2-mask-art-bottom, 34%),
        rgb(0 0 0 / 0.4) var(--mobile-c2-mask-copy-top, 40%),
        rgb(0 0 0 / 0.4) var(--mobile-c2-mask-prose-two, 48%),
        rgb(0 0 0 / 0.4) var(--mobile-c2-mask-prose-three, 58%),
        rgb(0 0 0 / 0.4) var(--mobile-c2-mask-status, 70%),
        rgb(0 0 0 / 0.4) var(--mobile-c2-mask-status-end, 74%),
        rgb(0 0 0 / 0.22) var(--mobile-c2-mask-chromaphi, 82%),
        rgb(0 0 0 / 0.135) var(--mobile-c2-mask-wheel-top, 88%),
        rgb(0 0 0 / 0.0675) var(--mobile-c2-mask-wheel-third, 93%),
        rgb(0 0 0 / 0.02) var(--mobile-c2-mask-wheel-55, 97%),
        transparent var(--mobile-c2-mask-wheel-zero, 100%)
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.03) var(--mobile-c2-mask-art-top, 5%),
        rgb(0 0 0 / 0.12) var(--mobile-c2-mask-art-mid, 18%),
        #000 var(--mobile-c2-mask-peak, 25%),
        rgb(0 0 0 / 0.84) var(--mobile-c2-mask-release, 29%),
        rgb(0 0 0 / 0.58) var(--mobile-c2-mask-art-bottom, 34%),
        rgb(0 0 0 / 0.4) var(--mobile-c2-mask-copy-top, 40%),
        rgb(0 0 0 / 0.4) var(--mobile-c2-mask-prose-two, 48%),
        rgb(0 0 0 / 0.4) var(--mobile-c2-mask-prose-three, 58%),
        rgb(0 0 0 / 0.4) var(--mobile-c2-mask-status, 70%),
        rgb(0 0 0 / 0.4) var(--mobile-c2-mask-status-end, 74%),
        rgb(0 0 0 / 0.22) var(--mobile-c2-mask-chromaphi, 82%),
        rgb(0 0 0 / 0.135) var(--mobile-c2-mask-wheel-top, 88%),
        rgb(0 0 0 / 0.0675) var(--mobile-c2-mask-wheel-third, 93%),
        rgb(0 0 0 / 0.02) var(--mobile-c2-mask-wheel-55, 97%),
        transparent var(--mobile-c2-mask-wheel-zero, 100%)
      );
      pointer-events: none;
    }

    .sanctuaries-field-c2__material--base {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-start: 0;
      inset-inline-start: 50%;
      opacity: var(--mobile-sanctuary-base-opacity);
      transform: translateX(-50%);
    }

    .mobile-sanctuary-clone {
      display: block;
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-start: 0;
      inset-inline-start: 50%;
      opacity: calc(
        var(--mobile-sanctuary-exchange-opacity)
        * (1 + var(--field-phase) * var(--mobile-sanctuary-direction))
      );
      transform: translateX(-50%);
    }

    .mobile-sanctuary-clone--left {
      --mobile-sanctuary-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%);
    }

    .mobile-sanctuary-clone--right {
      --mobile-sanctuary-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%);
    }

    #gold-in-sound .product-media {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border-radius: 0.875rem;
    }

    #gold-in-sound .product-media::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      background: var(--color-ivory);
      border-radius: inherit;
      pointer-events: none;
    }

    #gold-in-sound .product-media img {
      position: relative;
      z-index: 1;
    }

    .dream-field-continuum {
      overflow: visible;
    }

    .dream-field-continuum > .section,
    .dream-chord-viewport > .section {
      position: relative;
      z-index: 1;
    }

    .dream-field-aprime {
      --mobile-sanctuary-opacity: 0.6;
      --mobile-sanctuary-base-opacity: calc(var(--mobile-sanctuary-opacity) * (1 - var(--field-breath-depth)));
      --mobile-sanctuary-exchange-opacity: calc(var(--mobile-sanctuary-opacity) * var(--field-breath-depth) / (1 - var(--mobile-sanctuary-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset-block-start: var(--mobile-field-top, 0px);
      inset-inline: 0;
      block-size: calc(140vw * 1890 / 832);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent var(--mobile-aprime-mask-0, 0%),
        rgb(0 0 0 / 0.06) calc(var(--mobile-aprime-mask-0, 0%) + 0.5rem),
        rgb(0 0 0 / 0.12) var(--mobile-aprime-mask-8, 8%),
        rgb(0 0 0 / 0.25) var(--mobile-aprime-mask-18, 18%),
        rgb(0 0 0 / 0.48) var(--mobile-aprime-mask-32, 32%),
        rgb(0 0 0 / 0.72) var(--mobile-aprime-mask-48, 48%),
        rgb(0 0 0 / 0.9) var(--mobile-aprime-mask-65, 65%),
        #000 var(--mobile-aprime-mask-75, 75%),
        #000 var(--mobile-aprime-mask-exit-start, 82%),
        rgb(0 0 0 / 0.75) var(--mobile-aprime-mask-exit-mid, 87%),
        rgb(0 0 0 / 0.4) var(--mobile-aprime-mask-exit-late, 91%),
        rgb(0 0 0 / 0.12) var(--mobile-aprime-mask-exit-near, 96%),
        transparent var(--mobile-aprime-mask-exit-zero, 100%)
      );
      mask-image: linear-gradient(
        to bottom,
        transparent var(--mobile-aprime-mask-0, 0%),
        rgb(0 0 0 / 0.06) calc(var(--mobile-aprime-mask-0, 0%) + 0.5rem),
        rgb(0 0 0 / 0.12) var(--mobile-aprime-mask-8, 8%),
        rgb(0 0 0 / 0.25) var(--mobile-aprime-mask-18, 18%),
        rgb(0 0 0 / 0.48) var(--mobile-aprime-mask-32, 32%),
        rgb(0 0 0 / 0.72) var(--mobile-aprime-mask-48, 48%),
        rgb(0 0 0 / 0.9) var(--mobile-aprime-mask-65, 65%),
        #000 var(--mobile-aprime-mask-75, 75%),
        #000 var(--mobile-aprime-mask-exit-start, 82%),
        rgb(0 0 0 / 0.75) var(--mobile-aprime-mask-exit-mid, 87%),
        rgb(0 0 0 / 0.4) var(--mobile-aprime-mask-exit-late, 91%),
        rgb(0 0 0 / 0.12) var(--mobile-aprime-mask-exit-near, 96%),
        transparent var(--mobile-aprime-mask-exit-zero, 100%)
      );
      pointer-events: none;
    }

    .dream-field-aprime__material {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-start: 0;
      inset-inline-start: 50%;
      transform: translateX(-50%) scaleX(-1);
    }

    .dream-field-aprime__material--base {
      opacity: var(--mobile-sanctuary-base-opacity);
    }

    .dream-field-aprime__material--left,
    .dream-field-aprime__material--right {
      opacity: calc(
        var(--mobile-sanctuary-exchange-opacity)
        * (1 + var(--field-phase) * var(--dream-field-aprime-direction))
      );
    }

    .dream-field-aprime__material--left {
      --dream-field-aprime-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%);
    }

    .dream-field-aprime__material--right {
      --dream-field-aprime-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%);
    }

    .dream-field-bprime {
      --mobile-sanctuary-opacity: 0.42;
      --mobile-sanctuary-base-opacity: calc(var(--mobile-sanctuary-opacity) * (1 - var(--field-breath-depth)));
      --mobile-sanctuary-exchange-opacity: calc(var(--mobile-sanctuary-opacity) * var(--field-breath-depth) / (1 - var(--mobile-sanctuary-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset-block-start: var(--mobile-field-top, 0px);
      inset-inline: 0;
      block-size: calc(140vw * 2059 / 764);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent var(--mobile-bprime-mask-0, 0%),
        rgb(0 0 0 / 0.06) var(--mobile-bprime-mask-8, 8%),
        rgb(0 0 0 / 0.18) var(--mobile-bprime-mask-18, 18%),
        rgb(0 0 0 / 0.38) var(--mobile-bprime-mask-32, 32%),
        rgb(0 0 0 / 0.62) var(--mobile-bprime-mask-48, 48%),
        rgb(0 0 0 / 0.65) var(--mobile-bprime-mask-65, 65%),
        rgb(0 0 0 / 0.65) var(--mobile-bprime-mask-75, 75%),
        rgb(0 0 0 / 0.68) var(--mobile-bprime-mask-intro-top, 78%),
        rgb(0 0 0 / 0.71) var(--mobile-bprime-mask-intro-bottom, 82%),
        #000 var(--mobile-bprime-mask-entry, 86%),
        rgb(0 0 0 / 0.75) var(--mobile-bprime-mask-silence, 90%),
        rgb(0 0 0 / 0.58) var(--mobile-bprime-mask-testimonial, 94%),
        rgb(0 0 0 / 0.55) var(--mobile-bprime-mask-quote, 97%),
        rgb(0 0 0 / 0.55) var(--mobile-bprime-mask-cprime-start, 97.5%),
        rgb(0 0 0 / 0.35) var(--mobile-bprime-mask-cprime-mid, 98%),
        rgb(0 0 0 / 0.15) var(--mobile-bprime-mask-cprime-late, 99%),
        transparent var(--mobile-bprime-mask-cprime-zero, 100%)
      );
      mask-image: linear-gradient(
        to bottom,
        transparent var(--mobile-bprime-mask-0, 0%),
        rgb(0 0 0 / 0.06) var(--mobile-bprime-mask-8, 8%),
        rgb(0 0 0 / 0.18) var(--mobile-bprime-mask-18, 18%),
        rgb(0 0 0 / 0.38) var(--mobile-bprime-mask-32, 32%),
        rgb(0 0 0 / 0.62) var(--mobile-bprime-mask-48, 48%),
        rgb(0 0 0 / 0.65) var(--mobile-bprime-mask-65, 65%),
        rgb(0 0 0 / 0.65) var(--mobile-bprime-mask-75, 75%),
        rgb(0 0 0 / 0.68) var(--mobile-bprime-mask-intro-top, 78%),
        rgb(0 0 0 / 0.71) var(--mobile-bprime-mask-intro-bottom, 82%),
        #000 var(--mobile-bprime-mask-entry, 86%),
        rgb(0 0 0 / 0.75) var(--mobile-bprime-mask-silence, 90%),
        rgb(0 0 0 / 0.58) var(--mobile-bprime-mask-testimonial, 94%),
        rgb(0 0 0 / 0.55) var(--mobile-bprime-mask-quote, 97%),
        rgb(0 0 0 / 0.55) var(--mobile-bprime-mask-cprime-start, 97.5%),
        rgb(0 0 0 / 0.35) var(--mobile-bprime-mask-cprime-mid, 98%),
        rgb(0 0 0 / 0.15) var(--mobile-bprime-mask-cprime-late, 99%),
        transparent var(--mobile-bprime-mask-cprime-zero, 100%)
      );
      pointer-events: none;
    }

    .dream-field-bprime__material {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-start: 0;
      inset-inline-start: 50%;
      transform: translateX(-50%) scaleX(-1);
    }

    .dream-field-bprime__material--base {
      opacity: var(--mobile-sanctuary-base-opacity);
    }

    .dream-field-bprime__material--left,
    .dream-field-bprime__material--right {
      opacity: calc(
        var(--mobile-sanctuary-exchange-opacity)
        * (1 + var(--field-phase) * var(--dream-field-bprime-direction))
      );
    }

    .dream-field-bprime__material--left {
      --dream-field-bprime-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%);
    }

    .dream-field-bprime__material--right {
      --dream-field-bprime-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%);
    }

    .featured-field-stage {
      z-index: 1;
    }

    .featured-field-continuum > .section {
      position: relative;
      z-index: 1;
    }

    .featured-field-cprime {
      --mobile-sanctuary-opacity: 0.32;
      --mobile-sanctuary-base-opacity: calc(var(--mobile-sanctuary-opacity) * (1 - var(--field-breath-depth)));
      --mobile-sanctuary-exchange-opacity: calc(var(--mobile-sanctuary-opacity) * var(--field-breath-depth) / (1 - var(--mobile-sanctuary-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset-block-start: var(--mobile-field-top, 0px);
      inset-inline: 0;
      block-size: calc(140vw * 1778 / 884);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent var(--mobile-cprime-mask-0, 0%),
        rgb(0 0 0 / 0.06) var(--mobile-cprime-mask-8, 8%),
        rgb(0 0 0 / 0.18) var(--mobile-cprime-mask-18, 18%),
        rgb(0 0 0 / 0.38) var(--mobile-cprime-mask-32, 32%),
        rgb(0 0 0 / 0.62) var(--mobile-cprime-mask-48, 48%),
        rgb(0 0 0 / 0.84) var(--mobile-cprime-mask-65, 65%),
        #000 var(--mobile-cprime-mask-reading-crest, 72%),
        rgb(0 0 0 / 0.84) var(--mobile-cprime-mask-reading-start, 75%),
        rgb(0 0 0 / 0.84) var(--mobile-cprime-mask-reading-end, 84%),
        rgb(0 0 0 / 0.92) var(--mobile-cprime-mask-price, 86%),
        #000 var(--mobile-cprime-mask-c2prime-start, 88%),
        rgb(0 0 0 / 0.78) var(--mobile-cprime-mask-c2prime-mid, 91%),
        rgb(0 0 0 / 0.42) var(--mobile-cprime-mask-c2prime-late, 95%),
        transparent var(--mobile-cprime-mask-c2prime-zero, 100%)
      );
      mask-image: linear-gradient(
        to bottom,
        transparent var(--mobile-cprime-mask-0, 0%),
        rgb(0 0 0 / 0.06) var(--mobile-cprime-mask-8, 8%),
        rgb(0 0 0 / 0.18) var(--mobile-cprime-mask-18, 18%),
        rgb(0 0 0 / 0.38) var(--mobile-cprime-mask-32, 32%),
        rgb(0 0 0 / 0.62) var(--mobile-cprime-mask-48, 48%),
        rgb(0 0 0 / 0.84) var(--mobile-cprime-mask-65, 65%),
        #000 var(--mobile-cprime-mask-reading-crest, 72%),
        rgb(0 0 0 / 0.84) var(--mobile-cprime-mask-reading-start, 75%),
        rgb(0 0 0 / 0.84) var(--mobile-cprime-mask-reading-end, 84%),
        rgb(0 0 0 / 0.92) var(--mobile-cprime-mask-price, 86%),
        #000 var(--mobile-cprime-mask-c2prime-start, 88%),
        rgb(0 0 0 / 0.78) var(--mobile-cprime-mask-c2prime-mid, 91%),
        rgb(0 0 0 / 0.42) var(--mobile-cprime-mask-c2prime-late, 95%),
        transparent var(--mobile-cprime-mask-c2prime-zero, 100%)
      );
      pointer-events: none;
    }

    .featured-field-cprime__material {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-start: 0;
      inset-inline-start: 50%;
      transform: translateX(-50%) scaleX(-1);
    }

    .featured-field-cprime__material--base {
      opacity: var(--mobile-sanctuary-base-opacity);
    }

    .featured-field-cprime__material--left,
    .featured-field-cprime__material--right {
      opacity: calc(
        var(--mobile-sanctuary-exchange-opacity)
        * (1 + var(--field-phase) * var(--featured-field-cprime-direction))
      );
    }

    .featured-field-cprime__material--left {
      --featured-field-cprime-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%);
    }

    .featured-field-cprime__material--right {
      --featured-field-cprime-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%);
    }

    .featured-field-c2prime {
      --mobile-sanctuary-opacity: 0.32;
      --mobile-sanctuary-base-opacity: calc(var(--mobile-sanctuary-opacity) * (1 - var(--field-breath-depth)));
      --mobile-sanctuary-exchange-opacity: calc(var(--mobile-sanctuary-opacity) * var(--field-breath-depth) / (1 - var(--mobile-sanctuary-base-opacity)));

      display: block;
      position: absolute;
      z-index: 0;
      inset-block-start: var(--mobile-field-top, 0px);
      inset-inline: 0;
      block-size: calc(140vw * 1778 / 884);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent var(--mobile-c2prime-mask-0, 0%),
        rgb(0 0 0 / 0.08) var(--mobile-c2prime-mask-8, 8%),
        rgb(0 0 0 / 0.22) var(--mobile-c2prime-mask-22, 22%),
        rgb(0 0 0 / 0.42) var(--mobile-c2prime-mask-42, 42%),
        rgb(0 0 0 / 0.68) var(--mobile-c2prime-mask-68, 68%),
        #000 var(--mobile-c2prime-mask-100, 100%),
        #000 100%
      ), linear-gradient(
        178deg,
        #000 0%,
        #000 var(--mobile-c2prime-mask-release-start, 100%),
        rgb(0 0 0 / 0.82) var(--mobile-c2prime-mask-release-35, 100%),
        rgb(0 0 0 / 0.45) var(--mobile-c2prime-mask-release-70, 100%),
        rgb(0 0 0 / 0.14) var(--mobile-c2prime-mask-release-90, 100%),
        transparent var(--mobile-c2prime-mask-release-zero, 100%)
      );
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(
        to bottom,
        transparent var(--mobile-c2prime-mask-0, 0%),
        rgb(0 0 0 / 0.08) var(--mobile-c2prime-mask-8, 8%),
        rgb(0 0 0 / 0.22) var(--mobile-c2prime-mask-22, 22%),
        rgb(0 0 0 / 0.42) var(--mobile-c2prime-mask-42, 42%),
        rgb(0 0 0 / 0.68) var(--mobile-c2prime-mask-68, 68%),
        #000 var(--mobile-c2prime-mask-100, 100%),
        #000 100%
      ), linear-gradient(
        178deg,
        #000 0%,
        #000 var(--mobile-c2prime-mask-release-start, 100%),
        rgb(0 0 0 / 0.82) var(--mobile-c2prime-mask-release-35, 100%),
        rgb(0 0 0 / 0.45) var(--mobile-c2prime-mask-release-70, 100%),
        rgb(0 0 0 / 0.14) var(--mobile-c2prime-mask-release-90, 100%),
        transparent var(--mobile-c2prime-mask-release-zero, 100%)
      );
      mask-composite: intersect;
      pointer-events: none;
    }

    .featured-field-c2prime__material {
      position: absolute;
      inline-size: 140vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-start: 0;
      inset-inline-start: 50%;
      transform: translateX(-50%) scaleX(-1);
    }

    .featured-field-c2prime__material--base {
      opacity: var(--mobile-sanctuary-base-opacity);
    }

    .featured-field-c2prime__material--left,
    .featured-field-c2prime__material--right {
      opacity: calc(
        var(--mobile-sanctuary-exchange-opacity)
        * (1 + var(--field-phase) * var(--featured-field-c2prime-direction))
      );
    }

    .featured-field-c2prime__material--left {
      --featured-field-c2prime-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%);
    }

    .featured-field-c2prime__material--right {
      --featured-field-c2prime-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%);
    }

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

      display: block;
      position: absolute;
      z-index: 0;
      inset-block-start: auto;
      inset-block-end: calc(-1 * var(--mobile-heroprime-footer-extension, 0px));
      inset-inline: 0;
      block-size: calc(104vw * 1844 / 853);
      overflow: hidden;
      pointer-events: none;
    }

    .featured-field-heroprime__material {
      position: absolute;
      inline-size: 104vw;
      max-inline-size: none;
      block-size: auto;
      inset-block-end: -6%;
      inset-inline-start: 50%;
      transform: translateX(-50%) scaleY(-1);
    }

    .featured-field-heroprime__material--base {
      opacity: var(--featured-field-heroprime-base-opacity);
    }

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

    .featured-field-heroprime__material--left {
      --featured-field-heroprime-direction: 1;

      -webkit-mask-image: linear-gradient(to right, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
      mask-image: linear-gradient(to right, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
    }

    .featured-field-heroprime__material--right {
      --featured-field-heroprime-direction: -1;

      -webkit-mask-image: linear-gradient(to left, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
      mask-image: linear-gradient(to left, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
    }

    .bridge-copy-break {
      display: none;
    }

    .section--bridge {
      padding-block-end: calc(var(--space-section) * 1.3);
    }

    .section--testimonial {
      padding-block: calc(var(--space-section) * 1.3);
    }

    #67-in-sound {
      padding-block-start: calc(var(--space-section) * 1.3);
    }

    .dream-chord-viewport {
      display: grid;
      position: relative;
      min-block-size: 100vh;
      min-block-size: 100svh;
      grid-template-rows: auto 1fr;
    }

    .dream-chord-viewport .section--dream-chord {
      position: relative;
      min-block-size: 50svh;
      padding-block: clamp(4rem, 10svh, 6rem) 0;
    }

    .dream-chord-viewport .section--dream-chord > .container {
      display: grid;
      min-block-size: calc(50svh - clamp(4rem, 10svh, 6rem));
      grid-template-rows: auto auto auto minmax(var(--space-3), 1fr) auto;
    }

    .dream-chord-viewport .section--testimonial {
      align-self: end;
      padding-block: 0 clamp(3.5rem, 8svh, 5rem);
    }

    .dream-chord-viewport .section--dream-chord .dream-chord-entry {
      position: relative;
      grid-row: 5;
      justify-self: center;
      white-space: nowrap;
      translate: 0 50%;
    }

    .dream-chord-subtitle-line {
      display: block;
    }

    .dream-chord-viewport .section--testimonial blockquote {
      inline-size: 92%;
      margin-inline: auto;
      text-wrap: balance;
    }

    .section--closing {
      padding-block-start: clamp(5rem, 12svh, 7rem);
      padding-block-end: clamp(7rem, 16svh, 9rem);
    }

    .closing-title-line,
    .closing-copy-line {
      display: block;
      white-space: nowrap;
    }

    .closing-copy > p + p {
      margin-block-start: var(--space-4);
    }

    .section--closing .action-list {
      flex-direction: column;
    }

    .site-footer {
      padding-block-start: clamp(3rem, 8svh, 4.5rem);
      padding-block-end: clamp(3.5rem, 9svh, 5rem);
    }
  }

  /* Breakpoint foundations: phone-first, then tablet and wide layouts. */
  @media (orientation: portrait) and (min-width: 45rem),
    (orientation: landscape) and (min-width: 40rem) {
    :root {
      --gutter: clamp(2rem, 5vw, 5rem);
    }

    .dream-chord-copy-break {
      display: none;
    }

    .section--hero {
      --hero-field-opacity: 0.72;
      --hero-field-y: calc(42% - 7.956vw);
      --hero-field-size: 112.166%;
      --hero-field-base-opacity: calc(var(--hero-field-opacity) * (1 - var(--field-breath-depth)));
      --hero-field-exchange-opacity: calc(var(--hero-field-opacity) * var(--field-breath-depth) / (1 - var(--hero-field-base-opacity)));

      isolation: isolate;
      overflow: hidden;
      min-block-size: 100vh;
      min-block-size: 100svh;
      min-block-size: 100dvh;
      padding-block: 0;
      grid-template-rows: min(48rem, 100vh) 1fr;
      grid-template-rows: min(48rem, 100svh) 1fr;
    }

    .hero-field {
      display: block;
      position: absolute;
      z-index: -1;
      inset: 0;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 88%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 88%);
      pointer-events: none;
    }

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

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

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

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

      -webkit-mask-image: linear-gradient(to right, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
      mask-image: linear-gradient(to right, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
    }

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

      -webkit-mask-image: linear-gradient(to left, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
      mask-image: linear-gradient(to left, #000 0%, #000 28%, rgb(0 0 0 / 0.75) 42%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.25) 58%, transparent 72%);
    }

    .section--hero .container {
      position: relative;
      z-index: 1;
    }

    .section--hero #hero-title {
      font-size: clamp(1.9rem, 1.5rem + 1.7vw, 3.05rem);
    }

    .section--hero .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .section--hero .container > * + * {
      margin-block-start: 0;
    }

    .section--hero .hero-lockup {
      order: 1;
      inline-size: min(42rem, 65vw);
    }

    .section--hero .hero-lockup + #hero-title {
      order: 2;
      margin-block-start: 2.75rem;
    }

    .section--hero .action-list {
      order: 3;
      margin-block-start: var(--space-4);
    }

    .breakthrough-composition {
      --breakthrough-object-position: center bottom;
    }

    .breakthrough-media {
      filter: brightness(calc(1 - var(--field-breath-depth)));
    }

    .breakthrough-field-clone {
      display: block;
      position: absolute;
      z-index: 1;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: var(--breakthrough-object-position);
      filter: brightness(calc(1 + var(--field-breath-depth)));
      opacity: calc(0.5 + var(--field-phase) * var(--breakthrough-field-direction) * 0.5);
      pointer-events: none;
    }

    .breakthrough-field-clone--left {
      --breakthrough-field-direction: 1;

      -webkit-mask-image: linear-gradient(to right, #000 0%, #000 24%, rgb(0 0 0 / 0.7) 38%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.2) 62%, transparent 76%);
      mask-image: linear-gradient(to right, #000 0%, #000 24%, rgb(0 0 0 / 0.7) 38%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.2) 62%, transparent 76%);
    }

    .breakthrough-field-clone--right {
      --breakthrough-field-direction: -1;

      -webkit-mask-image: linear-gradient(to left, #000 0%, #000 24%, rgb(0 0 0 / 0.7) 38%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.2) 62%, transparent 76%);
      mask-image: linear-gradient(to left, #000 0%, #000 24%, rgb(0 0 0 / 0.7) 38%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.2) 62%, transparent 76%);
    }

    .sanctuaries-field-a-region {
      --sanctuaries-field-a-size: 116.588903%;
      --sanctuaries-field-a-x: center;
      --sanctuaries-field-a-y: 49%;
      --sanctuaries-field-a-opacity: 0.72;
      --sanctuaries-field-a-base-opacity: calc(var(--sanctuaries-field-a-opacity) * (1 - var(--field-breath-depth)));
      --sanctuaries-field-a-exchange-opacity: calc(var(--sanctuaries-field-a-opacity) * var(--field-breath-depth) / (1 - var(--sanctuaries-field-a-base-opacity)));
      --sanctuaries-field-a-mask: linear-gradient(
        to bottom,
        transparent var(--desktop-a-mask-0, 0%),
        rgb(0 0 0 / 0.08) var(--desktop-a-mask-10, 10%),
        rgb(0 0 0 / 0.35) var(--desktop-a-mask-20, 20%),
        #000 var(--desktop-a-mask-34, 34%),
        #000 var(--desktop-a-mask-68, 68%),
        rgb(0 0 0 / 0.55) var(--desktop-a-mask-82, 82%),
        transparent var(--desktop-a-mask-100, 100%)
      );

      overflow: hidden;
    }

    .sanctuaries-field-continuum {
      --sanctuaries-field-b-size: 119.234122%;
      --sanctuaries-field-b-x: center;
      --sanctuaries-field-b-y: 82%;
      --sanctuaries-field-b-opacity: 0.48;
      --sanctuaries-field-b-base-opacity: calc(var(--sanctuaries-field-b-opacity) * (1 - var(--field-breath-depth)));
      --sanctuaries-field-b-exchange-opacity: calc(var(--sanctuaries-field-b-opacity) * var(--field-breath-depth) / (1 - var(--sanctuaries-field-b-base-opacity)));
      --sanctuaries-field-b-mask: linear-gradient(
        to bottom,
        transparent var(--desktop-b-mask-0, 0%),
        transparent var(--desktop-b-mask-40, 40%),
        rgb(0 0 0 / 0.03) var(--desktop-b-mask-45, 45%),
        rgb(0 0 0 / 0.12) var(--desktop-b-mask-49, 49%),
        rgb(0 0 0 / 0.35) var(--desktop-b-mask-54, 54%),
        rgb(0 0 0 / 0.72) var(--desktop-b-mask-58, 58%),
        #000 var(--desktop-b-mask-63, 63%),
        #000 var(--desktop-b-mask-86, 86%),
        rgb(0 0 0 / 0.92) var(--desktop-b-mask-89, 89%),
        rgb(0 0 0 / 0.75) var(--desktop-b-mask-92, 92%),
        rgb(0 0 0 / 0.5) var(--desktop-b-mask-95, 95%),
        rgb(0 0 0 / 0.22) var(--desktop-b-mask-98, 98%),
        transparent var(--desktop-b-mask-100, 100%)
      );
      --sanctuaries-field-c-size: 115.245902%;
      --sanctuaries-field-c-x: center;
      --sanctuaries-field-c-y: 96%;
      --sanctuaries-field-c-opacity: 0.36;
      --sanctuaries-field-c-base-opacity: calc(var(--sanctuaries-field-c-opacity) * (1 - var(--field-breath-depth)));
      --sanctuaries-field-c-exchange-opacity: calc(var(--sanctuaries-field-c-opacity) * var(--field-breath-depth) / (1 - var(--sanctuaries-field-c-base-opacity)));
      --sanctuaries-field-c-release-size: clamp(24rem, 32vw, 34rem);
      --sanctuaries-field-c-entrance-mask: linear-gradient(
        to bottom,
        transparent var(--desktop-c-entrance-mask-0, 0%),
        transparent var(--desktop-c-entrance-mask-64, 64%),
        rgb(0 0 0 / 0.005) var(--desktop-c-entrance-mask-68, 68%),
        rgb(0 0 0 / 0.015) var(--desktop-c-entrance-mask-71, 71%),
        rgb(0 0 0 / 0.04) var(--desktop-c-entrance-mask-74, 74%),
        rgb(0 0 0 / 0.09) var(--desktop-c-entrance-mask-77, 77%),
        rgb(0 0 0 / 0.18) var(--desktop-c-entrance-mask-80, 80%),
        rgb(0 0 0 / 0.32) var(--desktop-c-entrance-mask-83, 83%),
        rgb(0 0 0 / 0.52) var(--desktop-c-entrance-mask-86, 86%),
        rgb(0 0 0 / 0.76) var(--desktop-c-entrance-mask-89, 89%),
        #000 var(--desktop-c-entrance-mask-92, 92%),
        #000 var(--desktop-c-entrance-mask-100, 100%)
      );
      --sanctuaries-field-c-exit-mask: linear-gradient(
        to bottom,
        #000 0%,
        #000 var(--desktop-c-exit-mask-full, calc(100% - var(--sanctuaries-field-c-release-size) - 1.5rem)),
        rgb(0 0 0 / 0.84) var(--desktop-c-exit-mask-84, calc(100% - clamp(21.6rem, 28.8vw, 30.6rem))),
        rgb(0 0 0 / 0.62) var(--desktop-c-exit-mask-62, calc(100% - clamp(18rem, 24vw, 25.5rem))),
        rgb(0 0 0 / 0.34) var(--desktop-c-exit-mask-34, calc(100% - clamp(13.2rem, 17.6vw, 18.7rem))),
        rgb(0 0 0 / 0.12) var(--desktop-c-exit-mask-12, calc(100% - clamp(9.12rem, 12.16vw, 12.92rem))),
        rgb(0 0 0 / 0.035) var(--desktop-c-exit-mask-035, calc(100% - clamp(5.76rem, 7.68vw, 8.16rem))),
        rgb(0 0 0 / 0.008) var(--desktop-c-exit-mask-008, calc(100% - clamp(2.88rem, 3.84vw, 4.08rem))),
        rgb(0 0 0 / 0.002) var(--desktop-c-exit-mask-002, calc(100% - clamp(0.96rem, 1.28vw, 1.36rem))),
        transparent var(--desktop-c-exit-mask-zero, 100%)
      );

      overflow: visible;
    }

    .sanctuaries-field-score {
      z-index: 1;
    }

    .sanctuaries-field-continuum > .section {
      position: relative;
      z-index: 1;
    }

    .sanctuaries-field-a-region {
      z-index: 1;
    }

    .sanctuaries-field-score > .section {
      position: relative;
      z-index: 1;
    }

    .sanctuaries-field-a-region > .section {
      position: relative;
      z-index: 1;
    }

    .sanctuaries-field-a {
      display: block;
      position: absolute;
      z-index: 0;
      inset: 0;
      -webkit-mask-image: var(--sanctuaries-field-a-mask);
      mask-image: var(--sanctuaries-field-a-mask);
      pointer-events: none;
    }

    .sanctuaries-field-a__material {
      position: absolute;
    }

    .sanctuaries-field-a__material {
      inline-size: var(--sanctuaries-field-a-size);
      max-inline-size: none;
      block-size: auto;
      inset-block-start: var(--desktop-a-material-anchor, var(--sanctuaries-field-a-y));
      inset-inline-start: 50%;
      transform: translate(-50%, -49%);
    }

    .sanctuaries-field-a__material--base {
      opacity: var(--sanctuaries-field-a-base-opacity);
    }

    .sanctuaries-field-a__material--warm,
    .sanctuaries-field-a__material--cool {
      opacity: calc(var(--sanctuaries-field-a-exchange-opacity) * (1 + var(--field-phase) * var(--sanctuaries-field-a-direction)));
    }

    .sanctuaries-field-a__material--warm {
      --sanctuaries-field-a-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%);
    }

    .sanctuaries-field-a__material--cool {
      --sanctuaries-field-a-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%);
    }

    .sanctuaries-field-b {
      display: block;
      position: absolute;
      z-index: 0;
      inset: 0;
      -webkit-mask-image: var(--sanctuaries-field-b-mask);
      mask-image: var(--sanctuaries-field-b-mask);
      pointer-events: none;
    }

    .sanctuaries-field-b__material {
      position: absolute;
      inline-size: var(--sanctuaries-field-b-size);
      max-inline-size: none;
      block-size: auto;
      inset-block-start: var(--desktop-b-material-anchor, var(--sanctuaries-field-b-y));
      inset-inline-start: 50%;
      transform: translate(-50%, -82%);
    }

    .sanctuaries-field-b__material--base {
      opacity: var(--sanctuaries-field-b-base-opacity);
    }

    .sanctuaries-field-b__material--warm,
    .sanctuaries-field-b__material--cool {
      opacity: calc(var(--sanctuaries-field-b-exchange-opacity) * (1 + var(--field-phase) * var(--sanctuaries-field-b-direction)));
    }

    .sanctuaries-field-b__material--warm {
      --sanctuaries-field-b-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%);
    }

    .sanctuaries-field-b__material--cool {
      --sanctuaries-field-b-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%);
    }

    .sanctuaries-field-c {
      display: block;
      position: absolute;
      z-index: 0;
      inset-block: 0 calc(-1 * var(--sanctuaries-field-c-release-size));
      inset-inline: 0;
      -webkit-mask-image: var(--sanctuaries-field-c-exit-mask);
      mask-image: var(--sanctuaries-field-c-exit-mask);
      pointer-events: none;
    }

    .sanctuaries-field-c__content {
      position: absolute;
      inset: 0;
      -webkit-mask-image:
        var(--sanctuaries-field-c-entrance-mask),
        linear-gradient(#000, #000);
      -webkit-mask-position: top, bottom;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size:
        100% calc(100% - var(--sanctuaries-field-c-release-size)),
        100% var(--sanctuaries-field-c-release-size);
      -webkit-mask-composite: source-over;
      mask-image:
        var(--sanctuaries-field-c-entrance-mask),
        linear-gradient(#000, #000);
      mask-position: top, bottom;
      mask-repeat: no-repeat;
      mask-size:
        100% calc(100% - var(--sanctuaries-field-c-release-size)),
        100% var(--sanctuaries-field-c-release-size);
      mask-composite: add;
    }

    .sanctuaries-field-c__material {
      position: absolute;
      inline-size: var(--sanctuaries-field-c-size);
      max-inline-size: none;
      block-size: auto;
      inset-block-start: var(--desktop-c-material-anchor, var(--sanctuaries-field-c-y));
      inset-inline-start: 50%;
      transform: translate(-50%, -96%);
    }

    .sanctuaries-field-c__material--base {
      opacity: var(--sanctuaries-field-c-base-opacity);
    }

    .sanctuaries-field-c__material--cool,
    .sanctuaries-field-c__material--warm {
      opacity: calc(var(--sanctuaries-field-c-exchange-opacity) * (1 + var(--field-phase) * var(--sanctuaries-field-c-direction)));
    }

    .sanctuaries-field-c__material--cool {
      --sanctuaries-field-c-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%);
    }

    .sanctuaries-field-c__material--warm {
      --sanctuaries-field-c-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%);
    }

    #cedar-in-sound .product-copy,
    #gold-in-sound .product-copy {
      isolation: isolate;
      position: relative;
    }

    #cedar-in-sound .product-copy::before,
    #gold-in-sound .product-copy::before {
      position: absolute;
      z-index: -1;
      inset: -5rem -7rem;
      content: "";
      filter: blur(1.5rem);
      pointer-events: none;
    }

    #cedar-in-sound .product-copy::before {
      background: radial-gradient(
        ellipse at center,
        rgb(248 244 233 / 0.42) 0%,
        rgb(248 244 233 / 0.39) 36%,
        rgb(248 244 233 / 0.23) 58%,
        transparent 82%
      );
    }

    #gold-in-sound .product-copy::before {
      background: radial-gradient(
        ellipse at center,
        rgb(248 244 233 / 0.30) 0%,
        rgb(248 244 233 / 0.27) 36%,
        rgb(248 244 233 / 0.14) 58%,
        transparent 82%
      );
    }

    .section--chromaphi .chromaphi-explanation p:nth-child(2) {
      margin-block-start: 1.625rem;
    }

    .section--chromaphi .chromaphi-explanation p:nth-child(3) {
      margin-block-start: 0;
    }

    .section--chromaphi .chromaphi-explanation + .infographic {
      margin-block-start: 4.25rem;
    }

    .section--chromaphi .infographic {
      inline-size: 81%;
      margin-inline: auto;
    }

    .section--chromaphi .infographic + .bridge-copy {
      margin-block-start: 5rem;
    }

    .dream-field-continuum {
      --dream-field-aprime-size: 116.588903%;
      --dream-field-aprime-x: center;
      --dream-field-aprime-y: 68%;
      --dream-field-aprime-opacity: 0.56;
      --dream-field-aprime-base-opacity: calc(var(--dream-field-aprime-opacity) * (1 - var(--field-breath-depth)));
      --dream-field-aprime-exchange-opacity: calc(var(--dream-field-aprime-opacity) * var(--field-breath-depth) / (1 - var(--dream-field-aprime-base-opacity)));
      --dream-field-aprime-mask: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.005) var(--desktop-aprime-mask-0, 0%),
        rgb(0 0 0 / 0.012) var(--desktop-aprime-mask-12, 12%),
        rgb(0 0 0 / 0.03) var(--desktop-aprime-mask-24, 24%),
        rgb(0 0 0 / 0.08) var(--desktop-aprime-mask-34, 34%),
        rgb(0 0 0 / 0.2) var(--desktop-aprime-mask-44, 44%),
        rgb(0 0 0 / 0.42) var(--desktop-aprime-mask-52, 52%),
        rgb(0 0 0 / 0.7) var(--desktop-aprime-mask-59, 59%),
        #000 var(--desktop-aprime-mask-66, 66%),
        #000 var(--desktop-aprime-mask-100, 100%)
      );

      overflow: hidden;
    }

    .dream-field-continuum > .section,
    .dream-chord-viewport > .section {
      position: relative;
      z-index: 1;
    }

    .dream-field-aprime {
      display: block;
      position: absolute;
      z-index: 0;
      inset: 0;
      -webkit-mask-image: var(--dream-field-aprime-mask);
      mask-image: var(--dream-field-aprime-mask);
      pointer-events: none;
    }

    .dream-field-aprime__material {
      position: absolute;
      inline-size: var(--dream-field-aprime-size);
      max-inline-size: none;
      block-size: auto;
      inset-block-start: var(--desktop-aprime-material-anchor, var(--dream-field-aprime-y));
      inset-inline-start: 50%;
      transform: translate(-50%, -68%) scaleX(-1);
    }

    .dream-field-aprime__material--base {
      opacity: var(--dream-field-aprime-base-opacity);
    }

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

    .dream-field-aprime__material--left {
      --dream-field-aprime-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%);
    }

    .dream-field-aprime__material--right {
      --dream-field-aprime-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%);
    }

    .featured-field-stage {
      --featured-field-bprime-size: 114.953923%;
      --featured-field-bprime-x: center;
      --featured-field-bprime-y: 58%;
      --featured-field-bprime-opacity: 0.46;
      --featured-field-bprime-base-opacity: calc(var(--featured-field-bprime-opacity) * (1 - var(--field-breath-depth)));
      --featured-field-bprime-exchange-opacity: calc(var(--featured-field-bprime-opacity) * var(--field-breath-depth) / (1 - var(--featured-field-bprime-base-opacity)));
      --featured-field-bprime-runway: clamp(16rem, 19vw, 20rem);
      --featured-field-bprime-release: clamp(22rem, 30vw, 32rem);
      --featured-field-bprime-y-compensation: clamp(12.76rem, 17.4vw, 18.56rem);
      --featured-field-bprime-raster-edge: calc(58% + 48.13vw - var(--featured-field-bprime-y-compensation));
      --featured-field-bprime-terminal-fade: clamp(4rem, 6vw, 6rem);
      --featured-field-bprime-mask: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.005) var(--desktop-bprime-entrance-mask-0, 0%),
        rgb(0 0 0 / 0.02) var(--desktop-bprime-entrance-mask-12, 12%),
        rgb(0 0 0 / 0.08) var(--desktop-bprime-entrance-mask-22, 22%),
        rgb(0 0 0 / 0.22) var(--desktop-bprime-entrance-mask-32, 32%),
        rgb(0 0 0 / 0.48) var(--desktop-bprime-entrance-mask-42, 42%),
        rgb(0 0 0 / 0.76) var(--desktop-bprime-entrance-mask-52, 52%),
        #000 var(--desktop-bprime-entrance-mask-62, 62%),
        #000 var(--desktop-bprime-entrance-mask-100, 100%)
      );
      --featured-field-bprime-exit-mask: linear-gradient(
        to bottom,
        #000 0%,
        #000 var(--desktop-bprime-exit-mask-full, calc(100% - var(--featured-field-bprime-release))),
        rgb(0 0 0 / 0.72) var(--desktop-bprime-exit-mask-72, calc(100% - clamp(17.6rem, 24vw, 25.6rem))),
        rgb(0 0 0 / 0.4) var(--desktop-bprime-exit-mask-40, calc(100% - clamp(12.1rem, 16.5vw, 17.6rem))),
        rgb(0 0 0 / 0.18) var(--desktop-bprime-exit-mask-18, calc(100% - clamp(7.7rem, 10.5vw, 11.2rem))),
        rgb(0 0 0 / 0.05) var(--desktop-bprime-exit-mask-05, calc(100% - clamp(3.96rem, 5.4vw, 5.76rem))),
        rgb(0 0 0 / 0.008) var(--desktop-bprime-exit-mask-008, calc(100% - clamp(1.32rem, 1.8vw, 1.92rem))),
        transparent var(--desktop-bprime-exit-mask-zero, 100%)
      );

      overflow: visible;
    }

    .featured-field-continuum {
      --featured-field-heroprime-size: 136.419%;
      --featured-field-heroprime-x: center;
      --featured-field-heroprime-y: top;
      --featured-field-heroprime-opacity: 0.42;
      --featured-field-heroprime-base-opacity: calc(var(--featured-field-heroprime-opacity) * (1 - var(--field-breath-depth)));
      --featured-field-heroprime-exchange-opacity: calc(var(--featured-field-heroprime-opacity) * var(--field-breath-depth) / (1 - var(--featured-field-heroprime-base-opacity)));
      --featured-field-heroprime-footer-extension: 12rem;
      --featured-field-heroprime-mask: linear-gradient(
        to bottom,
        transparent var(--desktop-heroprime-mask-0, 0%),
        transparent var(--desktop-heroprime-mask-52, 52%),
        rgb(0 0 0 / 0.005) var(--desktop-heroprime-mask-58, 58%),
        rgb(0 0 0 / 0.02) var(--desktop-heroprime-mask-64, 64%),
        rgb(0 0 0 / 0.07) var(--desktop-heroprime-mask-70, 70%),
        rgb(0 0 0 / 0.18) var(--desktop-heroprime-mask-76, 76%),
        rgb(0 0 0 / 0.38) var(--desktop-heroprime-mask-83, 83%),
        rgb(0 0 0 / 0.62) var(--desktop-heroprime-mask-90, 90%),
        rgb(0 0 0 / 0.78) var(--desktop-heroprime-mask-100, 100%)
      );

      overflow: visible;
    }

    .featured-field-stage > .section,
    .featured-field-continuum > .section {
      position: relative;
      z-index: 1;
    }

    .featured-field-continuum > .section--closing {
      background: transparent;
    }

    .featured-field-heroprime {
      display: block;
      position: absolute;
      z-index: 0;
      inset-block: 0 calc(-1 * var(--featured-field-heroprime-footer-extension));
      inset-inline: 0;
      -webkit-mask-image: var(--featured-field-heroprime-mask);
      mask-image: var(--featured-field-heroprime-mask);
      pointer-events: none;
    }

    .featured-field-heroprime__material {
      position: absolute;
      inline-size: var(--featured-field-heroprime-size);
      max-inline-size: none;
      block-size: auto;
      inset-block-end: 0;
      inset-inline-start: 50%;
      transform: translateX(-50%) scale(-1);
    }

    .featured-field-heroprime__material--base {
      opacity: var(--featured-field-heroprime-base-opacity);
    }

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

    .featured-field-heroprime__material--left {
      --featured-field-heroprime-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%);
    }

    .featured-field-heroprime__material--right {
      --featured-field-heroprime-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%);
    }

    .site-footer {
      position: relative;
      z-index: 1;
      background: transparent;
    }

    .featured-field-bprime {
      display: block;
      position: absolute;
      z-index: 0;
      inset-block: calc(-1 * var(--featured-field-bprime-runway)) calc(-1 * var(--featured-field-bprime-release));
      inset-inline: 0;
      -webkit-mask-image: var(--featured-field-bprime-exit-mask);
      mask-image: var(--featured-field-bprime-exit-mask);
      pointer-events: none;
    }

    .featured-field-bprime__content {
      position: absolute;
      inset: 0;
      -webkit-mask-image:
        var(--featured-field-bprime-mask),
        linear-gradient(#000, #000);
      -webkit-mask-position: top, bottom;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size:
        100% calc(100% - var(--featured-field-bprime-release)),
        100% var(--featured-field-bprime-release);
      -webkit-mask-composite: source-over;
      mask-image:
        var(--featured-field-bprime-mask),
        linear-gradient(#000, #000);
      mask-position: top, bottom;
      mask-repeat: no-repeat;
      mask-size:
        100% calc(100% - var(--featured-field-bprime-release)),
        100% var(--featured-field-bprime-release);
      mask-composite: add;
    }

    .featured-field-bprime__terminal {
      position: absolute;
      inset: 0;
      -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 calc(var(--desktop-bprime-raster-edge, var(--featured-field-bprime-raster-edge)) - var(--featured-field-bprime-terminal-fade)),
        transparent calc(var(--desktop-bprime-raster-edge, var(--featured-field-bprime-raster-edge)) - 2px),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 calc(var(--desktop-bprime-raster-edge, var(--featured-field-bprime-raster-edge)) - var(--featured-field-bprime-terminal-fade)),
        transparent calc(var(--desktop-bprime-raster-edge, var(--featured-field-bprime-raster-edge)) - 2px),
        transparent 100%
      );
    }

    .featured-field-bprime__material {
      position: absolute;
      inline-size: var(--featured-field-bprime-size);
      max-inline-size: none;
      block-size: auto;
      inset-block-start: var(--desktop-bprime-material-anchor, calc(var(--featured-field-bprime-y) - var(--featured-field-bprime-y-compensation)));
      inset-inline-start: 50%;
      transform: translate(-50%, -58%) scaleX(-1);
    }

    .featured-field-bprime__material--base {
      opacity: var(--featured-field-bprime-base-opacity);
    }

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

    .featured-field-bprime__material--left {
      --featured-field-bprime-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%);
    }

    .featured-field-bprime__material--right {
      --featured-field-bprime-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%);
    }

    .field-clones-promoted :is(
      .hero-field__material--left,
      .hero-field__material--right,
      .breakthrough-field-clone--left,
      .breakthrough-field-clone--right,
      .sanctuaries-field-a__material--warm,
      .sanctuaries-field-a__material--cool,
      .sanctuaries-field-b__material--warm,
      .sanctuaries-field-b__material--cool,
      .sanctuaries-field-c__material--cool,
      .sanctuaries-field-c__material--warm,
      .dream-field-aprime__material--left,
      .dream-field-aprime__material--right,
      .featured-field-bprime__material--left,
      .featured-field-bprime__material--right,
      .featured-field-heroprime__material--left,
      .featured-field-heroprime__material--right
    ) {
      will-change: opacity;
    }

    .product {
      max-inline-size: 53.4rem;
      grid-template-rows: 1fr auto auto 1fr;
      column-gap: 2rem;
      row-gap: 0;
      align-items: start;
    }

    #sanctuary-67,
    #bees-in-sound,
    #cedar-in-sound {
      padding-block-end: var(--space-sanctuary-products);
    }

    #bees-in-sound,
    #cedar-in-sound,
    #gold-in-sound {
      padding-block-start: var(--space-sanctuary-products);
    }

    #sanctuary-67 {
      padding-block-start: var(--space-sanctuary-sequence);
    }

    .product--media-first {
      grid-template-columns: minmax(0, 1.056fr) minmax(0, 1fr);
      grid-template-areas:
        "media ."
        "media title"
        "media copy"
        "media .";
    }

    .product--media-last {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.056fr);
      grid-template-areas:
        ". media"
        "title media"
        "copy media"
        ". media";
    }

    .product-title {
      position: static;
      grid-area: title;
      inline-size: 100%;
      max-inline-size: 25rem;
    }

    .product-media {
      grid-area: media;
    }

    .product-copy {
      grid-area: copy;
      inline-size: 100%;
      max-inline-size: 25rem;
    }

    .product--media-last .product-title,
    .product--media-last .product-copy {
      justify-self: end;
    }

    .featured-product {
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
      align-items: center;
    }

    .featured-identity {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
    }

    .featured-identity-text {
      gap: var(--space-2);
    }
  }

  @media (orientation: landscape) and (min-width: 40rem) {
    :root {
      --space-section: clamp(10rem, 10vw, 11rem);
      --space-sanctuary-products: max(
        5.0859375rem,
        calc(var(--space-sanctuary-sequence) * 0.625)
      );
    }
  }

  @media (orientation: landscape) and (min-width: 40rem) and (max-height: 47.99rem) {
    .section--hero {
      --hero-field-size: max(112.166%, 210svh);

      min-block-size: 100dvh;
      padding-block: calc(4.75rem + var(--space-5));
      grid-template-rows: auto;
      place-content: center;
    }
  }

  @media (orientation: portrait) and (min-width: 45rem) {
    :root {
      --gutter: clamp(3.75rem, 7.5vw, 5rem);
      --space-section: clamp(4.5rem, 9vw, 5rem);
      --space-sanctuary-products: 4.532rem;
      --step--1: 0.74rem;
      --step-status: 0.82rem;
      --step-0: 0.95rem;
      --step-1: 1.25rem;
      --step-2: 1.72rem;
      --step-3: 2.38rem;
    }

    .section--hero {
      --hero-field-size: max(118vw, 75svh);
      --hero-field-y: -14svh;

      min-block-size: 100dvh;
      grid-template-rows: 1fr;
      place-items: center;
    }

    .hero-field {
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 92%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 92%);
    }

    .hero-field__material {
      inline-size: var(--hero-field-size);
      inset-block-start: var(--hero-field-y);
      transform: translateX(-50%);
    }

    .section--hero .container {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: initial;
      inline-size: min(100% - (2 * var(--gutter)), 48rem);
    }

    .section--hero .hero-lockup {
      grid-row: 1;
      align-self: end;
      justify-self: center;
      inline-size: min(34rem, 65vw);
      margin-block-end: clamp(4rem, 8svh, 6.5rem);
    }

    .section--hero .hero-lockup + #hero-title {
      grid-row: 2;
      align-self: center;
      margin-block-start: 0;
    }

    .hero-title-tablet-break {
      display: inline;
    }

    .section--hero .action-list {
      grid-row: 3;
      align-self: start;
      margin-block-start: clamp(4rem, 9svh, 7.5rem);
    }

    .sanctuaries-field-a-region {
      --sanctuaries-field-a-size: 118vw;
      --sanctuaries-field-a-opacity: 0.648;
      --sanctuaries-field-a-mask: linear-gradient(
        to bottom,
        transparent var(--tablet-a-mask-pre),
        rgb(0 0 0 / 0.12) var(--tablet-a-mask-faint),
        rgb(0 0 0 / 0.3) var(--tablet-a-mask-18),
        rgb(0 0 0 / 0.6) var(--tablet-a-mask-45),
        rgb(0 0 0 / 0.85) var(--tablet-a-mask-75),
        #000 var(--tablet-a-mask-full),
        #000 var(--tablet-a-mask-hold),
        rgb(0 0 0 / 0.88) var(--tablet-a-mask-release-88),
        rgb(0 0 0 / 0.62) var(--tablet-a-mask-release-62),
        rgb(0 0 0 / 0.28) var(--tablet-a-mask-release-28),
        transparent var(--tablet-a-mask-release)
      );
    }

    #sanctuaries .container > p {
      max-inline-size: 39.375rem;
      margin-inline: auto;
    }

    .sanctuaries-field-a__material {
      inset-block-start: var(--tablet-a-material-anchor);
      transform: translateX(-50%);
    }

    .sanctuaries-field-continuum {
      --sanctuaries-field-b-size: 118vw;
      --sanctuaries-field-b-opacity: 0.38;
      --sanctuaries-field-b-mask: linear-gradient(
        to bottom,
        transparent var(--tablet-b-mask-0),
        rgb(0 0 0 / 0.08) var(--tablet-b-mask-12),
        rgb(0 0 0 / 0.38) var(--tablet-b-mask-38),
        rgb(0 0 0 / 0.72) var(--tablet-b-mask-72),
        #000 var(--tablet-b-mask-100),
        #000 var(--tablet-b-mask-hold),
        rgb(0 0 0 / 0.88) var(--tablet-b-mask-release-88),
        rgb(0 0 0 / 0.62) var(--tablet-b-mask-release-62),
        rgb(0 0 0 / 0.28) var(--tablet-b-mask-release-28),
        transparent var(--tablet-b-mask-release)
      );
      --sanctuaries-field-c-size: 121vw;
      --sanctuaries-field-c-opacity: 0.29;
      --sanctuaries-field-c-exit-mask: linear-gradient(
        to bottom,
        transparent var(--tablet-c-mask-0),
        rgb(0 0 0 / 0.12) var(--tablet-c-mask-12),
        rgb(0 0 0 / 0.38) var(--tablet-c-mask-38),
        rgb(0 0 0 / 0.72) var(--tablet-c-mask-72),
        #000 var(--tablet-c-mask-100),
        #000 var(--tablet-c-mask-hold),
        rgb(0 0 0 / 0.72) var(--tablet-c-mask-release-72),
        rgb(0 0 0 / 0.32) var(--tablet-c-mask-release-32),
        transparent var(--tablet-c-mask-release)
      );
    }

    .sanctuaries-field-b__material {
      inset-block-start: var(--tablet-b-material-anchor);
      transform: translateX(-50%);
    }

    .sanctuaries-field-c__content {
      -webkit-mask-image: none;
      mask-image: none;
    }

    .sanctuaries-field-c__material {
      inset-block-start: var(--tablet-c-material-anchor);
      transform: translateX(-50%);
    }

    .dream-field-continuum {
      --dream-field-aprime-size: 118vw;
      --dream-field-aprime-mask: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.005) var(--desktop-aprime-mask-0),
        rgb(0 0 0 / 0.012) var(--desktop-aprime-mask-12),
        rgb(0 0 0 / 0.03) var(--desktop-aprime-mask-24),
        rgb(0 0 0 / 0.08) var(--desktop-aprime-mask-34),
        rgb(0 0 0 / 0.2) var(--desktop-aprime-mask-44),
        rgb(0 0 0 / 0.42) var(--desktop-aprime-mask-52),
        rgb(0 0 0 / 0.7) var(--desktop-aprime-mask-59),
        #000 var(--desktop-aprime-mask-66),
        #000 var(--tablet-aprime-exit-start),
        rgb(0 0 0 / 0.88) var(--tablet-aprime-exit-88),
        rgb(0 0 0 / 0.62) var(--tablet-aprime-exit-62),
        rgb(0 0 0 / 0.28) var(--tablet-aprime-exit-28),
        transparent var(--tablet-aprime-exit-zero)
      );
    }

    .dream-field-aprime__material {
      inset-block-start: var(--tablet-aprime-material-anchor);
      transform: translateX(-50%) scaleX(-1);
    }

    .featured-field-stage {
      --featured-field-bprime-size: 118vw;
      --featured-field-bprime-opacity: 0.25;
      --featured-field-bprime-mask: linear-gradient(
        to bottom,
        transparent var(--tablet-bprime-entrance-0),
        rgb(0 0 0 / 0.12) var(--tablet-bprime-entrance-12),
        rgb(0 0 0 / 0.38) var(--tablet-bprime-entrance-38),
        rgb(0 0 0 / 0.72) var(--tablet-bprime-entrance-72),
        #000 var(--tablet-bprime-entrance-100),
        #000 100%
      );
      --featured-field-bprime-exit-mask: linear-gradient(
        to bottom,
        #000 0%,
        #000 var(--tablet-bprime-exit-start),
        rgb(0 0 0 / 0.88) var(--tablet-bprime-exit-88),
        rgb(0 0 0 / 0.62) var(--tablet-bprime-exit-62),
        rgb(0 0 0 / 0.28) var(--tablet-bprime-exit-28),
        transparent var(--tablet-bprime-exit-zero),
        transparent 100%
      );
    }

    .featured-field-bprime__material {
      inset-block-start: var(--tablet-bprime-material-anchor);
      transform: translateX(-50%) scaleX(-1);
    }

    .featured-product .phone-media {
      transform: translateY(var(--tablet-featured-phone-offset, 0px));
    }

    .featured-field-continuum {
      --featured-field-heroprime-size: 118vw;
      --featured-field-heroprime-mask: linear-gradient(
        to bottom,
        transparent 0%,
        transparent var(--tablet-heroprime-mask-0),
        rgb(0 0 0 / 0.12) var(--tablet-heroprime-mask-12),
        rgb(0 0 0 / 0.38) var(--tablet-heroprime-mask-38),
        rgb(0 0 0 / 0.72) var(--tablet-heroprime-mask-72),
        #000 var(--tablet-heroprime-mask-100),
        #000 100%
      );
    }

    .featured-field-heroprime__material {
      inset-block-end: -9.5rem;
    }

  }

}

@layer components {
  .brand-mark {
    inline-size: min(25rem, 76vw);
    margin-inline: auto;
  }

  .hero-lockup {
    inline-size: min(25rem, 76vw);
    margin-inline: auto;
  }

  .hero-subtitle {
    font-size: var(--step-1);
  }

  .action-list,
  .utility-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
  }

  .action-list a,
  .text-link,
  .utility-link {
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
  }

  .utility-link {
    text-decoration: none;
  }

  .action-list a,
  .text-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 calc(50% + 0.55em + 2px);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    text-decoration: none;
    text-transform: uppercase;
  }

  .text-link--domain {
    text-transform: none;
  }

  .text-link {
    inline-size: fit-content;
  }

  .link-arrow {
    padding-inline-start: 0.35em;
  }

  @media (orientation: portrait) and (max-width: 44.99rem),
    (orientation: landscape) and (max-width: 39.99rem) {
    .action-list a,
    .text-link {
      font-size: clamp(0.65rem, 0.64rem + 0.09vw, 0.72rem);
    }
  }

  @media (orientation: portrait) and (min-width: 45rem) {
    .section--hero .action-list a {
      font-size: clamp(0.78rem, 0.75rem + 0.12vw, 0.86rem);
    }
  }

  .centered .text-link {
    margin-inline: auto;
  }

  .portal-mark {
    inline-size: min(10rem, 42vw);
  }

  .product-media img {
    border-radius: 0.875rem;
  }

  .status,
  .eyebrow {
    color: var(--color-ink-soft);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
  }

  .status {
    font-size: var(--step-status);
  }

  .eyebrow {
    font-size: var(--step--1);
    text-transform: uppercase;
  }

  .section--dream-chord .eyebrow {
    margin-block-start: 1.25rem;
    font-size: var(--step-0);
    font-weight: 350;
    letter-spacing: 0.1em;
  }

  .section--dream-chord .dream-chord-copy {
    margin-block-start: var(--space-5);
  }

  .chromaphi-lockup {
    inline-size: min(20rem, 72vw);
  }

  .infographic,
  .infographic picture,
  .infographic img {
    inline-size: 100%;
  }

  .bridge-copy,
  blockquote {
    font-size: var(--step-1);
    font-weight: 350;
  }

  .bridge-copy {
    font-size: var(--step-0);
    font-style: normal;
    font-weight: 300;
  }

  @media (orientation: portrait) and (max-width: 44.99rem),
    (orientation: landscape) and (max-width: 39.99rem) {
    .section--chromaphi .bridge-copy {
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
    }
  }

  .section--chromaphi .bridge-copy + .text-link {
    margin-block-start: var(--space-4);
  }

  .dream-chord-entry {
    text-decoration: none;
    display: inline-flex;
    min-block-size: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.5rem;
    border: 1px solid var(--color-ink);
    border-radius: 0.75rem;
    background: var(--color-ink);
    color: var(--color-ivory);
    cursor: pointer;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    line-height: 1;
    transition:
      color 250ms ease,
      opacity 100ms ease;
    user-select: none;
  }

  .dream-chord-entry:hover {
    color: var(--color-amber);
  }

  .dream-chord-entry:active {
    color: var(--color-amber);
    opacity: 0.88;
  }

  .dream-chord-entry:focus-visible {
    color: var(--color-amber);
    outline: 0.16rem solid var(--color-focus);
    outline-offset: 0.28rem;
  }

  .section--dream-chord .dream-chord-entry {
    margin-block-start: 3.75rem;
  }

  blockquote {
    font-style: italic;
    font-weight: 300;
  }

  .testimonial-mobile-break {
    display: none;
  }

  @media (orientation: portrait) and (max-width: 44.99rem),
    (orientation: landscape) and (max-width: 39.99rem) {
    .dream-chord-viewport .dream-chord-entry {
      margin-block-start: 0;
    }

    .dream-chord-viewport .section--testimonial blockquote {
      font-size: calc(var(--step-1) * 0.8184);
    }

    .testimonial-mobile-break {
      display: initial;
    }
  }

  .app-icon {
    inline-size: min(9rem, 36vw);
  }

  .price {
    font-size: var(--step-1);
    font-weight: 500;
  }

  .footer-mark-link {
    display: block;
    inline-size: fit-content;
    margin-inline: auto;
  }

  .launch-link--withheld {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
  }

  .footer-mark {
    inline-size: min(12rem, 56vw);
    margin-inline: auto;
  }

  .continuation-link {
    position: absolute;
    z-index: 2;
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    inset-inline-start: 50%;
    display: grid;
    inline-size: 3rem;
    block-size: 3rem;
    place-items: center;
    color: var(--color-ink-soft);
    translate: -50% 0;
  }

  .continuation-link--light {
    color: #f8edd2;
  }

  .threshold-label {
    position: absolute;
    z-index: 2;
    inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 3.75rem);
    inset-inline-start: 50%;
    max-inline-size: calc(100% - 2rem);
    color: var(--color-ink-soft);
    font-size: clamp(0.68rem, 0.62rem + 0.25vw, 0.86rem);
    font-weight: 300;
    letter-spacing: clamp(0.12em, 0.1em + 0.18vw, 0.18em);
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    translate: -50% 0;
  }

  .threshold-label--light {
    color: #f8edd2;
  }

  .continuation-link svg {
    inline-size: 2.25rem;
    block-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.25;
  }

  .skip-link {
    position: fixed;
    z-index: 10;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    padding: var(--space-2) var(--space-3);
    translate: 0 -200%;
    background: var(--color-ink);
    color: var(--color-ivory);
  }

  .skip-link:focus {
    translate: 0;
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}