.page--coffee-corners {
  --cc-cream: #f5f2ec;
  --cc-ivory: #eae4db;
  --cc-stone: #c9b8a4;
  --cc-taupe: #9a846e;
  --cc-ink: #2b2926;
  --cc-black: #111;
  --cc-shadow: 0 30px 80px rgb(30 20 10 / 10%), 0 8px 22px rgb(30 20 10 / 7%);
  --cc-contact: 0 12px 30px rgb(30 20 10 / 9%);
  background: var(--cc-cream);
  color: var(--cc-ink);
  overflow: clip;
}

.page--coffee-corners img {
  display: block;
  width: 100%;
  height: 100%;
}

.coffee-load-mask {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background: linear-gradient(90deg, var(--cc-black), #211c17 50%, var(--cc-cream) 50%);
  transform-origin: left;
  animation: cc-mask-out 1.2s cubic-bezier(.76, 0, .24, 1) .18s forwards;
}

.coffee-hero {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  padding: calc(var(--header-height) + 3.5rem) var(--page-gutter) clamp(2.5rem, 5vw, 4.5rem);
  background:
    linear-gradient(90deg, transparent 0 47%, rgb(245 242 236 / 76%) 47% 64%, rgb(245 242 236 / 98%) 64%),
    radial-gradient(circle at 76% 24%, rgb(201 184 164 / 42%), transparent 34rem),
    var(--cc-cream);
  overflow: hidden;
}

.coffee-hero__image {
  position: absolute;
  z-index: -1;
  inset: clamp(6rem, 11vh, 8rem) auto clamp(2rem, 5vh, 4rem) var(--page-gutter);
  width: min(52vw, 62rem);
  max-width: calc(100vw - var(--page-gutter) * 2);
  margin: 0;
  border-radius: clamp(1.25rem, 2vw, 2rem);
  overflow: hidden;
  box-shadow: var(--cc-shadow);
  background: #ded3c5;
  opacity: 0;
  clip-path: inset(8% 8% 8% 8% round clamp(1.25rem, 2vw, 2rem));
  transform: translateY(1.5rem) scale(.88);
}

.coffee-loaded .coffee-hero__image {
  animation: cc-photo-open 1.45s cubic-bezier(.22, 1, .36, 1) .45s forwards;
}

.coffee-hero__image:after,
.coffee-spread__photo:after,
.coffee-home-moment:after,
.coffee-final:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.coffee-hero__image:after,
.coffee-spread__photo:after {
  background: linear-gradient(120deg, rgb(255 255 255 / 20%), transparent 38%, rgb(17 17 17 / 8%));
  opacity: .7;
}

.coffee-hero__image img,
.coffee-spread__photo img,
.coffee-overlay__stage img {
  object-fit: contain;
  background: linear-gradient(135deg, #e8dfd1, #f8f5ef);
}

.coffee-hero__text {
  width: min(100%, 42rem);
  display: grid;
  gap: 1rem;
  position: relative;
  z-index: 2;
  justify-self: start;
  text-align: right;
}

.coffee-hero h1,
.coffee-home-moment h2,
.coffee-final h2 {
  font-size: clamp(3.4rem, 7vw, 7.6rem);
  font-weight: 900;
  line-height: .98;
}

.coffee-hero h1 span,
.coffee-hero__text p,
.coffee-discover {
  opacity: 0;
  transform: translateY(1.5rem);
}

.coffee-hero h1 span,
.coffee-home-moment h2 span,
.coffee-final h2 span {
  display: block;
}

.coffee-loaded .coffee-hero h1 span:first-child {
  animation: cc-text-in .82s cubic-bezier(.22, 1, .36, 1) 1.05s forwards;
}

.coffee-loaded .coffee-hero h1 span:last-child {
  animation: cc-text-in .82s cubic-bezier(.22, 1, .36, 1) 1.2s forwards;
}

.coffee-loaded .coffee-hero__text p {
  animation: cc-text-in .76s cubic-bezier(.22, 1, .36, 1) 1.45s forwards;
}

.coffee-loaded .coffee-discover {
  animation: cc-text-in .76s cubic-bezier(.22, 1, .36, 1) 1.68s forwards;
}

.coffee-hero__text p {
  color: var(--cc-taupe);
  font-size: .9rem;
  font-weight: 900;
}

.coffee-discover {
  width: fit-content;
  min-height: 2.9rem;
  display: inline-flex;
  align-items: center;
  color: var(--cc-ink);
  font-weight: 900;
}

.coffee-model-nav {
  position: fixed;
  z-index: 120;
  inset: 50% clamp(.8rem, 2vw, 1.5rem) auto auto;
  transform: translateY(-50%);
  display: grid;
  gap: .65rem;
}

.coffee-model-nav a {
  min-width: 2.75rem;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  direction: ltr;
  color: rgb(43 41 38 / 42%);
  font-family: Arial, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  transition: color .25s, transform .25s;
}

.coffee-model-nav span {
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
}

.coffee-model-nav a.is-active,
.coffee-model-nav a:hover,
.coffee-model-nav a:focus-visible {
  color: var(--cc-black);
  transform: translateX(-.2rem);
}

.coffee-model-nav a.is-active span {
  opacity: 1;
}

.coffee-spread {
  min-height: 100svh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(22rem, 35fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(5.5rem, 8vw, 8rem) var(--page-gutter);
  background: var(--cc-cream);
}

.coffee-spread--reverse {
  grid-template-columns: minmax(22rem, 35fr) minmax(0, 65fr);
}

.coffee-spread--reverse .coffee-spread__photo {
  grid-column: 2;
}

.coffee-spread--reverse .coffee-spread__info {
  grid-row: 1;
}

.coffee-spread__number {
  position: absolute;
  z-index: 0;
  inset: 4rem auto auto clamp(1rem, 4vw, 5rem);
  color: rgb(43 41 38 / 7%);
  font-family: Arial, sans-serif;
  font-size: clamp(10rem, 22vw, 24rem);
  font-weight: 700;
  line-height: .8;
}

.coffee-spread__photo {
  --photo-pop-y: 1.4rem;
  --photo-pop-scale: .91;
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(32rem, 74svh, 52rem);
  border: 0;
  border-radius: clamp(1.25rem, 2.1vw, 2rem);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--cc-shadow);
  background: #ded3c5;
  opacity: 0;
  transform: translateY(calc((1 - var(--spread-progress, .2)) * 22px + var(--photo-pop-y))) scale(var(--photo-pop-scale));
  transition:
    opacity .5s ease,
    box-shadow .34s ease,
    transform .74s cubic-bezier(.18, 1.35, .32, 1);
}

.coffee-spread__photo.is-visible {
  --photo-pop-y: 0rem;
  --photo-pop-scale: calc(.965 + var(--spread-progress, .2) * .035);
  opacity: 1;
}

.coffee-spread__photo img {
  padding: clamp(.1rem, .55vw, .55rem);
  filter: drop-shadow(0 26px 34px rgb(43 41 38 / 18%));
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s cubic-bezier(.22, 1, .36, 1);
}

.coffee-spread__photo:hover img,
.coffee-spread__photo:focus-visible img {
  transform: scale(1.055);
  filter: drop-shadow(0 32px 42px rgb(43 41 38 / 24%)) brightness(.98) contrast(1.04);
}

.coffee-spread__info {
  z-index: 2;
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  display: grid;
  gap: 1rem;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
}

.coffee-spread__info.is-visible,
.reveal.is-visible,
.reveal-price.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.coffee-index {
  color: var(--cc-taupe);
  font-family: Arial, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
}

.coffee-spread__info h2,
.coffee-overlay__info h2 {
  display: grid;
  gap: .2rem;
  font-size: clamp(2.1rem, 4.4vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
}

.coffee-spread__info h2 b,
.coffee-overlay__info h2 b {
  font-family: Arial, sans-serif;
  font-size: .54em;
  letter-spacing: .16em;
  direction: ltr;
}

.coffee-price-block {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  color: var(--cc-black);
}

.reveal-price {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1) .18s, transform .75s cubic-bezier(.22, 1, .36, 1) .18s;
}

.coffee-price-block strong {
  font-family: Arial, sans-serif;
  font-size: clamp(3rem, 6vw, 6.2rem);
  font-weight: 700;
  line-height: .9;
}

.coffee-price-block span {
  color: var(--cc-taupe);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 900;
}

.coffee-included-line,
.coffee-dims,
.coffee-days span {
  color: var(--cc-taupe);
}

.coffee-dims {
  direction: ltr;
  text-align: right;
  font-family: Arial, sans-serif;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
}

.coffee-spread__info ul {
  display: grid;
  gap: .35rem;
  margin: .3rem 0;
  padding: 0;
  list-style: none;
  color: var(--cc-ink);
}

.coffee-days {
  display: grid;
  gap: .1rem;
}

.coffee-days strong {
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  line-height: 1;
}

.coffee-order {
  width: fit-content;
  min-height: 3.55rem;
  border: 0;
  border-radius: .7rem;
  background: var(--cc-black);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .9rem 1.25rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: none;
  transition: transform .24s ease, box-shadow .24s ease, padding-inline .24s ease, background .24s ease;
}

.coffee-order svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .24s ease;
}

.coffee-order:hover,
.coffee-order:focus-visible {
  padding-inline: 1.45rem;
  transform: translateY(-2px);
  box-shadow: var(--cc-contact);
}

.coffee-order:hover svg:last-child,
.coffee-order:focus-visible svg:last-child {
  transform: translateX(-4px);
}

.coffee-order--light {
  background: #fff;
  color: var(--cc-black);
}

.coffee-seven {
  min-height: 72svh;
  display: grid;
  place-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(4rem, 8vw, 7rem) var(--page-gutter);
  background: var(--cc-black);
  color: #fff;
  text-align: center;
}

.coffee-seven__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 5vw, 5rem);
  text-align: start;
}

