/* ═══ C6 · Wellness, softened. The hug photograph melts into the linen (sharp in the middle,
   blurring and fading at its edges) and a Redouté rose leans in from the right like a pressed flower. ═══ */
.whero--soft { display: block; position: relative; overflow: hidden; min-height: min(100svh, 62rem); }
.whero--soft .whero__text { position: relative; z-index: 3; display: flex; align-items: center; justify-content: flex-start; min-height: inherit;
  max-width: var(--shell); margin-inline: auto; padding: clamp(6.5rem, 14vh, 8rem) var(--gut) clamp(3rem, 7vh, 5rem); overflow: visible; }
.whero--soft .whero__copy { max-width: 30rem; }
.whero--soft .whero__wash { z-index: 0; }

/* the photograph: two layers of the same picture, a soft blurred one underneath and the sharp one on top,
   each faded out towards the edges so the picture dissolves into the linen */
.whero--soft .whero__photo { position: absolute; z-index: 1; top: 0; bottom: 0; left: 36%; right: 9%; margin: 0; overflow: visible; }
.whero--soft .whero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.whero__blur { filter: blur(26px) saturate(1.05); transform: scale(1.08); opacity: 0.75;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 4%, #000 20%, #000 82%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 4%, #000 20%, #000 82%, transparent 100%); mask-composite: intersect;
  animation: softIn 2.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.whero__sharp {
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgb(0 0 0 / 0.35) 16%, #000 34%, #000 74%, rgb(0 0 0 / 0.4) 88%, transparent 98%), linear-gradient(180deg, transparent 9%, #000 24%, #000 80%, transparent 97%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 4%, rgb(0 0 0 / 0.35) 16%, #000 34%, #000 74%, rgb(0 0 0 / 0.4) 88%, transparent 98%), linear-gradient(180deg, transparent 9%, #000 24%, #000 80%, transparent 97%); mask-composite: intersect;
  animation: softIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
@keyframes softIn { from { opacity: 0; } }

/* the pressed rose: Redouté's white paper disappears into the linen (multiply), only the painted flower remains */
.whero__flora { position: absolute; z-index: 2; margin: 0; right: -2.5%; top: 4%; height: 100%; aspect-ratio: 347 / 500; pointer-events: none; mix-blend-mode: multiply;
  transform-origin: 70% 100%; animation: floraIn 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both, floraSway 14s ease-in-out 3s infinite alternate; }
.whero__flora img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 88%); mask-image: linear-gradient(180deg, #000 72%, transparent 88%); }
@keyframes floraIn { from { opacity: 0; translate: 2rem 0; } to { opacity: 1; translate: 0 0; } }
@keyframes floraSway { from { rotate: -0.6deg; } to { rotate: 0.8deg; } }

@media (max-width: 61.99rem) {
  .whero--soft { min-height: 0; }
  .whero--soft .whero__photo { position: relative; inset: auto; height: min(70svh, 36rem); margin-top: 4.4rem; }
  .whero__sharp { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .whero__blur { display: none; }
  .whero--soft .whero__text { min-height: 0; padding-top: 0; margin-top: -2.5rem; }
  .whero__flora { top: auto; bottom: -6%; right: -16%; height: 52%; opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) { .whero__blur, .whero__sharp, .whero__flora { animation: none; } }
/* the rose sits behind the photograph and only shows where the picture fades out: it can never cross a face */
.whero--soft .whero__photo { left: 33%; right: 19%; z-index: 2; }
.whero__flora { z-index: 1; right: -5%; top: 6%; height: 88%; }
.whero--soft .whero__wash { opacity: 0.12; }
.whero--soft .whero__photo { left: 37%; right: 18%; }
.whero--soft .whero__copy { max-width: 27rem; }
.whero--soft .whero__ways { font-size: 0.72rem; letter-spacing: 0.08em; }
@media (max-width: 61.99rem) { .whero--soft .whero__photo { left: auto; right: auto; } .whero--soft .whero__copy { max-width: 34rem; } }
/* shorter laptop screens: a little tighter so everything breathes inside the first screen */
@media (min-width: 62rem) and (max-height: 820px) {
  .whero--soft .emblem { width: 2.3rem; margin-bottom: 0.9rem; }
  .whero--soft .whero__place { margin-bottom: 0.9rem; }
  .whero--soft .whero__title { font-size: clamp(3rem, 10.5vh, 6.2rem); }
  .whero--soft .whero__lede { margin-top: 1rem; font-size: clamp(1.15rem, 2.9vh, 1.5rem); }
  .whero--soft .whero__ways { margin-top: 1.1rem; padding-top: 0.8rem; }
  .whero--soft .whero__acts { margin-top: 1.4rem; }
  .whero--soft .whero__text { padding-top: 6rem; padding-bottom: 2rem; }
}
@media (max-width: 61.99rem) {
  /* phones: a small rose tucked into the lower right of the photograph's fade */
  .whero__flora { top: 21rem; bottom: auto; right: -9%; height: 17rem; z-index: 1; opacity: 0.95; }
}