/* ==========================================================================
   Homepage: "Private Screening"
   ========================================================================== */

.lx-home {
  overflow-x: clip;
  text-align: left;
}

/* Legacy mobile templates center most text; the editorial layout is left-aligned. */
.lx-home *:not(.lx-widget *) {
  text-align: inherit !important;
}

.lx-home .lx-section-head--center {
  text-align: center !important;
}

.lx-section {
  padding-block: var(--lx-section);
  border-top: 1px solid var(--lx-line);
}

.lx-section-head {
  display: grid;
  gap: 1.6rem;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.lx-section-head--split {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: 2rem clamp(2rem, 6vw, 7rem);
}

.lx-section-head--split .lx-lede {
  justify-self: end;
}

/* Eyebrow to title is 1.4rem in every section head. An eyebrow that sits directly in a head's
   grid also gets the row gap, so its own margin makes up the difference. */
.lx-section-head > .lx-eyebrow {
  margin-bottom: -0.2rem;
}

.lx-section-head--split .lx-h2 {
  font-size: clamp(2.2rem, 4.3vw, 4.5rem) !important;
  min-width: 0;
}

.lx-section-head--stack {
  gap: 1.8rem;
}

.lx-section-head--stack .lx-h2 {
  font-size: clamp(2.3rem, 5.4vw, 5.6rem) !important;
}

.lx-section-head--stack .lx-lede {
  max-width: 60ch;
}

/* Gold italic accents are reserved for the hero, work and contact headings. */
.lx-services .lx-h2 em,
.lx-process .lx-h2 em,
.lx-faq .lx-h2 em,
.lx-journal .lx-h2 em,
.lx-proof .lx-h2 em,
.lx-corp .lx-h2 em,
.lx-h3-display em {
  color: var(--lx-ivory-2);
}

.lx-section-head--center {
  justify-items: center;
  text-align: center;
}

.lx-section-head--center .lx-eyebrow {
  justify-content: center;
}

.lx-section-foot {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.lx-section-foot--split {
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.lx-section-foot--split p {
  margin: 0;
  color: var(--lx-mute);
}

.lx-h3-display {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 3rem) !important;
}

.lx-h3-display em {
  font-family: var(--lx-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  text-transform: none;
  color: var(--lx-gold-soft);
}

/* ---------- Hero ---------- */
.lx-home > section {
  margin: 0;
}

/* Avoid a full-screen grain layer repaint over moving film on small devices. */
@media (max-width: 767px) {
  body.page-home::after { display: none; }
}

.lx-hero,
.lx-clients {
  padding-bottom: 0 !important;
}

.lx-clients {
  padding-top: 0 !important;
}

.lx-hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--lx-header-h);
  isolation: isolate;
  overflow: hidden;
  background: var(--lx-ink);
}

.lx-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.lx-hero__poster,
.lx-hero__media iframe,
.lx-hero__media video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  border: 0;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1.02);
  pointer-events: none;
}

.lx-hero__poster {
  filter: saturate(0.85);
  transition: opacity 1.4s var(--lx-ease);
}

.lx-hero__media iframe,
.lx-hero__media video {
  opacity: 0;
  transition: opacity 1.6s var(--lx-ease);
}

.lx-hero__media.video-ready iframe,
.lx-hero__media.video-ready video {
  opacity: 1;
}

.lx-hero__media.video-ready .lx-hero__poster {
  opacity: 0;
}

.lx-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 8, 7, 0.55) 0%, rgba(8, 8, 7, 0.1) 30%, rgba(8, 8, 7, 0.35) 62%, rgba(8, 8, 7, 0.96) 100%),
    linear-gradient(90deg, rgba(8, 8, 7, 0.78) 0%, rgba(8, 8, 7, 0.25) 60%, rgba(8, 8, 7, 0.1) 100%);
}

/* Self-hosted reel on phones: the centre crop puts faces and sun directly behind the copy,
   so deepen the upper-middle band that carries the H1 and lede. */
@media (max-width: 767px) {
  .lx-hero__media:has(> video) ~ .lx-hero__scrim {
    background:
      linear-gradient(180deg, rgba(8, 8, 7, 0.62) 0%, rgba(8, 8, 7, 0.5) 18%, rgba(8, 8, 7, 0.52) 40%, rgba(8, 8, 7, 0.64) 58%, rgba(8, 8, 7, 0.97) 100%),
      linear-gradient(90deg, rgba(8, 8, 7, 0.5) 0%, rgba(8, 8, 7, 0.2) 100%);
  }
}

.lx-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(1.5rem, 5vh, 4rem);
  padding-bottom: clamp(1.5rem, 3.5vh, 2.5rem);
}

.lx-hero__eyebrow {
  color: var(--lx-ivory-2);
}

.lx-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lx-gold);
}

.lx-hero__title {
  margin: 0;
  font-size: clamp(2.75rem, min(7.6vw, 11.5vh), 8.4rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.025em !important;
  max-width: 14ch;
}

.lx-hero__title em {
  font-family: var(--lx-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  text-transform: none;
  letter-spacing: -0.03em;
  color: var(--lx-gold-soft);
  padding-right: 0.08em;
}

.lx-hero__title .lx-amp {
  font-size: 0.92em;
}

.lx-hero__kicker {
  margin-top: 0.9rem;
}

.lx-hero__kicker > span {
  font-family: var(--lx-sans);
  font-stretch: 100%;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 1.4;
  color: var(--lx-ivory-2);
}

.lx-hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem 4rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
  padding-top: clamp(1.2rem, 2.5vh, 2rem);
  border-top: 1px solid var(--lx-line-2);
}

.lx-hero__lede {
  max-width: 50ch;
  margin: 0;
  color: var(--lx-ivory-2);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.7;
}

.lx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.lx-hero__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 2.5rem;
  padding-block: 1.1rem 1.4rem;
  border-top: 1px solid var(--lx-line);
  font-size: 0.875rem;
  color: var(--lx-mute);
}

