/* ============================================================
   The Red Billboard — VIP portrait landing page
   ADDITIVE layer over styles.css. Loads second.

   Every existing :root token is left untouched. This file adds a
   scoped --vip-* group and .vip-* components only, so the landing
   page can later fold into the full site without a token merge.
   See DESIGN.md and THE-RED-BILLBOARD.md section 4.
   ============================================================ */

:root {
  /* ── The Red Billboard signal colour ──
     "Red" is the product name and the billboard partner's identity, so
     it is not optional. It is confined to surfaces where The Red
     Billboard itself is invoked: the board, and the primary CTA.

     CONTRAST, VERIFIED:
       --fg  #f4f1ea on --vip-red      6.68:1  AA body  ✓
       --vip-red on --bg #0e0d0a       2.58:1  FAILS — fill only, never text
     Rule: red is a FILL. Gold remains the only accent used as text
     colour on dark. Do not set colour:var(--vip-red) on --bg.
     If red is ever needed as text on ivory, use #8f0f18 (6.4:1 on
     --paper); --vip-red itself does not clear AA there either. */
  --vip-red: #a8121c;
  --vip-red-deep: #7d0d15;
  --vip-red-glow: rgba(168, 18, 28, 0.34);

  /* Warm mat border for light-ground photographs sitting on ivory.
     The studio backgrounds are cool lavender-grey; --paper is warm ivory.
     Butted directly together the grey reads green, so each light image
     gets a warm transition zone — which is also the "physical print on
     photo paper" idea from PRODUCT.md. */
  --vip-mat: #f7f3e9;
  --vip-mat-edge: rgba(27, 24, 19, 0.16);
}

/* ============================================================
   Page-level: Spanish-first
   ============================================================ */
.vip-page { background: var(--bg); }

/* ============================================================
   Navigation — trimmed for a single-purpose landing page.
   No links to the full site: it is not published yet.
   ============================================================ */
.vip-nav .nav-links { gap: clamp(14px, 2vw, 32px); }

/* Logo up from styles.css's 76px (56px scrolled) — it was getting lost
   against a full-bleed photographic hero, which the main site doesn't have.
   Scoped to .vip-nav so home.html keeps its own sizing. DESIGN.md's
   footer > about > header hierarchy still holds: the footer mark is
   clamp(150px, 18vw, 220px). */
.vip-nav .nav-logo-wrapper { height: 104px; }
.vip-nav.scrolled .nav-logo-wrapper { height: 68px; }

@media (max-width: 768px) {
  .vip-nav .nav-logo-wrapper { height: 84px; }
  .vip-nav.scrolled .nav-logo-wrapper { height: 60px; }
}
.vip-nav .nav-cta {
  border-color: var(--vip-red);
  color: var(--fg);
  background: var(--vip-red);
}
.vip-nav .nav-cta:hover {
  background: var(--vip-red-deep);
  border-color: var(--vip-red-deep);
  box-shadow: 0 6px 24px var(--vip-red-glow);
}

/* ============================================================
   HERO — the billboard
   ============================================================ */
/* Full-bleed: the plate IS the hero, and the copy floats in its empty
   sky. The earlier version put the board in one grid column with copy
   beside it, which wasted the plate's own composition — the dark
   upper-left quadrant was generated as negative space for exactly this. */
.vip-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(110px, 14vh, 170px) clamp(20px, 5vw, 72px) clamp(48px, 7vh, 84px);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

/* picture is display:contents from styles.css, so the img carries the box. */
.vip-hero__plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased right and slightly up: keeps the board in frame on wide
     viewports while opening the left side for type. */
  object-position: 62% 42%;
  z-index: 0;
}

/* Legibility scrim. Not decoration — the sky is dark enough on its own at
   1536px, but cover-cropping at other aspect ratios can slide the lit city
   under the copy, and this guarantees the ratio holds regardless. */
.vip-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(14, 13, 10, 0.94) 0%,
      rgba(14, 13, 10, 0.80) 24%,
      rgba(14, 13, 10, 0.34) 46%,
      rgba(14, 13, 10, 0) 64%
    ),
    linear-gradient(to bottom, rgba(14, 13, 10, 0.55) 0%, transparent 22%),
    linear-gradient(to top, var(--bg) 0%, rgba(14, 13, 10, 0.45) 9%, transparent 26%);
}

