/* ══════════════════════════════════════════════════
   LA VIE EN ROSE TALENT — shared stylesheet
   Every page links this file. Page-specific tweaks go in a <style> block
   on that page, the same way bradhasse.com does it.

   The look: light and celebratory. A powder-blue hero, white content bands,
   the logo's rose for buttons and the booking band, and a champagne gold for
   small festive touches. Only the footer is dark. Display type is Instrument
   Serif Display for headings, everything else DM Sans (chosen 2026-10-19).
══════════════════════════════════════════════════ */

:root {
  /* colour */
  --ink: #16121a;          /* stage black, a hair of aubergine */
  --ink-2: #221c27;        /* raised surface on dark */
  --ink-line: #3a3240;     /* hairlines on dark */
  --paper: #ffffff;
  --mist: #fbf7f4;         /* warm light band (song lists) */
  --sky: #e8f0f6;          /* powder blue: hero ground */
  --sky-line: #cbdae7;     /* hairlines on powder blue */
  --line: #e7e1e5;
  --text: #241f27;
  --muted: #6f6672;
  --muted-dark: #b3a9b6;   /* secondary text on dark */
  --rose: #b8195c;         /* sampled from the logo's dancers */
  --rose-hover: #9c124c;
  --rose-glow: #e04a84;    /* rose that reads on dark backgrounds */
  --blush: #fbe8f0;        /* search highlight */
  --gold: #d9a441;         /* champagne: small festive touches only */
  --gold-soft: #fbf1dc;
  --gold-text: #a77a1f;    /* gold dark enough to read as text */

  /* type */
  --display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* scale */
  --fs-hero: clamp(50px, 8.6vw, 116px);
  --fs-h2: clamp(32px, 4.4vw, 52px);
  --fs-h3: clamp(22px, 2.3vw, 27px);
  --fs-lede: clamp(18px, 1.6vw, 21px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-label: 12.5px;

  /* layout */
  --max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --band: clamp(40px, 5.5vw, 76px);
  --radius: 4px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.band--dark { background: var(--ink); color: #fff; }
.band--mist { background: var(--mist); }

/* small uppercase label above headings */
.eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 12px;
}
/* a short gold line under each label */
.eyebrow::after { content: ""; display: block; width: 28px; height: 2px; background: var(--gold); margin-top: 8px; }
.band--dark .eyebrow { color: var(--rose-glow); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: 0; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
.lede { font-size: var(--fs-lede); line-height: 1.55; max-width: 34em; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn--rose { background: var(--rose); color: #fff; }
.btn--rose:hover { background: var(--rose-hover); }
.btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn--ghost:hover { background: rgba(127,127,127,.12); }
.btn--small { min-height: 42px; padding: 0 20px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ══════════════════════════════════════════════════
   HEADER — white, sticks to the top of every page
══════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94); color: var(--text);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: block; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  font-size: 14.5px; font-weight: 500; text-decoration: none;
  padding: 8px 12px; border-radius: 999px; color: var(--text);
}
.nav a:hover { color: var(--rose); background: var(--sky); }
.nav a[aria-current="page"] { color: var(--rose); }
.nav .btn { margin-left: 10px; color: #fff; }
.nav .btn:hover { color: #fff; background: var(--rose-hover); }
.menu-btn { display: none; }

@media (max-width: 960px) {
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
    background: none; border: 1px solid var(--line); color: var(--text);
    border-radius: 999px; height: 42px; padding: 0 16px; cursor: pointer; font-size: 14px; font-weight: 600;
  }
  .menu-btn span { display: block; width: 16px; height: 1.5px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: 8px var(--gutter) 28px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px -20px rgba(30, 50, 80, .25);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav:not(.is-open) { display: none; }
  .nav a { font-family: var(--display); font-size: 30px; font-weight: 400; padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav a:hover { background: none; color: var(--rose); }
  .nav .btn { margin: 22px 0 0; font-family: var(--body); font-size: 16px; border: 0; }
}

/* ══════════════════════════════════════════════════
   ACT PAGE — the template every performer page uses
══════════════════════════════════════════════════ */
.act-hero { padding-block: clamp(28px, 4vw, 56px) var(--band); overflow: hidden; background: var(--sky); color: var(--text); position: relative; }
/* a soft champagne glow behind the video, like stage lights */
.act-hero::before {
  content: ""; position: absolute; right: -10%; top: -20%; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(217,164,65,.22), rgba(217,164,65,0));
  pointer-events: none;
}
.act-hero .wrap { position: relative; }
.act-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.act-name { font-size: var(--fs-hero); line-height: .86; letter-spacing: -0.02em; }
.act-tagline { font-family: var(--display); font-style: italic; font-size: clamp(24px, 2.9vw, 36px); color: var(--rose); margin: 8px 0 16px; line-height: 1.1; }
.act-hero .lede { color: #3f4650; margin: 0 0 22px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 24px; border-top: 1px solid var(--sky-line); }
.facts div { padding: 12px 16px 0 0; }
.facts div + div { padding-left: 16px; border-left: 1px solid var(--sky-line); }
.facts dt { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.35; }

@media (max-width: 860px) {
  .act-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .act-hero .video { order: -1; }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts div, .facts div + div { padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--sky-line); display: flex; justify-content: space-between; gap: 16px; }
  .facts dt { margin: 0; }
  .facts dd { text-align: right; }
}

/* video: a poster with a play button; the YouTube player only loads on click */
.video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius); overflow: hidden; background: #000; }
/* only the big hero video gets the tilt and the shadow */
.act-intro .video { box-shadow: 0 24px 50px -26px rgba(30, 50, 90, .5); }


.video button { all: unset; cursor: pointer; position: absolute; inset: 0; display: block; }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; }
.video button:hover img { transform: scale(1.03); opacity: .85; }
.video .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform .2s;
}
.video button:hover .play { transform: translate(-50%, -50%) scale(1.07); }
.video .play::before { content: ""; border-left: 24px solid var(--rose); border-top: 15px solid transparent; border-bottom: 15px solid transparent; margin-left: 6px; }
.video .caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; font-size: 14px; font-weight: 500; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video:focus-within { outline: 2px solid var(--rose); outline-offset: 4px; }

/* photos: an uneven grid that keeps each photo's own shape */
.photos-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.photos { display: grid; grid-template-columns: 1.05fr 1.4fr 1.1fr; gap: 14px; align-items: start; }
.photos button { all: unset; cursor: zoom-in; display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px -22px rgba(60, 40, 50, .45); }
.photos button:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.photos img { width: 100%; height: auto; transition: transform .6s ease; }
.photos button:hover img { transform: scale(1.025); }
.photos button:nth-child(2) { margin-top: 64px; }
/* a touch of tilt, like prints scattered on a table */
@media (min-width: 721px) {
  .photos button:nth-child(1) { transform: rotate(-1.5deg); }
  .photos button:nth-child(3) { transform: rotate(1.5deg); }
}
@media (max-width: 720px) {
  .photos { grid-template-columns: 1fr 1fr; }
  .photos button:nth-child(2) { margin-top: 0; }
  .photos button:first-child { grid-row: span 2; }
}

.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
.lightbox::backdrop { background: rgba(14, 10, 16, .92); }
.lightbox img { max-width: 94vw; max-height: 86vh; width: auto; height: auto; border-radius: var(--radius); }
.lightbox form { text-align: right; margin-bottom: 10px; }
.lightbox button { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 999px; padding: 6px 16px; cursor: pointer; }

/* ── song list ── */
.songs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; margin-bottom: 24px; }
.songs-head p { color: var(--muted); margin: 10px 0 0; max-width: 36em; }
@media (max-width: 720px) { .songs-head { grid-template-columns: minmax(0, 1fr); } }
.song-tools { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.song-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.song-tabs button {
  border: 1px solid var(--line); background: var(--paper); color: var(--text);
  border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.song-tabs button:hover { border-color: var(--muted); }
.song-tabs button[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: #fff; }
.song-tabs .n { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; }
.song-search { position: relative; flex: 0 1 280px; min-width: 0; }
.song-search input {
  width: 100%; font: inherit; font-size: 15px; padding: 10px 16px 10px 40px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--text);
}
.song-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.song-group + .song-group { margin-top: 30px; }
.song-group h3 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.song-group h3 small { font-family: var(--body); font-size: var(--fs-small); color: var(--muted); letter-spacing: 0; }
.song-list { list-style: none; margin: 0; padding: 0; columns: 4 220px; column-gap: 40px; }
.song-list li { break-inside: avoid; display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.35; }
.song-list .key { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--gold-text); font-variant-numeric: tabular-nums; padding-top: 2px; }
.song-list mark { background: var(--blush); color: inherit; border-radius: 2px; }
.song-empty { color: var(--muted); padding: 20px 0; }
.song-note { margin-top: 20px; font-size: var(--fs-small); color: var(--muted); }

/* ── sections shared by act and event pages ── */
.band--sky { background: var(--sky); }
.section-title { margin-bottom: 20px; }
.act-name--long { font-size: clamp(42px, 6.4vw, 84px); }
.hero-photo img { width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px -28px rgba(30, 50, 90, .45); }
.text-link { color: var(--rose); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* about: text with an optional photo beside it */
.about .wrap.about--photo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.about-photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 18px 40px -22px rgba(60, 40, 50, .45); }
@media (max-width: 860px) { .about .wrap.about--photo { grid-template-columns: minmax(0, 1fr); } }
.prose { max-width: 68ch; }
.prose h2 { margin-bottom: 14px; }
.prose p { margin: 0 0 .75em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose a { color: var(--rose); }
.prose strong { font-weight: 600; }
.prose--songs { columns: 2 300px; column-gap: 48px; max-width: none; font-size: 15.5px; }

/* video grid */
.vgroup-title { margin: 26px 0 12px; font-size: var(--fs-h3); }
.vgroup-title:first-of-type { margin-top: 0; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.vgrid .video .play { width: 60px; height: 60px; }
.vgrid .video .play::before { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; margin-left: 5px; }
.vgrid .video .caption { font-size: 13px; padding: 30px 14px 10px; }

/* band-size / package cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.card { background: var(--paper); border-radius: 8px; overflow: hidden; box-shadow: 0 12px 30px -20px rgba(30, 50, 80, .4); display: flex; flex-direction: column; }
.card .video { border-radius: 0; }
.card > img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { padding: 16px 18px 18px; font-size: 15.5px; }
.card-body h3 { font-size: 24px; margin-bottom: 6px; }
.card-body p { margin: 0 0 .7em; color: var(--muted); }
.card-body a { color: var(--rose); }

/* audio */
.audio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.audio-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 18px; background: var(--mist); border-radius: 8px; }
.audio-list span { font-weight: 500; }
.audio-list audio { width: min(100%, 320px); height: 40px; }

/* photo gallery: keeps every photo's shape (masonry columns) */
.gallery { columns: 3 240px; column-gap: 14px; }
.gallery button { all: unset; display: block; cursor: zoom-in; margin-bottom: 14px; break-inside: avoid; border-radius: var(--radius); overflow: hidden; }
.gallery button:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.gallery img { width: 100%; height: auto; transition: transform .6s ease; }
.gallery button:hover img { transform: scale(1.025); }
.gallery--small { columns: 4 180px; margin-top: 18px; }

/* ── main pages ── */
.page-title { font-size: clamp(36px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 14px; }
.act-hero--solo .wrap { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.act-hero--solo .lede { max-width: 40em; }
.page-hero .lede a { color: var(--rose); }
.page-hero .btn-row { margin-top: 4px; }
.section-intro { margin: -6px 0 20px; color: var(--muted); }
.band .prose + .prose, .band .prose + .cards, .band .cards + .prose, .band .prose + .gallery, .band .prose + .vgrid { margin-top: 18px; }
.band .gallery + .prose, .band .vgrid + .prose { margin-top: 18px; }
.center-link { text-align: center; margin: 24px 0 0; }
.card-link { margin: 6px 0 0 !important; }

/* a video beside its text (wedding packages, online shows) */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.pair:first-of-type { border-top: 0; }
@media (max-width: 760px) { .pair { grid-template-columns: minmax(0, 1fr); } }

/* tiles linking to acts / events */
.act-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); gap: 18px 14px; }
@media (max-width: 520px) { .act-tile-name { font-size: 21px; } .act-tile-meta { font-size: 13px; } }
.act-tiles--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.act-tile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); }
.act-tile-img { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--sky); }
.act-tiles--3 .act-tile-img { aspect-ratio: 4 / 3; }
.act-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.act-tile:hover .act-tile-img img { transform: scale(1.04); }
.act-tile-name { font-family: var(--display); font-size: 26px; line-height: 1.1; margin-top: 6px; }
.act-tile:hover .act-tile-name { color: var(--rose); }
.act-tile-meta { font-size: 14px; color: var(--muted); line-height: 1.4; }
.act-tile--text { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; gap: 6px; }
.band--mist .act-tile--text, .band--sky .act-tile--text { border-color: transparent; }
.act-tile--text:hover { border-color: var(--rose); }

/* FAQ */
.faq-list { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; gap: 18px; align-items: baseline; padding: 14px 0; font-family: var(--display); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; margin-left: auto; font-family: var(--body); font-size: 24px; color: var(--rose); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--rose); }
.faq-n { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--gold-text); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.faq-item .prose { padding: 0 0 16px 38px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.form-frame { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.form-frame iframe { display: block; width: 100%; min-height: 1100px; border: 0; }
.contact-aside h2 { font-size: var(--fs-h3); margin-bottom: 18px; }
.contact-aside p { margin: 0 0 18px; }
.contact-aside a { color: var(--rose); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* homepage numbers */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.stats div { border-top: 2px solid var(--gold); padding-top: 14px; }
.stats strong { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.4vw, 54px); line-height: 1; color: var(--rose); }
.stats span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.badges { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.badges img { width: 180px; height: auto; }
.clients { display: grid; gap: 20px; }
.clients img { width: 100%; height: auto; border-radius: var(--radius); }

/* ── booking call: the rose band ── */
.book { text-align: center; background: var(--rose); color: #fff; }
.book .eyebrow { color: #fff; }
.book .eyebrow::after { margin-inline: auto; }
.book h2 { font-size: clamp(36px, 5.6vw, 72px); }
.book h2 em { color: #ffd98a; }
.book p { color: #fde7ef; margin: 14px auto 24px; max-width: 32em; font-size: var(--fs-lede); }
.book .btn-row { justify-content: center; }
.book .btn--rose { background: #fff; color: var(--rose); }
.book .btn--rose:hover { background: var(--gold-soft); }
.book .contact-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 20px; font-size: 15px; color: #f8cfdd; }
.book .contact-line a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.book .contact-line a:hover { border-color: #fff; }
.book :focus-visible { outline-color: #fff; }

/* sticky booking bar: shows on act pages once the hero has scrolled away */
.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255, 255, 255, .97); color: var(--text); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(30, 50, 80, .35);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transform: translateY(110%); transition: transform .3s ease;
}
.book-bar.is-shown { transform: none; }
.book-bar strong { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; }
.book-bar span { display: block; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .book-bar { transition: none; } }

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.site-footer { background: var(--ink); color: var(--muted-dark); border-top: 1px solid var(--ink-line); padding-block: 44px 28px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; }
.foot-grid h4 { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 14px; font-weight: 600; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; color: var(--muted-dark); }
.foot-grid a:hover { color: #fff; }
.foot-brand img { height: 44px; width: auto; margin-bottom: 18px; }
.foot-brand p { margin: 0; max-width: 22em; }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink-line); display: grid; place-items: center; color: #fff; }
.social a:hover { border-color: var(--rose-glow); color: var(--rose-glow); }
.social svg { width: 17px; height: 17px; }
.foot-base { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--ink-line); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }
body.has-book-bar .site-footer { padding-bottom: 110px; }

/* ══════════════════════════════════════════════════
   MEDIA HERO — every page opens on a full-width photo, photo mosaic or
   background video, with the title on top. The picture is never darkened:
   the text carries its own soft shadow instead.
══════════════════════════════════════════════════ */
.media-hero {
  --h: clamp(420px, 74svh, 760px);
  position: relative; min-height: var(--h); overflow: hidden;
  display: grid; align-items: end; color: #fff; background: #1b1f27;
}
.media-hero-media { position: absolute; inset: 0; display: flex; gap: 4px; }
.media-hero-media > div { flex: 1; min-width: 0; }
.media-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 720px) { .media-hero-media--mosaic > div:not(:first-child) { display: none; } }
.media-hero-media iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100%, calc(var(--h) * 16 / 9)); height: max(100%, 56.25vw);
  border: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
.media-hero.is-playing .media-hero-media iframe { opacity: 1; }
.media-hero-content { position: relative; padding-block: 32px 40px; }
.media-hero-content, .media-hero-content .lede, .media-hero-content .eyebrow { color: #fff; }
.media-hero-content h1, .media-hero-content p { text-shadow: 0 0 28px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.6); }
.media-hero-content .eyebrow::after { box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.media-hero-content .page-title { max-width: 15em; margin-bottom: 10px; }
.media-hero-content .act-name { margin: 0; }
.hero-tagline { font-family: var(--display); font-style: italic; font-size: clamp(21px, 2.6vw, 31px); line-height: 1.15; margin: 6px 0 16px; }
.media-hero-content .lede { max-width: 36em; margin: 0 0 18px; font-size: clamp(17px, 1.5vw, 20px); }
.media-hero-content .btn--ghost, .btn--light { border-color: rgba(255,255,255,.85); color: #fff; background: rgba(255,255,255,.08); }
.media-hero-content .btn--ghost:hover, .btn--light:hover { background: rgba(255,255,255,.2); }
.media-hero-content .btn { box-shadow: 0 4px 16px rgba(0,0,0,.18); }

/* banner images that already have text in them: shown whole, title underneath */
.media-hero--banner { display: block; min-height: 0; color: var(--text); background: var(--sky); }
.media-hero-banner img { width: 100%; height: auto; max-height: 72svh; object-fit: contain; background: #111; }
.media-hero-below { padding-block: 24px 28px; }
.media-hero-below .page-title { margin-bottom: 8px; }
.media-hero-below .lede { margin: 0 0 16px; color: #3f4650; }

.video-hero-toggle {
  position: absolute; right: var(--gutter); top: 16px; z-index: 2;
  background: rgba(12,16,26,.45); color: #fff; border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px; padding: 5px 13px; font-size: 13px; cursor: pointer;
}
.video-hero-toggle:hover { background: rgba(12,16,26,.75); }

/* performer pages: compact strip under the hero with the facts and the demo video */
.act-intro { background: var(--sky); padding-block: 28px 32px; }
.act-intro .wrap.act-intro--video { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.act-intro .lede { color: #3f4650; margin: 0 0 16px; font-size: clamp(17px, 1.4vw, 19px); }
.act-intro .facts { margin-bottom: 18px; }
@media (max-width: 860px) { .act-intro .wrap.act-intro--video { grid-template-columns: minmax(0, 1fr); } }

/* large video player (opens from any video poster) */
.video-modal { border: 0; padding: 0; background: transparent; width: min(1160px, 94vw); max-width: none; overflow: visible; }
.video-modal::backdrop { background: rgba(10, 12, 18, .9); }
.video-modal form { text-align: right; margin-bottom: 10px; }
.video-modal-close { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 999px; padding: 7px 16px; font-size: 14px; cursor: pointer; }
.video-modal-close:hover { background: rgba(255,255,255,.12); }
.video-modal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; max-height: 82svh; }
.video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 720px) { .video-modal { width: 100vw; } .video-modal-frame { border-radius: 0; } .video-modal form { padding-right: 12px; } }

/* ── reviews (real reviews written into the page; no widget) ── */
.stars { color: var(--gold); letter-spacing: 2px; font-size: 16px; }
.rating-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 22px; }
.rating-score { display: flex; align-items: baseline; gap: 10px; }
.rating-score strong { font-family: var(--display); font-weight: 400; font-size: 52px; line-height: 1; color: var(--rose); }
.rating-bar p { margin: 0; color: var(--muted); font-size: 15px; }
.rating-bar a { color: var(--rose); }
.reviews { columns: 3 300px; column-gap: 16px; }
.review { break-inside: avoid; margin: 0 0 16px; background: var(--paper); border-radius: 8px; padding: 18px 20px; box-shadow: 0 10px 26px -20px rgba(30, 50, 80, .45); }
.review blockquote { margin: 8px 0 12px; font-size: 15.5px; line-height: 1.55; }
.review blockquote p { margin: 0; }
.review figcaption { display: flex; flex-direction: column; font-size: 14px; }
.review figcaption span { color: var(--muted); font-size: 13px; }
.review-more summary { list-style: none; cursor: pointer; }
.review-more summary::-webkit-details-marker { display: none; }
.review-more .read-more { display: block; margin-top: 6px; color: var(--rose); font-weight: 600; font-size: 14px; }
.review-more[open] summary { display: none; }

/* ── client logos ── */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 18px 22px; align-items: center; }
.logos img { width: 100%; height: 64px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s; }
.logos img:hover { filter: none; opacity: 1; }

/* ── packages & prices ── */
.price-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.price-card { background: var(--paper); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 30px -20px rgba(30, 50, 80, .4); }
.price-card > img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.price-body { padding: 16px 18px 18px; }
.price-body h3 { font-size: 24px; }
.price-caption { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.price { font-family: var(--display); font-size: 30px; color: var(--rose); margin: 8px 0 0; line-height: 1.1; }
.price-note { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.price-body ul { margin: 12px 0 0; padding-left: 1.1em; font-size: 14.5px; }
.price-body li { margin-bottom: 4px; }

/* ── PDF shown on the page ── */
.pdf-block { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.pdf-preview img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 16px 40px -22px rgba(30, 50, 80, .55); background: #fff; }
@media (max-width: 720px) { .pdf-block { grid-template-columns: minmax(0, 1fr); } .pdf-preview { max-width: 320px; } }
.faq-cat { font-size: var(--fs-h3); margin: 26px 0 6px; color: var(--rose); }
.faq-cat:first-child { margin-top: 0; }

/* ══════════════════════════════════════════════════
   PLAN YOUR EVENING — a sentence filled in by tapping photos
══════════════════════════════════════════════════ */
.planner { position: relative; overflow: hidden; color: #fff; background: #1b1f27;
  min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: flex-end; padding-block: 36px 32px; }
.pl-stage { position: absolute; inset: 0; }
.pl-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transform: scale(1.04); transition: opacity .9s ease, transform 6s ease; }
.pl-stage img.is-on { opacity: 1; transform: scale(1); }
.pl-top, .pl-picker { position: relative; }
.pl-top .eyebrow { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.pl-sentence { font-size: clamp(34px, 5.2vw, 70px); line-height: 1.18; max-width: 18em; margin: 0 0 18px;
  text-shadow: 0 0 28px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.55); }
.pl-blank { font: inherit; font-style: italic; color: #fff; cursor: pointer; text-shadow: inherit;
  background: rgba(255,255,255,.14); border: 0; border-bottom: 3px solid var(--gold); border-radius: 8px 8px 0 0; padding: 0 .22em; margin: 0 .04em;
  transition: background .2s; backdrop-filter: blur(2px); }
.pl-blank:hover { background: rgba(255,255,255,.26); }
.pl-blank.is-open { background: rgba(184, 25, 92, .88); border-bottom-color: #fff; }
.pl-blank.is-set { color: #ffe3a3; }
.pl-blank.is-set.is-open { color: #fff; }
.pl-more { display: inline; }
.pl-add { font: 600 16px var(--body); color: #fff; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: 6px 14px; cursor: pointer; vertical-align: middle; text-shadow: none; }
.pl-progress { height: 3px; width: min(320px, 60%); background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; margin-bottom: 18px; }
.pl-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--gold); transition: width .5s ease; }
.pl-ask { font-size: 19px; font-weight: 600; margin: 0 0 12px; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.pl-ask small { font-weight: 400; opacity: .9; margin-left: 6px; }
.pl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pl-tile { all: unset; cursor: pointer; display: flex; flex-direction: column; background: #fff; color: var(--text); border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.55); transition: transform .2s ease, box-shadow .2s; }
.pl-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(0,0,0,.6); }
.pl-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pl-tile.is-on { outline: 3px solid var(--rose); outline-offset: 2px; }
.pl-tile-img { display: block; aspect-ratio: 4 / 3; background: var(--sky); overflow: hidden; }
.pl-tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pl-tile-name { font-family: var(--display); font-size: 21px; line-height: 1.1; padding: 8px 12px 0; }
.pl-tile-hint { font-size: 12.5px; color: var(--muted); padding: 2px 12px 10px; line-height: 1.3; }
.pl-tile--skip { background: rgba(255,255,255,.85); justify-content: center; text-align: center; min-height: 120px; }
@media (max-width: 520px) { .pl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pl-tile-name { font-size: 18px; } }

/* the evening, building up card by card */
.pl-evening { background: var(--sky); }
.pl-evening-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px; }
.pl-reset { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 0 0 20px; }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; counter-reset: step; }
.pl-card { background: var(--paper); border-radius: 10px; overflow: hidden; box-shadow: 0 16px 36px -22px rgba(30, 50, 80, .55); }
@media (prefers-reduced-motion: no-preference) {
  .pl-card { animation: plIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 140ms); }
  @keyframes plIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
}
.pl-card-img { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--line); }
.pl-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pl-card-when { position: absolute; left: 12px; bottom: 10px; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.75); }
.pl-card-body { padding: 12px 14px 14px; }
.pl-card-body h3 { font-size: 24px; }
.pl-card-body h3 a { text-decoration: none; }
.pl-card-body p { margin: 2px 0 10px; font-size: 14px; color: var(--muted); }
.pl-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.pl-swap { background: var(--sky); border: 0; border-radius: 999px; padding: 6px 12px; font: 600 13px var(--body); color: var(--text); cursor: pointer; }
.pl-swap:hover { background: var(--blush); color: var(--rose); }
.pl-send { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 24px; background: var(--paper); border-radius: 10px; padding: 18px 20px; }
.pl-send h3 { font-size: 26px; } .pl-send p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.pl-send textarea { width: 100%; min-height: 110px; font: 13px/1.5 var(--body); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; resize: vertical; background: var(--mist); color: var(--text); }
.plan-copied { grid-column: 1 / -1; margin: 0; font-weight: 600; color: var(--rose); }
.plan-form { margin-top: 18px; }
@media (max-width: 860px) { .pl-send { grid-template-columns: minmax(0, 1fr); } }

/* homepage: pick a style, not an event */
.style-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); gap: 14px; }
.style-link { display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.style-link .style-tile-img { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--sky); }
.style-link img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .5s ease; }
.style-link:hover img { transform: scale(1.05); }
.style-tile-name { font-family: var(--display); font-size: 22px; margin-top: 6px; line-height: 1.1; }
.style-link:hover .style-tile-name { color: var(--rose); }
.style-tile-hint { font-size: 13px; color: var(--muted); line-height: 1.35; }

@media (max-width: 720px) {
  /* phones: photo on top, sentence and tiles right below it so the first tap is on screen */
  .planner { min-height: 0; padding-block: 34svh 24px; }
  .pl-sentence { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 12px; }
  .pl-progress { margin-bottom: 12px; }
}

/* planner: add / remove moments */
.pl-card-btns { display: flex; gap: 6px; }
.pl-remove { background: none; border: 1px solid var(--line); border-radius: 999px; width: 30px; height: 30px; cursor: pointer; color: var(--muted); font-size: 13px; }
.pl-remove:hover { border-color: var(--rose); color: var(--rose); }
.pl-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.pl-addrow > span { font-weight: 600; margin-right: 4px; }
.pl-addm { font: 600 14px var(--body); background: var(--paper); color: var(--text); border: 1.5px dashed var(--sky-line); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.pl-addm:hover { border-color: var(--rose); color: var(--rose); }
.pl-addm.is-suggested { border-style: solid; border-color: var(--rose); color: var(--rose); }
.pl-addm small { font-weight: 400; color: var(--muted); margin-left: 4px; }

/* planner: one row per moment, every act that fits, shortlist with ♡ */
.pl-cards { display: block; }
.pl-row { margin-bottom: 26px; }
@media (prefers-reduced-motion: no-preference) { .pl-row { animation: plIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 140ms); } }
.pl-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 10px; }
.pl-row-head h3 { font-size: clamp(26px, 3vw, 34px); display: flex; align-items: baseline; gap: 10px; }
.pl-row-n { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--gold-text); letter-spacing: .1em; }
.pl-row-head p { margin: 0; color: var(--muted); font-size: 14px; flex: 1 1 260px; }
.pl-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.pl-act { position: relative; scroll-snap-align: start; background: var(--paper); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 24px -18px rgba(30,50,80,.55); transition: transform .2s; }
.pl-act:hover { transform: translateY(-2px); }
.pl-act.is-liked { outline: 3px solid var(--rose); outline-offset: -3px; }
.pl-act-img { display: block; aspect-ratio: 4 / 5; background: var(--line); }
.pl-act-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pl-like { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--rose); font-size: 22px; line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: transform .15s; }
.pl-like:hover { transform: scale(1.08); }
.pl-like[aria-pressed="true"] { background: var(--rose); color: #fff; }
.pl-act-body { padding: 10px 12px 12px; }
.pl-act-body h4 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.1; margin: 0; }
.pl-act-body h4 a { text-decoration: none; }
.pl-act-body p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.3; }
.pl-count { font-weight: 600; color: var(--rose) !important; }