.lx-hero__proof {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 44px;
  color: var(--lx-ivory-2);
  text-decoration: none;
}

.lx-hero__proof strong {
  color: var(--lx-ivory);
  font-weight: 600;
}

.lx-stars {
  color: var(--lx-gold);
  letter-spacing: 0.18em;
  font-size: 0.72rem;
}

.lx-hero__now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  margin: 0;
}

.lx-hero__now-label {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-gold);
}

.lx-hero__now a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lx-ivory);
  text-decoration: none;
}

.lx-hero__now a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  height: 1px;
  background: var(--lx-gold-line);
  transform-origin: left;
  transition: background-color 0.4s var(--lx-ease);
}

.lx-hero__now a:hover::after {
  background: var(--lx-gold);
}

.lx-hero__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  color: var(--lx-ivory-2);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.lx-hero__toggle i {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid var(--lx-line-2);
  border-radius: 50%;
}

.lx-hero__toggle i::before,
.lx-hero__toggle i::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 2px;
  height: 9px;
  background: var(--lx-ivory);
}

.lx-hero__toggle i::before { left: 11px; }
.lx-hero__toggle i::after { left: 16px; }

.lx-hero__toggle.is-paused i::before {
  left: 12px;
  top: 9px;
  width: 0;
  height: 0;
  border-left: 8px solid var(--lx-ivory);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  background: none;
}

.lx-hero__toggle.is-paused i::after {
  display: none;
}

.lx-hero__toggle:hover i {
  border-color: var(--lx-gold);
}

/* Hero media controls: luxe.js places the Sound toggle beside Pause reel; they stack on phones */
.lx-hero__controls {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem 1.6rem;
}

@media (max-width: 600px) {
  .lx-hero__controls {
    flex-direction: column;
    align-items: flex-end;
  }
}

/* ---------- Clients ---------- */
.lx-clients {
  border-top: 1px solid var(--lx-line);
  background: var(--lx-ink);
}

.lx-clients__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2rem 4rem;
  padding-block: 2.2rem;
}

.lx-clients .lx-eyebrow {
  margin: 0;
}

.lx-clients__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ivory versions of the supplied logos (logo-*-ivory.png, derived from logo-*.png: same artwork and
   proportions, no white matte fringe), so they read cleanly on the dark strip without filters. */
.lx-clients__logos img {
  display: block;
  height: 30px;
  width: auto;
  opacity: 0.86;
  transition: opacity 0.6s var(--lx-ease);
}

.lx-clients__logos li:hover img {
  opacity: 1;
}

/* A soft opacity dissolve the first time the strip is seen, each logo on its own timing.
   luxe.js adds .is-awaiting (then .is-in); without JS or with reduced motion the logos are
   simply visible and static. */
.lx-clients__logos li:nth-child(1) { --lx-t: 0.1s; --lx-d: 1.5s; }
.lx-clients__logos li:nth-child(2) { --lx-t: 0.46s; --lx-d: 1.85s; }
.lx-clients__logos li:nth-child(3) { --lx-t: 0.28s; --lx-d: 1.65s; }
.lx-clients__logos li:nth-child(4) { --lx-t: 0.64s; --lx-d: 2s; }

.lx-clients.is-awaiting .lx-clients__logos li {
  opacity: 0;
}

.lx-clients.is-awaiting.is-in .lx-clients__logos li {
  opacity: 1;
  transition: opacity var(--lx-d, 1.6s) cubic-bezier(0.33, 0, 0.2, 1) var(--lx-t, 0s);
}

/* ---------- Services index ---------- */
.lx-index-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lx-line-2);
}

.lx-index-list li {
  border-bottom: 1px solid var(--lx-line);
}

.lx-index-list a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "tag  desc go"
    "name desc go";
  grid-template-rows: min-content 1fr;
  align-items: center;
  gap: 1rem 2rem;
  padding: clamp(1.4rem, 2.4vw, 2.2rem) 0;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}

.lx-index-list a::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--lx-gutter) * -1);
  z-index: -1;
  background: var(--lx-panel);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.7s var(--lx-ease);
}

.lx-index-list a:hover::before,
.lx-index-list a:focus-visible::before {
  transform: scaleY(1);
}

.lx-index-list__name {
  font-family: var(--lx-display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--lx-ivory);
  transition: transform 0.7s var(--lx-ease), color 0.5s var(--lx-ease);
}

.lx-index-list a:hover .lx-index-list__name,
.lx-index-list a:focus-visible .lx-index-list__name {
  transform: translateX(0.6rem);
  color: var(--lx-gold-soft);
}

.lx-index-list__desc {
  max-width: 48ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--lx-mute);
}

.lx-index-list__name { grid-area: name; align-self: center; }
.lx-index-list__desc { grid-area: desc; }
.lx-index-list__go { grid-area: go; }

.lx-index-list__tag {
  grid-area: tag;
  align-self: end;
  margin-bottom: -0.4rem;
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-gold);
}

.lx-index-list__go {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1px solid var(--lx-line-2);
  border-radius: 50%;
  transition: background-color 0.5s var(--lx-ease), border-color 0.5s var(--lx-ease);
}

.lx-index-list__go::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  background: var(--lx-ivory);
  transform: translate(-50%, -50%);
}

.lx-index-list__go::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--lx-ivory);
  border-right: 1px solid var(--lx-ivory);
  transform: translate(0, -50%) rotate(45deg);
}

