/* One page, two product scenes. The original images keep their intrinsic proportions. */
.life-gallery,
.fullpage-ready #life-products.life-gallery {
  position:relative;
  display:flex;
  flex-direction:column;
  height:100dvh;
  min-height:100dvh;
  padding:var(--nav-height) 0 0;
  overflow:hidden;
  background:#090d0b;
  color:var(--journey-ink);
  font-family:var(--sans);
}
.life-gallery-header { flex:none; display:flex; justify-content:space-between; align-items:start; gap:clamp(32px,5vw,100px); padding:clamp(24px,3.5dvh,42px) var(--journey-pad) clamp(24px,3.5dvh,42px); }
.life-gallery-header .chapter-label { margin:0 0 14px; color:var(--journey-accent); font-size:clamp(.7rem,.8vw,.875rem); letter-spacing:.1em; }
.life-gallery-header h2 { margin:0; font-size:clamp(2.4rem,min(4.3vw,6.4dvh),5.2rem); line-height:1.04; font-weight:400; letter-spacing:-.05em; text-transform:uppercase; }
.life-gallery-header h2 > span + span { color:var(--journey-accent); }
.life-gallery-intro { width:24%; max-width:380px; margin:4px 0 0; color:#c2c9c0; font-size:clamp(.9rem,1vw,1.2rem); line-height:1.65; }
.life-split-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:1; min-height:0; border-top:1px solid #ffffff16; }
.life-split-panel { position:relative; isolation:isolate; container-type:size; min-width:0; min-height:0; overflow:hidden; background:#090b08; }
.life-split-panel + .life-split-panel { border-left:1px solid #d7b48730; }
.life-panel-visual { position:absolute; z-index:-2; inset:0; pointer-events:none; }
.life-panel-art { display:block; width:100%; height:100%; }
.life-split-panel--emergency .life-panel-art { filter:brightness(.66) saturate(.86) contrast(1.08); }
.life-m5-stage { filter:brightness(.38) saturate(.62) contrast(1.1); }
.life-m5-product { overflow:hidden; filter:brightness(.78) saturate(.88) contrast(1.06) drop-shadow(0 30px 28px #000); }
.life-m5-product-base-lift { opacity:.82; mix-blend-mode:screen; }
.life-panel-shade { position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(90deg,#080c0a 0%,#080c0af2 12%,#080c0a77 36%,transparent 58%),linear-gradient(0deg,#080c0aab,transparent 28%); }
.life-split-panel--m5 .life-panel-shade { background:linear-gradient(90deg,#050705e8 0%,#050705a3 28%,#0507052b 68%,transparent 88%),linear-gradient(0deg,#0507054d 0%,#05070542 31%,#05070520 63%,transparent 82%); }
.life-split-panel--m5 .life-panel-shade::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 40% 5.5% at 68% 71%,#c5ccc173 0%,#919b9038 48%,transparent 82%);
  mix-blend-mode:screen;
}
.life-panel-copy { position:absolute; bottom:clamp(32px,5dvh,68px); left:clamp(24px,4.3vw,76px); width:48%; max-width:550px; }
.life-product-role { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 18px; color:var(--journey-accent); font-size:clamp(.65rem,.74vw,.8125rem); line-height:1.5; letter-spacing:.1em; text-transform:uppercase; }
.life-product-role > span:first-child { padding-right:12px; border-right:1px solid #d7b48766; color:#f0e7d6; }
.life-product-patents { max-width:100%; margin:-9px 0 18px; color:#bbc3ba; }
.life-panel-copy h3 { margin:0 0 24px; font-size:clamp(1.9rem,2.75vw,4.5rem); line-height:1.05; font-weight:400; letter-spacing:-.045em; }
.life-panel-copy h3 > span,
.life-panel-copy h3 > em { display:block; }
.life-panel-copy h3 > em { margin-top:4px; color:#dcac70; font-family:Georgia,'Times New Roman',serif; font-size:1.04em; font-weight:400; }
.life-product-description { max-width:29ch; margin:0; color:#c0c5bc; font-size:clamp(.8125rem,.94vw,1rem); line-height:1.65; }
.life-panel-copy .journey-link { margin-top:clamp(14px,2.2dvh,28px); min-height:44px; gap:30px; color:var(--journey-accent); border-bottom-color:#d7b48773; }
.life-panel-copy .journey-link:hover { color:#fff1d9; border-bottom-color:currentColor; }
.life-pair-caption { position:absolute; right:var(--journey-pad); bottom:9px; z-index:1; color:#8d988e; font-size:.625rem; line-height:1.5; pointer-events:none; }
/* In a narrow panel the scene stays above the copy, without distorting either device. */
@container (max-aspect-ratio:4/5) {
  .life-panel-visual { bottom:24%; mask-image:linear-gradient(180deg,#000 92%,transparent); }
  .life-panel-copy { left:7cqw; width:83cqw; bottom:5cqh; }
  .life-panel-copy h3 { font-size:clamp(1.9rem,6.3cqw,3.2rem); margin-bottom:16px; }
  .life-product-role { margin-bottom:12px; }
  .life-product-description { max-width:34ch; }
  .life-panel-shade { background:linear-gradient(90deg,#080c0ae0,transparent 40%),linear-gradient(0deg,#080c0a 12%,#080c0a99 29%,transparent 44%); }
}
@media (max-width:700px) {
  .life-gallery-header { display:block; padding:22px var(--journey-pad); }
  .life-gallery-header h2 { font-size:clamp(1.9rem,7vw,3rem); }
  .life-gallery-header .chapter-label { margin-bottom:10px; font-size:.625rem; }
  .life-gallery-intro { width:100%; max-width:38ch; margin-top:12px; font-size:.8125rem; }
  .life-panel-copy h3 { font-size:clamp(1.25rem,4.7vw,2rem); }
  .life-product-role { display:block; font-size:.5625rem; }
  .life-product-role > span { display:block; }
  .life-product-role > span:first-child { padding:0; margin-bottom:4px; border:0; }
  .life-product-patents { margin:-6px 0 12px; font-size:.55rem; }
  .life-product-description { font-size:.6875rem; }
  .life-panel-copy .journey-link { gap:12px; font-size:.6875rem; margin-top:10px; }
  .life-pair-caption { font-size:.5rem; }
}