.coffee-seven h2 {
  display: grid;
  gap: 0;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 700;
  line-height: .78;
}

.coffee-seven h2 span {
  font-size: clamp(9rem, 21vw, 22rem);
}

.coffee-seven h2 b {
  font-size: clamp(2rem, 5vw, 5rem);
}

.coffee-seven__main p {
  color: rgb(255 255 255 / 72%);
  font-size: clamp(1.35rem, 2.8vw, 3rem);
  line-height: 1.25;
}

.coffee-seven__steps {
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgb(255 255 255 / 28%);
  font-size: .82rem;
}

.coffee-seven__steps li {
  transition: color .35s ease;
}

.coffee-seven__steps li.is-lit {
  color: #fff;
}

.coffee-seven__steps span {
  margin-inline-end: .4rem;
  font-family: Arial, sans-serif;
}

.coffee-timeline {
  min-height: 62svh;
  padding: clamp(4rem, 8vw, 7rem) var(--page-gutter);
  display: grid;
  align-content: center;
  gap: 2rem;
  background: var(--cc-ivory);
}

.coffee-timeline h2 {
  font-size: clamp(2rem, 4vw, 4.2rem);
  font-weight: 900;
}

.coffee-timeline__track {
  height: 1px;
  background: rgb(43 41 38 / 18%);
  position: relative;
  overflow: hidden;
}