/* NOT capped to --maxw and centred like the other sections. The hero is
   full-bleed and the board sits right of centre in the plate, so a centred
   1320px container left a dead gutter before the copy even started and
   pushed the text toward the artwork. Left-aligned to the hero's own
   padding, the copy lands in the plate's empty sky. */
.vip-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ── Hero copy ── */
.vip-hero__copy { max-width: 33em; }

.vip-hero__title {
  /* The full approved line is 54 characters. At the 96px cap in
     DESIGN.md section 4 it wraps to four lines and shouts, so it is
     split across eyebrow / title / sub and the title sits below cap. */
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.06;
  margin-bottom: 20px;
}
.vip-hero__title em { font-style: italic; color: var(--accent); }

.vip-hero__sub {
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 36px;
}

.vip-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ── Primary CTA: the one place red carries weight ── */
.vip-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 34px;
  min-height: 52px;
  background: var(--vip-red);
  border: 1px solid var(--vip-red);
  border-radius: 9999px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: var(--transition-tactile);
  box-shadow: 0 10px 34px var(--vip-red-glow);
}
.vip-cta:hover {
  background: var(--vip-red-deep);
  border-color: var(--vip-red-deep);
  transform: scale(0.98);
}
.vip-cta:active { transform: scale(0.95) !important; transition: transform 0.1s var(--ease-out); }

.vip-cta--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--muted);
  box-shadow: none;
}
.vip-cta--ghost:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Ghost CTA on an ivory section ──
   The gallery expand button sits on --paper, where the dark-canvas colours
   above are unreadable: --muted is about 2.2:1 on ivory and --accent is
   2.9:1. DESIGN.md §7 mandates --accent-ink (#6f5220, 5.9:1) for gold on
   ivory, and this button was violating that rule. */
.section--light .vip-cta--ghost {
  color: var(--accent-ink);
  border-color: rgba(111, 82, 32, 0.45);
}
.section--light .vip-cta--ghost:hover {
  background: rgba(111, 82, 32, 0.07);
  border-color: var(--accent-ink);
  color: var(--ink);
}

/* ============================================================
   Three-beat explainer — answers the question the hero provokes
   ============================================================ */
.vip-beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 60px);
}
.vip-beat { position: relative; padding-top: 26px; }
.vip-beat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 1px;
  background: var(--accent);
}
.vip-beat__label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 14px;
}
.vip-beat__title {
  font-size: clamp(24px, 2.4vw, 34px);
  margin-bottom: 12px;
}
.vip-beat__text {
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.8;
}

/* ============================================================
   Lee — ivory editorial
   ============================================================ */
.vip-lee {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(38px, 6vw, 90px);
  align-items: center;
}
.vip-lee__media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-paper);
  background: var(--paper-2);
}
.vip-lee__media img { width: 100%; height: auto; }

.vip-lee__quote {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.34;
  color: var(--ink);
  margin-bottom: 28px;
  text-wrap: balance;
}
/* --ink-muted (4.84:1 on --paper) is DESIGN.md's *secondary* text colour and
   it washed out here: this is now six paragraphs of primary long-form reading
   at weight 300. Switched to --ink, the designated text colour on ivory, at
   14.6:1. No new token — the contract already has the right value.
   Hierarchy against the pull-quote still holds: that is differentiated by
   size, serif and italic, not by being darker. */
.vip-lee__body {
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.85;
  margin-bottom: 18px;
}
.vip-lee__sign {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent-ink);
}

/* ============================================================
   Gallery intro copy (Lee's own words)
   ============================================================ */

/* Lead line — brighter than --muted body so it lands as a statement, but
   still body-weight, not a second heading competing with the section h2. */
.vip-lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 400;
  color: var(--fg);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* styles.css .section-body carries no bottom margin — it was only ever used
   once per section — so consecutive paragraphs ran together as one block. */
.section-body + .section-body { margin-top: 16px; }

/* Closing beat, set in the display serif so it reads as a turn rather than
   more body copy. Gold on dark is 8:1, well clear of AA. */
.vip-closer {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 300;
  font-style: italic;
  color: var(--accent);
  line-height: 1.35;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-wrap: balance;
}

/* ============================================================
   Galleries
   ============================================================ */
.vip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}
.vip-grid--light { grid-template-columns: repeat(4, 1fr); }