.lx-index-list a:hover .lx-index-list__go,
.lx-index-list a:focus-visible .lx-index-list__go {
  border-color: var(--lx-gold);
  background: var(--lx-gold);
}

.lx-index-list a:hover .lx-index-list__go::before,
.lx-index-list a:hover .lx-index-list__go::after,
.lx-index-list a:focus-visible .lx-index-list__go::before,
.lx-index-list a:focus-visible .lx-index-list__go::after {
  border-color: var(--lx-ink);
  background-color: var(--lx-ink);
}

.lx-index-list a:hover .lx-index-list__go::after,
.lx-index-list a:focus-visible .lx-index-list__go::after {
  background: none;
}

.lx-index-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 220px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(50% 0 50% 0);
  transition: opacity 0.4s var(--lx-ease), clip-path 0.8s var(--lx-ease);
  will-change: transform;
}

.lx-index-preview.is-on {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.lx-index-preview img,
.lx-index-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lx-index-preview video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s var(--lx-ease);
}

.lx-index-preview.is-video video {
  opacity: 1;
}

/* Touch screens: an inline thumbnail stands in for the hover preview. */
.lx-index-list__thumb {
  display: none;
}

.lx-index-list.has-thumbs .lx-index-list__go {
  display: none;
}

.lx-index-list.has-thumbs .lx-index-list__thumb {
  position: relative;
  grid-area: go;
  align-self: center;
  display: block;
  width: clamp(4rem, 14vw, 6.5rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--lx-panel);
  outline: 1px solid var(--lx-line);
}

.lx-index-list__thumb img,
.lx-index-list__thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lx-index-list__thumb video {
  opacity: 0;
  transition: opacity 0.4s var(--lx-ease);
}

.lx-index-list__thumb.is-playing video {
  opacity: 1;
}

/* ---------- Corporate band ---------- */
.lx-corp {
  position: relative;
  isolation: isolate;
  padding-block: var(--lx-section);
  overflow: hidden;
  border-top: 1px solid var(--lx-line);
}

.lx-corp__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.lx-corp__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) brightness(0.5);
}

.lx-corp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 8, 7, 0.96) 0%, rgba(8, 8, 7, 0.82) 45%, rgba(8, 8, 7, 0.55) 100%),
    linear-gradient(0deg, rgba(8, 8, 7, 0.9), transparent 40%);
}

.lx-corp .lx-h2 {
  max-width: 20ch;
}

.lx-corp__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--lx-line-2);
}

.lx-corp__card {
  display: grid;
  gap: 1.2rem;
  align-content: start;
  padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.2rem, 3vw, 3rem) clamp(1.8rem, 3vw, 2.8rem) 0;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.6s var(--lx-ease);
}

.lx-corp__card + .lx-corp__card {
  padding-left: clamp(1.2rem, 3vw, 3rem);
  border-left: 1px solid var(--lx-line-2);
}

.lx-corp__label {
  font-family: var(--lx-display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--lx-ivory);
}

.lx-corp__text {
  max-width: 48ch;
  color: var(--lx-ivory-2);
  line-height: 1.7;
}

.lx-corp__card:hover .lx-link::after,
.lx-corp__card:focus-visible .lx-link::after {
  transform: scaleX(1);
}

/* ---------- Process ---------- */
.lx-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lx-line-2);
}

.lx-step {
  padding: 2rem clamp(1rem, 2vw, 2rem) 0 0;
}

.lx-step + .lx-step {
  padding-left: clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--lx-line);
}

.lx-step h3 {
  margin: 0 0 1rem;
  color: var(--lx-ivory);
  font-size: 1.12rem;
  font-weight: 600;
}

.lx-step p {
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--lx-mute);
}

.lx-step ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-step ul {
  gap: 0.2rem 0.9rem;
}

.lx-step ul li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--lx-ivory-2);
}

.lx-step ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lx-gold);
}

/* ---------- Proof ---------- */
.lx-proof {
  background: var(--lx-ink-2);
}

.lx-widget {
  min-height: 120px;
}

/* Clients: a compact band. Heading beside the lede; the Elfsight logo carousel is shown
   as a slim strip (its decorative arc is cropped away, the logo row stays centred). */
#homepage-clients {
  padding-block: clamp(44px, 5vw, 76px);
}

.lx-proof__head {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "title lede";
  gap: 0.9rem clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(1.2rem, 2.2vw, 2rem);
}

.lx-proof__head .lx-eyebrow {
  grid-area: eyebrow;
  margin-bottom: 0.5rem;
}

.lx-proof__head .lx-h2 {
  grid-area: title;
  font-size: clamp(1.9rem, 3.3vw, 3.2rem) !important;
}

.lx-proof__head .lx-lede {
  grid-area: lede;
  align-self: end;
  justify-self: end;
  max-width: 40ch;
}

#homepage-clients .lx-widget {
  display: flex;
  align-items: center;
  height: clamp(176px, 17vw, 248px);
  min-height: 0;
  overflow: hidden;
}

#homepage-clients .lx-widget > * {
  flex: none;
  width: 100%;
}

/* The carousel's own background film ("Dancers Highlight", Vimeo 1071646150, set in the Elfsight
   dashboard) plays behind the logos. A restrained scrim, lighter in the middle, keeps them readable. */
#homepage-clients .es-background-overlay {
  background: linear-gradient(90deg, rgba(8, 8, 7, 0.74) 0%, rgba(8, 8, 7, 0.46) 24%, rgba(8, 8, 7, 0.46) 76%, rgba(8, 8, 7, 0.74) 100%) !important;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .lx-proof__head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "lede";
  }

  .lx-proof__head .lx-lede {
    justify-self: start;
  }
}

.lx-testimonials {
  margin-top: var(--lx-section);
  padding-top: var(--lx-section);
  border-top: 1px solid var(--lx-line);
}

