/* Block 6: "A little flirt. A lot of fun." on the light sand (Lando's store block: mixed title, tall photo, a gold
   card and a small print drifting at their own speeds), and a guestbook ribbon of real Google reviews under it */
.b6, .b6q { position: relative; color: var(--cream); --deep: var(--gold); }
.b6__kicker { font: 700 13px/1 var(--sans); color: var(--deep); margin-bottom: 18px; }

/* ---------- story: every piece is placed on the screen like the store block of the reference ---------- */
.b6 { --ph: min(82vh, 760px); --pw: calc(var(--ph) * .8); --pr: 14vw; height: max(108vh, 800px); overflow: clip; }
.b6__kicker { display: flex; align-items: center; gap: 10px; }
.b6__kicker .mark { font-size: 22px; }
.b6__copy { position: absolute; z-index: 2; left: var(--gut); top: 50%; translate: 0 -50%; width: min(36vw, 560px); }
.b6__h { display: grid; margin-bottom: 26px; }
.b6__h span { font: 900 clamp(44px, 5.4vw, 104px)/.88 var(--sans); text-transform: uppercase; letter-spacing: -.025em; }
.b6__h em { font: 400 clamp(34px, 4vw, 78px)/1 var(--serif); font-style: normal; text-transform: uppercase; margin-top: .12em; letter-spacing: -.01em; }
.b6__copy > p:not(.b6__kicker) { max-width: 44ch; margin-top: 12px; font: 500 15px/1.6 var(--sans); }
.b6__btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; margin-top: 28px; padding: 0 22px; border-radius: 3px;
  background: var(--gold); color: var(--night); font: 600 14px/1 var(--sans); text-decoration: none; transition: background .3s, color .3s; }
.b6__btn:hover, .b6__btn:focus-visible { background: var(--cream); color: var(--night); }
.b6__btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.b6__photo { position: absolute; z-index: 1; top: 9vh; right: var(--pr); height: var(--ph); width: var(--pw); object-fit: cover; }
/* the pieces gather round the photo the way the store block does: the coupe card over its upper corner running off the
   right edge (where the reference has its gold card), the toast print over its lower left corner dropping below it,
   and the gold pharaoh mark sitting on its bottom edge (the reference's gold sticker) */
.b6__seal { position: absolute; z-index: 3; right: calc(var(--pr) + var(--pw) * .1); top: calc(9vh + var(--ph) - 5.6vw); width: clamp(90px, 8.6vw, 160px); aspect-ratio: 555 / 705;
  background: url("../../assets/img/v4/gold-leaf.webp") center / 400% auto; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .6));
  -webkit-mask: url("../../assets/img/brand/mark.svg") center / contain no-repeat; mask: url("../../assets/img/brand/mark.svg") center / contain no-repeat; }
.b6__print { position: absolute; z-index: 2; top: calc(9vh + var(--ph) - 19vh); left: calc(100vw - var(--pr) - var(--pw) - 7vw); width: clamp(170px, 15vw, 280px); aspect-ratio: 1; object-fit: cover;
  box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .8); }
.b6__tile { position: absolute; z-index: 2; right: -1.5vw; top: 6vh; width: clamp(160px, 18vw, 330px); aspect-ratio: 4 / 5; background: #E6DCC6; box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .8); }
.b6__tile img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- guestbook: a lipstick "Cheers!" sunk behind the title, the reviews running sideways ---------- */
.b6q { display: flex; flex-direction: column; justify-content: center; min-height: max(100vh, 680px); padding: clamp(80px, 12vh, 140px) 0 clamp(80px, 12vh, 140px); overflow: hidden; }
/* real lipstick lifted off white paper (the white made transparent), sunk behind the title */
.b6q__script { position: absolute; z-index: -1; left: 3vw; top: 14%; width: min(74vw, 1250px); height: auto; rotate: -3deg; opacity: .92; pointer-events: none; }
.b6q__top { position: relative; display: grid; grid-template-columns: auto minmax(0, 30ch); justify-content: start; gap: clamp(28px, 4vw, 72px); align-items: start; padding: 0 var(--gut); }
.b6q__h { display: grid; }
.b6q__h span { font: 900 clamp(44px, 5.4vw, 104px)/.88 var(--sans); text-transform: uppercase; letter-spacing: -.025em; }
.b6q__h em { font: 400 clamp(36px, 4.2vw, 82px)/1 var(--serif); font-style: normal; text-transform: uppercase; margin-top: .1em; }
.b6q__lede { margin-top: .5em; font: 500 15px/1.6 var(--sans); }
.b6q__lede b { font: 700 18px/1 var(--serif); color: var(--deep); }
.b6q__lede a { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(241, 231, 214, .4); }
.b6q__lede a:hover { color: var(--deep); }
.b6q__lede svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.b6q__ribbon { position: relative; overflow: hidden; margin-top: clamp(90px, 18vh, 190px); }
.b6q__track { display: flex; gap: 20px; width: max-content; animation: b6q-marq 90s linear infinite; }
.b6q__ribbon:hover .b6q__track { animation-play-state: paused; }
@keyframes b6q-marq { to { transform: translateX(-50%); } }
.rv { width: min(400px, 80vw); margin: 0; padding: 28px; border-radius: 4px; background: rgba(22, 17, 13, .78); border: 1px solid rgba(235, 181, 48, .22); box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .7); }
.rv p { font: 500 15px/1.6 var(--sans); }
.rv figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font: 600 13px/1 var(--sans); }
.rv figcaption span:first-child { color: var(--deep); letter-spacing: .1em; }

@media (max-width: 760px) {
  .b6 { --ph: 112vw; --pw: 80vw; --pr: 6vw; height: auto; padding: 96px var(--gut) 0; }
  .b6__copy { position: relative; left: auto; top: auto; translate: none; width: auto; }
  .b6__photo { position: relative; top: auto; right: auto; display: block; margin: 64px 0 0 auto; }
  .b6__seal { top: auto; bottom: calc(96px - 8vw); right: 2vw; width: 18vw; }
  .b6__print { top: auto; left: 2vw; bottom: calc(96px + 12vw); width: 38vw; }
  .b6__tile { display: none; }
  .b6 { padding-bottom: 96px; }
  .b6q__top { grid-template-columns: 1fr; gap: 20px; }
  .b6q__script { left: -6vw; width: 112vw; top: 30%; }
}
@media (prefers-reduced-motion: reduce) { .b6q__track { animation: none; } .b6q__names { overflow-x: auto; } }