.coffee-timeline__track span {
  position: absolute;
  inset: 0 0 0 auto;
  width: calc(var(--timeline-progress, 0) * 100%);
  background: var(--cc-black);
}

.coffee-timeline ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1.4rem, 3vw, 3.3rem);
  font-weight: 900;
}

.coffee-timeline p {
  color: var(--cc-taupe);
  font-family: Arial, sans-serif;
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 700;
  line-height: .9;
}

.coffee-home-moment,
.coffee-final {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  padding: clamp(4rem, 8vw, 7rem) var(--page-gutter);
  color: #fff;
  overflow: hidden;
}

.coffee-home-moment img,
.coffee-final > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  object-fit: cover;
  object-position: center;
}

.coffee-home-moment:after,
.coffee-final:after {
  z-index: -1;
  background: linear-gradient(180deg, rgb(17 17 17 / 5%), rgb(17 17 17 / 76%));
}

.coffee-home-moment > div,
.coffee-final > div {
  width: min(100%, 46rem);
  display: grid;
  gap: 1rem;
}

.coffee-home-moment p,
.coffee-final p {
  color: rgb(255 255 255 / 78%);
  font-size: clamp(1rem, 1.7vw, 1.45rem);
}

.coffee-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: .5rem;
}

.coffee-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
}

.coffee-overlay.is-open {
  display: grid;
}

.coffee-overlay__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(17 17 17 / 52%);
  cursor: pointer;
  animation: cc-fade-in .28s ease both;
}

.coffee-overlay__panel {
  position: relative;
  width: min(100%, 100rem);
  height: 100svh;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 63fr) minmax(22rem, 37fr);
  gap: clamp(1.2rem, 4vw, 4.5rem);
  padding: clamp(1rem, 3vw, 3rem);
  background: var(--cc-cream);
  overflow: auto;
}

.coffee-overlay__gallery {
  align-self: center;
  display: grid;
  gap: .85rem;
  opacity: 0;
  transform: scale(.94);
  animation: cc-overlay-image .55s cubic-bezier(.22, 1, .36, 1) .12s forwards;
}

.coffee-overlay__stage {
  height: min(76svh, 52rem);
  border: 0;
  border-radius: clamp(1.25rem, 2vw, 2rem);
  padding: 0;
  background: #ded3c5;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--cc-shadow);
}

.coffee-overlay__stage img {
  padding: clamp(.25rem, .9vw, .75rem);
  transition: opacity .2s ease, transform .35s ease;
}