.lx-testimonials .lx-section-head {
  margin-bottom: 3rem;
}

/* ---------- Journal ---------- */
.lx-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.lx-journal__empty {
  grid-column: 1 / -1;
  margin: 0;
}

.lx-post a {
  display: grid;
  gap: 1.1rem;
  color: inherit;
  text-decoration: none;
}

.lx-post__img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--lx-panel);
}

.lx-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--lx-ease);
}

.lx-post a:hover .lx-post__img img,
.lx-post a:focus-visible .lx-post__img img {
  transform: scale(1.05);
}

.lx-post__meta {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-gold);
}

.lx-post__meta time {
  color: var(--lx-mute);
}

.lx-post__title {
  margin: 0;
  color: var(--lx-ivory);
  font-size: clamp(1.08rem, 1.4vw, 1.3rem);
  font-weight: 500;
  line-height: 1.35;
}

/* ---------- FAQ ---------- */
.lx-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 3rem clamp(2rem, 6vw, 7rem);
  align-items: start;
}

.lx-faq .lx-h2 {
  font-size: clamp(2rem, 3.6vw, 3.8rem) !important;
}

.lx-faq .faq-item > p {
  max-width: 65ch;
}

.lx-faq .lx-section-head {
  min-width: 0;
  position: sticky;
  top: calc(var(--lx-header-h) + 2rem);
  margin-bottom: 0;
}

.lx-faq .faq-list {
  margin: 0;
  max-width: none;
}

/* ---------- Contact ---------- */
.lx-contact {
  padding-block: var(--lx-section);
  border-top: 1px solid var(--lx-line);
  background:
    radial-gradient(ellipse 60% 70% at 85% 0%, rgba(212, 175, 55, 0.1), transparent 70%),
    var(--lx-ink);
}

.lx-contact__title {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  font-size: clamp(2.4rem, 6.2vw, 6.6rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
}

.lx-contact__title em {
  font-family: var(--lx-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  text-transform: none;
  color: var(--lx-gold-soft);
}

.lx-contact__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--lx-line-2);
}

.lx-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.lx-contact__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
}

.lx-contact__details dt {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-gold);
}

.lx-contact__details dd {
  margin: 0;
  color: var(--lx-ivory-2);
  font-size: 1.05rem;
}

.lx-contact__details a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lx-ivory);
  text-decoration: none;
  border-bottom: 1px solid var(--lx-line-2);
  transition: border-color 0.4s var(--lx-ease);
}

.lx-contact__details a:hover {
  border-color: var(--lx-gold);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .lx-index-list a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "tag  go"
      "name go"
      "desc go";
    grid-template-rows: auto auto auto;
  }

  .lx-index-list__desc {
    max-width: 60ch;
  }


  .lx-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lx-step:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .lx-step:nth-child(n + 3) {
    margin-top: 2.5rem;
    border-top: 1px solid var(--lx-line);
  }
}

@media (max-width: 1200px) {
  .lx-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-faq .lx-section-head {
    position: static;
  }
}

@media (max-width: 900px) {
  .lx-section-head--split,
  .lx-hero__foot,
  .lx-contact__row,
  .lx-faq__grid,
  .lx-clients__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-section-head--split .lx-lede {
    justify-self: start;
  }

  .lx-faq .lx-section-head {
    position: static;
  }

  .lx-hero__bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lx-hero__now {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .lx-journal__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-corp__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-corp__card + .lx-corp__card {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--lx-line-2);
  }

  .lx-contact__details {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }
}

@media (max-width: 600px) {
  .lx-hero__title {
    font-size: clamp(1.9rem, 9.6vw, 3.2rem) !important;
    font-stretch: 108%;
  }

  .lx-hero__kicker > span {
    letter-spacing: 0.14em;
  }

  .lx-hero__actions,
  .lx-contact__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lx-hero__actions .lx-btn,
  .lx-contact__actions .lx-btn {
    width: 100%;
  }

  .lx-hero__eyebrow .lx-dot {
    display: none;
  }

  .lx-hero__now {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .lx-clients__logos img {
    height: 26px;
  }

  .lx-index-list a {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "tag"
      "name"
      "desc";
    padding: 1.5rem 0;
  }

  .lx-index-list__go {
    display: none;
  }

  .lx-index-list.has-thumbs a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "tag  go"
      "name go"
      "desc go";
    column-gap: 1rem;
  }

  .lx-index-list.has-thumbs .lx-index-list__thumb {
    align-self: start;
  }

  .lx-index-list__tag {
    font-size: 0.875rem;
  }

  .lx-index-list__name {
    font-size: 1.45rem;
  }

  .lx-index-list__desc {
    font-size: 0.92rem;
  }

  .lx-clients__logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2rem;
  }

  .lx-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-step,
  .lx-step + .lx-step {
    padding: 2rem 0 0;
    border-left: 0;
  }

  .lx-step + .lx-step {
    margin-top: 2rem;
    border-top: 1px solid var(--lx-line);
  }

  .lx-section-foot--split {
    flex-direction: column;
    align-items: stretch;
  }

  .lx-contact__title {
    font-size: clamp(2rem, 9.6vw, 3rem) !important;
  }
}

/* ---------- Selected work: mosaic captions on the homepage ---------- */
.lx-work .lx-mosaic {
  margin-top: 0.5rem;
}

.lx-tile .lx-film__cat {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-gold);
}

