/* Lyfex case study v2: clean, bright Lyfex brand (lilac light, Night dark, Signal Yellow accent).
   No frames or museum props; the renders carry the page. Auction demo styles still come from case-lyfex-2.css. */
.lv-eyebrow { margin: 0 0 16px; font-size: 15px; font-weight: 500; color: var(--accent); }
.lv-eyebrow--dark { color: var(--lx-lilac); }
.lv-h2 { margin: 0; font-size: clamp(32px, 3.6vw, 54px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; color: var(--lx-ink); text-wrap: balance; }
.lv-hl { color: var(--accent); }
.lv-lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--cs-muted); text-wrap: pretty; }
.lv-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 112px); align-items: end; }
.lv-head .lv-lead { padding-bottom: 6px; }
.lv-img { margin: 0; overflow: hidden; border-radius: 28px; }
.lv-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* hero */
.lv-hero { position: relative; overflow: hidden; padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(64px, 7vw, 112px); background: radial-gradient(60% 70% at 85% 30%, rgb(215 180 240 / 55%), transparent 70%), radial-gradient(40% 50% at 5% 100%, rgb(247 200 0 / 14%), transparent 70%), #f7f4fb; }
.lv-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 5vw, 80px); align-items: center; }
.lv-hero__title { margin: 0; font-size: clamp(42px, 5vw, 80px); font-weight: 700; line-height: 1.02; letter-spacing: -.045em; color: var(--lx-ink); text-wrap: balance; }
.lv-hero__lead { max-width: 520px; margin: 26px 0 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--cs-muted); }
.lv-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; max-width: 540px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--lx-gold); }
.lv-meta dt { margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-faint); }
.lv-meta dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--lx-ink); }
.lv-hero__art { margin: 0; border-radius: 36px; overflow: hidden; box-shadow: 0 50px 100px -50px rgb(107 79 160 / 55%); }
.lv-hero__art img { display: block; width: 100%; height: auto; }

/* overview (Night) */
.lv-over { background: var(--lx-ink); color: #fff; }
.lv-over .lv-h2 { color: #fff; }
.lv-over .lv-hl { color: #fff; }
.lv-over__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 112px); align-items: end; }
.lv-over__body { display: grid; gap: 16px; }
.lv-over__body p { margin: 0; font-size: 17px; line-height: 1.7; color: rgb(255 255 255 / 78%); }
.lv-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: clamp(56px, 6vw, 88px) 0 0; border-top: 1px solid rgb(255 255 255 / 14%); border-bottom: 1px solid rgb(255 255 255 / 14%); }
.lv-stats div { padding: 28px clamp(16px, 2vw, 28px); border-left: 1px solid rgb(255 255 255 / 14%); }
.lv-stats div:first-child { padding-left: 0; border-left: 0; }
.lv-stats dt { font-size: clamp(26px, 2.6vw, 40px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--lx-yellow); }
.lv-stats div:last-child dt { font-size: clamp(20px, 1.8vw, 26px); color: #fff; }
.lv-stats dd { margin: 10px 0 0; font-size: 14px; color: rgb(255 255 255 / 65%); }
.lv-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3333fr); align-items: start; gap: clamp(16px, 2vw, 28px); margin-top: clamp(48px, 5vw, 72px); }
.lv-duo .lv-img img { height: auto; }