.vip-shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 2 / 3;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.vip-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.94);
  transition: filter 0.6s var(--ease-out);
}
/* No direct <img> scale on hover — lift the wrapper (DESIGN.md section 12). */
.vip-shot:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.vip-shot:hover img { filter: brightness(1.02); }
.vip-shot:active { transform: scale(0.98); transition: transform 0.1s var(--ease-out); }

.vip-shot--tall { aspect-ratio: 2 / 3; grid-row: span 2; }

/* Warm mat for light-ground photographs on ivory */
.vip-grid--light .vip-shot {
  background: var(--vip-mat);
  padding: clamp(8px, 0.9vw, 14px);
  box-shadow: var(--shadow-paper);
  border: 1px solid var(--vip-mat-edge);
}
.vip-grid--light .vip-shot img { border-radius: 1px; filter: none; }
.vip-grid--light .vip-shot:hover { box-shadow: var(--shadow-paper-lift); }

.vip-gallery-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(38px, 5vw, 64px);
}

/* Expanded set — collapsed by default, no layout cost until opened */
.vip-more[hidden] { display: none; }
.vip-more {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(24px, 3vw, 40px);
}

/* ============================================================
   Thesis heading — Lee's own line, and the longest on the page.
   The default .section-heading cap of 72px would set a 100-character
   statement at billboard scale; this holds it as an editorial
   statement instead of a shout, and gives it room past the 760px
   .section-header ceiling.
   ============================================================ */
.vip-thesis {
  font-size: clamp(25px, 3.1vw, 44px);
  line-height: 1.24;
  max-width: 15em;
}
.section-header:has(.vip-thesis) { max-width: 1000px; }

/* ============================================================
   El Paquete Gold
   ============================================================ */
.vip-exp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
}
.vip-exp__item {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card), var(--inner-sheen);
  transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.vip-exp__item:hover { box-shadow: var(--shadow-lift), var(--inner-sheen); transform: translateY(-3px); }
.vip-exp__item--wide { grid-column: span 3; }

.vip-exp__label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 16px;
}
.vip-exp__title { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 14px; }
.vip-exp__text { font-size: 15px; font-weight: 300; color: var(--muted); line-height: 1.8; }

/* Board facts as an editorial hairline strip.
   NOT a big-number metric grid — DESIGN.md section 12 bans those. */
.vip-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.vip-facts__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--border);
}
.vip-facts__item:first-child { border-left: none; padding-left: 0; }
.vip-facts__k {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  color: var(--fg);
  white-space: nowrap;
}
.vip-facts__v {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* ============================================================
   Lead form
   ============================================================ */
.vip-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.vip-form-core {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(24px, 3.4vw, 44px);
  box-shadow: var(--inner-sheen);
}
.vip-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vip-form textarea.text-input { resize: vertical; min-height: 92px; line-height: 1.7; }
.vip-form__note {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 22px;
}
.vip-form__actions { margin-top: 30px; }
.vip-form__actions .vip-cta { width: 100%; }

/* ── WhatsApp alternative ──
   Deliberately NOT WhatsApp green: it would fight the warm-black and gold
   canvas, and DESIGN.md §7 rules out system green. The glyph carries the
   recognition, the brand carries the styling. Placed under the form because
   in Puerto Rico people message rather than fill forms — and it works inside
   the Instagram in-app browser, which is exactly where mailto fails. */
.vip-alt {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.vip-alt__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.vip-cta--wa {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--fg);
  box-shadow: none;
  gap: 12px;
}
.vip-cta--wa svg {
  width: 19px;
  height: 19px;
  fill: var(--accent);
  flex: 0 0 auto;
  transition: fill 0.2s var(--ease-out);
}
.vip-cta--wa:hover {
  background: rgba(198, 161, 91, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.vip-cta--wa:hover svg { fill: var(--accent); }

.vip-status {
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--accent);
}
.vip-status:empty { display: none; }

/* ============================================================
   Lightbox — accessible dialog (DESIGN.md section 9)
   ============================================================ */
.vip-lb {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 60px);
  background: rgba(8, 7, 5, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease-out), visibility 0.22s var(--ease-out);
}
.vip-lb.open { opacity: 1; visibility: visible; }

.vip-lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: var(--shadow-lift);
  /* Never animate from scale(0) — start close and settle. */
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.24s var(--ease-out), opacity 0.22s var(--ease-out), filter 0.2s var(--ease-out);
}
.vip-lb.open .vip-lb__img { transform: scale(1); opacity: 1; }
.vip-lb__img.swapping { filter: blur(8px); opacity: 0.35; }