.lx-tile .lx-film__title {
  margin: 0;
  color: var(--lx-ivory);
  font-family: var(--lx-sans) !important;
  font-size: clamp(1.15rem, 2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lx-tile .lx-film__title em {
  font-family: var(--lx-serif);
  font-style: italic;
  color: var(--lx-gold-soft);
}

.lx-tile .lx-film__play {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 46px;
  padding: 0 1.2rem 0 0.35rem;
  border: 1px solid rgba(243, 238, 228, 0.4);
  background: rgba(8, 8, 7, 0.4);
  color: var(--lx-ivory);
  font-family: var(--lx-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.4s var(--lx-ease), transform 0.7s var(--lx-spring), background-color 0.4s var(--lx-ease);
}

.lx-tile .lx-film__play:hover,
.lx-tile .lx-film__play:focus-visible {
  border-color: var(--lx-gold);
  background: rgba(212, 175, 55, 0.14);
  transform: translateY(-2px);
}

.lx-tile .lx-film__play:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

.lx-tile .lx-film__play-icon {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--lx-gold);
  border-radius: 50%;
}

.lx-tile .lx-film__play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-left: 10px solid var(--lx-ivory);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translate(-50%, -50%);
}

.lx-tile .lx-film__play-icon--view::after {
  left: 50%;
  width: 12px;
  height: 12px;
  border: 1px solid var(--lx-ivory);
  border-radius: 50%;
  box-shadow: 5px 5px 0 -4px var(--lx-ivory);
}

.lx-still-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--lx-ivory);
  text-decoration: none;
}

.lx-still-link .lx-still__cap {
  display: grid;
  gap: 0.2rem;
}

.lx-still-link strong {
  font-family: var(--lx-sans);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.lx-still-link span span {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-gold);
}

.lx-still-link:hover strong,
.lx-still-link:focus-visible strong {
  text-decoration: underline;
  text-decoration-color: var(--lx-gold);
  text-underline-offset: 4px;
}

@media (max-width: 700px) {
  .lx-tile .lx-tile__actions {
    gap: 0.5rem 1rem;
  }

  .lx-tile .lx-film__play {
    min-height: 44px;
  }
}

.lx-tile__caption .lx-link {
  min-height: 44px;
}

/* ==========================================================================
   Featured films: the original three-video showcase (Corporate, Healthcare, Wedding).
   Footage leads: clean frames, captions and quiet controls sit below the image.
   ========================================================================== */
.lx-films {
  padding: clamp(18px, 2vw, 32px) var(--lx-gutter) clamp(40px, 4.6vw, 72px);
  background: var(--lx-ink);
  scroll-margin-top: var(--lx-header-h);
}

.lx-films__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 34px);
  max-width: 1760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.lx-films__card {
  display: flex;
  flex-direction: column;
  color: var(--lx-ivory);
}

.lx-films__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lx-panel);
}

.lx-films__media img,
.lx-films__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--lx-ease), opacity 0.8s var(--lx-ease);
}

.lx-films__media video {
  opacity: 0;
}

.lx-films__card.is-playing .lx-films__media video {
  opacity: 1;
}

.lx-films__card:hover .lx-films__media img,
.lx-films__card:hover .lx-films__media video {
  transform: scale(1.025);
}

/* The wedding master is letterboxed: crop the bars inside the frame. */
.lx-films__card[data-crop] .lx-films__media img,
.lx-films__card[data-crop] .lx-films__media video {
  transform: scale(1.32);
}

.lx-films__card[data-crop]:hover .lx-films__media img,
.lx-films__card[data-crop]:hover .lx-films__media video {
  transform: scale(1.345);
}

/* a hairline that warms to gold while the film plays */
.lx-films__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--lx-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--lx-ease);
}

.lx-films__card.is-playing .lx-films__media::after {
  transform: scaleX(1);
}

.lx-films__copy {
  padding-top: clamp(14px, 1.3vw, 20px);
}

.lx-films__meta {
  margin: 0;
}

.lx-films__title {
  font-family: var(--lx-serif);
  font-size: clamp(1.55rem, 2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--lx-ivory);
}

.lx-films__desc {
  max-width: 42ch;
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--lx-mute);
}

.lx-films__controls {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.55rem;
  margin-left: -0.6rem;
}

.lx-films__btn,
.lx-films__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.6rem;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--lx-ivory-2);
  font: 500 0.875rem/1 var(--lx-sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.35s var(--lx-ease);
}

.lx-films__btn:hover,
.lx-films__btn:focus-visible,
.lx-films__link:hover,
.lx-films__link:focus-visible {
  color: var(--lx-gold-soft);
}

.lx-films__btn--sound[aria-pressed="true"] {
  color: var(--lx-gold-soft);
}

.lx-films__link {
  margin-left: auto;
}

.lx-films__arrow {
  color: var(--lx-gold);
  transition: transform 0.5s var(--lx-spring);
}

.lx-films__link:hover .lx-films__arrow,
.lx-films__link:focus-visible .lx-films__arrow {
  transform: translateX(3px);
}

.lx-films__icon {
  position: relative;
  flex: none;
  width: 9px;
  height: 11px;
}

.lx-films__btn--play .lx-films__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.lx-films__card.is-playing .lx-films__btn--play .lx-films__icon::before {
  clip-path: polygon(0 0, 33% 0, 33% 100%, 0 100%, 0 0, 67% 0, 100% 0, 100% 100%, 67% 100%, 67% 0);
}

.lx-films__icon--sound {
  width: 13px;
}

.lx-films__icon--sound::before {
  content: "";
  position: absolute;
  inset: 1px auto 1px 0;
  width: 8px;
  background: currentColor;
  clip-path: polygon(0 30%, 40% 30%, 100% 0, 100% 100%, 40% 70%, 0 70%);
}

.lx-films__icon--sound::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 4px;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.lx-films__btn--sound[aria-pressed="true"] .lx-films__icon--sound::after {
  width: 3px;
  height: 7px;
  background: none;
  border: 1.5px solid currentColor;
  border-left: 0;
  border-radius: 0 6px 6px 0;
  transform: translateY(-50%);
}

