html:has(.hero-scroll) {
  scroll-behavior: auto;
}

.hero-scroll {
  --reveal: 0;
  position: relative;
  height: 220vh;
  height: 220svh;
  background: #f7f9f5;
}

.hero-scroll .hero {
  position: sticky;
  top: 0;
  display: block;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  max-width: none;
  padding: clamp(85px, 9vh, 140px) 24px 0;
  overflow: clip;
  isolation: isolate;
}

.hero-scroll .hero-copy {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  transform: translateY(calc(var(--reveal) * -170px));
  opacity: clamp(0, calc(1 - var(--reveal) * 1.75), 1);
  will-change: transform, opacity;
}

.hero-scroll .eyebrow {
  justify-content: center;
  margin-bottom: 22px;
}

.hero-scroll .hero h1 {
  font-size: clamp(2.8rem, 4.65vw, 4.8rem);
  line-height: 1.17;
  margin-bottom: 22px;
}

.hero-scroll .hero h1 em {
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #9dbf95;
  text-decoration-thickness: .08em;
  text-underline-offset: .1em;
}

.hero-scroll .intro {
  max-width: 630px;
  margin: 0 auto 25px;
  font-size: 1rem;
  line-height: 1.75;
}

.hero-scroll .hero-actions {
  justify-content: center;
}

.hero-scroll .hero-note {
  max-width: none;
  margin-top: 17px;
}

.device-scene {
  position: absolute;
  inset: 94px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3.5svh, 48px);
  pointer-events: none;
}

.tablet-heading {
  position: relative;
  width: calc(100% - 48px);
  flex-shrink: 0;
  z-index: 1;
  text-align: center;
  opacity: clamp(0, calc((var(--reveal) - .52) * 3), 1);
  transform: translateY(calc((1 - var(--reveal)) * 30px));
  pointer-events: none;
}

.tablet-heading h2 {
  font-size: clamp(1.65rem, 3vw, 2.6rem);
  margin-bottom: 12px;
}

.tablet-heading p {
  color: var(--muted);
  font-size: .9375rem;
  margin-bottom: 0;
}

.tablet-stage {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  --device-perspective: 1700px;
  z-index: 3;
}

.tablet-device {
  position: relative;
  width: min(1040px, calc(100vw - 90px), calc((100svh - 260px) * 1.57));
  pointer-events: auto;
  aspect-ratio: 1.57;
  padding: 16px 23px;
  border: 2px solid #777b74;
  border-radius: 36px;
  background: #242622;
  box-shadow: inset 0 0 0 2px #454942, 0 3px 0 #10120f, 0 8px 0 -2px #858a7f,
    0 35px 75px -25px rgb(29 39 24 / 28%);
  transform-origin: 50% 70%;
  /* Keep the camera on the device when the carousel moves its wrapper. */
  transform: perspective(var(--device-perspective))
    translate3d(0, calc((1 - var(--reveal)) * 65px), 0)
    rotateX(calc((1 - var(--reveal)) * 58deg))
    scale(calc(.77 + var(--reveal) * .23));
  will-change: transform;
}

.tablet-device::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #111613;
  box-shadow: inset 0 0 0 1px #4b5448;
}

.tablet-device:focus-within {
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
.hero:has(.tablet-device:focus-within) .hero-copy {
    opacity: 0;
    pointer-events: none;
  }

.hero:has(.tablet-device:focus-within) .tablet-heading {
    opacity: 1;
    transform: none;
  }
}

.tablet-screen {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #fafcf8;
  display: block;
  position: relative;

  box-shadow: 0 0 0 1px #0e130b;
  scrollbar-width: thin;
}

.scroll-cue {
  position: absolute;
  bottom: 23px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .06em;
  color: #7b8773;
  opacity: clamp(0, calc(1 - var(--reveal) * 3), 1);
  margin-bottom: 0;
}

.home-pages {
  padding-top: 100px;
}

@media (max-width: 1050px) {
.tablet-device {
    width: min(1040px, calc(100vw - 60px), calc((100svh - 260px) * 1.57));
  }
}