/* challenges: 2x2 cards */
.lv-chal { background: #f7f4fb; }
.lv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(48px, 5vw, 72px); }
.lv-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 1px 0 rgb(28 26 34 / 4%), 0 30px 60px -44px rgb(107 79 160 / 50%); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.lv-card__art { position: relative; display: grid; place-items: center; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(150deg, #efe6f8, #f9f6fc 60%, #fff7d6); }
.lv-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.lv-card:nth-child(2) .lv-card__art img, .lv-card:nth-child(4) .lv-card__art img { object-fit: contain; }
.lv-card:hover .lv-card__art img { transform: scale(1.03); }
.lv-card__body { display: grid; gap: 14px; padding: clamp(26px, 2.6vw, 36px); }
.lv-card__k { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; font-weight: 500; color: var(--cs-faint); }
.lv-card__k span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lx-ink); font-size: 12px; font-weight: 700; color: var(--lx-yellow); }
.lv-card__title { margin: 0; font-size: clamp(21px, 1.8vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--lx-ink); text-wrap: balance; }
.lv-cs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--cs-line); }
.lv-cs p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cs-muted); }
.lv-cs .lv-cs__l { margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-faint); }
.lv-cs .lv-cs__l--sol { color: #6b4fa0; }

/* auction room: heading above, then the temple render at its true ratio (never stretched), the bid panel inside its misty right side */
.lv-live { display: flex; align-items: center; min-height: 56.3vw; background: #ece6f3 url("../../../uploads/lyfex/temple-hd.webp") center / cover no-repeat; color: var(--lx-ink); }
.lv-live::before { display: none; }
.lv-live__inner { width: 100%; display: grid; justify-items: end; }
.lv-live .lx-live__head { width: min(100%, 440px); max-width: none; margin: 0; justify-items: start; text-align: left; }
.lv-live .lv-h2 { color: var(--lx-ink); }
.lv-live .lv-hl { color: var(--accent); }
.lv-live .cs-lead { color: #3d3846; }
.lv-live .lx-live { display: block; width: min(100%, 440px); margin-top: 28px; }
.lv-live .lx-bidbox { width: 100%; gap: 4px; padding: 20px 22px; color: #fff; background: rgb(28 26 34 / 92%); backdrop-filter: blur(10px); }
.lv-live .lx-bidbox .lx-card__lot { margin-top: 8px; }
.lv-live .lx-bidbox__title { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.15; color: #fff; }
.lv-live .lx-bidbox__by { font-size: 13px; }
.lv-live .lx-bidbox__nums { gap: 8px; margin: 10px 0 2px; }
.lv-live .lx-bidbox__nums > div { gap: 2px; padding: 10px 12px; }
.lv-live .lx-bidbox__nums span { font-size: 10.5px; }
.lv-live .lx-bidbox__nums strong { font-size: clamp(17px, 1.4vw, 20px); }
.lv-live .lx-bidbox__nums div + div strong { font-size: clamp(13px, 1.05vw, 15px); }
.lv-live .lx-bids { margin: 0 0 8px; }
.lv-live .lx-bids li { padding: 7px 0; font-size: 13.5px; }
.lv-live .lx-bids__who { color: #fff; }
.lv-live .lx-bids__av { width: 24px; height: 24px; font-size: 11px; }
.lv-live .lx-paddle { padding: 11px 20px; font-size: 15px; }
.lv-live .lx-bidbox__msg { margin-top: 2px; font-size: 11.5px; }
.lx-bidbox__title { font-family: var(--font); font-style: normal; font-weight: 700; letter-spacing: -.02em; }
.lx-bidbox__nums strong, .lx-bids__amt, .lx-bidbox .lx-card__lot, .lx-bidbox__live { font-family: var(--font); font-variant-numeric: tabular-nums; }

/* collection */
.lv-coll { background: #232227; color: #fff; }
.lv-coll__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 112px); align-items: center; }
.lv-coll__art { margin: 0; }
.lv-coll__art img { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
.lv-coll .lv-h2, .lv-coll .lv-hl { color: #fff; }
.lv-coll .lv-lead { margin-top: 22px; color: rgb(255 255 255 / 72%); }
.lv-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: lv; }
.lv-index li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid rgb(255 255 255 / 14%); counter-increment: lv; }
.lv-index b { font-size: 16px; font-weight: 600; color: #fff; }
.lv-index b::before { content: counter(lv, decimal-leading-zero); margin-right: 10px; font-size: 12px; color: var(--lx-yellow); }
.lv-index span { font-size: 14px; line-height: 1.5; color: rgb(255 255 255 / 65%); }

/* visual language */
.lv-craft { background: #fff; }
.lv-craft__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(48px, 5vw, 72px); }
.lv-type { display: grid; align-content: space-between; gap: 28px; padding: clamp(28px, 3vw, 44px); border-radius: 28px; background: #f7f4fb; }
.lv-type p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cs-muted); }
.lv-type .lv-type__k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6b4fa0; }
.lv-type .lv-type__name { margin-bottom: 6px; font-size: clamp(36px, 3.6vw, 56px); font-weight: 800; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--lx-ink); }
.lv-type .lv-type__name--b { font-weight: 500; letter-spacing: -.02em; text-transform: none; }
.lv-swatch { display: grid; grid-template-columns: 2fr 1.3fr 1fr 1.5fr; min-height: 340px; margin: 0; padding: 0; overflow: hidden; border-radius: 28px; list-style: none; }
.lv-swatch li { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 24px 20px; font-size: 13px; font-variant-numeric: tabular-nums; opacity: .9; }
.lv-swatch span { font-size: 16px; font-weight: 600; opacity: 1; }
.lv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin: clamp(20px, 2.4vw, 32px) 0 0; padding: 0; list-style: none; }
.lv-steps li { display: grid; gap: 8px; align-content: start; padding: 0; border-top: 0; }
.lv-steps span { font-size: 13px; font-weight: 700; color: #6b4fa0; }
.lv-steps b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--lx-ink); }
.lv-steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cs-muted); }