/* Credits under a film: venue and client names in readable type, set off by a fine rule.
   They describe the wider body of work, not only the 24-second montage above them. */
.lx-films__credits {
  max-width: 48ch;
  margin-top: 0.7rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--lx-line);
}

.lx-films__credit {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--lx-ivory-2);
}

.lx-films__credit + .lx-films__credit {
  margin-top: 0.3rem;
}

.lx-films__credit-label {
  margin-right: 0.3rem;
  font-family: var(--lx-serif);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--lx-mute);
}

.lx-films__name {
  white-space: nowrap;
}

.lx-films__sep {
  padding: 0 0.45em;
  color: var(--lx-gold);
}

@media (max-width: 1100px) {
  .lx-films__desc {
    font-size: 0.9rem;
  }
}

@media (max-width: 767px) {
  .lx-films__list {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* ==========================================================================
   Marketing mixers: The Growth Table at Fogo de Chao. Five moments from the vertical (9:16)
   event reels sit side by side as tall slits. The featured moment opens to its full frame and
   the caption rail below names it and plays its full reel with sound; the others stay as
   narrower, dimmed slits. Moments are tabs (click, tap, arrow keys) once luxe.js runs.
   ========================================================================== */
.lx-mixers {
  background: var(--lx-ink);
}

.lx-mixers__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "title partner"
    "title lede";
  grid-template-rows: auto auto 1fr;
  gap: 0.9rem clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.8rem);
}

.lx-mixers__head .lx-eyebrow {
  grid-area: eyebrow;
  margin-bottom: 0.5rem;
}

.lx-mixers__head .lx-h2 {
  grid-area: title;
  font-size: clamp(2rem, 3.6vw, 3.5rem) !important;
}

.lx-mixers__head .lx-lede {
  grid-area: lede;
  align-self: end;
  justify-self: end;
  max-width: 44ch;
}

/* Partnership credit: "Partnering with" and the official Fogo de Chao wordmark (white, unaltered,
   no card). The box shares the lede's font-size and 44ch measure so both start on one edge. */
.lx-mixers__partner {
  grid-area: partner;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1rem;
  width: min(100%, 44ch);
  margin: clamp(0.2rem, 0.8vw, 0.75rem) 0 0;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
}

.lx-mixers__partner-label {
  font-family: var(--lx-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--lx-mute);
}

.lx-mixers__partner img {
  display: block;
  width: auto;
  height: clamp(19px, 1.7vw, 24px);
}

.lx-mixers__stage {
  --lx-slit-h: clamp(380px, min(44vw, 70vh), 640px);
  --lx-slit-gap: clamp(5px, 0.7vw, 10px);
}

.lx-slits {
  display: flex;
  gap: var(--lx-slit-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-slit {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  transition: flex-grow 0.85s var(--lx-ease), flex-basis 0.85s var(--lx-ease);
}

/* the featured moment shows its whole vertical frame */
.lx-slit.is-featured {
  flex: 0 0 calc(var(--lx-slit-h) * 9 / 16);
}

/* the whole slit is the control: clicks land on it, not on the footage inside */
.lx-slit__media {
  position: relative;
  height: var(--lx-slit-h);
  overflow: hidden;
  background: var(--lx-panel);
  pointer-events: none;
}

.lx-slit__media img,
.lx-slit__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lx-slit__media video {
  opacity: 0;
  transition: opacity 0.9s var(--lx-ease);
}

.lx-slit.is-playing .lx-slit__media video {
  opacity: 1;
}

/* the moments you are not watching sit back a little */
.lx-slit__media::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--lx-ink);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.6s var(--lx-ease);
}

.lx-slit.is-featured .lx-slit__media::after {
  opacity: 0;
}

/* a gold marker under the featured moment, drawn on the caption rail's hairline */
.lx-slit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--lx-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s var(--lx-ease);
}

.lx-slit.is-featured::after {
  transform: scaleX(1);
}

.lx-slits[role="tablist"] .lx-slit {
  cursor: pointer;
}

.lx-slits[role="tablist"] .lx-slit.is-featured {
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .lx-slits[role="tablist"] .lx-slit:not(.is-featured):hover .lx-slit__media::after {
    opacity: 0.14;
  }
}

.lx-slit:focus-visible {
  outline: 2px solid var(--lx-ivory);
  outline-offset: 3px;
}

/* Caption rail: the featured moment, its reel, and one action */
.lx-mixers__now {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--lx-line);
}

.lx-mixers__caption {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  transition: opacity 0.3s var(--lx-ease), transform 0.3s var(--lx-ease);
}

.lx-mixers__now.is-swapping .lx-mixers__caption {
  opacity: 0;
  transform: translateY(6px);
}

.lx-mixers__moment {
  font-family: var(--lx-serif);
  font-size: clamp(1.75rem, 2.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--lx-ivory);
}

.lx-mixers__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.75rem;
  font-family: var(--lx-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--lx-mute);
}

.lx-mixers__meta .lx-dot {
  width: 4px;
  height: 4px;
}

.lx-mixers__watch {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 52px;
  margin: 0;
  padding: 0.3rem 1.35rem 0.3rem 0.35rem;
  border: 1px solid var(--lx-gold-line);
  border-radius: 0;
  background: rgba(212, 175, 55, 0.05);
  color: var(--lx-ivory);
  font-family: var(--lx-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.4s var(--lx-ease), background-color 0.4s var(--lx-ease), transform 0.7s var(--lx-spring);
}

.lx-mixers__watch:hover,
.lx-mixers__watch:focus-visible {
  border-color: var(--lx-gold);
  background-color: rgba(212, 175, 55, 0.12);
  transform: translateY(-2px);
}

.lx-mixers__watch:focus-visible {
  outline: 2px solid var(--lx-ivory);
  outline-offset: 3px;
}

.lx-mixers__watch:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

.lx-mixers__watch-icon {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--lx-gold);
  border-radius: 50%;
  transition: background-color 0.4s var(--lx-ease);
}