@media (max-width: 760px) {
.hero-scroll {
    height: 185vh;
    height: 185svh;
  }

.hero-scroll .hero {
    padding: 85px 20px 0;
  }

.hero-scroll .hero h1 {
    font-size: clamp(2.2rem, 8vw, 3.2rem);
    line-height: 1.2;
    margin-bottom: 20px;
  }

.hero-scroll .eyebrow {
    font-size: .75rem;
    margin-bottom: 18px;
  }

.hero-scroll .intro {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 22px;
  }

.hero-scroll .hero-actions {
    gap: 14px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

.hero-scroll .hero-actions .button {
    padding: 14px 18px;
    font-size: .8125rem;
  }

.hero-scroll .hero-actions .text-link {
    font-size: .8125rem;
  }

.hero-scroll .hero-note {
    font-size: .75rem;
    max-width: 320px;
    margin: 17px auto 0;
  }

.device-scene {
    inset: 76px 0 0;
    gap: 24px;
  }

.tablet-heading h2 {
    font-size: 1.7rem;
  }

.tablet-heading p {
    max-width: 300px;
    margin: auto;
    font-size: .875rem;
  }

.tablet-stage {
    --device-perspective: 1000px;
  }

.tablet-device {
    width: min(280px, calc(100vw - 64px), calc((100svh - 305px) * .49));
    aspect-ratio: .49;
    padding: 9px;
    border-radius: 36px;
    transform-origin: 50% 80%;
  }

.tablet-device::before {
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
    width: 56px;
    height: 15px;
    border-radius: 15px;
    z-index: 4;
    background: #242622;
    box-shadow: none;
  }

.tablet-screen {

    border-radius: 27px;
  }

.scroll-cue {
    bottom: 12px;
    font-size: .5625rem;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
.hero-scroll .hero { padding-top: 45px; }

.hero-scroll .hero h1 { font-size: 1.9rem; }

.hero-scroll .intro { font-size: .875rem; }

.hero-scroll .eyebrow { margin-bottom: 12px; }

.device-scene { gap: 20px; }

.tablet-heading h2 { font-size: 1.4rem; }

.tablet-heading p { display: none; }

.tablet-device { width: min(280px, calc(100vw - 64px), calc((100svh - 245px) * .49)); }
}

@media (max-height: 850px) and (min-width: 761px) {
.hero-scroll .hero {
    padding-top: 70px;
  }

.hero-scroll .hero h1 {
    font-size: 3.1rem;
    margin-bottom: 16px;
  }

.hero-scroll .hero-note {
    display: none;
  }

.tablet-device {
    width: min(820px, calc(100vw - 70px), calc((100svh - 300px) * 1.57));
  }

.tablet-heading h2 {
    font-size: 2rem;
  }
}

@media (max-width: 360px) and (max-height: 700px) {
.hero-scroll .hero { padding-top: 35px; }

.hero-scroll .hero h1 { font-size: 1.55rem; }

.hero-scroll .intro { font-size: .8125rem; }

.hero-scroll .hero-actions { gap: 10px; }

.hero-scroll .hero-actions .button { padding: 12px 14px; font-size: .75rem; }

.hero-scroll .hero-actions .text-link { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
.hero-scroll {
    height: auto;
  }

.hero-scroll .hero {
    position: relative;
    height: auto;
    min-height: 100svh;
    padding: 75px 20px;
    overflow: visible;
  }

.hero-scroll .hero-copy {
    transform: none;
    opacity: 1;
    will-change: auto;
  }

.tablet-heading,
  .scroll-cue {
    display: none;
  }

.device-scene {
    position: relative;
    inset: auto;
    gap: 0;
  }

.tablet-stage {
    margin-top: 55px;
  }

.tablet-device {
    transform: none;
    will-change: auto;
  }
}

@keyframes hero-copy-enter {
  from { opacity: 0; transform: translate3d(0, 38px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-device-enter {
  from { opacity: 0; transform: translate3d(0, 70px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
.hero-scroll.is-entering .hero-copy > * {
    animation: hero-copy-enter 1250ms cubic-bezier(.22, .61, .36, 1) both;
  }

.hero-scroll.is-entering .hero-copy > h1 { animation-delay: 160ms; }

.hero-scroll.is-entering .hero-copy > .intro { animation-delay: 320ms; }

.hero-scroll.is-entering .hero-actions { animation-delay: 480ms; }

.hero-scroll.is-entering .tablet-stage {
    animation: hero-device-enter 1600ms cubic-bezier(.22, .61, .36, 1) 350ms both;
  }

.hero-scroll.is-entering .scroll-cue {
    animation: hero-copy-enter 900ms ease 850ms both;
  }

.hero-scroll.is-entering .hero-copy:focus-within > *,
  .hero-scroll.is-entering .tablet-stage:focus-within {
    animation: none;
  }
}

.hero-scroll.has-gallery {
  height: 440vh;
  height: 440svh;
}

.hero-scroll {
  --gallery: 0;
  --wide-width: min(1040px, calc(100vw - 90px), calc((100svh - 260px) * 1.57));
  --gallery-width: min(840px, 46vw, calc((100svh - 290px) * 1.57));
  --device-width: calc(var(--wide-width) * (1 - var(--gallery)) + var(--gallery-width) * var(--gallery));
  --device-ratio: 1.57;
}

.tablet-stage {
  height: calc(var(--device-width) / var(--device-ratio) + var(--gallery) * 72px);
}

.tablet-slide {
  --slide-offset: 0;
  --slide-scale: 1;
  --slide-opacity: 1;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--device-width);
  transform: translateX(-50%) translateX(calc(var(--slide-offset) * (var(--device-width) * .83 + 32px))) scale(var(--slide-scale));
  opacity: var(--slide-opacity);
  will-change: transform, opacity;
}

.tablet-slide[hidden],
.tablet-navigation[hidden] {
  display: none;
}

.tablet-slide .tablet-device {
  width: 100%;
  height: calc(var(--device-width) / var(--device-ratio));
  min-height: 0;
}

.tablet-slide[aria-hidden=true] {
  pointer-events: none;
}

.tablet-slide[aria-hidden=true] .tablet-device {
  pointer-events: none;
}

.tablet-slide:first-child:focus-within {
  transform: translateX(-50%);
  opacity: 1;
  z-index: 12 !important;
}

.tablet-navigation {
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: calc(var(--device-width) / var(--device-ratio) + 24px);
  left: 20px;
  right: 20px;
  pointer-events: auto;
}

.tablet-navigation button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d7e1d1;
  border-radius: 30px;
  padding: 10px 17px;
  background: #fff;
  color: #64715d;
  font-size: .8125rem;
  line-height: 1.4;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.tablet-navigation button > span {
  font-size: .625rem;
  opacity: .7;
}

.tablet-navigation button[aria-pressed=true] {
  background: #dfead8;
  border-color: #9dbf95;
  color: #252d27;
}

.tablet-navigation button:hover {
  border-color: #9dbf95;
  color: #252d27;
}

@media (max-width: 1050px) and (min-width: 761px) {
.hero-scroll {
    --wide-width: min(1040px, calc(100vw - 60px), calc((100svh - 260px) * 1.57));
  }
}

@media (max-width: 760px) {
.hero-scroll.has-gallery {
    height: 420vh;
    height: 420svh;
  }

.hero-scroll {
    --wide-width: min(280px, calc(100vw - 64px), calc((100svh - 305px) * .49));
    --gallery-width: var(--wide-width);
    --device-ratio: .49;
  }

.tablet-slide {
    transform: translateX(-50%) translateX(calc(var(--slide-offset) * (100vw + 24px)));
  }

.tablet-stage { height: calc(var(--device-width) / var(--device-ratio) + var(--gallery) * 64px); }

.tablet-navigation { top: calc(var(--device-width) / var(--device-ratio) + 16px); gap: 5px; left: 12px; right: 12px; }

.tablet-navigation button { font-size: .6875rem; padding: 9px 12px; }

.tablet-navigation button > span { display: none; }
}

@media (max-height: 850px) and (min-width: 761px) {
.hero-scroll {
    --wide-width: min(820px, calc(100vw - 70px), calc((100svh - 300px) * 1.57));
    --gallery-width: min(840px, 46vw, calc((100svh - 300px) * 1.57));
  }
}

@media (max-width: 760px) and (max-height: 700px) {
.hero-scroll { --wide-width: min(280px, calc(100vw - 64px), calc((100svh - 245px) * .49)); }

.tablet-navigation { top: calc(var(--device-width) / var(--device-ratio) + 16px); }

.tablet-navigation button { padding: 8px 10px; font-size: .625rem; }
}

@media (prefers-reduced-motion: reduce) {
.hero-scroll.has-gallery { height: auto; }

.tablet-slide { will-change: auto; }
}