/* Client products in the approved editorial compositions · 2026-10-07.
 * Enqueued after the original scene grid; only photography/contact changes.
 */
.hero__image { background-image: url('client-home/hero.webp'); }
.gestures__image { background-image: url('client-home/gestures.webp'); }
.collection__image { background-image: url('client-home/collection.webp') !important; }
/* Ten-aroma Atlas · 2026-10-22. The artwork and its labels share one
 * proportional coordinate plane, so viewport crops cannot break their pairing.
 * The scoped !important dimensions replace the older fixed-height scene rules.
 */
.atlas.atlas--expanded {
  height: max(100svh, 56.28vw) !important;
  min-height: 0 !important;
  max-height: none !important;
  background: var(--vanilla);
}
.atlas--expanded .atlas__map {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 1672 / 941;
  transform: translateY(-50%);
}
.atlas--expanded .atlas__artwork {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.atlas--expanded .atlas__title { top: 27%; width: 39%; z-index: 2; }
.atlas--expanded .atlas__title h2 { font-size: clamp(48px, 4.4vw, 84px); }
.atlas--expanded .scent-orbit { position: absolute; inset: 0; display: block; margin: 0; padding: 0; }
.atlas--expanded .scent-orbit li {
  position: absolute;
  left: var(--scent-x);
  top: var(--scent-y);
  width: 16%;
  transform: translateX(-50%);
}
.atlas--expanded .scent-orbit li:nth-child(1) { --scent-x: 61%; --scent-y: 34%; }
.atlas--expanded .scent-orbit li:nth-child(2) { --scent-x: 75%; --scent-y: 38%; }
.atlas--expanded .scent-orbit li:nth-child(3) { --scent-x: 91%; --scent-y: 37%; }
.atlas--expanded .scent-orbit li:nth-child(4) { --scent-x: 49%; --scent-y: 62%; }
.atlas--expanded .scent-orbit li:nth-child(5) { --scent-x: 67%; --scent-y: 63%; }
.atlas--expanded .scent-orbit li:nth-child(6) { --scent-x: 86%; --scent-y: 63%; }
.atlas--expanded .scent-orbit li:nth-child(7) { --scent-x: 31%; --scent-y: 89%; }
.atlas--expanded .scent-orbit li:nth-child(8) { --scent-x: 50%; --scent-y: 91%; }
.atlas--expanded .scent-orbit li:nth-child(9) { --scent-x: 69%; --scent-y: 89%; }
.atlas--expanded .scent-orbit li:nth-child(10) { --scent-x: 88%; --scent-y: 89%; }
.atlas--expanded .scent-orbit button {
  min-height: 48px;
  width: 100%;
  padding: 6px;
  text-align: center;
  font-size: clamp(20px, 1.45vw, 28px);
  line-height: 1.1;
  text-decoration: none;
  transform: none;
  transition: none;
}
.atlas--expanded .scent-orbit small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: none;
  opacity: 0;
  translate: 0 5px;
  transition: opacity 180ms cubic-bezier(.23, 1, .32, 1), translate 180ms cubic-bezier(.23, 1, .32, 1);
}
.atlas--expanded .scent-orbit button:focus-visible small { opacity: 1; translate: 0 0; transition: none; }
.atlas--expanded .scent-orbit button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.atlas--expanded .scent-orbit button:hover,
.atlas--expanded .scent-orbit button:focus-visible,
.atlas--expanded .scent-orbit button[aria-pressed="true"] { text-decoration: none; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .atlas--expanded .scent-orbit button:hover small { opacity: 1; translate: 0 0; }
}
@media (hover: none), (pointer: coarse) {
  .atlas--expanded .scent-orbit button[aria-pressed="true"] small { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas--expanded .scent-orbit small { translate: none; transition: opacity 125ms ease; }
}
@media (max-width: 1100px) {
  .atlas.atlas--expanded { height: auto !important; padding: 100px var(--content-axis) 72px; }
  .atlas--expanded .chapter { position: static; margin: 0 0 48px; }
  .atlas--expanded .atlas__title { position: static; width: 100%; }
  .atlas--expanded .atlas__title h2 { font-size: clamp(36px, 8vw, 64px) !important; }
  .atlas--expanded .atlas__title .kicker { margin-bottom: 24px; }
  .atlas--expanded .atlas__map { position: relative; inset: auto; aspect-ratio: auto; transform: none; margin-top: 32px; }
  .atlas--expanded .atlas__artwork { position: static; height: auto; aspect-ratio: 1672 / 941; }
  .atlas--expanded .scent-orbit { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 32px; }
  .atlas--expanded .scent-orbit li { position: static; width: auto; transform: none; }
  .atlas--expanded .scent-orbit button { min-height: 64px; padding: 8px 0; font-size: clamp(25px, 4vw, 32px); text-align: left; }
  .atlas--expanded .scent-orbit small { font-size: 12px; }
}
@media (min-width: 600px) and (max-width: 1100px) {
  .atlas--expanded .scent-orbit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.signature__background { background-image: url('client-home/signature.webp'); }
.events__image { background-image: url('client-home/events.webp'); }
.footer__image { background-image: url('client-home/footer.webp'); }
/* The closing scene is now 11: retain the ivory navigation on its dark image. */
html[data-scene="11"] .site-header { color: var(--vanilla); mix-blend-mode: normal; }
html[data-scene="11"] .scroll-index { color: var(--vanilla); mix-blend-mode: normal; }
html[data-scene="11"] .scroll-index__rail { background: rgba(249,244,230,.35); }
html[data-scene="11"] .scroll-index__rail i { background: var(--vanilla); }
.events__details figure img { object-fit: contain; background: #f3efe5; }
/* IMG_3706: retain the complete landscape photograph, not the former portrait crop. */
.origin--personal .origin__image { height: auto !important; aspect-ratio: 1600 / 1066; background: transparent; }
.origin--personal .origin__image img { object-fit: contain !important; filter: none; }
@media (min-width: 801px) {
  .origin--personal .origin__image { top: 24.8% !important; }
}
@media (max-width: 800px) {
  .origin--personal { display: flex !important; flex-direction: column; min-height: 0 !important; padding: 92px var(--content-axis) 72px !important; }
  .origin--personal .origin__image { position: relative !important; inset: auto !important; order: 1; width: 100% !important; margin-bottom: 48px; }
  .origin--personal .chapter { position: static !important; order: 2; margin: 0 0 32px; }
  .origin--personal .origin__copy { position: static !important; order: 3; width: 100% !important; }
}
.nc-whatsapp {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(84px, env(safe-area-inset-bottom));
  z-index: 65;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 52px;
  min-height: 52px;
  width: 52px;
  padding: 12px;
  border: 1px solid rgba(45,45,45,.25);
  border-radius: 30px;
  background: #f9f4e6;
  color: #2d2d2d;
  box-shadow: 0 4px 18px rgba(45,45,45,.1);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.nc-whatsapp svg { flex: 0 0 26px; }
.nc-whatsapp__label { display: none; }
.nc-whatsapp:hover { color: #f9f4e6; background: #2d2d2d; }
.nc-whatsapp:focus-visible { outline: 2px solid #756f67; outline-offset: 4px; }
.nc-cart-open .nc-whatsapp { visibility: hidden; }
@media (max-width: 800px) {
  .hero__image { background-image: url('client-home/hero-mobile.webp'); background-position: center center; }
  .gestures__image { background-position: 81% center; }
  .collection__image { background-size: auto 94% !important; background-position: 86% center !important; }
  .signature__background { background-position: 26% center; }
  .events__image { background-size: 100% auto; background-position: center top; }
  .nc-whatsapp { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 52px; padding: 12px; }
  .nc-whatsapp__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-whatsapp { transition: none; }
}