/* Luxury trailers: "Step inside" filmstrip and the age bars (partials/pieces/luxury-film.php) */
.lfm { --fh: min(calc(100svh - var(--tb) - var(--hh) - 310px), 580px); --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); position: relative; background: var(--ink); color: rgba(255, 255, 255, .86); overflow: clip; }
.motion .lfm { height: 100svh; min-height: 700px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(20px, 3vh, 36px); padding: calc(var(--tb) + var(--hh) + 20px) 0 28px; }
html:not(.motion) .lfm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: clamp(80px, 9vw, 140px) 0; }
.lfm__glow { position: absolute; inset: -10%; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(31, 107, 83, .8), transparent 70%) 85% 10% / 100% 100% no-repeat, radial-gradient(ellipse 40% 50% at 50% 50%, rgba(255, 196, 120, .12), transparent 70%) 10% 90% / 90% 90% no-repeat; }
.lfm__head { position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; }
.lfm__meter { display: flex; align-items: center; gap: 18px; flex: 0 1 420px; }
.lfm__count { font: 800 1.5rem/1 var(--display); font-stretch: 85%; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lfm__count b { color: var(--brand-hi); }
.lfm__bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.lfm__bar i { display: block; height: 100%; background: var(--brand-hi); transform-origin: left; transform: scaleX(.25); }
html:not(.motion) .lfm__meter { display: none; }

/* the strip */
.lfm__vp { position: relative; }
/* the strip is a clipped track, wider than the screen, carried sideways by the pin */
.motion .lfm__vp { overflow-x: clip; }
.motion .lfm__track { min-width: 160vw; }
.lfm__track { display: flex; align-items: flex-start; gap: clamp(40px, 6vw, 110px); width: max-content; padding: 0 var(--edge); will-change: transform; }
.lfm__panel { flex: none; scroll-snap-align: center; }
.lfm__shot { width: calc(var(--fh) * .84); display: grid; gap: 18px; }
.lfm__frame { position: relative; height: var(--fh); border-radius: 60px 60px 12px 12px; overflow: clip; background: var(--ink-2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); transition: scale .8s var(--ease), filter .8s; }
.lfm__frame img { position: absolute; top: 0; left: -10%; width: 120%; height: 100%; max-width: none; object-fit: cover; }
.motion .lfm__shot:not(.is-on) .lfm__frame { scale: .88; filter: saturate(.55) brightness(.7); }
.lfm__cap { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; transition: opacity .5s; }
.motion .lfm__shot:not(.is-on) .lfm__cap { opacity: .72; }
.lfm__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--ink); font-weight: 800; }
.lfm__cap h3 { font: 800 clamp(1.3rem, 1.8vw, 1.75rem)/1.08 var(--display); font-stretch: 82%; color: var(--white); }
.lfm__cap p { margin-top: 6px; font-size: 1rem; line-height: 1.5; }

/* without motion the strip becomes a plain grid: three photos, then the age panel across the row */
html:not(.motion) .lfm__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; gap: 40px clamp(24px, 3vw, 48px); }
html:not(.motion) .lfm__shot { width: auto; }
html:not(.motion) .lfm__frame { height: auto; aspect-ratio: 4 / 5; max-height: min(70svh, 600px); }
html:not(.motion) .lfm__age { grid-column: 1 / -1; width: auto; min-height: 0; }

/* the age bars */
.lfm__age { width: min(680px, 84vw); min-height: var(--fh); display: grid; align-content: center; gap: clamp(18px, 3vh, 30px); padding: clamp(24px, 3vw, 44px); border-radius: 30px 30px 10px 10px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lfm__age-h { font: 800 clamp(1.6rem, 2.4vw, 2.3rem)/1.05 var(--display); font-stretch: 80%; color: var(--white); }
.age { position: relative; display: grid; gap: clamp(16px, 2.6vh, 26px); padding-bottom: 30px; }
.age__row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline; }
.age__who { font-weight: 700; color: rgba(255, 255, 255, .8); }
.age__val { font: 800 clamp(1.15rem, 1.6vw, 1.5rem)/1 var(--display); font-stretch: 85%; color: var(--white); text-align: right; }
.age__row--ours .age__val { color: var(--brand-hi); }
.age__track { grid-column: 1 / -1; grid-row: 2; position: relative; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.age__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transform-origin: left; }
.age__row--ours .age__fill { width: 25%; background: linear-gradient(90deg, var(--brand), var(--brand-hi)); box-shadow: 0 0 22px rgba(108, 196, 63, .5); }
.age__row--them .age__fill { width: 100%; background: linear-gradient(90deg, #8a948f 0%, #8a948f 86%, rgba(138, 148, 143, 0) 100%); }
.age__axis { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .875rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.age__axis span { position: absolute; top: 6px; translate: -50% 0; white-space: nowrap; }
.age__axis span:first-child { translate: 0 0; }
.age__axis span:last-child { translate: -100% 0; }
.age__axis span:last-child::after { content: " years"; }
.lfm__age-p { font-size: 1.0625rem; }

@media (max-width: 960px) {
  .lfm { --fh: min(40svh, 80vw); }
  .motion .lfm { gap: 16px; padding-top: calc(var(--tb) + var(--hh) + 4px); min-height: 0; }
  .lfm .h2 { font-size: 1.85rem; }
  .lfm__meter { flex-basis: 100%; }
  .lfm__count { font-size: 1.2rem; }
  .lfm__track { gap: 22px; }
  .lfm__frame { border-radius: 40px 40px 10px 10px; }
  .lfm__cap { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .lfm__n { width: 30px; height: 30px; font-size: .9rem; }
  .lfm__cap h3 { font-size: 1.2rem; }
  .lfm__cap p { font-size: .95rem; line-height: 1.4; }
  .lfm__age { min-height: 0; padding: 22px 20px; gap: 16px; }
  html:not(.motion) .lfm__track { grid-template-columns: minmax(0, 1fr); }
  .lfm__age-h { font-size: 1.4rem; }
  .age__who { font-size: .95rem; }
  .age__val { font-size: 1.05rem; }
  .lfm__age-p { font-size: .95rem; }
}
@media (max-width: 960px) {
  /* six access tiles sit two to a row on phones */
  .page--luxury .acc__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page--luxury .acc__tile { padding: 16px 16px 18px; }
}

/* six access tiles: a tighter tile so the section fits one screen */
.page--luxury .acc { padding-block: clamp(48px, 5vw, 72px); }
.page--luxury .acc__tile { padding: 16px 20px 18px; gap: 6px; }
.page--luxury .acc__dim { height: 24px; }
.page--luxury .acc__num { font-size: clamp(2rem, 2.8vw, 2.6rem); }
.page--luxury .acc__head { margin-bottom: clamp(18px, 2vw, 28px); }
@media (max-width: 720px) {
  /* the third fact gets the whole row rather than sitting beside an empty cell */
  .page--luxury .facts li:nth-child(3) { grid-column: 1 / -1; }
}