.vip-lb__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(31, 28, 21, 0.82);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  cursor: pointer;
  transition: var(--transition-tactile);
}
.vip-lb__btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.vip-lb__btn:active { transform: scale(0.95); }
.vip-lb__btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.vip-lb__close { top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px); }
.vip-lb__prev { left: clamp(10px, 2vw, 26px); }
.vip-lb__next { right: clamp(10px, 2vw, 26px); }

/* ============================================================
   Footer
   ============================================================ */
.vip-footer {
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 72px) 44px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  text-align: center;
}
.vip-footer__logo {
  height: clamp(120px, 15vw, 190px);
  width: auto;
  margin: 0 auto 26px;
  object-fit: contain;
  filter: brightness(1.12);
}
.vip-footer__line {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.9;
}
.vip-footer__line a:hover { color: var(--accent); }
/* Agency credit. Set quieter than the legal line and separated from it —
   it is an attribution, not a banner, and the brand's register is restraint.
   The name itself takes --muted so it reads without shouting. */
.vip-footer__credit {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(165, 157, 140, 0.55);
}
.vip-footer__credit strong {
  font-weight: 500;
  color: var(--muted);
}

.vip-footer__legal {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: rgba(165, 157, 140, 0.7);
  font-weight: 300;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .vip-hero__copy { max-width: 26em; }

  .vip-grid, .vip-grid--light { grid-template-columns: repeat(3, 1fr); }
  .vip-more { grid-template-columns: repeat(4, 1fr); }
  .vip-exp { grid-template-columns: repeat(2, 1fr); }
  .vip-exp__item--wide { grid-column: span 2; }
  .vip-lee { grid-template-columns: 1fr; gap: 40px; }
  .vip-lee__media { max-width: 460px; }
}

/* ── Hero on any non-landscape viewport ──
   Keyed to aspect rather than width. A portrait tablet is wider than the
   768px breakpoint but still taller than it is wide, and cover-cropping a
   3:2 plate into it showed under half the board while the copy landed on
   top of the artwork.

   No cover-cropping here at all: a 3:4 plate scaled to cover a ~0.46
   viewport only ever shows about 69% of its width, so the board always lost
   an edge whichever way object-position was biased. Instead the plate runs
   at its natural aspect, full width, its bottom edge masked into the page
   canvas, with the copy sitting in that faded tail. Nothing is cropped. */
@media (max-width: 768px), (max-aspect-ratio: 1/1) {
  .vip-hero {
    display: block;
    min-height: 0;
    padding: 0 0 clamp(44px, 8vh, 68px);
  }
  .vip-hero__plate img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    /* Masking the image itself avoids having to know its rendered height,
       which is aspect-driven and so not knowable in CSS. */
    -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
  }
  /* The mask replaces it; a full-surface scrim would only mute the board. */
  .vip-hero__scrim { display: none; }
  .vip-hero__inner {
    padding: 0 clamp(20px, 5vw, 72px);
    /* Pull the copy up into the faded tail so it reads as one composition
       rather than an image with a caption under it. */
    margin-top: -13vw;
  }
  .vip-hero__copy { max-width: none; }

  /* styles.css swaps to the drawer nav only below 768px, so a portrait
     tablet showed the full desktop nav — the links wrapped to two lines and
     collided with the CTA. Scoped to .vip-nav so home.html is untouched. */
  .vip-nav .nav-links,
  .vip-nav .nav-cta { display: none; }
  .vip-nav .nav-toggle { display: flex; }

  .vip-beats { grid-template-columns: 1fr; gap: 34px; }
  .vip-grid, .vip-grid--light { grid-template-columns: repeat(2, 1fr); }
  .vip-more { grid-template-columns: repeat(2, 1fr); }
  .vip-shot--tall { grid-row: span 1; }
  .vip-exp { grid-template-columns: 1fr; }
  .vip-exp__item--wide { grid-column: span 1; }
  .vip-form__row { grid-template-columns: 1fr; gap: 0; }
  .vip-facts__item {
    border-left: none;
    padding-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .vip-lb__btn { width: 44px; height: 44px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .vip-shot, .vip-shot img, .vip-exp__item, .vip-lb, .vip-lb__img, .vip-cta {
    transition: none !important;
  }
  .vip-shot:hover, .vip-exp__item:hover { transform: none; }
  .vip-lb__img { transform: none; }
  .vip-lb__img.swapping { filter: none; }
}