/* outcome */
.lv-out { background: #f7f4fb; }
.lv-res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; list-style: none; }
.lv-res li { display: grid; align-content: start; gap: 12px; padding: clamp(26px, 2.6vw, 34px); border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -48px rgb(107 79 160 / 55%); }
.lv-res li:first-child { background: var(--lx-ink); }
.lv-res li:first-child h3 { color: #fff; }
.lv-res li:first-child p { color: rgb(255 255 255 / 72%); }
.lv-res span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 14px; background: var(--lx-yellow); font-size: 14px; font-weight: 700; color: var(--lx-ink); }
.lv-res h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--lx-ink); }
.lv-res p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cs-muted); }

@media (max-width: 1100px) {
  .lv-res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lv-stats div:nth-child(4) { padding-left: 0; border-left: 0; }
  .lv-stats div:nth-child(n+4) { border-top: 1px solid rgb(255 255 255 / 14%); }
}
@media (max-width: 1000px) {
  .lv-live { align-items: flex-end; min-height: 0; padding-top: calc(56.3vw + 32px); background-size: 100% auto; background-position: center top; }
  .lv-live__inner { justify-items: center; }
  .lv-live .lx-live__head, .lv-live .lx-live { width: min(100%, 560px); }
  .lv-hero__grid, .lv-head, .lv-over__grid, .lv-coll__grid, .lv-craft__grid { grid-template-columns: minmax(0, 1fr); }
  .lv-cards { grid-template-columns: minmax(0, 1fr); }
  .lv-live__art { justify-self: center; }
}
@media (max-width: 720px) {
  .lv-duo, .lv-cs, .lv-index, .lv-steps, .lv-res { grid-template-columns: minmax(0, 1fr); }
  .lv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-stats div, .lv-stats div:nth-child(4) { padding: 22px 16px; border-left: 1px solid rgb(255 255 255 / 14%); border-top: 1px solid rgb(255 255 255 / 14%); }
  .lv-stats div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .lv-stats div:last-child { grid-column: 1 / -1; }
  .lv-swatch { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .lv-swatch li { min-height: 140px; }
  .lv-hero__art, .lv-img, .lv-card { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .lv-card__art img { transition: none; } }

/* square corners + hard gold outlines on every image and card */
.lv-img, .lv-hero__art, .lv-card, .lv-type, .lv-swatch, .lv-res li, .lv-res span, .lv-card__k span, .lv-coll__art img, .lx-bidbox, .lx-bidbox__nums > div, .lx-paddle { border-radius: 0 !important; }
.lv-img, .lv-hero__art, .lv-card, .lv-coll__art img {
  --gold-metal: linear-gradient(125deg, #7a5a0c 0%, #e9c66a 12%, #fff3c4 20%, #c99a26 32%, #8a6410 46%, #f2d27a 60%, #fffbe6 66%, #d2a43a 76%, #8a6410 90%, #e2bd5c 100%);
  border: 6px solid transparent; border-image: none;
  background: linear-gradient(var(--lv-fill, #fff), var(--lv-fill, #fff)) padding-box, var(--gold-metal) border-box;
  outline: 1px solid rgb(122 90 12 / 55%); outline-offset: 0;
  box-shadow: inset 0 0 0 1px rgb(255 248 220 / 70%), 0 2px 0 rgb(255 255 255 / 30%), 0 40px 70px -40px rgb(60 40 4 / 60%), 0 14px 24px -16px rgb(60 40 4 / 40%);
}
.lv-coll__art img, .lv-hero__art, .lv-img { --lv-fill: transparent; }
.lv-card__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 246 210 / 45%) 50%, transparent 65%); transform: translateX(-120%); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.lv-card:hover .lv-card__art::after { transform: translateX(120%); }
.lv-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgb(255 248 220 / 70%), 0 60px 90px -50px rgb(60 40 4 / 65%), 0 0 40px -18px rgb(212 166 42 / 55%); }
.lv-type, .lv-swatch, .lv-res li, .lx-bidbox { border: 2px solid; border-image: linear-gradient(135deg, #f6dc8c, #c6951f 28%, #f3d77f 52%, #9f7412 78%, #e6c364) 1; box-shadow: 0 30px 60px -44px rgb(40 28 6 / 45%); }

.lv-stats, .lv-stats div, .lv-index li { border-color: rgb(212 166 42 / 45%) !important; }