/* ==========================================================================
   Lynx Bust Odour case study. Loaded only on the Lynx Bust Odour page.
   Every rule is scoped to .lx / lx-*. Built on the Rexona Rivals page pattern.
   Colours come from the site theme variables (--bg, --fg, --fg-2, --fg-3,
   --line), so light and dark both work; the opening stage and video controls
   are fixed light-on-black, as the artwork is made for black.
   ========================================================================== */
.lx {
  --lx-cols: repeat(12, minmax(0, 1fr));
  --lx-gap: clamp(1.25rem, 3vw, 3rem);
}
.lx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lx svg { display: block; }
.lx img { display: block; width: 100%; height: auto; }

/* Reveal */
.js .lx [data-lx-in] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.js .lx [data-lx-in].is-in { opacity: 1; transform: none; }

/* ---------- Opening: the hero artwork full width on black, headline over its left side ----------
   The artwork's edges are pure black, so it blends into the stage. It is sized to the
   viewport height (never taller than the screen), capped at 120rem so the 1616px master
   is not stretched on ultrawide screens, and set so the can sits centre-right (~58%);
   anything past the right edge is cropped. The stage stays black in the light theme too. */
.lx-open { background: #000; color: #F4F3EF; }
.lx-open__top { padding-top: clamp(1rem, 2vw, 1.75rem); }
.lx-open .case__back { color: rgba(244, 243, 239, .72); }
.lx-open .case__back:hover { color: #F4F3EF; }
.lx-stage { --w: min(116vw, (100svh - 7rem) * 1.661, 120rem); position: relative; height: calc(var(--w) * .6021); overflow: hidden; }
.lx-stage__img { position: absolute; top: 0; left: calc(58% - var(--w) / 2); width: var(--w); }
.lx-stage__img img { display: block; width: 100%; height: auto; }
.lx-stage__type { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-bottom: 4%; pointer-events: none; }
.lx-stage__type a { pointer-events: auto; }
.lx-open__brand { color: rgba(244, 243, 239, .72); }
/* Fixed size from ~1550px up: it never shrinks as the screen widens. */
.lx-title { margin: .9rem 0 0; font: 700 clamp(3.5rem, 1.4rem + 5vw, 6.25rem)/.95 var(--font-head); letter-spacing: .01em; color: #F4F3EF; text-shadow: 0 0 2.5rem rgba(0, 0, 0, .55); }
.lx-line { max-width: 22rem; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); font: 400 clamp(1.125rem, .95rem + .6vw, 1.5rem)/1.35 var(--font-head); color: rgba(244, 243, 239, .85); text-shadow: 0 0 1.5rem rgba(0, 0, 0, .7); text-wrap: pretty; }

/* ---------- Overview ---------- */
.lx-intro { display: grid; grid-template-columns: var(--lx-cols); column-gap: var(--lx-gap); row-gap: 2rem; padding-top: clamp(4rem, 2.5rem + 5vw, 9rem); }
.lx-lede { grid-column: 1 / span 7; font: 400 clamp(1.5rem, 1.1rem + 1.25vw, 2.25rem)/1.25 var(--font-head); letter-spacing: 0; text-wrap: pretty; }
.lx-intro__body { grid-column: 8 / span 5; align-self: start; padding-top: .3em; font-size: clamp(1.0625rem, .92rem + .4vw, 1.25rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.lx-intro__body p + p { margin-top: 1em; }
.lx-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem var(--lx-gap); margin: clamp(1rem, .5rem + 2vw, 3rem) 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
[data-theme="dark"] .lx-facts, :root:not([data-theme]) .lx-facts { border-top-color: #2a2a2a; }
.lx-facts dt { font: 500 .75rem/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.lx-facts dd { margin: .45rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--fg); }

/* ---------- Sections ---------- */
.lx-sec { padding-top: clamp(5rem, 3rem + 7vw, 11rem); }
.lx-head { display: grid; grid-template-columns: var(--lx-cols); column-gap: var(--lx-gap); row-gap: 1rem; align-items: end; margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 4rem); }
.lx-h2 { grid-column: 1 / span 7; font: 700 clamp(2.25rem, 1.3rem + 3.8vw, 5.25rem)/1 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.lx-sub { grid-column: 9 / span 4; font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }

.lx-fig { margin: 0; min-width: 0; }
.lx-cap { display: flex; flex-wrap: wrap; gap: .15rem .5rem; margin-top: .75rem; font-size: .8125rem; line-height: 1.45; letter-spacing: .01em; color: var(--fg-3); }
.lx-cap span { color: var(--fg-2); font-weight: 500; }

/* Rows of mixed shapes at one shared height: each figure grows by its aspect ratio. */
.lx-row { display: flex; align-items: flex-start; gap: clamp(1rem, 2vw, 2rem); }
.lx-row > .lx-fig { flex: var(--ar, 1) 1 0; }
.lx-row--wide { display: block; margin-top: clamp(3rem, 2rem + 4vw, 7rem); }

/* ---------- Television ---------- */
.lx-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: 2px; }
.lx-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.lx-player:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.lx-player__big { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1rem; padding: clamp(1rem, 3vw, 2.5rem); border: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 55%); color: #F4F3EF; text-align: left; cursor: pointer; }
.lx-player__ring { display: grid; place-items: center; flex: none; width: clamp(3.5rem, 2.75rem + 2.5vw, 5.5rem); aspect-ratio: 1; border: 1.5px solid rgba(244, 243, 239, .85); border-radius: 999px; background: rgba(0, 0, 0, .25); transition: background-color .2s ease, border-color .2s ease, transform .3s var(--ease-out); }
.lx-player__ring svg { width: 34%; height: 34%; margin-left: 6%; }
.lx-player__big:hover .lx-player__ring, .lx-player__big:focus-visible .lx-player__ring { background: var(--orange); border-color: var(--orange); transform: scale(1.04); }
.lx-player__big:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.lx-player__now { padding-bottom: .35rem; font: 700 clamp(1.125rem, .95rem + .8vw, 1.75rem)/1.1 var(--font-head); letter-spacing: .005em; }
.lx-player[data-state="playing"] .lx-player__big, .lx-player[data-state="paused"] .lx-player__big { display: none; }
.lx-player__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: 2.5rem clamp(.5rem, 1.5vw, 1.25rem) clamp(.4rem, 1vw, .9rem); background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.lx-player[data-state="paused"] .lx-player__bar, .lx-player.is-awake .lx-player__bar, .lx-player:focus-within:not([data-state="idle"]) .lx-player__bar { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.lx-player[data-state="idle"] .lx-player__bar { display: none; }
.lx-ctl { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: #F4F3EF; cursor: pointer; transition: color .15s ease; }
.lx-ctl svg { width: 20px; height: 20px; }
.lx-ctl:hover { color: var(--orange); }
.lx-ctl:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.lx-ctl .i-pause, .lx-ctl .i-mute { display: none; }
.lx-player[data-state="playing"] [data-toggle] .i-play { display: none; }
.lx-player[data-state="playing"] [data-toggle] .i-pause { display: block; }
.lx-player.is-muted [data-mute] .i-vol { display: none; }
.lx-player.is-muted [data-mute] .i-mute { display: block; }
.lx-player__time { flex: none; min-width: 2.6em; font: 500 .8125rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: rgba(244, 243, 239, .85); text-align: center; }
.lx-player__seek { --p: 0%; flex: 1; min-width: 3rem; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.lx-player__seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--orange) var(--p), rgba(244, 243, 239, .3) var(--p)); }
.lx-player__seek::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--orange) var(--p), rgba(244, 243, 239, .3) var(--p)); }
.lx-player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border: 0; border-radius: 999px; background: #F4F3EF; }
.lx-player__seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 999px; background: #F4F3EF; }
.lx-player__seek:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }



