html[data-prototype-focus="hero-study-20"] [data-checkpoint="20"] {
  --landing-copy-opacity: 0;
  --landing-scroll-opacity: 1;
  --landing-flow-switcher-opacity: 1;
  --landing-surface-opacity: 0;
  --landing-surface-y: 42px;
  --landing-plating-copy-opacity: 1;
  --landing-plating-copy-y: 0px;
  --landing-title-particles-opacity: 0;
  --landing-product-morph-opacity: 0;
  --landing-webgl-opacity: 1;
  --landing-webgl-blur: 0px;
  --landing-product-photo-opacity: 0;
  --landing-product-photo-scale: 1.035;
  --landing-product-photo-blur: 9px;
  --landing-transition-flare-opacity: 0;
  --landing-rotation-opacity: 1;
  --landing-dark-scene-opacity: 0;
  --landing-shore-opacity: 1;
  --landing-title-copy-opacity: 0;
  --hs-ambient-opacity: 1 !important;
  --hs-ambient-y: 0 !important;
  --hs-ambient-scale: 1 !important;
  height: 370vh;
  height: 370svh;
  background: #101214;
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-products {
  display: none;
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-copy {
  opacity: 1 !important;
  transform: none !important;
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-kicker,
html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-statement {
  opacity: var(--landing-copy-opacity);
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-title {
  opacity: var(--landing-title-copy-opacity);
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-kicker,
html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-statement,
html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-scroll {
  color: #f3f5f4;
  text-shadow: 0 0.12rem 1.2rem rgb(0 0 0 / 58%);
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-statement {
  width: min(90vw, 52rem);
  line-height: 1.12;
  white-space: normal;
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-scroll i {
  background: linear-gradient(#f3f5f4, transparent);
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-scroll {
  opacity: var(--landing-scroll-opacity) !important;
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-switcher {
  opacity: var(--landing-flow-switcher-opacity);
  transition: opacity 180ms linear;
}

.landing-prism-field,
.landing-prism-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.landing-shore-intro {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  background: #101316;
  opacity: var(--landing-shore-opacity);
  pointer-events: none;
  will-change: opacity;
}

.landing-shore-intro__fallback,
.landing-shore-intro__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.landing-shore-intro__fallback {
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(0.84) saturate(0.74) contrast(1.06);
}

.landing-shore-intro__canvas {
  z-index: 1;
  opacity: 0;
  transition: opacity 240ms ease;
}

[data-checkpoint="20"][data-shore-scene-ready="true"]
  .landing-shore-intro__canvas {
  opacity: 1;
}

.landing-shore-intro::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(2 4 5 / 38%) 0%, transparent 20%, transparent 78%, rgb(2 4 5 / 20%) 100%),
    radial-gradient(ellipse 82% 74% at 56% 51%, transparent 0 44%, rgb(3 5 6 / 12%) 72%, rgb(3 5 6 / 48%) 100%);
  content: "";
}

.landing-prism-field {
  z-index: 1;
  display: block;
  opacity: 0;
  transition: opacity 420ms ease;
}

[data-checkpoint="20"][data-prism-field-ready="true"]
  .landing-prism-field {
  opacity: 1;
}

.landing-prism-grid {
  z-index: 2;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 15%) 1px, transparent 1px) 4vw 0 /
      calc((100vw - 8vw) / 12) 100%;
  opacity: var(--landing-prism-grid-opacity, 0);
}

.landing-product-morph {
  position: absolute;
  z-index: 5;
  inset: 0;
  opacity: var(--landing-product-morph-opacity);
  background: rgb(20 21 23 / var(--landing-dark-scene-opacity));
  pointer-events: none;
}

.landing-product-morph canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: pan-y;
  opacity: var(--landing-webgl-opacity);
  filter: blur(var(--landing-webgl-blur));
  transition: opacity 80ms linear;
}

.landing-product-morph::after {
  position: absolute;
  z-index: 3;
  top: 49%;
  left: 50%;
  width: min(50vw, 1250px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 58% 37% at 50% 51%,
    rgb(255 255 255 / 90%) 0%,
    rgb(255 255 255 / 54%) 38%,
    transparent 76%
  );
  opacity: var(--landing-transition-flare-opacity);
  transform: translate3d(-50%, -50%, 0);
  content: "";
  pointer-events: none;
}

.landing-product-morph[data-rotatable="true"] canvas {
  pointer-events: auto;
}

.landing-product-morph[data-dragging="true"] canvas {
  cursor: grabbing !important;
}

.landing-product-morph canvas:focus-visible {
  outline: none;
}

.landing-product-morph canvas:focus-visible + .landing-product-rotation-hint {
  outline: 2px solid rgb(242 245 243 / 58%);
  outline-offset: 0.38rem;
}

.landing-product-rotation-hint {
  position: absolute;
  top: 73%;
  left: 50%;
  margin: 0;
  opacity: calc(
    var(--landing-surface-opacity) * var(--landing-rotation-opacity) * 0.46
  );
  transform: translateX(-50%);
  color: rgb(225 233 230 / 66%);
  font-size: clamp(0.5rem, 0.48vw, 0.62rem);
  font-weight: 720;
  letter-spacing: 0.2em;
  pointer-events: none;
}

.landing-product-photo {
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 50%;
  width: min(62vw, 1125px);
  aspect-ratio: 1;
  margin: 0;
  opacity: var(--landing-product-photo-opacity);
  filter: blur(var(--landing-product-photo-blur));
  transform: translate3d(-50%, -50%, 0)
    scale(var(--landing-product-photo-scale));
  pointer-events: none;
  will-change: opacity, transform;
  -webkit-mask-image: radial-gradient(
    ellipse 69% 54% at 50% 51%,
    #000 0%,
    #000 70%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 69% 54% at 50% 51%,
    #000 0%,
    #000 70%,
    transparent 100%
  );
}

.landing-product-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-surface-story {
  position: absolute;
  z-index: 6;
  display: grid;
  top: 50%;
  left: 50%;
  width: min(86vw, 70rem);
  opacity: var(--landing-surface-opacity);
  transform: translate3d(-50%, calc(-50% + var(--landing-surface-y)), 0);
  color: #edf1ef;
  text-align: center;
  pointer-events: none;
  will-change: opacity, transform;
}

.landing-surface-panel {
  grid-area: 1 / 1;
  align-self: start;
  will-change: opacity, transform;
}

.landing-surface-panel--plating {
  opacity: var(--landing-plating-copy-opacity);
  transform: translate3d(0, var(--landing-plating-copy-y), 0);
}

.landing-surface-kicker,
.landing-surface-source {
  margin: 0;
  font-size: clamp(0.58rem, 0.64vw, 0.72rem);
  font-weight: 720;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.landing-surface-story h2 {
  margin: clamp(0.9rem, 1.5vw, 1.4rem) 0 0;
  font-size: clamp(2rem, 2.65vw, 3.2rem);
  font-weight: 690;
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.landing-surface-evidence {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.85rem, 1.45vw, 1.5rem);
  margin: clamp(1.65rem, 2.9vw, 3rem) 0 0;
  padding-top: clamp(0.95rem, 1.45vw, 1.35rem);
  border-top: 1px solid rgb(237 241 239 / 22%);
  justify-content: center;
}

.landing-surface-evidence strong {
  font-size: clamp(1.5rem, 2.35vw, 2.75rem);
  font-weight: 620;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.landing-surface-evidence span {
  max-width: 15rem;
  font-size: clamp(0.78rem, 0.86vw, 0.98rem);
  font-weight: 520;
  line-height: 1.45;
}

.landing-surface-evidence b {
  font-weight: 760;
}

.landing-surface-description {
  max-width: 31rem;
  margin: clamp(1.25rem, 2vw, 2rem) 0 0;
  font-size: clamp(0.88rem, 0.95vw, 1.05rem);
  font-weight: 430;
  line-height: 1.75;
  word-break: keep-all;
  margin-inline: auto;
}

.landing-surface-source {
  margin-top: clamp(1rem, 1.5vw, 1.35rem);
  color: rgb(237 241 239 / 52%);
  font-size: clamp(0.5rem, 0.52vw, 0.6rem);
  letter-spacing: 0.12em;
}

.landing-surface-proof {
  position: relative;
  z-index: 3;
  overflow: clip;
  background: #141517;
  color: #edf1ef;
}

.landing-coating-kicker {
  margin: 0;
  color: rgb(237 241 239 / 58%);
  font-size: clamp(0.58rem, 0.64vw, 0.72rem);
  font-weight: 720;
  line-height: 1.4;
  letter-spacing: 0.22em;
}

.landing-coating-story h2 {
  max-width: 58rem;
  margin: clamp(0.9rem, 1.5vw, 1.4rem) 0 0;
  font-size: clamp(2.5rem, 4.7vw, 5.8rem);
  font-weight: 660;
  line-height: 1.02;
  letter-spacing: -0.065em;
  word-break: keep-all;
}

.landing-plating-strip {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.landing-plating-strip figure {
  position: relative;
  height: min(64svh, 41.6667vw);
  min-height: 28rem;
  margin: 0;
  overflow: hidden;
  background: #272a2a;
}

.landing-plating-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}

.landing-plating-strip figure:nth-child(1) img {
  object-position: 48% 50%;
}

.landing-plating-strip figure:nth-child(2) img {
  object-position: 54% 50%;
}

.landing-plating-strip figure:nth-child(3) img {
  object-position: 48% 50%;
}

.landing-plating-strip figcaption {
  position: absolute;
  right: clamp(1rem, 1.6vw, 1.7rem);
  bottom: clamp(1rem, 1.6vw, 1.7rem);
  left: clamp(1rem, 1.6vw, 1.7rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: clamp(0.58rem, 0.66vw, 0.74rem);
  font-weight: 690;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 10px rgb(0 0 0 / 42%);
}

.landing-plating-strip figcaption span {
  color: rgb(255 255 255 / 66%);
}

.landing-plating-strip figcaption strong {
  font-weight: inherit;
}

.landing-coating-story {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  column-gap: clamp(3rem, 8vw, 10rem);
  align-items: end;
  padding: clamp(8rem, 18vh, 13rem) 4vw clamp(4rem, 9vh, 7rem);
}

.landing-coating-story .landing-coating-kicker,
.landing-coating-story h2 {
  grid-column: 1;
}

.landing-coating-copy {
  grid-row: 1 / span 2;
  grid-column: 2;
  max-width: 31rem;
  padding-top: clamp(1rem, 2vw, 2rem);
  border-top: 1px solid rgb(237 241 239 / 22%);
}

.landing-coating-copy p {
  margin: 0;
  color: rgb(237 241 239 / 68%);
  font-size: clamp(0.88rem, 0.96vw, 1.08rem);
  font-weight: 430;
  line-height: 1.76;
  word-break: keep-all;
}

.landing-coating-copy p + p {
  margin-top: 1.1rem;
}

.landing-coating-compare {
  width: 92vw;
  margin-inline: auto;
  padding-bottom: clamp(8rem, 18vh, 14rem);
}

.landing-coating-compare-frame {
  --coating-compare-position: 50%;
  position: relative;
  height: min(79svh, 51.75vw);
  min-height: 34rem;
  overflow: hidden;
  background: #d9dcda;
}

.landing-coating-compare-frame > img,
.landing-coating-after,
.landing-coating-after img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-coating-after {
  clip-path: inset(0 0 0 var(--coating-compare-position));
}

.landing-coating-label {
  position: absolute;
  z-index: 3;
  top: clamp(1rem, 2vw, 2rem);
  padding: 0.52rem 0.68rem;
  background: rgb(20 21 23 / 74%);
  color: #fff;
  font-size: clamp(0.56rem, 0.62vw, 0.7rem);
  font-weight: 720;
  letter-spacing: 0.13em;
  backdrop-filter: blur(10px);
}

.landing-coating-label--before {
  left: clamp(1rem, 2vw, 2rem);
}

.landing-coating-label--after {
  right: clamp(1rem, 2vw, 2rem);
}

.landing-coating-divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--coating-compare-position);
  width: 1px;
  background: rgb(255 255 255 / 82%);
  pointer-events: none;
}

.landing-coating-divider i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid rgb(255 255 255 / 74%);
  border-radius: 50%;
  background: rgb(20 21 23 / 66%);
  box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(10px);
}

.landing-coating-divider i::before,
.landing-coating-divider i::after {
  position: absolute;
  top: 50%;
  width: 0.36rem;
  height: 0.36rem;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  content: "";
}

.landing-coating-divider i::before {
  left: 0.66rem;
  transform: translateY(-50%) rotate(45deg);
}

.landing-coating-divider i::after {
  right: 0.66rem;
  transform: translateY(-50%) rotate(225deg);
}

.landing-coating-placeholder {
  position: absolute;
  z-index: 3;
  right: 50%;
  bottom: clamp(1rem, 2vw, 2rem);
  margin: 0;
  color: rgb(20 21 23 / 58%);
  font-size: clamp(0.56rem, 0.62vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  transform: translateX(50%);
  white-space: nowrap;
}

.landing-coating-control {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 1rem;
  color: rgb(237 241 239 / 58%);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.landing-coating-control input {
  width: min(24rem, 40vw);
  accent-color: #dce4e1;
}

[data-surface-reveal] {
  opacity: 0;
  transform: translate3d(0, 3rem, 0);
  transition:
    opacity 560ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-surface-reveal][data-surface-visible="true"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.landing-product-morph-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html[data-prototype-focus="hero-study-20"]
  .landing-view
  > .landing-surface-proof,
html[data-prototype-focus="hero-study-20"]
  .landing-view
  > .landing-capability-gallery {
  display: block;
}

.landing-capability-gallery {
  --gallery-ink: #151616;
  --gallery-muted: rgb(21 22 22 / 58%);
  position: relative;
  z-index: 2;
  overflow: clip;
  background: #dedfdb;
  color: var(--gallery-ink);
}

.landing-gallery-stream {
  position: relative;
  padding: 12vh 0 22vh;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 15%) 1px, transparent 1px) 4vw 0 /
      calc((100vw - 8vw) / 12) 100%,
    #dedfdb;
}

.landing-gallery-stream figure {
  margin: 0;
  overflow: hidden;
  background: #c9cbc7;
}

.landing-gallery-stream figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--gallery-media-y, 0), 0) scale(1.055);
  will-change: transform;
}

.landing-gallery-spread {
  width: 92vw;
  margin-inline: auto;
}

.landing-gallery-spread--pair {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.88fr);
  gap: 1.2vw;
  align-items: start;
  padding-bottom: 18vh;
}

.landing-gallery-spread--pair figure:first-child {
  height: 83vh;
  height: 83svh;
}

.landing-gallery-spread--pair figure:last-child {
  height: 64vh;
  height: 64svh;
  margin-top: 19vh;
}

.landing-gallery-spread--wide {
  padding: 8vh 0 20vh;
}

.landing-gallery-spread--wide figure {
  height: 90vh;
  height: 90svh;
}

.landing-gallery-spread--wide img {
  object-position: 50% 56%;
}

.landing-gallery-spread--offset {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.9fr);
  gap: 1.2vw;
  align-items: end;
  padding: 10vh 0 23vh;
}

.landing-gallery-spread--offset figure:first-child {
  height: 72vh;
  height: 72svh;
}

.landing-gallery-spread--offset figure:last-child {
  height: 54vh;
  height: 54svh;
  margin-bottom: -8vh;
}

.landing-gallery-run {
  display: grid;
  width: 92vw;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 1.2vw;
  align-items: start;
  margin-inline: auto;
  padding: 5vh 0 21vh;
}

.landing-gallery-run figure:first-child {
  height: 82vh;
  height: 82svh;
}

.landing-gallery-run figure:nth-child(2) {
  height: 57vh;
  height: 57svh;
  margin-top: 25vh;
}

.landing-gallery-run figure:nth-child(3) {
  height: 70vh;
  height: 70svh;
  margin-top: 8vh;
}

.landing-gallery-run--reverse {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr) minmax(0, 0.94fr);
}