.lx-mixers__watch-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-left: 10px solid var(--lx-ivory);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translate(-50%, -50%);
  transition: border-left-color 0.4s var(--lx-ease);
}

.lx-mixers__watch:hover .lx-mixers__watch-icon,
.lx-mixers__watch:focus-visible .lx-mixers__watch-icon {
  background-color: var(--lx-gold);
}

.lx-mixers__watch:hover .lx-mixers__watch-icon::after,
.lx-mixers__watch:focus-visible .lx-mixers__watch-icon::after {
  border-left-color: var(--lx-ink);
}

/* Foot: every reel by name and length, then the related services */
.lx-mixers__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.lx-mixers__reels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.6rem;
}

.lx-mixers__reels-label {
  margin-right: 0.2rem;
  font-family: var(--lx-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-mute);
}

.lx-mixers__reels button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lx-ivory-2);
  font-family: var(--lx-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color 0.35s var(--lx-ease);
}

.lx-mixers__reels button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: var(--lx-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--lx-ease);
}

.lx-mixers__reels button:hover,
.lx-mixers__reels button:focus-visible,
.lx-mixers__reels button.is-current {
  color: var(--lx-ivory);
}

.lx-mixers__reels button:hover::after,
.lx-mixers__reels button:focus-visible::after,
.lx-mixers__reels button.is-current::after {
  transform: scaleX(1);
}

.lx-mixers__reels button:focus-visible {
  outline: 2px solid var(--lx-ivory);
  outline-offset: 3px;
}

.lx-mixers__len {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--lx-mute);
}

.lx-mixers__foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font: 500 0.88rem/1 var(--lx-sans);
  color: var(--lx-ivory-2);
  text-decoration: none;
  transition: color 0.35s var(--lx-ease);
}

.lx-mixers__foot a span {
  color: var(--lx-gold);
}

.lx-mixers__foot a:hover,
.lx-mixers__foot a:focus-visible {
  color: var(--lx-gold-soft);
}

.lx-mixers__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
}

/* Portrait reels in the shared player: size the dialog to the video, not to a wide frame */
.lx-player.is-portrait {
  width: fit-content;
}

.lx-player.is-portrait video {
  width: auto;
  height: min(calc(92vh - 4.5rem), calc((92vw) * 16 / 9));
  max-width: 92vw;
  aspect-ratio: 9 / 16;
}

@media (max-width: 900px) {
  .lx-mixers__head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "partner"
      "lede";
    grid-template-rows: none;
  }

  .lx-mixers__head .lx-lede {
    justify-self: start;
  }

  .lx-mixers__partner {
    justify-self: start;
    width: auto;
    margin: 0.2rem 0 0.35rem;
  }
}

/* Phones: the whole strip stays in view; the featured frame leads and the other moments are slivers */
@media (max-width: 767px) {
  .lx-mixers__stage {
    --lx-slit-h: min(94vw, 420px, 62vh);
    --lx-slit-gap: 5px;
  }

  .lx-mixers__now {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }

  .lx-mixers__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .lx-mixers__reels {
    gap: 0 1.35rem;
  }

  .lx-mixers__reels-label {
    flex-basis: 100%;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lx-slit,
  .lx-slit::after,
  .lx-slit__media::after,
  .lx-slit__media video,
  .lx-mixers__caption,
  .lx-mixers__watch,
  .lx-mixers__watch-icon,
  .lx-mixers__watch-icon::after,
  .lx-mixers__reels button::after {
    transition: none;
  }

  .lx-mixers__watch:hover,
  .lx-mixers__watch:focus-visible,
  .lx-mixers__watch:active {
    transform: none;
  }
}

/* ==========================================================================
   Selected work: social films, then photography and web design
   ========================================================================== */
.lx-show {
  display: grid;
  gap: clamp(20px, 2.2vw, 32px);
}

.lx-show__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  margin: clamp(18px, 2.4vw, 36px) 0 0;
  font-family: var(--lx-serif);
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  font-weight: 400;
  color: var(--lx-ivory);
}

.lx-show__rule {
  flex: 1;
  min-width: 2rem;
  height: 1px;
  align-self: center;
  background: var(--lx-line);
}

.lx-show__note {
  font-family: var(--lx-sans);
  font-size: 0.875rem;
  color: var(--lx-mute);
  text-decoration: none;
}

a.lx-show__note {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

a.lx-show__note:hover,
a.lx-show__note:focus-visible {
  color: var(--lx-gold-soft);
}

/* Lead film: wide frame, caption below */
.lx-feature {
  margin: 0;
}

.lx-feature__media {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--lx-panel);
}

.lx-feature__media img,
.lx-feature__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the commercial master carries 22 px letterbox bars (1280x676 active): scale them out */
.lx-feature__media img,
.lx-feature__media video {
  transform: scale(1.07);
}

.lx-feature__media video {
  opacity: 0;
  transition: opacity 0.9s var(--lx-ease);
}

.lx-feature.is-playing .lx-feature__media video {
  opacity: 1;
}

.lx-feature__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-top: clamp(14px, 1.4vw, 22px);
}

.lx-show .lx-feature__title {
  margin: 0;
  font-family: var(--lx-serif) !important;
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--lx-ivory);
}

.lx-feature__desc {
  max-width: 56ch;
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--lx-mute);
}