.coffee-overlay__stage img.is-changing {
  opacity: 0;
  transform: translateY(.6rem);
}

.coffee-overlay__count {
  direction: ltr;
  color: var(--cc-taupe);
  font-family: Arial, sans-serif;
  font-size: .8rem;
}

.coffee-overlay__thumbs {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding-block-end: .3rem;
}

.coffee-overlay__thumbs button {
  width: 5.6rem;
  height: 4.2rem;
  flex: 0 0 5.6rem;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: .48;
}

.coffee-overlay__thumbs button[aria-selected="true"] {
  opacity: 1;
  border-color: var(--cc-black);
}

.coffee-overlay__thumbs img {
  object-fit: cover;
  border-radius: .35rem;
}

.coffee-overlay__info {
  align-self: center;
  display: grid;
  gap: 1rem;
  opacity: 0;
  transform: translateY(30px);
  animation: cc-text-in .55s cubic-bezier(.22, 1, .36, 1) .28s forwards;
}

.coffee-overlay__specs {
  display: grid;
  gap: .7rem;
  margin: .3rem 0;
}

.coffee-overlay__specs div {
  display: grid;
  gap: .2rem;
}

.coffee-overlay__specs dt,
.coffee-overlay__days span {
  color: var(--cc-taupe);
  font-size: .8rem;
  font-weight: 900;
}

.coffee-overlay__specs dd {
  margin: 0;
  color: var(--cc-ink);
}

.coffee-overlay__services {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--cc-ink);
  font-weight: 900;
}

.coffee-overlay__days {
  display: grid;
  gap: .15rem;
}

.coffee-overlay__days b {
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1;
}

.coffee-overlay__close {
  width: fit-content;
  min-height: 3rem;
  border: 0;
  background: transparent;
  color: var(--cc-taupe);
  cursor: pointer;
  font-weight: 900;
  opacity: 0;
  animation: cc-fade-in .35s ease .52s forwards;
}

