/* Dental Fitness page: BeverageIQ feature + lobby films (2026-10)
   Scoped to .bqf / .films / .film-modal so nothing else on the site is affected. */

/* ---------- BeverageIQ feature ---------- */
.bqf { position: relative; isolation: isolate; overflow: hidden; padding: var(--sp-16) 0 var(--sp-20); }
.bqf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 22% 45%, rgba(86, 170, 205, 0.20) 0%, rgba(86, 170, 205, 0) 62%),
    radial-gradient(50% 60% at 85% 10%, rgba(194, 154, 69, 0.14) 0%, rgba(194, 154, 69, 0) 60%);
}
.bqf__grid { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.bqf__phone { position: relative; justify-self: center; width: min(100%, 320px); }
.bqf__device {
  position: relative; border-radius: 44px; padding: 10px; background: linear-gradient(145deg, #2b2f36, #0b0d10 60%, #23262c);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 30px 70px rgba(0,0,0,0.55), 0 0 90px rgba(86,170,205,0.18);
}
.bqf__device img { display: block; width: 100%; height: auto; border-radius: 35px; }
.bqf__device::after { /* soft glass sheen */
  content: ""; position: absolute; inset: 10px; border-radius: 35px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 32%);
}
.bqf__mark { display: block; width: min(300px, 70%); height: auto; margin: 0 0 var(--sp-4) -6px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45)); }
.bqf .eyebrow { color: var(--color-brass-300); }
.bqf__title { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; margin: 0 0 var(--sp-4); }
.bqf__lede { color: var(--color-ink-700); font-size: 1.12rem; line-height: 1.65; max-width: 40em; margin: 0 0 var(--sp-5); }
.bqf__points { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: grid; gap: var(--sp-2); }
.bqf__points li { position: relative; padding-left: 1.9em; color: var(--color-ink-700); line-height: 1.5; }
.bqf__points li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 1.05em; height: 1.05em; border-radius: 50%;
  border: 1px solid rgba(231, 200, 135, 0.7);
  background: radial-gradient(circle at 50% 50%, var(--color-brass-300) 0 26%, transparent 30%);
}
.bqf__stores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.bqf__store { display: inline-flex; border-radius: 9px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.bqf__store img { display: block; height: 48px; width: auto; }
.bqf__store:hover, .bqf__store:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.45); }
.bqf__store:focus-visible, .bqf__web:focus-visible { outline: 2px solid var(--color-brass-300); outline-offset: 3px; }
.bqf__web { display: inline-flex; align-items: center; gap: .45em; color: var(--color-brass-300); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(231,200,135,0.35); padding-bottom: 2px; }
.bqf__web:hover { border-bottom-color: var(--color-brass-300); }
.bqf__note { margin-top: var(--sp-5); font-size: 0.85rem; color: var(--text-on-light-mute); max-width: 44em; }
@media (max-width: 860px) {
  .bqf__grid { grid-template-columns: 1fr; }
  .bqf__phone { order: 2; width: min(78%, 280px); }
  .bqf__copy { order: 1; }
}

/* ---------- Lobby films ---------- */
.films { padding: var(--sp-16) 0 var(--sp-20); }
.films__head { max-width: 720px; margin-bottom: var(--sp-8); }
.films__head .eyebrow { color: var(--color-brass-300); }
.films__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.film { margin: 0; }
.film__frame {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; overflow: hidden;
  border-radius: var(--radius-lg, 16px); background: #000; aspect-ratio: 2.2 / 1;
  box-shadow: 0 0 0 1px rgba(216,183,119,0.28), 0 24px 60px rgba(0,0,0,0.5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.film--side .film__frame { aspect-ratio: 16 / 9; }
.film__frame video, .film__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film__frame:hover, .film__frame:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(231,200,135,0.6), 0 30px 70px rgba(0,0,0,0.6); }
.film__frame:focus-visible { outline: 2px solid var(--color-brass-300); outline-offset: 4px; }
.film__chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .5em;
  font: 600 0.72rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: #F4EFE2;
  background: rgba(15, 10, 6, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(231,200,135,0.35); border-radius: 999px; padding: .55em .9em;
}
.film__chip--live { top: 14px; left: 14px; }
.film__chip--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E46A3A; box-shadow: 0 0 0 0 rgba(228,106,58,.7); animation: filmPulse 2s infinite; }
.film__chip--expand { bottom: 14px; right: 14px; transition: background .2s var(--ease); }
.film__frame:hover .film__chip--expand, .film__frame:focus-visible .film__chip--expand { background: rgba(194,154,69,0.92); color: #1c140b; }
.film__play {
  position: absolute; z-index: 2; left: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(15,10,6,0.6); border: 1px solid rgba(231,200,135,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.film__play::after { content: ""; position: absolute; left: 20px; top: 15px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #F4EFE2; }
.films__grid .film__frame.is-paused .film__chip--live { display: none; }
.film figcaption { padding-top: var(--sp-4); }
.film figcaption h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; margin: 0 0 var(--sp-2); color: var(--text-on-light); }
.film figcaption p { margin: 0 0 var(--sp-3); color: var(--color-ink-700); line-height: 1.55; }
.film__link { color: var(--color-brass-300); font-weight: 600; text-decoration: none; font-size: .92rem; }
.film__link:hover { text-decoration: underline; }
@keyframes filmPulse { 0% { box-shadow: 0 0 0 0 rgba(228,106,58,.65); } 70% { box-shadow: 0 0 0 8px rgba(228,106,58,0); } 100% { box-shadow: 0 0 0 0 rgba(228,106,58,0); } }
@media (prefers-reduced-motion: reduce) { .film__chip--live::before { animation: none; } .film__frame, .bqf__store { transition: none; } }
@media (max-width: 860px) { .films__grid { grid-template-columns: 1fr; } .film__frame { aspect-ratio: 16 / 9; } }

/* ---------- Full-screen player ---------- */
.film-modal { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; }
.film-modal[hidden] { display: none; }
.film-modal iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #000; }
.film-modal__bar { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; gap: 10px; opacity: 1; transition: opacity .4s var(--ease); }
.film-modal.is-idle .film-modal__bar { opacity: 0; }
.film-modal__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; height: 42px; min-width: 42px; padding: 0 14px;
  font: 600 .8rem/1 var(--font-sans); letter-spacing: .08em; color: #F4EFE2; text-decoration: none; cursor: pointer;
  background: rgba(20,14,8,0.72); border: 1px solid rgba(231,200,135,0.45); border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.film-modal__btn:hover, .film-modal__btn:focus-visible { background: rgba(194,154,69,0.92); color: #1c140b; outline: none; }
.film-modal__btn--close { font-size: 1.4rem; padding: 0; width: 42px; }
html.film-open, html.film-open body { overflow: hidden; }