/* planner: one question per line, the open one shows its photos */
.pl-title { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 10px; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.pl-lines { display: grid; gap: 6px; }
.pl-say { font-family: var(--display); font-size: clamp(28px, 3.9vw, 50px); line-height: 1.15; margin: 0;
  text-shadow: 0 0 28px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.55); }
.pl-line.is-done .pl-say { font-size: clamp(22px, 2.6vw, 34px); opacity: .95; }
.pl-check { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--gold); color: #1b1f27;
  font: 700 .55em var(--body); margin-right: .35em; vertical-align: .15em; text-shadow: none; }
.pl-slot { display: inline-block; min-width: 2.2em; padding: 0 .25em; border-bottom: 3px dashed rgba(255,255,255,.9); font-style: italic; }
.pl-line.is-active .pl-slot:not(.is-filled) { animation: plPulse 1.4s ease-in-out infinite; background: rgba(184,25,92,.55); border-radius: 8px 8px 0 0; border-bottom-style: solid; }
@keyframes plPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pl-line.is-active .pl-slot:not(.is-filled) { animation: none; } }
.pl-slot.is-filled { color: #ffe3a3; border-bottom: 3px solid var(--gold); }
.pl-change { font: 600 14px var(--body); color: #fff; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.6); border-radius: 999px;
  padding: 4px 12px; margin-left: 10px; cursor: pointer; vertical-align: middle; text-shadow: none; }
.pl-change:hover { background: rgba(0,0,0,.5); }
.pl-choose { margin: 10px 0 12px; }
.pl-choose span { display: inline-block; background: var(--rose); color: #fff; font: 600 15px var(--body); border-radius: 999px; padding: 7px 16px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); }
.pl-choose small { font-weight: 400; opacity: .9; margin-left: 6px; }
.pl-line.is-active { margin-top: 4px; }
@media (max-width: 720px) { .pl-say { font-size: clamp(25px, 7vw, 33px); } .pl-line.is-done .pl-say { font-size: 22px; } }

/* planner: the short request form at the end (plan already filled in) */
.plan-request { margin-top: 18px; background: var(--paper); border-radius: 10px; padding: 20px 22px 22px; box-shadow: 0 16px 36px -24px rgba(30,50,80,.5); }
.plan-request h3 { font-size: 28px; }
.plan-request-sum { color: var(--rose); font-weight: 600; margin: 4px 0 14px; font-size: 15px; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 16px; }
.pf-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; }
.pf-grid label span { font-weight: 400; color: var(--muted); }
.pf-grid input, .pf-grid textarea { font: 16px var(--body); padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--text); width: 100%; }
.pf-grid input:focus, .pf-grid textarea:focus { outline: 2px solid var(--rose); outline-offset: 0; border-color: transparent; }
.pf-wide { grid-column: 1 / -1; }
.pf-status { margin: 10px 0 0; font-size: 14.5px; }
.pf-status a { color: var(--rose); }
.hp { position: absolute; left: -9999px; }
@media (max-width: 600px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── legibility: a dark backing behind text that sits on a video or photo ──
   Only the text block gets it; the rest of the picture stays at full brightness. */
.hero-text {
  display: inline-block; max-width: min(100%, 780px);
  background: rgba(12, 14, 22, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 14px; padding: 22px 26px 24px;
}
.hero-text .btn-row { margin-bottom: 0; }
.hero-text > :last-child { margin-bottom: 0; }
.media-hero-content h1, .media-hero-content p { text-shadow: none; }
@media (max-width: 720px) { .hero-text { padding: 16px 16px 18px; border-radius: 12px; } }
/* planner: same backing behind each line of the sentence */
.pl-top .eyebrow, .pl-title, .pl-say {
  display: inline; background: rgba(12, 14, 22, .62); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: .08em .34em; border-radius: 10px; text-shadow: none; line-height: 1.5;
}
.pl-top .eyebrow { display: inline-block; padding: 4px 10px; margin-bottom: 10px; }
.pl-title { display: inline-block; margin-bottom: 8px; }
.pl-line { margin-bottom: 4px; }
.pl-line .pl-say { line-height: 1.45; }
.pl-ask { display: inline-block; background: rgba(12, 14, 22, .62); padding: 4px 12px; border-radius: 8px; text-shadow: none; }
/* homepage "Music for every moment": four photo tiles */
.act-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.event-tile .act-tile-img { aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .act-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-top .eyebrow, .pl-title { display: table; }  /* stacked, each with its own snug backing */

/* photo tiles: shapes chosen so groups fit; crops are framed around faces (inline object-position) */
.act-tile-img { aspect-ratio: 1; }
.act-tiles--wide .act-tile-img, .event-tile .act-tile-img { aspect-ratio: 4 / 3; }
.act-tiles--wide { grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr)); }
.act-tile-img img { object-position: 50% 40%; }

/* ── regions: badges on act pages, roster filter ── */
.act-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.badge { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--paper); color: var(--text); border: 1px solid var(--sky-line); text-decoration: none; }
.badge--base { background: var(--ink); color: #fff; border-color: var(--ink); }
.badge--travel { background: var(--gold-soft); border-color: var(--gold); color: #6b4c0f; }
a.badge:hover { filter: brightness(1.08); }
.roster-filter { padding-block: 20px 0; }
.filter-label { margin: 0 0 8px; font-weight: 600; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chips .tab { border: 1px solid var(--line); background: var(--paper); color: var(--text); border-radius: 999px; padding: 7px 14px; font: 500 14px var(--body); cursor: pointer; }
.filter-chips .tab[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: #fff; }
.act-tile-where { font-size: 12.5px; color: var(--gold-text); font-weight: 600; }

/* ══════════════════════════════════════════════════
   EUROPE SITE ADDITIONS (lavieenrosetalent.eu)
   Built-in replacements for the old Elfsight widgets: filter tabs for the
   video library, packages and band grid; the WhatsApp chat button; the
   English / French switch.
══════════════════════════════════════════════════ */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.tabs button {
  border: 1px solid var(--line); background: var(--paper); color: var(--text);
  border-radius: 999px; padding: 8px 15px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.tabs button:hover { border-color: var(--muted); }
.tabs button[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: #fff; }
.tabs .n { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; }
.js .tabbed .vgroup-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tab-panel + .tab-panel { margin-top: 30px; }
.js .tab-panel + .tab-panel { margin-top: 0; }

/* band grid ("A glance into some of our bands") */
.card[hidden] { display: none; }
.card-tag { margin: 0 0 4px !important; font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text) !important; }
.card-meta { font-size: 14px; margin-top: -2px !important; }
.mini-videos { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mini-videos .video .play { width: 34px; height: 34px; }
.mini-videos .video .play::before { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; margin-left: 3px; }
.mini-videos .video .caption { display: none; }

/* home: tiles whose pictures have their title baked in are shown whole */
.act-tiles--whole .act-tile-img { aspect-ratio: auto; background: none; }
.act-tiles--whole .act-tile-img img { height: auto; }
.moments .act-tile-meta { font-size: 15.5px; }
.center-row { justify-content: center; margin-top: 28px; }
.price-foot { margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.price-foot a { color: var(--rose); }

/* WhatsApp chat (weddings pages) */
.wa-chat { position: fixed; right: 18px; bottom: 18px; z-index: 60; }
.wa-chat summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  background: #1f9d55; color: #fff; border-radius: 999px; padding: 12px 18px 12px 14px;
  font-size: 15px; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
}
.wa-chat summary::-webkit-details-marker { display: none; }
.wa-chat summary svg { width: 24px; height: 24px; flex-shrink: 0; }
.wa-chat summary:hover { background: #188046; }
.wa-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: min(340px, calc(100vw - 36px));
  background: var(--paper); color: var(--text); border-radius: 10px; padding: 18px 18px 14px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); font-size: 15px;
}
.wa-panel p { margin: 0 0 10px; }
.wa-title { font-family: var(--display); font-size: 26px; line-height: 1.1; }
.wa-panel .btn { width: 100%; justify-content: center; background: #1f9d55; border-color: #1f9d55; }
.wa-note { margin: 8px 0 0 !important; font-size: 12.5px; color: var(--muted); text-align: center; }
body.has-book-bar .wa-chat { bottom: 86px; }
@media (max-width: 520px) { .wa-chat summary span { display: none; } .wa-chat summary { padding: 14px; } }

/* English / French switch in the header */
.lang { display: inline-flex; gap: 2px; font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.lang a, .lang span { padding: 4px 6px; border-radius: 4px; text-decoration: none; }
.lang span { color: var(--rose); }
.lang a { color: var(--muted); }
.lang a:hover { color: var(--text); background: var(--sky); }
.site-header .lang { margin-left: -14px; }
@media (max-width: 960px) {
  .site-header .lang { margin-left: auto; }
  .site-header .menu-btn { order: 2; margin-left: -16px; }
}
.nav .btn[aria-current="page"] { color: #fff; }