.coffee-sticky-order {
  position: fixed;
  z-index: 180;
  inset: auto .75rem max(.7rem, env(safe-area-inset-bottom));
  display: none;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  align-items: center;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 1rem;
  background: rgb(245 242 236 / 88%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
  backdrop-filter: blur(18px) saturate(132%);
  box-shadow: 0 18px 54px rgb(30 20 10 / 14%);
  padding: .62rem;
}

.coffee-sticky-order.is-visible {
  display: grid;
  animation: cc-sticky-in .32s cubic-bezier(.22, 1, .36, 1);
}

.coffee-sticky-order div {
  display: grid;
  min-width: 0;
}

.coffee-sticky-order strong {
  font-family: Arial, sans-serif;
  letter-spacing: .12em;
}

.coffee-sticky-order span {
  color: var(--cc-taupe);
  font-weight: 900;
}

.coffee-sticky-order a {
  min-height: 3rem;
  border-radius: .7rem;
  background: var(--cc-black);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem .95rem;
  font-weight: 900;
}

.coffee-sticky-order svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.coffee-detail-cursor {
  position: fixed;
  z-index: 700;
  top: 0;
  left: 0;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: rgb(17 17 17 / 84%);
  color: #fff;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  font-size: .78rem;
  font-weight: 900;
  transition: opacity .2s ease;
}

.coffee-detail-cursor.is-visible {
  opacity: 1;
}

body.coffee-overlay-open {
  overflow: hidden;
}

body.coffee-overlay-open .mobile-contact-bar,
body.coffee-overlay-open .coffee-sticky-order {
  opacity: 0;
  pointer-events: none;
}

@keyframes cc-mask-out {
  to { transform: scaleX(0); }
}

@keyframes cc-photo-open {
  62% {
    opacity: 1;
    clip-path: inset(0 round clamp(1.25rem, 2vw, 2rem));
    transform: translateY(0) scale(1.035);
  }

  to {
    opacity: 1;
    clip-path: inset(0 round clamp(1.25rem, 2vw, 2rem));
    transform: translateY(0) scale(1);
  }
}

@keyframes cc-text-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cc-fade-in {
  to { opacity: 1; }
}

@keyframes cc-overlay-image {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cc-sticky-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

@media (max-width: 64rem) {
  .coffee-load-mask {
    animation-duration: .9s;
  }

  .coffee-model-nav {
    inset: auto .75rem calc(4.55rem + env(safe-area-inset-bottom)) .75rem;
    transform: none;
    display: flex;
    justify-content: center;
    gap: .35rem;
    background: rgb(245 242 236 / 78%);
    border: 1px solid rgb(255 255 255 / 58%);
    border-radius: .9rem;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: .35rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  .coffee-model-nav:has(a.is-active) {
    opacity: 1;
    pointer-events: auto;
  }

  .coffee-model-nav a {
    justify-content: center;
    min-width: 3rem;
    transform: none !important;
  }

  .coffee-model-nav span {
    display: none;
  }

  .coffee-hero {
    padding: calc(var(--header-height) + 1.25rem) .75rem 2rem;
    align-items: end;
    background: var(--cc-cream);
  }

  .coffee-hero__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: 66svh;
    max-width: none;
    border-radius: 1.35rem;
  }

  .coffee-hero__text {
    margin-block-start: 1.4rem;
    padding-inline: .4rem;
  }

  .coffee-hero h1,
  .coffee-home-moment h2,
  .coffee-final h2 {
    font-size: clamp(2.6rem, 13vw, 4.6rem);
  }

  .coffee-spread,
  .coffee-spread--reverse {
    min-height: 100svh;
    grid-template-columns: 1fr;
    gap: 1.15rem;
    padding: 4rem .75rem;
    align-content: start;
  }

  .coffee-spread--reverse .coffee-spread__photo,
  .coffee-spread--reverse .coffee-spread__info {
    grid-column: auto;
    grid-row: auto;
  }

  .coffee-spread__number {
    inset: 2rem auto auto .75rem;
    font-size: clamp(8rem, 34vw, 12rem);
  }

  .coffee-spread__photo {
    height: min(66svh, 37rem);
    border-radius: 1.35rem;
    transform: translateY(var(--photo-pop-y)) scale(var(--photo-pop-scale));
  }

  .coffee-spread__photo.is-visible {
    --photo-pop-scale: 1;
  }

  .coffee-spread__info {
    position: relative;
    top: auto;
    gap: .78rem;
    padding-inline: .35rem;
  }

  .coffee-spread__info h2 {
    font-size: clamp(2.15rem, 11vw, 3.5rem);
  }

  .coffee-price-block strong {
    font-size: clamp(3rem, 15vw, 4.7rem);
  }

  .coffee-order {
    width: 100%;
    min-height: 3.6rem;
  }

  .coffee-seven {
    min-height: 72svh;
    padding-inline: .75rem;
  }

  .coffee-seven__main {
    display: grid;
    text-align: center;
  }

  .coffee-seven__steps {
    display: grid;
    gap: .75rem;
  }

  .coffee-timeline {
    min-height: 70svh;
    padding-inline: .75rem;
  }

  .coffee-timeline__track {
    width: 1px;
    height: 18rem;
    justify-self: start;
    grid-row: 2 / span 2;
  }

  .coffee-timeline__track span {
    inset: 0 auto auto 0;
    width: 1px;
    height: calc(var(--timeline-progress, 0) * 100%);
  }

  .coffee-timeline ol {
    grid-template-columns: 1fr;
    padding-inline-start: 2rem;
  }

  .coffee-home-moment,
  .coffee-final {
    min-height: 90svh;
    padding: 4rem .95rem;
  }

  .coffee-final__actions {
    display: grid;
  }

  .coffee-overlay__panel {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: .75rem;
  }

  .coffee-overlay__gallery,
  .coffee-overlay__info {
    align-self: start;
  }

  .coffee-overlay__stage {
    height: min(54svh, 32rem);
    border-radius: 1.15rem;
  }

  .coffee-overlay__thumbs button {
    width: 4.7rem;
    flex-basis: 4.7rem;
  }

  .coffee-sticky-order strong,
  .coffee-sticky-order span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 28rem) {
  .coffee-sticky-order {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .coffee-sticky-order a {
    padding-inline: .8rem;
  }

  .coffee-sticky-order a svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coffee-load-mask {
    display: none;
  }

  .coffee-loaded .coffee-hero__image,
  .coffee-loaded .coffee-hero h1 span,
  .coffee-loaded .coffee-hero__text p,
  .coffee-loaded .coffee-discover,
  .coffee-overlay__gallery,
  .coffee-overlay__info,
  .coffee-overlay__close {
    animation: none;
  }

  .coffee-hero__image,
  .coffee-hero h1 span,
  .coffee-hero__text p,
  .coffee-discover,
    .coffee-spread__info,
    .reveal,
    .reveal-price,
    .reveal-photo,
    .coffee-overlay__gallery,
    .coffee-overlay__info,
    .coffee-overlay__close {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .coffee-spread__photo,
  .coffee-spread__photo img,
  .reveal-photo,
  .coffee-order,
  .coffee-order svg {
    transition: none;
  }
}