.lx-feature__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.4rem;
}

.lx-feature__play,
.lx-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lx-ivory);
  font: 500 0.88rem/1 var(--lx-sans);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.35s var(--lx-ease);
}

.lx-feature__play::before {
  content: "";
  width: 9px;
  height: 11px;
  background: var(--lx-gold);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.lx-feature__link {
  color: var(--lx-mute);
}

.lx-feature__link span {
  color: var(--lx-gold);
}

.lx-feature__play:hover,
.lx-feature__play:focus-visible,
.lx-feature__link:hover,
.lx-feature__link:focus-visible {
  color: var(--lx-gold-soft);
}

@media (max-width: 767px) {
  .lx-feature__media {
    aspect-ratio: 16 / 9;
  }
}

/* Social films */
.lx-social {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
}

.lx-social__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 1.4vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-social__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--lx-line-2);
  transition: border-color 0.5s var(--lx-ease);
}

.lx-social__card:hover,
.lx-social__card:focus-within {
  border-top-color: var(--lx-gold);
}

.lx-social__frame {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.lx-social__frame.is-live {
  display: block;
  order: 10;
  height: clamp(560px, 46vw, 680px);
  margin-top: 1rem;
  background: #fff;
}

.lx-social__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.lx-social__glyph {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.25px solid var(--lx-mute);
  border-radius: 5px;
}

.lx-social__glyph::before {
  content: "";
  position: absolute;
  inset: 3.5px;
  border: 1.25px solid var(--lx-mute);
  border-radius: 50%;
}

.lx-social__glyph::after {
  display: none;
}

.lx-social__handle {
  font-size: 0.875rem;
  color: var(--lx-mute);
}

.lx-social__meta {
  margin: 1.4rem 0 0.35rem;
  font-size: 0.875rem;
  color: var(--lx-gold-soft);
}

.lx-social .lx-social__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  line-height: 1.15;
  color: var(--lx-ivory);
}

.lx-social__desc {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--lx-mute);
}

.lx-social__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  margin-top: auto;
  padding-top: 0.9rem;
}

.lx-social__watch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lx-ivory);
  font: 500 0.875rem/1 var(--lx-sans);
  cursor: pointer;
  transition: color 0.35s var(--lx-ease);
}

.lx-social__watch::before {
  content: "";
  width: 8px;
  height: 10px;
  background: var(--lx-gold);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.lx-social__watch:hover,
.lx-social__watch:focus-visible {
  color: var(--lx-gold-soft);
}

.lx-social__watch[hidden] {
  display: none;
}

.lx-social__open {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 0.875rem/1 var(--lx-sans);
  color: var(--lx-mute);
  text-decoration: underline;
  text-decoration-color: var(--lx-line-2);
  text-underline-offset: 4px;
  transition: color 0.35s var(--lx-ease);
}

.lx-social__open:hover,
.lx-social__open:focus-visible {
  color: var(--lx-gold-soft);
  text-decoration-color: currentColor;
}

/* Photography and web design: an editorial band */
.lx-show__stills {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr 1.05fr 0.8fr;
  grid-template-areas:
    "a b d web"
    "a c d web";
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-show__still {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lx-show__still--a { grid-area: a; }
.lx-show__still--b { grid-area: b; }
.lx-show__still--c { grid-area: c; }
.lx-show__still--d { grid-area: d; }
.lx-show__still--web { grid-area: web; }

.lx-show__still-open,
.lx-show__device {
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--lx-panel);
  cursor: zoom-in;
}

.lx-show__still-open img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--lx-ease);
}

.lx-show__still--a .lx-show__still-open,
.lx-show__still--d .lx-show__still-open {
  aspect-ratio: 3 / 4.2;
}

.lx-show__still--b .lx-show__still-open,
.lx-show__still--c .lx-show__still-open {
  aspect-ratio: 4 / 3;
}

.lx-show__still-open:hover img,
.lx-show__still-open:focus-visible img {
  transform: scale(1.04);
}

.lx-show__device {
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 10%;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(212, 175, 55, 0.12), transparent 70%),
    var(--lx-panel);
}

.lx-show__device-screen {
  display: block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 720 / 1350;
  overflow: hidden;
  border: 6px solid #1f1e1b;
  border-radius: 26px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--lx-line-2);
  transition: transform 0.8s var(--lx-spring);
}

.lx-show__device-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.lx-show__device:hover .lx-show__device-screen,
.lx-show__device:focus-visible .lx-show__device-screen {
  transform: translateY(-6px);
}

.lx-show__still-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.6rem;
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  color: var(--lx-mute);
}

.lx-show__still-cap strong {
  font-weight: 500;
  color: var(--lx-ivory);
}

.lx-show__still-cap a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--lx-mute);
  text-decoration: underline;
  text-decoration-color: var(--lx-line-2);
  text-underline-offset: 4px;
}

.lx-show__still-cap a:hover,
.lx-show__still-cap a:focus-visible {
  color: var(--lx-gold-soft);
  text-decoration-color: currentColor;
}

@media (max-width: 1100px) {
  .lx-show__stills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a d"
      "b c"
      "web web";
  }

  .lx-show__device {
    padding: 28px;
  }

  .lx-show__device-screen {
    max-width: 200px;
  }
}

@media (max-width: 900px) {
  .lx-social__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 78%);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .lx-social__card {
    scroll-snap-align: start;
  }

  .lx-social__frame.is-live {
    height: 600px;
  }


}

@media (max-width: 600px) {
  .lx-show__stills {
    gap: 10px;
  }

  .lx-show__still-cap {
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lx-films__media img,
  .lx-films__media video,
  .lx-show__still-open img,
  .lx-show__device-screen {
    transition: none;
  }
}