/* Lookbook page — visual portfolio layout and CSS gradient set mockups */

/* ── HERO ── */
.lb-hero {
  padding: 80px 48px 64px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.lb-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(224, 64, 251, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 100%, rgba(201, 168, 76, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.lb-hero-inner {
  max-width: 860px;
  position: relative;
}

.lb-hero-headline {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 16px 0 28px;
}

.lb-hero-sub {
  font-size: 17px;
  color: var(--fg-muted);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 40px;
}

/* Anchor nav — jump links for each set */
.lb-anchor-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 4px;
}

.lb-anchor {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s;
}

.lb-anchor:hover {
  color: var(--accent);
}

.lb-anchor-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 8px;
}

/* ── SET SECTION ── */
.lb-set {
  padding: 80px 48px;
  border-bottom: 1px solid var(--border);
}

.lb-set--alt {
  background: var(--bg-card);
}

/* White Cyc needs light background context */
.lb-set--cyc {
  background: #f5f2ee;
}

.lb-set--cyc .section-label {
  color: rgba(100, 80, 20, 0.7);
}

.lb-set--cyc .lb-set-title {
  color: #1a1a1f;
}

.lb-set--cyc .lb-set-pitch {
  color: #555;
}

.lb-set--cyc .lb-use-cases {
  border-top-color: rgba(0,0,0,0.08);
}

/* Set header row — title + book CTA */
.lb-set-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
}

.lb-set-meta {
  flex: 1;
}

.lb-set-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 12px 0 10px;
  line-height: 1;
}

.lb-set-pitch {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.65;
  max-width: 480px;
}

/* ── IMAGE GRID ── */
.lb-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 32px;
  /* Default: 3 cols with 2 rows */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 260px 200px;
}

/* Shot base */
.lb-shot {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.lb-shot--tall {
  grid-row: span 2;
}

.lb-shot--wide {
  grid-column: span 2;
}

/* Caption overlay */
.lb-shot-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 16px 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.7);
  background: linear-gradient(transparent, rgba(0,0,0,0.45));
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  transition: opacity 0.2s;
}

.lb-shot-caption--dark {
  color: rgba(26, 26, 31, 0.65);
  background: linear-gradient(transparent, rgba(0,0,0,0.1));
}

.lb-shot:hover .lb-shot-caption {
  opacity: 0;
}