.landing-gallery-run--reverse figure:first-child {
  height: 66vh;
  height: 66svh;
  margin-top: 15vh;
}

.landing-gallery-run--reverse figure:nth-child(2) {
  height: 82vh;
  height: 82svh;
  margin-top: 0;
}

.landing-gallery-run--reverse figure:nth-child(3) {
  height: 60vh;
  height: 60svh;
  margin-top: 22vh;
}

.landing-gallery-run--closing {
  padding-top: 12vh;
  padding-bottom: 2vh;
}

.landing-gallery-story {
  display: grid;
  min-height: 150vh;
  min-height: 150svh;
  grid-template-columns: minmax(15rem, 26vw) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 7rem);
  align-items: start;
  padding: 10vh 4vw 20vh;
}

.landing-gallery-story--copy-right {
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 26vw);
}

.landing-gallery-copy {
  position: sticky;
  top: 32vh;
  align-self: start;
  max-width: 31rem;
}

.landing-gallery-copy > * {
  opacity: 0;
  transform: translate3d(0, 3rem, 0);
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-gallery-story[data-gallery-visible="true"] .landing-gallery-copy > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.landing-gallery-story[data-gallery-visible="true"]
  .landing-gallery-copy
  > :nth-child(2) {
  transition-delay: 90ms;
}

.landing-gallery-story[data-gallery-visible="true"]
  .landing-gallery-copy
  > :nth-child(3) {
  transition-delay: 170ms;
}

.landing-gallery-copy > p:first-child {
  margin: 0;
  font-size: clamp(0.6rem, 0.66vw, 0.74rem);
  font-weight: 740;
  letter-spacing: 0.2em;
}

.landing-gallery-copy h2 {
  margin: clamp(1.1rem, 1.8vw, 1.8rem) 0 0;
  font-size: clamp(2.35rem, 3.5vw, 4.6rem);
  font-weight: 680;
  line-height: 1.04;
  letter-spacing: -0.065em;
  word-break: keep-all;
}

.landing-gallery-description {
  max-width: 27rem;
  margin: clamp(1.5rem, 2.4vw, 2.5rem) 0 0;
  padding-top: clamp(1rem, 1.5vw, 1.5rem);
  border-top: 1px solid rgb(21 22 22 / 19%);
  color: var(--gallery-muted);
  font-size: clamp(0.88rem, 0.92vw, 1.04rem);
  font-weight: 460;
  line-height: 1.72;
  word-break: keep-all;
}

.landing-gallery-story-media {
  position: sticky;
  top: 10vh;
  height: 80vh;
  height: 80svh;
}

.landing-gallery-story--copy-right .landing-gallery-story-media img {
  object-position: 50% 50%;
}

.landing-gallery-story-media--pair {
  display: grid;
  overflow: visible !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 1.2vw;
  background: transparent !important;
}

.landing-gallery-story-media--pair figure {
  min-width: 0;
}

.landing-gallery-story-media--pair figure:last-child {
  height: 68%;
  align-self: end;
}

[data-gallery-reveal] figure,
.landing-gallery-story-media {
  clip-path: inset(7% 0 0 0);
  opacity: 0;
  transform: translate3d(0, 5vh, 0);
  transition:
    clip-path 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 520ms ease,
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-gallery-reveal][data-gallery-visible="true"] figure,
.landing-gallery-story[data-gallery-visible="true"] .landing-gallery-story-media {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-gallery-reveal][data-gallery-visible="true"] figure:nth-child(2) {
  transition-delay: 110ms;
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"][data-product-morph-ready="true"]
  .hero-study-title-canvas {
  opacity: var(--landing-title-particles-opacity);
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-title-canvas {
  filter: none;
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  [data-hero-study-stage][data-landing-particle-intro="ready"]
  .hero-study-title-canvas {
  animation: landing-particle-title-intro 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (min-width: 48.01rem) {
  html[data-prototype-focus="hero-study-20"]
    [data-checkpoint="20"]
    .hero-study-title-canvas {
    inset: 24% auto auto 2%;
    width: 96%;
    height: 50%;
  }
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .background-directions-color {
  background-position: center;
  animation: none;
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"]
  .hero-study-opal {
  animation: none;
}

@keyframes landing-particle-title-intro {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }

  to {
    opacity: var(--landing-title-particles-opacity);
    transform: translate3d(0, 0, 0);
  }
}

html[data-prototype-focus="hero-study-20"]
  [data-checkpoint="20"][data-product-morph-ready="true"]
  .hero-study-title {
  opacity: 0 !important;
}

@media (max-width: 48rem) {
  html[data-prototype-focus="hero-study-20"] [data-checkpoint="20"] {
    height: 350vh;
    height: 350svh;
  }

  .landing-shore-intro__fallback {
    object-position: 68% 50%;
  }

  .landing-shore-intro::after {
    background:
      linear-gradient(180deg, rgb(2 4 5 / 44%) 0%, transparent 22%, transparent 78%, rgb(2 4 5 / 24%) 100%),
      radial-gradient(ellipse 92% 76% at 55% 50%, transparent 0 45%, rgb(3 5 6 / 10%) 72%, rgb(3 5 6 / 44%) 100%);
  }

  html[data-prototype-focus="hero-study-20"]
    [data-checkpoint="20"]
    .hero-study-kicker {
    top: 20vh;
    width: calc(100vw - 3rem);
    text-align: center;
  }

  html[data-prototype-focus="hero-study-20"]
    [data-checkpoint="20"]
    .hero-study-statement {
    top: 67%;
    width: calc(100vw - 2.5rem);
    font-size: clamp(1.34rem, 6.8vw, 1.85rem);
    line-height: 1.18;
  }

  .landing-surface-story {
    top: 53%;
    right: auto;
    left: 50%;
    width: calc(100vw - 2.7rem);
  }

  .landing-prism-grid {
    background:
      linear-gradient(90deg, rgb(255 255 255 / 17%) 1px, transparent 1px) 1.15rem 0 /
        calc((100vw - 2.3rem) / 4) 100%;
  }

  .landing-product-rotation-hint {
    top: 49%;
    left: 50%;
    font-size: 0.48rem;
  }

  .landing-product-photo {
    top: 37%;
    left: 50%;
    width: 87vw;
  }

  .landing-product-morph::after {
    top: 37%;
    left: 50%;
    width: 96vw;
  }

  .landing-surface-story h2 {
    margin-top: 0.75rem;
    font-size: clamp(1.68rem, 7.2vw, 1.9rem);
    line-height: 1.14;
  }

  .landing-surface-story h2 br {
    display: none;
  }

  .landing-surface-evidence {
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 0.85rem;
  }

  .landing-surface-evidence strong {
    font-size: 1.5rem;
  }

  .landing-surface-evidence span {
    max-width: 13rem;
    font-size: 0.73rem;
  }

  .landing-surface-description {
    max-width: 21rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    line-height: 1.62;
  }

  .landing-surface-source {
    margin-top: 0.85rem;
    font-size: 0.48rem;
  }

  .landing-coating-story h2 {
    margin-top: 0.8rem;
    font-size: clamp(2.1rem, 10.2vw, 3rem);
    line-height: 1.03;
  }

  .landing-plating-strip {
    grid-template-columns: 1fr;
  }

  .landing-plating-strip figure {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .landing-plating-strip figcaption {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    font-size: 0.58rem;
  }

  .landing-coating-story {
    display: block;
    padding: 7.5rem 1.35rem 3.5rem;
  }

  .landing-coating-copy {
    max-width: 24rem;
    margin-top: 2.4rem;
    padding-top: 1rem;
  }

  .landing-coating-copy p {
    font-size: 0.84rem;
    line-height: 1.7;
  }

  .landing-coating-compare {
    width: 100%;
    padding-bottom: 8rem;
  }

  .landing-coating-compare-frame {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .landing-coating-compare-frame > img,
  .landing-coating-after img {
    object-position: 50% 50%;
  }

  .landing-coating-label {
    top: 0.9rem;
    font-size: 0.55rem;
  }

  .landing-coating-label--before {
    left: 0.9rem;
  }

  .landing-coating-label--after {
    right: 0.9rem;
  }

  .landing-coating-placeholder {
    bottom: 1rem;
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  .landing-coating-control {
    justify-content: space-between;
    padding: 0.9rem 1.15rem 0;
    font-size: 0.56rem;
  }

  .landing-coating-control input {
    width: min(58vw, 16rem);
  }

  .landing-gallery-stream {
    padding-block: 8vh 14vh;
    background:
      linear-gradient(90deg, rgb(255 255 255 / 17%) 1px, transparent 1px) 1.15rem 0 /
        calc((100vw - 2.3rem) / 4) 100%,
      #dedfdb;
  }

  .landing-gallery-spread {
    width: calc(100vw - 2.3rem);
  }

  .landing-gallery-spread--pair {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding-bottom: 12vh;
  }

  .landing-gallery-spread--pair figure:first-child {
    height: 61vh;
    height: 61svh;
  }

  .landing-gallery-spread--pair figure:last-child {
    width: 72%;
    height: 44vh;
    height: 44svh;
    margin-top: 0;
    margin-left: auto;
  }

  .landing-gallery-spread--wide {
    padding: 2vh 0 14vh;
  }

  .landing-gallery-spread--wide figure {
    height: 68vh;
    height: 68svh;
  }

  .landing-gallery-spread--offset {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 4vh 0 14vh;
  }

  .landing-gallery-spread--offset figure:first-child {
    height: 58vh;
    height: 58svh;
  }

  .landing-gallery-spread--offset figure:last-child {
    width: 76%;
    height: 42vh;
    height: 42svh;
    margin: 0 0 0 auto;
  }

  .landing-gallery-run,
  .landing-gallery-run--reverse {
    display: flex;
    width: calc(100vw - 2.3rem);
    flex-direction: column;
    gap: 0.7rem;
    padding: 2vh 0 14vh;
  }

  .landing-gallery-run figure:first-child,
  .landing-gallery-run--reverse figure:first-child {
    width: 100%;
    height: 61vh;
    height: 61svh;
    margin: 0;
  }

  .landing-gallery-run figure:nth-child(2),
  .landing-gallery-run--reverse figure:nth-child(2) {
    width: 72%;
    height: 44vh;
    height: 44svh;
    margin: 0 0 0 auto;
  }

  .landing-gallery-run figure:nth-child(3),
  .landing-gallery-run--reverse figure:nth-child(3) {
    width: 88%;
    height: 54vh;
    height: 54svh;
    margin: 0;
  }

  .landing-gallery-run--closing {
    padding-top: 7vh;
    padding-bottom: 0;
  }

  .landing-gallery-story,
  .landing-gallery-story--copy-right {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 2.25rem;
    padding: 9vh 1.15rem 16vh;
  }

  .landing-gallery-story--copy-right .landing-gallery-copy {
    order: -1;
  }

  .landing-gallery-copy {
    position: relative;
    top: auto;
    max-width: 22rem;
    padding-inline: 0.2rem;
  }

  .landing-gallery-copy h2 {
    margin-top: 0.9rem;
    font-size: clamp(2.15rem, 10.5vw, 3rem);
    line-height: 1.02;
  }

  .landing-gallery-description {
    margin-top: 1.35rem;
    font-size: 0.84rem;
    line-height: 1.68;
  }

  .landing-gallery-story-media {
    position: relative;
    top: auto;
    height: 68vh;
    height: 68svh;
  }

  .landing-gallery-story-media--pair {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 0.7rem;
  }

  .landing-gallery-story-media--pair figure:last-child {
    height: 72%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-shore-intro__canvas {
    transition: none;
  }

  .landing-product-morph {
    transition: none;
  }

  .landing-product-morph canvas {
    transition: none;
  }

  .landing-gallery-copy > *,
  [data-gallery-reveal] figure,
  .landing-gallery-story-media,
  [data-surface-reveal] {
    transition: none;
  }

  [data-surface-reveal] {
    opacity: 1;
    transform: none;
  }

  .landing-gallery-stream figure img {
    transform: none;
  }
}