/* Muted loops */
.lx-loop { position: relative; overflow: hidden; background: #0b0b0b; }
.lx-loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-loop__btn { position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(244, 243, 239, .45); border-radius: 999px; background: rgba(0, 0, 0, .45); color: #F4F3EF; cursor: pointer; opacity: 0; transition: opacity .2s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lx-loop__btn svg { width: 15px; height: 15px; }
.lx-loop__btn .i-play, .lx-loop__btn[aria-pressed="true"] .i-pause { display: none; }
.lx-loop__btn[aria-pressed="true"] .i-play { display: block; }
.lx-loop:hover .lx-loop__btn, .lx-loop__btn:focus-visible, .lx-loop__btn[aria-pressed="true"] { opacity: 1; }
.lx-loop__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (hover: none) { .lx-loop__btn { opacity: .8; } }

/* ---------- Outdoor ---------- */
.lx-bleed .lx-cap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Legal note ---------- */
.lx-legal { margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 1rem; max-width: 46rem; border-top: 1px solid var(--line); font-size: .75rem; line-height: 1.55; letter-spacing: .01em; color: var(--fg-3); }
[data-theme="dark"] .lx-legal, :root:not([data-theme]) .lx-legal { border-top-color: #2a2a2a; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .lx-lede { grid-column: 1 / -1; }
  .lx-h2 { grid-column: 1 / -1; }
  .lx-sub { grid-column: 1 / span 9; }
  .lx-intro__body { grid-column: 1 / span 9; }
}

/* ---------- Phone: art-directed, not a shrunk desktop ---------- */
@media (max-width: 760px) {

  .lx-intro { padding-top: 3.5rem; row-gap: 1.5rem; }
  .lx-lede { font-size: 1.375rem; line-height: 1.3; }
  .lx-intro__body { font-size: 1.0625rem; padding-top: 0; }
  .lx-intro__body { grid-column: 1 / -1; }
  .lx-facts { margin-top: 1rem; }

  .lx-sec { padding-top: 4.5rem; }
  .lx-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 1.5rem; row-gap: .6rem; }
  .lx-h2, .lx-sub { grid-column: 1; }
  .lx-h2 { font-size: clamp(2rem, 9vw, 2.75rem); }

  /* Television: the player runs edge to edge. */
  .lx-player { border-radius: 0; }
  .lx-player__time[data-dur] { display: none; }

  /* Mixed shapes share one height. */
  .lx-row { gap: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .lx [data-lx-in] { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   Lynx Bust Odour layout
   ========================================================================== */
.lx-intro { padding-top: clamp(4.5rem, 3rem + 5vw, 9rem); }
.lx-facts { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.lx-facts > div { grid-column: span 3; }
.lx-facts > .lx-facts__wide { grid-column: span 6; }
.lx-facts dd { max-width: 40rem; }

.lx-player__len { margin-left: .5rem; font: 500 .8125rem/1 var(--font-body); color: rgba(244, 243, 239, .72); }

/* Television: the film full width, two short loops beneath at one height */
.lx-row--tv { margin-top: clamp(1rem, .5rem + 1.5vw, 2rem); }

/* Outdoor: portrait screen and citylight mockup at one shared height */
.lx-row--ooh { justify-content: center; }
.lx-row--ooh.wrap { max-width: calc(70rem + 2 * var(--gutter)); }

.lx-end { padding-bottom: clamp(4rem, 3rem + 4vw, 8rem); }
.lx-end .lx-legal { margin-top: 0; }

@media (max-width: 1100px) {
  .lx-facts > div { grid-column: span 6; }
  .lx-facts > .lx-facts__wide { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .lx-facts { grid-template-columns: 1fr; }
  .lx-facts > div, .lx-facts > .lx-facts__wide { grid-column: 1; }
  .lx-tv > .lx-player-wrap { padding-inline: 0; }
  .lx-row--tv { flex-direction: column; gap: 1.75rem; margin-top: 1.75rem; }
  .lx-row--tv > .lx-fig { flex: none; width: 100%; }
  .lx-row--ooh { flex-direction: column; align-items: center; gap: 2rem; }
  .lx-row--ooh > .lx-fig { flex: none; width: 100%; }
  .lx-row--ooh > .lx-fig:first-child { width: 72%; }
}

/* Hero, tablet and phone: headline above, artwork below cropped in on the can. */
@media (max-width: 900px) {
  .lx-stage { --w: 190vw; display: flex; flex-direction: column; height: auto; overflow: hidden; }
  .lx-stage__type { order: 1; height: auto; padding-top: 1.5rem; padding-bottom: 0; }
  .lx-stage__img { position: relative; order: 2; left: calc(50% - var(--w) / 2); margin-top: .5rem; }
  .lx-title { font-size: clamp(2.75rem, 13.5vw, 5rem); text-shadow: none; }
  .lx-line { max-width: 30rem; font-size: 1.1875rem; text-shadow: none; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .lx-stage { --w: 130vw; }
}