/* Use-case chips row */
.lb-use-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.lb-use-chip {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.lb-use-chip--dark {
  color: #555;
  border-color: rgba(0,0,0,0.12);
}

/* ── BOOK CTA BUTTON ── */
.btn-book {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 14px 24px;
  border-radius: 3px;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  align-self: flex-end;
  flex-shrink: 0;
}

.btn-book:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* Dark variant for White Cyc light background */
.btn-book--dark {
  color: #1a1a1f;
  border-color: rgba(0,0,0,0.18);
}

.btn-book--dark:hover {
  border-color: #8a6820;
  background: rgba(201, 168, 76, 0.12);
  color: #7a5c10;
}

/* ── CLOSING CTA BAND ── */
.lb-cta {
  padding: 96px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.lb-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 100%, rgba(224, 64, 251, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.lb-cta-inner {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.lb-cta-headline {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 16px 0 20px;
}

.lb-cta-sub {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.7;
  margin-bottom: 40px;
}

/* ── CSS GRADIENT SHOT MOCKUPS ── */
/* Each shot is a distinct composition within its set's colour palette.
   Layers: background wash + subject-plane shape + accent light spill. */

/* === NEON ROOM === */

/* Shot 1: Full-height silhouette, rear neon wash */
.lb-shot-neon-1 {
  background:
    radial-gradient(ellipse at 50% 15%, rgba(224, 64, 251, 0.7) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 220, 255, 0.4) 0%, transparent 35%),
    /* subject silhouette block */
    linear-gradient(180deg,
      transparent 0%,
      transparent 25%,
      rgba(5, 0, 20, 0.95) 25%,
      rgba(5, 0, 20, 0.7) 75%,
      transparent 75%
    ),
    /* wide silhouette */
    radial-gradient(ellipse 30% 60% at 50% 55%, rgba(5, 0, 20, 0.98) 0%, transparent 100%),
    linear-gradient(135deg, #06001a 0%, #1a0035 50%, #0a001a 100%);
}

/* Shot 2: Product — tight magenta spot */
.lb-shot-neon-2 {
  background:
    radial-gradient(ellipse at 60% 40%, rgba(224, 64, 251, 0.85) 0%, rgba(180, 0, 220, 0.4) 30%, transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(0, 200, 255, 0.25) 0%, transparent 40%),
    /* product block center */
    radial-gradient(ellipse 35% 50% at 55% 45%, rgba(10, 0, 30, 0.9) 0%, transparent 100%),
    linear-gradient(135deg, #08001f 0%, #12002a 100%);
}

/* Shot 3: Side-lit portrait — cyan from the right */
.lb-shot-neon-3 {
  background:
    radial-gradient(ellipse at 95% 30%, rgba(0, 220, 255, 0.65) 0%, transparent 45%),
    radial-gradient(ellipse at 10% 60%, rgba(224, 64, 251, 0.3) 0%, transparent 40%),
    /* portrait shape left-center */
    radial-gradient(ellipse 25% 70% at 35% 50%, rgba(5, 0, 18, 0.95) 0%, transparent 100%),
    linear-gradient(160deg, #05001a 0%, #0e0025 100%);
}

/* Shot 4: Wide music video scene — floor-level light pools */
.lb-shot-neon-4 {
  background:
    radial-gradient(ellipse at 25% 90%, rgba(224, 64, 251, 0.5) 0%, transparent 35%),
    radial-gradient(ellipse at 75% 90%, rgba(0, 200, 255, 0.45) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 85%, rgba(150, 0, 220, 0.3) 0%, transparent 30%),
    /* two standing figures */
    radial-gradient(ellipse 12% 55% at 35% 55%, rgba(4, 0, 15, 0.95) 0%, transparent 100%),
    radial-gradient(ellipse 12% 55% at 65% 55%, rgba(4, 0, 15, 0.95) 0%, transparent 100%),
    linear-gradient(180deg, #04000f 0%, #08001a 60%, #0d0030 100%);
}

/* Shot 5: Album cover — geometric block composition */
.lb-shot-neon-5 {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(224, 64, 251, 0.6) 0%, rgba(100, 0, 200, 0.4) 30%, transparent 60%),
    /* geometric bars */
    repeating-linear-gradient(
      90deg,
      transparent 0%,
      transparent 30%,
      rgba(0, 220, 255, 0.08) 30%,
      rgba(0, 220, 255, 0.08) 32%,
      transparent 32%,
      transparent 66%,
      rgba(224, 64, 251, 0.06) 66%,
      rgba(224, 64, 251, 0.06) 68%,
      transparent 68%
    ),
    linear-gradient(135deg, #0a0020 0%, #18003a 50%, #060015 100%);
}

/* === VELVET LOUNGE === */

/* Shot 1: Wide — warm golden ambient fill */
.lb-shot-velvet-1 {
  background:
    radial-gradient(ellipse at 85% 10%, rgba(201, 168, 76, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 15% 90%, rgba(140, 20, 40, 0.4) 0%, transparent 40%),
    /* two seated figure shapes */
    radial-gradient(ellipse 14% 45% at 35% 60%, rgba(12, 2, 5, 0.92) 0%, transparent 100%),
    radial-gradient(ellipse 14% 45% at 62% 58%, rgba(12, 2, 5, 0.92) 0%, transparent 100%),
    linear-gradient(160deg, #150305 0%, #280a10 55%, #100204 100%);
}

/* Shot 2: Tall seated portrait — velvet texture suggestion */
.lb-shot-velvet-2 {
  background:
    radial-gradient(ellipse at 70% 20%, rgba(201, 168, 76, 0.45) 0%, transparent 40%),
    radial-gradient(ellipse at 20% 80%, rgba(160, 20, 40, 0.3) 0%, transparent 45%),
    /* velvet texture: subtle horizontal bands */
    repeating-linear-gradient(
      180deg,
      transparent 0%,
      transparent 4%,
      rgba(200, 50, 70, 0.03) 4%,
      rgba(200, 50, 70, 0.03) 5%,
      transparent 5%
    ),
    /* portrait silhouette */
    radial-gradient(ellipse 30% 65% at 48% 55%, rgba(10, 2, 5, 0.95) 0%, transparent 100%),
    linear-gradient(150deg, #1a0508 0%, #2d0a12 50%, #120204 100%);
}

/* Shot 3: Detail / product placement */
.lb-shot-velvet-3 {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(201, 168, 76, 0.5) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(120, 10, 30, 0.3) 0%, transparent 40%),
    /* product shape center */
    radial-gradient(ellipse 28% 28% at 50% 48%, rgba(8, 1, 4, 0.95) 0%, transparent 100%),
    linear-gradient(135deg, #180405 0%, #250910 100%);
}

/* Shot 4: Birthday — warm side fill */
.lb-shot-velvet-4 {
  background:
    radial-gradient(ellipse at 90% 30%, rgba(201, 168, 76, 0.55) 0%, transparent 40%),
    radial-gradient(ellipse at 5% 70%, rgba(160, 20, 40, 0.25) 0%, transparent 40%),
    /* standing figure */
    radial-gradient(ellipse 22% 60% at 45% 52%, rgba(10, 2, 5, 0.96) 0%, transparent 100%),
    linear-gradient(145deg, #160406 0%, #2a0c12 100%);
}

/* Shot 5: Low-angle wide — golden ceiling wash */
.lb-shot-velvet-5 {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 60%, rgba(140, 15, 35, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(100, 10, 25, 0.25) 0%, transparent 40%),
    /* wide architectural foreground */
    linear-gradient(0deg,
      rgba(8, 1, 3, 0.9) 0%,
      rgba(8, 1, 3, 0.6) 30%,
      transparent 60%
    ),
    linear-gradient(135deg, #120304 0%, #220810 60%, #0e0204 100%);
}

/* === MOODY CORNER === */

/* Shot 1: Tall cinematic — amber key light */
.lb-shot-moody-1 {
  background:
    radial-gradient(ellipse at 80% 25%, rgba(180, 120, 40, 0.55) 0%, transparent 40%),
    radial-gradient(ellipse at 15% 75%, rgba(60, 45, 25, 0.4) 0%, transparent 40%),
    /* diffusion haze */
    radial-gradient(ellipse at 50% 40%, rgba(90, 70, 40, 0.12) 0%, transparent 60%),
    /* portrait silhouette */
    radial-gradient(ellipse 26% 62% at 47% 54%, rgba(6, 6, 8, 0.96) 0%, transparent 100%),
    linear-gradient(140deg, #080808 0%, #0f0f12 55%, #060607 100%);
}

/* Shot 2: Tight frame — low ambient spill */
.lb-shot-moody-2 {
  background:
    radial-gradient(ellipse at 70% 35%, rgba(150, 100, 35, 0.4) 0%, transparent 45%),
    radial-gradient(ellipse at 25% 65%, rgba(70, 55, 30, 0.3) 0%, transparent 40%),
    /* tight subject */
    radial-gradient(ellipse 32% 55% at 50% 48%, rgba(5, 5, 7, 0.95) 0%, transparent 100%),
    linear-gradient(155deg, #07070a 0%, #0e0e11 100%);
}

/* Shot 3: Atmospheric wide — deep shadow with single source */
.lb-shot-moody-3 {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(160, 110, 40, 0.5) 0%, transparent 35%),
    radial-gradient(ellipse at 75% 70%, rgba(50, 40, 20, 0.3) 0%, transparent 45%),
    /* atmospheric haze layer */
    radial-gradient(ellipse at 50% 50%, rgba(80, 65, 35, 0.08) 0%, transparent 70%),
    /* subject form */
    radial-gradient(ellipse 20% 55% at 50% 52%, rgba(5, 5, 7, 0.94) 0%, transparent 100%),
    linear-gradient(150deg, #060609 0%, #0c0c0f 60%, #050507 100%);
}

/* Shot 4: Podcast cover wide — horizontal bar light */
.lb-shot-moody-4 {
  background:
    /* horizontal light bar */
    linear-gradient(90deg,
      transparent 0%,
      rgba(160, 110, 40, 0.08) 20%,
      rgba(160, 110, 40, 0.35) 40%,
      rgba(180, 130, 50, 0.35) 60%,
      rgba(160, 110, 40, 0.08) 80%,
      transparent 100%
    ),
    radial-gradient(ellipse at 50% 45%, rgba(140, 100, 35, 0.2) 0%, transparent 50%),
    /* two figure silhouettes */
    radial-gradient(ellipse 13% 50% at 35% 52%, rgba(5, 5, 7, 0.96) 0%, transparent 100%),
    radial-gradient(ellipse 13% 50% at 65% 52%, rgba(5, 5, 7, 0.96) 0%, transparent 100%),
    linear-gradient(135deg, #070709 0%, #0d0d10 100%);
}

/* Shot 5: Brand — contour edge light */
.lb-shot-moody-5 {
  background:
    radial-gradient(ellipse at 95% 40%, rgba(180, 130, 50, 0.45) 0%, transparent 35%),
    radial-gradient(ellipse at 0% 60%, rgba(60, 45, 20, 0.2) 0%, transparent 40%),
    /* edge-lit portrait */
    radial-gradient(ellipse 28% 60% at 48% 50%, rgba(5, 5, 7, 0.97) 0%, transparent 100%),
    linear-gradient(140deg, #070709 0%, #0c0c0e 100%);
}

/* === PODCAST CORNER === */

/* Shot 1: Two-host wide — warm broadcast key */
.lb-shot-podcast-1 {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(200, 140, 60, 0.45) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 60%, rgba(108, 138, 245, 0.15) 0%, transparent 40%),
    /* desk shape */
    linear-gradient(0deg,
      rgba(8, 7, 5, 0.85) 0%,
      rgba(8, 7, 5, 0.5) 25%,
      transparent 50%
    ),
    /* two host silhouettes */
    radial-gradient(ellipse 13% 42% at 32% 50%, rgba(7, 6, 4, 0.96) 0%, transparent 100%),
    radial-gradient(ellipse 13% 42% at 68% 50%, rgba(7, 6, 4, 0.96) 0%, transparent 100%),
    linear-gradient(145deg, #0e0c09 0%, #1c1810 55%, #0a0906 100%);
}

/* Shot 2: Solo host tall — key light portrait */
.lb-shot-podcast-2 {
  background:
    radial-gradient(ellipse at 60% 20%, rgba(200, 140, 60, 0.55) 0%, transparent 40%),
    radial-gradient(ellipse at 20% 70%, rgba(108, 138, 245, 0.12) 0%, transparent 40%),
    /* mic element: small vertical rectangle */
    radial-gradient(ellipse 5% 22% at 52% 38%, rgba(200, 170, 100, 0.15) 0%, transparent 100%),
    /* solo figure */
    radial-gradient(ellipse 28% 60% at 50% 56%, rgba(7, 6, 4, 0.95) 0%, transparent 100%),
    linear-gradient(140deg, #0c0a07 0%, #1a160e 55%, #09080505 100%);
}

/* Shot 3: Mic detail b-roll — close metallic highlight */
.lb-shot-podcast-3 {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(220, 160, 70, 0.6) 0%, rgba(180, 130, 50, 0.3) 25%, transparent 50%),
    /* rim light spill */
    radial-gradient(ellipse at 80% 20%, rgba(108, 138, 245, 0.18) 0%, transparent 35%),
    /* mic capsule shape */
    radial-gradient(ellipse 12% 35% at 50% 40%, rgba(200, 170, 110, 0.2) 0%, transparent 100%),
    radial-gradient(ellipse 8% 25% at 50% 40%, rgba(8, 7, 5, 0.98) 0%, transparent 100%),
    linear-gradient(150deg, #0d0b08 0%, #181410 100%);
}

/* Shot 4: Interview over-shoulder */
.lb-shot-podcast-4 {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(200, 140, 60, 0.4) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 50%, rgba(108, 138, 245, 0.1) 0%, transparent 35%),
    /* foreground OOS silhouette */
    radial-gradient(ellipse 40% 80% at 15% 55%, rgba(7, 6, 4, 0.85) 0%, transparent 100%),
    /* background subject */
    radial-gradient(ellipse 22% 55% at 65% 50%, rgba(7, 6, 4, 0.92) 0%, transparent 100%),
    linear-gradient(145deg, #0b0908 0%, #16130d 55%, #090806 100%);
}

/* Shot 5: TikTok cutaway — tighter frame, warmer */
.lb-shot-podcast-5 {
  background:
    radial-gradient(ellipse at 55% 25%, rgba(220, 155, 65, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 70%, rgba(108, 138, 245, 0.1) 0%, transparent 40%),
    /* talking-head single figure */
    radial-gradient(ellipse 30% 58% at 50% 52%, rgba(7, 6, 4, 0.95) 0%, transparent 100%),
    linear-gradient(150deg, #0c0a07 0%, #1a1610 100%);
}

/* === WHITE CYC === */

/* Shot 1: Full-length fashion — clean infinity floor */
.lb-shot-cyc-1 {
  background:
    /* soft fill from top */
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.5) 0%, transparent 60%),
    /* subtle shadow cast */
    radial-gradient(ellipse 30% 15% at 50% 100%, rgba(0,0,0,0.08) 0%, transparent 100%),
    /* cyc seamless floor curve (shadow at junction) */
    linear-gradient(180deg,
      #f8f5f0 0%,
      #f5f2ec 55%,
      #eae6de 80%,
      #ddd8ce 100%
    ),
    /* fashion figure — medium grey block */
    radial-gradient(ellipse 18% 60% at 50% 50%, rgba(180,175,165,0.45) 0%, transparent 100%);
}

/* Shot 2: Product hero — crisp white, slight shadow */
.lb-shot-cyc-2 {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.8) 0%, transparent 55%),
    /* product drop shadow */
    radial-gradient(ellipse 22% 8% at 50% 82%, rgba(0,0,0,0.06) 0%, transparent 100%),
    /* product block */
    radial-gradient(ellipse 25% 32% at 50% 50%, rgba(200,195,185,0.5) 0%, transparent 100%),
    linear-gradient(135deg, #f7f4ee 0%, #ede9e2 100%);
}

/* Shot 3: Dynamic movement — motion blur suggestion */
.lb-shot-cyc-3 {
  background:
    /* motion sweep */
    linear-gradient(100deg,
      transparent 0%,
      rgba(255,255,255,0.0) 30%,
      rgba(220,215,205,0.3) 50%,
      rgba(255,255,255,0.0) 70%,
      transparent 100%
    ),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.4) 0%, transparent 50%),
    /* blurred figure mass */
    radial-gradient(ellipse 35% 65% at 55% 50%, rgba(190,185,175,0.4) 0%, transparent 100%),
    linear-gradient(135deg, #f5f2ec 0%, #eae6de 100%);
}

/* Shot 4: Group wide — full cyc sweep */
.lb-shot-cyc-4 {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.45) 0%, transparent 55%),
    /* floor shadow band */
    linear-gradient(0deg,
      rgba(0,0,0,0.06) 0%,
      transparent 25%
    ),
    /* three standing figures */
    radial-gradient(ellipse 10% 50% at 30% 52%, rgba(185,180,170,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 10% 55% at 50% 50%, rgba(185,180,170,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 10% 50% at 70% 52%, rgba(185,180,170,0.45) 0%, transparent 100%),
    linear-gradient(135deg, #f7f4ef 0%, #ece8e0 100%);
}

/* Shot 5: Accessory detail — macro on white */
.lb-shot-cyc-5 {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.9) 0%, rgba(240,236,228,0.5) 40%, transparent 65%),
    /* accessory shape */
    radial-gradient(ellipse 30% 20% at 50% 48%, rgba(170,165,155,0.5) 0%, transparent 100%),
    /* subtle drop shadow */
    radial-gradient(ellipse 30% 8% at 50% 70%, rgba(0,0,0,0.05) 0%, transparent 100%),
    linear-gradient(135deg, #f5f2ed 0%, #eae6de 100%);
}

/* ── CLOSING CTA ── */
.btn-primary {
  display: inline-block;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0f;
  background: var(--accent);
  text-decoration: none;
  padding: 18px 40px;
  border-radius: 3px;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #e0bc5a;
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .lb-grid {
    grid-template-rows: 220px 180px;
  }
}

@media (max-width: 800px) {
  .lb-set-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .lb-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 200px 160px 160px;
  }

  /* Redistribute spans for 2-col */
  .lb-shot--tall {
    grid-row: span 2;
  }

  .lb-shot--wide {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .lb-hero,
  .lb-set,
  .lb-cta {
    padding-left: 24px;
    padding-right: 24px;
  }

  .lb-hero {
    padding-top: 60px;
    padding-bottom: 48px;
  }

  .lb-set {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .lb-anchor-nav {
    gap: 4px 2px;
  }

  .lb-anchor-dot {
    display: none;
  }

  .lb-anchor {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
  }
}

@media (max-width: 540px) {
  .lb-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px 120px 120px;
  }

  .lb-shot--tall {
    grid-row: span 2;
  }

  .lb-shot--wide {
    grid-column: span 2;
  }

  .lb-hero-headline {
    font-size: clamp(42px, 12vw, 64px);
  }
}

@media (max-width: 400px) {
  .lb-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
  }

  .lb-shot--tall,
  .lb-shot--wide {
    grid-row: span 1;
    grid-column: span 1;
  }
}