/* Round 6: food icon ornaments, the Films room, her food behind three quiet sections (content on glass),
   service icons on the livery, a Films stop in the dock. */

/* ---------- menu ornament: a fine gold icon between two hairlines, above a section heading ---------- */
.orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 18px; color: var(--gold); }
.orn::before, .orn::after { content: ''; height: 1px; width: 54px; background: linear-gradient(90deg, transparent, currentColor); opacity: .8; }
.orn::after { background: linear-gradient(90deg, currentColor, transparent); }
.orn svg { width: 34px; height: 34px; flex: none; }
.orn--light { color: var(--gold-2); }
.orn--left { justify-content: flex-start; }
.orn--left::before { display: none; }
@media (max-width: 860px) { .orn--left { justify-content: center; } .orn--left::before { display: block; } }

/* ---------- dock: the Films stop ---------- */
@media (max-width: 520px) { .dock__item--films span { display: none; } }

/* ---------- livery: each service with its icon ---------- */
.livery__list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; }
.livery__list li { display: flex; align-items: center; gap: 12px; }
.livery__list svg { width: 26px; height: 26px; flex: none; color: var(--gold-2); }
@media (max-width: 860px) { .livery__list { grid-template-columns: 1fr; justify-items: center; } }

/* ---------- THE FILMS ---------- */
.films { position: relative; padding: clamp(90px, 12vh, 150px) 0 clamp(80px, 11vh, 130px); color: var(--porcelain); overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 55% at 50% 38%, #1d4a3a 0%, #123528 48%, #0a1f17 100%); }
.films::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 6px); }
.films__wrap { width: min(1180px, 100% - 2 * var(--gutter, 24px)); margin: 0 auto; }
.films__head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 6vh, 60px); }
.films__kicker { font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 12px; }
.films__lede { margin: 14px auto 0; color: #cfdcd4; max-width: 46ch; }
.films__row { display: flex; justify-content: center; gap: clamp(22px, 4vw, 64px); }
.film-card { margin: 0; flex: 0 0 auto; width: min(360px, 42vw); }
.film-card__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #08140f;
  box-shadow: 0 40px 80px -36px rgba(0,0,0,.85), 0 0 0 1.5px rgba(229,207,156,.75), 0 0 0 9px rgba(14,42,33,.9), 0 0 0 10px rgba(229,207,156,.28);
  transition: transform .5s var(--ease, ease), box-shadow .5s; }
.film-card:hover .film-card__frame { transform: translateY(-6px); }
.film-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-card__play { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; align-content: center; gap: 2px; color: #0e2a21;
  background: radial-gradient(circle at 35% 30%, #fbf1d6, #e5cf9c 45%, #b8924f); box-shadow: 0 18px 40px -14px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,246,222,.7);
  transition: transform .35s var(--ease, ease), opacity .3s; }
.film-card__play svg { width: 46px; height: 46px; transition: transform .45s var(--ease, ease); }
.film-card__play span { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.film-card__play:hover { transform: scale(1.06); }
.film-card__play:hover svg { transform: translateY(-5px) rotate(-8deg); }           /* the lid lifts a little */
.film-card.is-playing .film-card__play { opacity: 0; pointer-events: none; transform: scale(.85); }
.film-card__sound { position: absolute; right: 14px; top: 14px; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; opacity: 0;
  font: 600 12px var(--sc-font-text, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: #f6f4ef;
  background: rgba(14,42,33,.72); box-shadow: inset 0 0 0 1px rgba(229,207,156,.6); transition: opacity .3s; }
.film-card.is-playing .film-card__sound { opacity: 1; }
.film-card__bar { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 3px; border-radius: 3px; background: rgba(246,244,239,.25); overflow: hidden; }
.film-card__bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--gold-2); }
.film-card figcaption { text-align: center; margin-top: 22px; }
.film-card figcaption b { display: block; font-family: var(--sc-font-display); font-style: italic; font-weight: 500; font-size: 1.7rem; }
.film-card figcaption span { display: block; margin-top: 4px; font-size: 13px; letter-spacing: .1em; color: #b9c9c0; }
.films__dots { display: none; }
@media (max-width: 760px) {
  .films__row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px calc(50vw - 39vw) 10px; margin: 0 calc(-1 * var(--gutter, 16px));
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .films__row::-webkit-scrollbar { display: none; }
  .film-card { width: 78vw; scroll-snap-align: center; }
  .films__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .films__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(229,207,156,.35); transition: background .3s, transform .3s; }
  .films__dots i.is-on { background: var(--gold-2); transform: scale(1.3); }
}

/* ---------- her food behind quiet sections: full colour, slow; content floats on glass ---------- */
.bgv { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bgv video, .bgv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-bgv { position: relative; isolation: isolate; }

/* From the comments: frosted porcelain cards over her dessert cups */
.words.has-bgv { background: transparent; }
.words.has-bgv .orn, .words.has-bgv .display, .words.has-bgv .words__sub { position: relative; }
.words__glass { display: inline-block; padding: 26px 40px 24px; border-radius: 22px; background: rgba(246,244,239,.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 24px 50px -30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.6); }
.words.has-bgv .quote { background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(255,255,255,.7); }

/* Sunday: her stew shows behind the heading card, then melts into the green velvet where the packs sit */
.sunday.has-bgv { background: transparent; }
.sunday.has-bgv .bgv { bottom: auto; height: min(1150px, 125vh); }
.sunday.has-bgv .sunday__velvet { -webkit-mask: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.15) 380px, #000 980px); mask: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.15) 380px, #000 980px); }
.sunday.has-bgv .sunday__head { display: block; padding: 34px 30px 30px; border-radius: 26px; max-width: 760px; margin-left: auto; margin-right: auto;
  background: rgba(14,42,33,.8); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 30px 70px -36px rgba(0,0,0,.8), inset 0 0 0 1px rgba(229,207,156,.45); }

/* Chat to book: her team serving behind the chat and the docket */
.docket.has-bgv { background: transparent; }
.docket.has-bgv .booking { padding: 30px 28px; border-radius: 26px; background: rgba(11,12,11,.74); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -36px rgba(0,0,0,.85), inset 0 0 0 1px rgba(229,207,156,.32); }
@media (max-width: 860px) {
  .sunday.has-bgv .sunday__head { padding: 26px 18px 22px; }
  .docket.has-bgv .booking { padding: 22px 14px; }
  .words__glass { padding: 20px 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { .bgv video { display: none; } }

/* ---------- floating social icons (house standard): original brand colours, each bobbing on its own rhythm ---------- */
.socials { display: flex; align-items: center; gap: 16px; margin: 18px 0 22px; }
.socials__label { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); margin-right: 4px; }
.soc { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none; text-decoration: none;
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.18); animation: soc-float 3.6s ease-in-out infinite; transition: transform .3s; }
.soc svg { width: 27px; height: 27px; }
.soc--tt { background: #010101; animation-delay: -.4s; }
.soc--tt svg { fill: #fff; filter: drop-shadow(-1.6px -1.2px 0 #25f4ee) drop-shadow(1.6px 1.2px 0 #fe2c55); }
.soc--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); animation-delay: -1.6s; animation-duration: 4.1s; }
.soc--wa { background: #25d366; animation-delay: -2.7s; animation-duration: 3.9s; }
.soc--wa svg { fill: #fff; }
.soc:hover { animation-play-state: paused; transform: translateY(-6px) scale(1.08); }
@keyframes soc-float { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-7px) rotate(-3deg); } 65% { transform: translateY(3px) rotate(2deg); } }
.socials--foot { margin: 16px 0 6px; }
@media (max-width: 860px) { .socials { justify-content: center; flex-wrap: wrap; } .socials__label { width: 100%; text-align: center; margin: 0 0 2px; } }
@media (prefers-reduced-motion: reduce) { .soc { animation: none; } }