/* ============================================================
   Install Day VSL — page shells + bespoke pieces.
   Components inside the shells are the site's own harvested markup;
   this file only supplies layout the Framer runtime used to supply,
   plus the few VSL-only elements (eyebrow, beat line, play disc,
   venue cards, FAQ frame, close, floating CTA).
   Values come from tokens.css / the measured design language.
   ============================================================ */

/* ---------- section shells ---------- */
.selr-sec { width: 100%; display: flex; justify-content: center; background: #FCFCFA; }
.selr-sec[id], .selr-band[id], .selr-businesses[id] { scroll-margin-top: 90px; }
.selr-sec-inner { width: 100%; max-width: 1320px; padding: 110px 60px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.selr-sec .framer-styles-preset-pc4jh9 { text-align: center; max-width: 900px; }
.selr-support-center { text-align: center; color: #616161; max-width: 640px; }
@media (max-width: 809.98px) {
  .selr-sec-inner { padding: 70px 20px; gap: 28px; }
}

/* ---------- hero and primary VSL ---------- */
.selr-vsl-hero {
  width: 100%;
  padding: 130px 20px 64px;
  background: #F7F5EF;
}
.selr-vsl-hero-inner {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.selr-vsl-copy {
  width: min(1080px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* product mark: the name, then the event line beneath it */
/* ---------- the city tag ----------
   There is a day like this in several cities, so the city has to be legible
   the moment anyone lands, wherever they are on the page. One mark, three
   places: over the hero title, in the menu bar, and on the traveller pill.
   Purple #6736E2 on the brand's surface white, 30px radius, Manrope 600. */
.selr-city-tag {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 15px 0 12px;
  border-radius: 30px;
  background: #6736E2; color: #FFFFFA;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: -0.02em; line-height: 1;
  white-space: nowrap; flex: none;
}
.selr-city-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #FFFFFA; flex: none;
}
.selr-city-tag-hero { height: 34px; font-size: 15px; padding: 0 17px 0 14px; }

.selr-vsl-mark { margin: 0 0 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.selr-vsl-product,
.selr-section-kicker {
  margin: 0;
  font-family: "Manrope Variable", "Manrope", sans-serif;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 400;
  font-variation-settings: "wght" 585;
  letter-spacing: -0.04em;
  color: #242424;
}
.selr-section-kicker { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.025em; color: #616161; margin-bottom: 22px; }
.selr-vsl-event {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #616161;
}
.selr-vsl-copy h1 {
  margin: 0;
  font-family: "Manrope Variable", "Manrope", sans-serif;
  font-size: clamp(58px, 6.9vw, 104px);
  line-height: .98;
  font-weight: 400;
  font-variation-settings: "wght" 585;
  letter-spacing: -0.04em;
  color: #242424;
  text-wrap: balance;
}
.selr-vsl-h1-tone { color: #616161; }
.selr-vsl-sub {
  margin: 26px 0 0;
  max-width: 640px;
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #616161;
}
/* CTA pair */
.selr-vsl-cta { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.selr-vsl-btn {
  height: 56px; padding: 0 30px; font-size: 17px; letter-spacing: -0.03em;
}
.selr-vsl-btn-ghost {
  display: inline-flex; align-items: center; gap: 12px;
  border-radius: 40px; border: 1px solid #E3E3E3;
  background: #FFFFFA; color: #242424;
  font-family: "Manrope Variable", Manrope, sans-serif; font-weight: 600;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1);
}
.selr-vsl-btn-ghost:hover { background: #FFFFFF; border-color: #C9C9C9; }
.selr-vsl-btn-play {
  width: 26px; height: 26px; border-radius: 50%; background: #242424;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.selr-vsl-btn-play::before {
  content: ""; display: block; width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #FFFFFA;
  transform: translateX(1px);
}
/* social proof row: faces, stars, the verified line */
.selr-vsl-proof { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.selr-vsl-faces { display: flex; align-items: center; }
.selr-vsl-faces img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center 20%;
  border: 2px solid #F7F5EF; margin-left: -10px; display: block; background: #E3E3E3;
}
.selr-vsl-faces img:first-child { margin-left: 0; }
.selr-vsl-proof-text { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.selr-vsl-stars { display: inline-flex; gap: 2px; }
.selr-vsl-stars svg { width: 18px; height: 18px; fill: #6736E2; display: block; }
.selr-vsl-proof-line {
  font-family: "Manrope", sans-serif; font-size: 15px; line-height: 1.4; font-weight: 600;
  letter-spacing: -0.03em; color: #242424;
}
/* film lightbox: the site overlay, wide frame for the 16:9 film */
.selr-lb-film .selr-lb-frame {
  width: min(92vw, 1280px); height: auto; aspect-ratio: 16 / 9; max-height: 88vh;
  border-radius: 30px;
}
.selr-lb-film video { width: 100%; height: 100%; display: block; background: #000; }
/* film card */
.selr-vsl-card {
  position: relative;
  width: min(1120px, 100%);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 30px;
  background: #161920;
}
.selr-vsl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: rgba(22,25,32,.12);
  pointer-events: none;
}
.selr-vsl-card > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.selr-vsl-card-label {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  padding: 10px 15px;
  border: 1px solid rgba(227,227,227,.45);
  border-radius: 40px;
  background: rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #FFFFFA;
}
.selr-vsl-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px; border-radius: 50%;
  border: 1px solid rgba(227,227,227,.45);
  background: rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer; z-index: 3;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .3s;
}
.selr-vsl-play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,.5); }
.selr-vsl-play-ico {
  display: block; margin: 0 auto;
  width: 0; height: 0; border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #FFFFFA;
  transform: translateX(3px);
}
.selr-text-link {
  color: #6736E2;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: rgba(103,54,226,.34);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .3s cubic-bezier(.4,0,.2,1), text-decoration-color .3s cubic-bezier(.4,0,.2,1);
}
.selr-text-link:hover {
  color: #5024C0;
  text-decoration-color: #5024C0;
}
@media (max-width: 809.98px) {
  .selr-vsl-hero { padding: 105px 10px 44px; }
  .selr-vsl-hero-inner { gap: 34px; }
  .selr-vsl-copy { padding: 0 10px; }
  .selr-vsl-mark { margin-bottom: 22px; gap: 12px; }
  .selr-vsl-product { font-size: 27px; }
  .selr-city-tag-hero { height: 30px; font-size: 14px; padding: 0 15px 0 12px; }
  .selr-vsl-event { font-size: 14px; }
  .selr-vsl-copy h1 { font-size: 48px; line-height: 1; }
  .selr-vsl-sub { margin-top: 20px; font-size: 17px; }
  .selr-vsl-cta { margin-top: 28px; width: 100%; flex-direction: column; gap: 12px; }
  .selr-vsl-cta .selr-vsl-btn { width: 100%; max-width: 360px; justify-content: center; }
  .selr-vsl-proof { margin-top: 26px; gap: 10px 14px; }
  .selr-vsl-proof-text { display: contents; }
  .selr-vsl-faces img { width: 32px; height: 32px; }
  .selr-vsl-card { border-radius: 20px; }
  .selr-vsl-play { width: 58px; height: 58px; }
  .selr-vsl-play-ico { border-width: 9px 0 9px 15px; }
  .selr-vsl-card-label { left: 12px; bottom: 12px; padding: 8px 12px; }
}


/* ---------- apply: the request form directly under the film ---------- */
.selr-apply { background: #FAF9F5; }
.selr-apply .selr-sec-inner { padding-top: 0; padding-bottom: 40px; }
.selr-apply-card {
  width: min(1120px, 100%);
  display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: 56px; align-items: start;
  padding: 44px 48px;
  border-radius: 40px;
  background: rgba(227,227,227,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.75);
}
.selr-apply-text { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.selr-apply-kicker {
  margin: 0; font-family: "Manrope", sans-serif; font-size: 13px; line-height: 1.2; font-weight: 600;
  letter-spacing: -0.025em; color: #616161;
}
.selr-apply-kicker span { margin: 0 6px; }
.selr-apply-h {
  margin: 0; font-family: "Manrope Variable", "Manrope", sans-serif; font-size: 45px; line-height: 1.1;
  font-weight: 400; font-variation-settings: "wght" 585; letter-spacing: -0.04em; color: #242424;
}
.selr-apply-sub {
  margin: 4px 0 0; max-width: 34ch; font-family: "Manrope", sans-serif; font-size: 17px; line-height: 1.5;
  font-weight: 600; letter-spacing: -0.03em; color: #616161;
}
.selr-apply-venue {
  margin: 2px 0 0; font-family: "Manrope", sans-serif; font-size: 14px; line-height: 1.5;
  font-weight: 600; letter-spacing: -0.02em; color: #616161;
}
.selr-apply-venue-label {
  display: inline-block; margin-right: 10px; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8A8A8A;
}
.selr-apply-note {
  margin-top: 22px; padding: 22px 24px; border-radius: 30px; background: #FFFFFA;
  border: 1px solid rgba(227,227,227,.45); display: flex; flex-direction: column; gap: 8px;
}
.selr-apply-q, .selr-apply-a { margin: 0; font-family: "Manrope", sans-serif; letter-spacing: -0.03em; line-height: 1.5; }
.selr-apply-q { font-size: 15px; font-weight: 600; color: #242424; }
.selr-apply-a { font-size: 15px; font-weight: 600; color: #616161; }
/* the engine draws its own head and a transparent card. Here the head lives
   in the left column and the fields sit straight on the glass card. */
.selr-apply .selr-event-form .head { display: none; }
.selr-apply .selr-event-form .card { padding: 0; }
.selr-apply .selr-event-form .field,
.selr-apply .selr-event-form .opt { background: #FFFFFA; }
/* The page used to repaint a chosen tile pale lavender, which beat the form's
   own rule because this selector is longer and this file loads later. The
   result was that answering a question barely changed anything on screen.
   A chosen tile is solid purple, everywhere, and this line now says so rather
   than quietly undoing it. Removing it altogether would work equally well; it
   is kept as a statement so the next person does not re-add the tint. */
.selr-apply .selr-event-form .opt:has(input:checked) { background: #6736E2; }
.selr-apply .selr-event-form .field:focus-within { background: #FFFFFA; border-color: #6736E2; }
.selr-apply .selr-event-form .done { padding: 12px 0; }
/* Once the checkout is open, the card stops being a two-column pitch and
   becomes one job. The left column held the heading and the day, which have
   both already done their work by this point, so they step aside rather than
   crowd a payment form into half the width. */
.selr-apply.is-checkout .selr-apply-card { grid-template-columns: 1fr; }
.selr-apply.is-checkout .selr-apply-text { display: none; }
@media (max-width: 1199.98px) {
  .selr-apply-card { grid-template-columns: 1fr; gap: 32px; }
  .selr-apply-text { padding-top: 0; }
  .selr-apply-sub { max-width: 60ch; }
}
@media (max-width: 809.98px) {
  .selr-apply .selr-sec-inner { padding-bottom: 20px; }
  .selr-apply-card { padding: 26px 20px; border-radius: 30px; gap: 24px; }
  .selr-apply-h { font-size: 35px; }
  .selr-apply-sub { font-size: 15px; }
  .selr-apply-note { display: none; }
}

/* ---------- shared type + button pieces (design-language values) ---------- */
.selr-h3 {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 34px; line-height: 1.15; letter-spacing: -0.03em;
  color: #242424;
}
.selr-body {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 17px; line-height: 1.5; letter-spacing: -0.01em; color: #616161;
}
.selr-presence { color: #242424; font-weight: 600; }
.selr-pill-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 26px; border-radius: 40px;
  background: #6736E2; color: #FFFFFA;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
  text-decoration: none; width: fit-content;
  transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
.selr-pill-btn:hover { background: #5024C0; }
.selr-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: #FFFFFA; }

/* ---------- two-up blocks (2 & 7) ---------- */
.selr-twoup {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  width: 100%; background: #F7F5EF; border-radius: 40px; padding: 56px;
}
.selr-twoup-text { display: flex; flex-direction: column; gap: 20px; max-width: 480px; }
.selr-twoup-media { border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 3; }
.selr-twoup-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.selr-twoup.is-flip .selr-twoup-text { order: 2; }
.selr-twoup.is-flip .selr-twoup-media { order: 1; }
@media (max-width: 809.98px) {
  .selr-twoup { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .selr-twoup.is-flip .selr-twoup-text { order: 1; }
  .selr-twoup.is-flip .selr-twoup-media { order: 2; }
  .selr-h3 { font-size: 26px; }
}

/* ---------- comparison (block 3) ---------- */
.selr-cmp-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  width: 100%; max-width: 1100px;
}
.selr-cmp-card { border-radius: 40px; padding: 44px 40px; display: flex; flex-direction: column; gap: 26px; }
.selr-cmp-card.is-before { background: #242424; }
.selr-cmp-card.is-after { background: #FFFFFA; }
.selr-cmp-card.is-after .selr-cmp-label { color: #616161; }
.selr-cmp-label {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em;
  color: rgba(255,255,250,.6);
}
.selr-cmp-items { display: flex; flex-direction: column; gap: 18px; }
.selr-cmp-item {
  display: flex; align-items: flex-start; gap: 14px;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 18px; line-height: 1.35; letter-spacing: -0.02em;
  color: #FFFFFA;
}
.selr-cmp-card.is-after .selr-cmp-item { color: #242424; }
.selr-cmp-card.is-before .selr-cmp-item { color: #EEE8FF; opacity: .85; }
.selr-check {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.selr-cmp-card.is-before .selr-check { background: rgba(255,255,250,.14); color: rgba(255,255,250,.75); }
.selr-cmp-card.is-after .selr-check { background: #6736E2; color: #FFFFFA; }
@media (max-width: 809.98px) { .selr-cmp-cards { grid-template-columns: 1fr; } }

/* ---------- the day (block 5) ---------- */
.selr-theday { scroll-margin-top: 110px; }
.selr-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; }
.selr-step-card {
  background: #242424; border-radius: 30px; padding: 30px 26px 34px;
  display: flex; flex-direction: column; gap: 46px; min-height: 220px;
}
.selr-step-num {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 40px; letter-spacing: -0.03em;
  color: rgba(255,255,250,.35);
}
.selr-step-title {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em;
  color: #FFFFFA;
  margin-top: auto;
}
@media (max-width: 1199.98px) { .selr-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 809.98px) { .selr-steps { grid-template-columns: 1fr; } }
.selr-jobs-lead {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -0.04em;
  color: #242424;
  max-width: 900px;
}

/* ---------- capability theatre ---------- */
.selr-capability {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 34px;
}
.selr-capability-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.selr-capability-head .selr-cmp-label { color: #616161; }
.selr-cap-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid #E3E3E3;
  border-radius: 40px;
  background: #FFFFFA;
}
.selr-cap-tabs::-webkit-scrollbar { display: none; }
.selr-cap-tab {
  flex: none;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 40px;
  background: transparent;
  color: #616161;
  cursor: pointer;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: background-color .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1);
}
.selr-cap-tab:hover { color: #242424; }
.selr-cap-tab[aria-selected="true"] {
  background: #6736E2;
  color: #FFFFFA;
}
.selr-cap-tab:focus-visible {
  outline: 2px solid #6736E2;
  outline-offset: 3px;
}
.selr-cap-stage {
  min-height: 540px;
  border-radius: 40px;
  background: #F7F5EF;
  overflow: hidden;
}
.selr-cap-panel {
  min-height: 540px;
  padding: 56px;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
  align-items: center;
  gap: 64px;
}
.selr-cap-panel[hidden] { display: none; }
.selr-cap-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 470px;
}
.selr-cap-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EEE8FF;
  color: #6736E2;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.selr-cap-copy h3 {
  margin: 0;
  color: #242424;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: clamp(30px, 3.3vw, 48px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.selr-cap-copy p {
  margin: 0;
  color: #616161;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 17px;
  letter-spacing: -0.015em;
  line-height: 1.5;
}
.selr-cap-visual {
  position: relative;
  min-height: 390px;
  padding: 34px;
  border: 1px solid #E3E3E3;
  border-radius: 30px;
  background: #FFFFFA;
  overflow: hidden;
}
.selr-cap-window {
  height: 100%;
  min-height: 320px;
  padding: 22px;
  border: 1px solid #E3E3E3;
  border-radius: 20px;
  background: #FFFFFA;
}
.selr-cap-window-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E3E3E3;
}
.selr-cap-window-top > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C9B8FF;
}
.selr-cap-window-top b {
  margin-left: auto;
  color: #616161;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.selr-cap-doc-title {
  width: 48%;
  height: 16px;
  margin: 28px 0 24px;
  border-radius: 40px;
  background: #242424;
}
.selr-cap-doc-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid #E3E3E3;
  color: #616161;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.selr-cap-doc-row i {
  height: 9px;
  border-radius: 40px;
  background: #EEE8FF;
}
.selr-cap-ready {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 22px;
  padding: 10px 13px;
  border-radius: 40px;
  background: #EEE8FF;
  color: #5024C0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}
.selr-cap-ready span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6736E2;
}
.selr-cap-chat-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid #E3E3E3;
}
.selr-cap-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #6736E2;
  color: #FFFFFA;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.selr-cap-chat-meta div { display: flex; flex-direction: column; gap: 3px; }
.selr-cap-chat-meta b,
.selr-cap-chat-meta small {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-style: normal;
}
.selr-cap-chat-meta b { color: #242424; font-size: 14px; font-weight: 600; }
.selr-cap-chat-meta small { color: #616161; font-size: 11px; }
.selr-cap-bubble {
  max-width: 78%;
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 20px;
  color: #242424;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
.selr-cap-bubble.is-in { background: #F7F5EF; border-bottom-left-radius: 6px; }
.selr-cap-bubble.is-out { margin-left: auto; background: #EEE8FF; border-bottom-right-radius: 6px; }
.selr-cap-brief-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 22px;
  color: #242424;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.selr-cap-brief-head b { color: #6736E2; font-size: 12px; }
.selr-cap-brief-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.selr-cap-brief-grid div {
  min-height: 116px;
  padding: 18px;
  border: 1px solid #E3E3E3;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #242424;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.selr-cap-brief-grid i {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #EEE8FF;
}
.selr-cap-visual.is-content {
  display: grid;
  grid-template-columns: 1fr 48px 1.35fr;
  align-items: center;
  gap: 14px;
}
.selr-cap-source,
.selr-cap-draft {
  padding: 20px;
  border: 1px solid #E3E3E3;
  border-radius: 20px;
  background: #FFFFFA;
}
.selr-cap-source + .selr-cap-source { position: absolute; left: 34px; bottom: 55px; width: calc(31% - 12px); }
.selr-cap-source span,
.selr-cap-draft b {
  display: block;
  margin-bottom: 20px;
  color: #242424;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.selr-cap-source i,
.selr-cap-draft i {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 9px;
  border-radius: 40px;
  background: #EEE8FF;
}
.selr-cap-source i:last-child,
.selr-cap-draft i:nth-last-of-type(1) { width: 62%; }
.selr-cap-flow-arrow { display: flex; align-items: center; justify-content: center; }
.selr-cap-flow-arrow span {
  width: 28px;
  height: 1px;
  background: #6736E2;
  position: relative;
}
.selr-cap-flow-arrow span::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid #6736E2;
  border-right: 1px solid #6736E2;
  transform: rotate(45deg);
}
.selr-cap-draft { min-height: 232px; }
.selr-cap-draft em {
  display: block;
  width: 78px;
  height: 32px;
  margin-top: 30px;
  border-radius: 40px;
  background: #6736E2;
}
.selr-cap-site-hero {
  width: 100%;
  height: 66px;
  margin: 26px 0 20px;
  border-radius: 14px;
  background: #EEE8FF;
}
.selr-cap-site-line {
  height: 10px;
  margin-bottom: 11px;
  border-radius: 40px;
  background: #E3E3E3;
}
.selr-cap-site-line.is-short { width: 62%; }
.selr-cap-site-cta {
  width: 104px;
  height: 32px;
  margin-top: 20px;
  border-radius: 40px;
  background: #6736E2;
}
.selr-cap-visual.is-more {
  display: flex;
  align-items: center;
  justify-content: center;
}
.selr-cap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-content: center;
}
.selr-cap-chips span {
  padding: 11px 16px;
  border: 1px solid #E3E3E3;
  border-radius: 40px;
  background: #FFFFFA;
  color: #616161;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.selr-cap-chips span:last-child {
  border-color: #6736E2;
  background: #EEE8FF;
  color: #5024C0;
}
.selr-cap-visual.is-research {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.selr-cap-research-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid #E3E3E3;
  color: #242424;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.selr-cap-research-row i {
  display: block;
  width: var(--cap-w);
  height: 14px;
  border-radius: 40px;
  background: #6736E2;
  transform-origin: left center;
}
.selr-cap-decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 48px;
  padding: 38px 40px;
  border: 1px solid #E3E3E3;
  border-radius: 30px;
  background: #FFFFFA;
}
.selr-cap-decision > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.selr-cap-decision .selr-cmp-label { color: #616161; }
.selr-cap-decision h3 {
  margin: 0;
  color: #242424;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.selr-cap-decision p {
  margin: 0;
  color: #616161;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 16px;
  letter-spacing: -0.015em;
  line-height: 1.5;
}
@media (max-width: 999.98px) {
  .selr-cap-panel { grid-template-columns: 1fr; gap: 36px; }
  .selr-cap-stage,
  .selr-cap-panel { min-height: 0; }
  .selr-cap-copy { max-width: 660px; }
  .selr-cap-decision { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 809.98px) {
  .selr-capability { padding-top: 8px; gap: 22px; }
  .selr-cap-tabs { width: 100%; border-radius: 20px; }
  .selr-cap-tab { min-height: 40px; padding: 0 15px; }
  .selr-cap-stage { border-radius: 30px; }
  .selr-cap-panel { padding: 28px 20px 20px; gap: 28px; }
  .selr-cap-visual { min-height: 340px; padding: 18px; border-radius: 20px; }
  .selr-cap-window { min-height: 302px; }
  .selr-cap-source + .selr-cap-source { left: 18px; bottom: 42px; width: calc(31% - 4px); }
  .selr-cap-decision { padding: 28px 24px; gap: 24px; border-radius: 20px; }
}
@media (max-width: 459.98px) {
  .selr-cap-copy h3 { font-size: 30px; }
  .selr-cap-copy p { font-size: 15px; }
  .selr-cap-visual.is-content { grid-template-columns: 1fr 30px 1.2fr; }
  .selr-cap-source,
  .selr-cap-draft { padding: 14px; }
  .selr-cap-source + .selr-cap-source { width: calc(31% + 4px); }
  .selr-cap-brief-grid div { min-height: 100px; padding: 14px; }
  .selr-cap-research-row { grid-template-columns: 78px 1fr; gap: 12px; }
}

/* ---------- schedule of the day ----------
   Structure from the keynote-rebuild schedule reference (heading block left,
   hairline slot rows right, filled highlight cards, centered break divider).
   Every value here is the page's own language: Manrope 600 negative tracking,
   #E3E3E3 hairlines, the #242424 card + 30px radius from .selr-step-card,
   the 40px chip radius, #616161 muted ink. */
.selr-schedule .selr-sec-inner { align-items: stretch; padding-top: 60px; }
.selr-inroom .selr-sec-inner { padding-top: 60px; }
.selr-sched {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 60px; width: 100%; align-items: start;
}
.selr-sched-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.selr-sched-head .framer-styles-preset-pc4jh9 { text-align: left; max-width: 100%; }
.selr-sched-head .selr-cmp-label { color: #616161; }
.selr-sched-sub {
  margin: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 17px; line-height: 1.5; letter-spacing: -0.01em; color: #616161;
  max-width: 34ch;
}
.selr-sched-head .selr-pill-btn { margin-top: 8px; }
.selr-sched-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.selr-slot {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px;
  padding: 26px 0; border-top: 1px solid #E3E3E3;
}
.selr-sched-list > li:first-child { border-top: 0; padding-top: 0; }
/* break rows carry their own separation, no doubled hairlines */
.selr-sched-break,
.selr-sched-break + li { border-top: 0; }
.selr-slot-time { display: flex; flex-direction: column; gap: 3px; }
.selr-slot-start {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1.3;
  color: #242424;
}
.selr-slot-end {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: -0.02em;
  color: #616161;
}
.selr-slot-title {
  margin: 0 0 6px;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em;
  color: #242424;
}
.selr-slot-desc {
  margin: 0; max-width: 52ch;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; color: #616161;
}
/* NOTE, 2026-08-19: the .selr-slot-card dark-fill treatment and the
   .selr-slot-tags chip row were deleted here, not disabled. Luke cut them
   from the schedule (two rows filled #242424 with no rule behind which went
   dark, plus "Hands-on" / "One on one" chips). Every slot is one card now,
   styled in sched.css. Do not reintroduce a per-slot fill variant. */
/* break row: centered divider */
.selr-sched-break {
  display: flex; align-items: center; gap: 16px; padding: 22px 0;
}
.selr-sched-break::before,
.selr-sched-break::after { content: ""; flex: 1; border-top: 1px solid #E3E3E3; }
.selr-sched-break span {
  flex: none;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em; color: #616161;
}
@media (max-width: 1199.98px) {
  .selr-sched { gap: 44px; }
  .selr-slot { grid-template-columns: 100px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 999.98px) {
  .selr-sched { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 809.98px) {
  .selr-slot { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .selr-slot-time { flex-direction: row; align-items: baseline; gap: 10px; }
  .selr-sched-break { padding: 18px 0; }
}

/* ---------- stat row (block 7) ---------- */
.selr-stat {
  background: #F7F5EF; border-radius: 30px; padding: 34px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.selr-stat-num {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 44px; letter-spacing: -0.04em; line-height: 1;
  color: #242424;
}
.selr-stat-desc {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 15px; line-height: 1.4; color: #616161;
}

/* ---------- ownership band (block 6) — THE one purple band ---------- */
.selr-band {
  width: 100%; background: #6736E2; display: flex; justify-content: center;
}
.selr-band-inner {
  width: 100%; max-width: 1320px; padding: 140px 60px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  text-align: center;
}
.selr-band-h { color: #FFFFFA !important; --framer-text-color: #FFFFFA; max-width: 860px; text-align: center; }
.selr-band-p { color: #EEE8FF !important; --framer-text-color: #EEE8FF; max-width: 620px; }
.selr-band-line {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 24px; letter-spacing: -0.02em;
  color: #FFFFFA; margin-top: 8px;
}
.selr-band-sub {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 15px; line-height: 1.5; color: #C9B8FF; max-width: 560px;
}
@media (max-width: 809.98px) { .selr-band-inner { padding: 90px 20px; } }

/* ---------- stat row (block 7) ---------- */
.selr-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  width: 100%; max-width: 1100px; margin-top: 8px;
}
.selr-stat [data-framer-name] { width: 100%; }
@media (max-width: 809.98px) { .selr-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ---------- your day (block 8): the ticket ----------
   The venue block is one ticket: the room's photo as the left panel, the
   room details in the body, and a perforated stub carrying the date, the
   time and the request pill. The section grounds are gradients, so the
   notches cannot be painted discs: the body and stub each carry a mask
   with two real transparent holes on the perforation, and the wrapper's
   drop-shadow follows that alpha so the punched edge reads on any ground.
   Surface, hairline, radius and type match the FAQ cards under it
   (2026-08-19, replaces the info-plus-photo-plus-map card). */
.selr-ticket-sec .selr-sec-inner { padding-top: 0; padding-bottom: 10px; }
@media (max-width: 809.98px) { .selr-ticket-sec .selr-sec-inner { padding-top: 0; padding-bottom: 6px; } }
.selr-ticket {
  --tk-surface: #FFFFFA;
  --tk-stub: #6736E2;
  --tk-notch: 14px;
  --tk-r: 30px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) 1.35fr 300px;
  width: 100%;
  max-width: 1100px;
  min-height: 360px;
  font-family: "Manrope Variable", Manrope, sans-serif;
  filter: drop-shadow(0 0 1px rgba(36,36,36,.10)) drop-shadow(0 16px 36px rgba(36,36,36,.07));
}
.selr-ticket-photo {
  position: relative; min-height: 100%;
  background: #EEE8FF;
  border-radius: var(--tk-r) 0 0 var(--tk-r);
  overflow: hidden;
}
.selr-ticket-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.selr-ticket-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 36px 40px 30px;
  min-width: 0;
  background: var(--tk-surface);
  -webkit-mask:
    radial-gradient(circle var(--tk-notch) at 100% 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--tk-notch) at 100% 100%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--tk-notch) at 100% 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--tk-notch) at 100% 100%, transparent 98%, #000 100%);
  mask-composite: intersect;
}
.selr-ticket-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.selr-ticket-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3;
  color: #616161; text-transform: uppercase;
}
.selr-ticket-brand { display: block; height: 20px; width: auto; opacity: .9; }
.selr-ticket-title {
  margin: 0 0 24px;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.02;
  color: #242424;
}
.selr-ticket-title-city { display: block; color: #616161; }
.selr-ticket-venue-block {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 20px; border-top: 1px solid #ECE8DF;
}
.selr-ticket-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3;
  color: #616161; text-transform: uppercase; margin-bottom: 6px;
}
.selr-ticket-venue {
  font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2;
  color: #242424; margin-bottom: 4px; text-wrap: balance;
}
.selr-ticket-line { font-size: 15px; line-height: 1.5; color: #616161; text-decoration: none; }
a.selr-ticket-map { width: fit-content; transition: color .3s cubic-bezier(.4,0,.2,1); }
a.selr-ticket-map:hover { color: #6736E2; }
.selr-ticket-fine {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 22px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4;
  /* the quietest grey that still clears 4.5:1 on #FFFFFA at 12px. #8A8A8A read
     at 3.4:1 and Lighthouse called it, so this is the floor, not a preference */
  color: #6E6E6E;
}
.selr-ticket-stub {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 4px; padding: 40px 34px 34px 40px;
  background: var(--tk-stub);
  color: #FFFFFA;
  border-left: 2px dashed rgba(255,255,250,.55);
  border-radius: 0 var(--tk-r) var(--tk-r) 0;
  -webkit-mask:
    radial-gradient(circle var(--tk-notch) at 0 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--tk-notch) at 0 100%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--tk-notch) at 0 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--tk-notch) at 0 100%, transparent 98%, #000 100%);
  mask-composite: intersect;
}
.selr-ticket-stub-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3;
  /* same lilac the time line already uses. #C9B8FF read at 3.5:1 on the purple
     stub, under the 4.5:1 a 12px label needs; this one reads at 5.2:1 */
  color: #EEE8FF; text-transform: uppercase; margin-bottom: 10px;
}
.selr-ticket-date {
  font-size: 28px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.08;
  color: #FFFFFA;
}
.selr-ticket-time { font-size: 15px; line-height: 1.5; color: #EEE8FF; margin-top: 6px; }
.selr-ticket-cta {
  margin-top: 26px;
  background: #FFFFFA; color: #242424;
}
.selr-ticket-cta:hover { background: #EEE8FF; }
/* decorative tear-line texture, no data in it */
.selr-ticket-barcode {
  width: 100%; height: 26px; margin-top: 30px; opacity: .55;
  background: repeating-linear-gradient(90deg,
    #FFFFFA 0 2px, transparent 2px 4px,
    #FFFFFA 4px 5px, transparent 5px 8px,
    #FFFFFA 8px 11px, transparent 11px 13px,
    #FFFFFA 13px 14px, transparent 14px 18px,
    #FFFFFA 18px 20px, transparent 20px 21px,
    #FFFFFA 21px 22px, transparent 22px 26px);
}
@media (max-width: 1099.98px) {
  .selr-ticket { grid-template-columns: minmax(240px, 0.8fr) 1.3fr 260px; }
  .selr-ticket-body { padding: 32px 32px 26px; }
  .selr-ticket-stub { padding: 34px 28px 30px 32px; }
  .selr-ticket-title { font-size: 34px; }
  .selr-ticket-date { font-size: 24px; }
}
@media (max-width: 809.98px) {
  .selr-ticket { --tk-r: 26px; grid-template-columns: 1fr; min-height: 0; }
  .selr-ticket-photo { min-height: 0; height: 220px; border-radius: var(--tk-r) var(--tk-r) 0 0; }
  .selr-ticket-photo img { position: static; height: 220px; }
  .selr-ticket-body {
    padding: 26px 24px 24px;
    -webkit-mask:
      radial-gradient(circle var(--tk-notch) at 0 100%, transparent 98%, #000 100%),
      radial-gradient(circle var(--tk-notch) at 100% 100%, transparent 98%, #000 100%);
    mask:
      radial-gradient(circle var(--tk-notch) at 0 100%, transparent 98%, #000 100%),
      radial-gradient(circle var(--tk-notch) at 100% 100%, transparent 98%, #000 100%);
  }
  .selr-ticket-top { margin-bottom: 16px; }
  .selr-ticket-title { font-size: 32px; margin-bottom: 20px; }
  .selr-ticket-venue { font-size: 19px; }
  .selr-ticket-fine { margin-top: 18px; }
  .selr-ticket-stub {
    padding: 26px 24px 26px;
    border-left: 0; border-top: 2px dashed rgba(255,255,250,.55);
    border-radius: 0 0 var(--tk-r) var(--tk-r);
    -webkit-mask:
      radial-gradient(circle var(--tk-notch) at 0 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--tk-notch) at 100% 0, transparent 98%, #000 100%);
    mask:
      radial-gradient(circle var(--tk-notch) at 0 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--tk-notch) at 100% 0, transparent 98%, #000 100%);
  }
  .selr-ticket-cta { margin-top: 20px; }
  .selr-ticket-barcode { margin-top: 24px; height: 22px; }
}

.selr-faq-wrap { width: 100%; max-width: 760px; margin-top: 30px; }
.selr-faq-h {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 30px; letter-spacing: -0.03em;
  color: #242424; text-align: center; margin-bottom: 28px;
}
/* accordion look + mechanics come from motion.css (its clipper contract:
   panel > unpadded clipper > padded body). Only the typeface is set here. */
.selr-faq-list { display: flex; flex-direction: column; gap: 10px; }
.selr-faq-list .selr-acc-btn {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 17px; letter-spacing: -0.02em;
}
.selr-faq-list .selr-acc-body {
  font-family: "Manrope Variable", Manrope, sans-serif;
  line-height: 1.55;
}

.selr-form-wrap { width: 100%; max-width: 640px; margin-top: 40px; scroll-margin-top: 110px; }

/* ---------- businesses represented ---------- */
.selr-businesses {
  width: 100%;
  padding: 70px 20px 60px;
  background: #FCFCFA;
}
.selr-businesses-inner {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 70px 60px;
  border-radius: 40px;
  background: #FFFFFA;
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(520px, 1.28fr);
  gap: 70px;
  align-items: center;
}
.selr-businesses-copy h2 {
  margin: 0;
  max-width: 490px;
  font-family: "Manrope Variable", "Manrope", sans-serif;
  font-size: clamp(45px, 4.4vw, 70px);
  line-height: 1.02;
  font-weight: 400;
  font-variation-settings: "wght" 585;
  letter-spacing: -0.04em;
  color: #242424;
}
.selr-businesses-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 10px;
}
.selr-business-logo {
  height: 104px;
  border-radius: 20px;
  background-color: #F7F5EF;
  position: relative;
}
.selr-business-logo::after {
  content: "";
  position: absolute;
  inset: 30px 20px;
  background: #242424;
  -webkit-mask-image: var(--logo);
  mask-image: var(--logo);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
@media (max-width: 809.98px) {
  .selr-businesses { padding: 70px 10px; }
  .selr-businesses-inner { grid-template-columns: 1fr; gap: 36px; padding: 40px 20px; border-radius: 30px; }
  .selr-businesses-copy h2 { font-size: 38px; }
  .selr-businesses-rail { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .selr-business-logo { height: 88px; }
}

/* ---------- close (block 9) ---------- */

/* ---------- floating CTA ---------- */
.selr-float-cta {
  position: fixed; top: 24px; right: 28px; z-index: 60;
}
.selr-float-cta a { text-decoration: none; display: inline-flex; }
@media (max-width: 809.98px) {
  .selr-float-cta { top: auto; bottom: 20px; right: 16px; }
}

/* ---------- wall collision guard ----------
   motion.css also defines .selr-rail (the generic ambient rail). The wall
   engine owns its own rail: the TRACK is the scroller, the wrap is a block
   box. Neutralise the generic rail properties inside the wall mount so the
   drift writes to the right element. */
[data-selr-wall] .selr-rail { display: block; gap: normal; overflow-x: visible; }
[data-selr-wall] .selr-rail > * { flex: initial; }

/* ---------- locations page: the click back out of one city ----------
   Header left, flush to the content column, kicker above it, one support
   line under. Cards are the site's field card: radius 20, one hairline
   border, no shadow, purple only on the go line. */

.selr-gallery-page .selr-sec-inner,
.selr-locations-page .selr-sec-inner { align-items: flex-start; gap: 44px; }
.selr-gal-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px; width: 100%;
}
.selr-gal-head .selr-section-kicker { margin: 0; }
.selr-gallery-page .selr-gal-head h2 { text-align: left; max-width: 900px; }
.selr-gal-sub {
  margin: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 20px; line-height: 27px; letter-spacing: -0.6px;
  color: #616161; max-width: 640px;
}
/* The gallery is built into this div by selr-gallery.js after first paint, so
   until it runs the div is empty and has no height. That put the footer in the
   middle of the viewport and then threw it 13,718px down the page when the
   tiles arrived: one layout shift, CLS 0.455, by far the worst number on the
   site. A viewport of reserved height costs nothing (the mounted grid is always
   far taller, so the reservation is never visible) and there is no fixed pixel
   height to use, because the same grid is 13,718px at 1440 and 43,933px at 375.

   It goes here and not in gallery.css, and not on the grid. gallery.css is a
   port of the main site's gallery and is re-copied wholesale, so a rule added
   there is deleted by the next copy. The grid itself is out because layout()
   derives its column width and row spans from the grid's own box. The mount is
   the seam between the port and this repo, which is why it is the one safe
   place for this. */
#selr-gallery-mount { width: 100%; min-height: 100vh; }
@media (max-width: 809.98px) { .selr-gallery-page .selr-sec-inner { gap: 28px; } }
.selr-loc-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px; width: 100%;
}
.selr-loc-head .selr-section-kicker { margin: 0; }
.selr-locations-page .selr-loc-head h2 { text-align: left; max-width: 900px; }
.selr-loc-tone { color: #616161; }
.selr-loc-sub {
  margin: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 20px; line-height: 27px; letter-spacing: -0.6px;
  color: #616161; max-width: 640px;
}

.selr-loc-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%;
}
.selr-loc-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 34px 34px 30px;
  background: #FFFFFA; border: 1px solid rgba(227,227,227,.9);
  border-radius: 20px; text-decoration: none;
  transition:
    background-color var(--selr-dur-base, 300ms) var(--selr-ease-sym, cubic-bezier(.44,0,.56,1)),
    border-color var(--selr-dur-base, 300ms) var(--selr-ease-sym, cubic-bezier(.44,0,.56,1));
}
.selr-loc-card:hover { background: #FFFFFF; border-color: rgba(103,54,226,.35); }
.selr-loc-city {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 34px; line-height: 1.15; letter-spacing: -0.06em;
  color: #292929;
}
.selr-loc-date {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 20px; line-height: 27px; letter-spacing: -0.6px;
  color: #6736E2;
}
.selr-loc-facts { display: flex; flex-direction: column; gap: 4px; }
.selr-loc-facts span {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 20px; line-height: 27px; letter-spacing: -0.6px;
  color: #616161;
}
.selr-loc-go {
  margin-top: 10px;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 17px; letter-spacing: -0.03em; color: #292929;
}
.selr-loc-go::after { content: " \2192"; color: #6736E2; }
@media (max-width: 809.98px) {
  .selr-locations-page .selr-sec-inner { gap: 28px; }
  .selr-loc-grid { grid-template-columns: 1fr; gap: 14px; }
  .selr-loc-card { padding: 26px 24px 24px; }
  .selr-loc-city { font-size: 28px; }
  .selr-loc-date, .selr-loc-facts span { font-size: 17px; line-height: 24px; }
}

/* ---------- stories page: the wall of proof ----------
   The footage is vertical, shot on a phone at 9:16, and every still is a
   360x640 frame of it. The old card cropped that to 16/10 inside a cream
   shell, which cut the faces in half and made six cards fill a screen. The
   card IS the still now, at its own ratio and the size a reel is: the person
   fills it, the quote and the name sit in the bottom scrim, and a screen
   holds fifteen of them. Scroll and the wall is the argument.
   Radius 20 (field), no shadow, one accent on the chips. */

.selr-stories-page .selr-sec-inner { align-items: flex-start; gap: 44px; }

.selr-stories-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px; width: 100%;
}
.selr-stories-head .selr-section-kicker { margin: 0; }
.selr-stories-page .selr-stories-head h2 { text-align: left; max-width: 900px; }
.selr-stories-tone { color: #616161; }
.selr-stories-sub {
  margin: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.5; letter-spacing: -0.02em;
  color: #616161; max-width: 640px;
}

/* ---- the theme chips: the site's own choice-chip, filled purple when on ---- */
.selr-story-filters { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.selr-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 10px 18px;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: -0.03em;
  color: #242424; background: #FFFFFA;
  border: 1px solid rgba(227,227,227,.9); border-radius: 40px;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition:
    background-color var(--selr-dur-base, 300ms) var(--selr-ease-sym, cubic-bezier(.44,0,.56,1)),
    border-color     var(--selr-dur-base, 300ms) var(--selr-ease-sym, cubic-bezier(.44,0,.56,1)),
    color            var(--selr-dur-base, 300ms) var(--selr-ease-sym, cubic-bezier(.44,0,.56,1));
}
.selr-chip-n {
  font-size: 13px; letter-spacing: -0.025em; color: #616161;
  transition: color var(--selr-dur-base, 300ms) var(--selr-ease-sym, cubic-bezier(.44,0,.56,1));
}
.selr-chip:hover { background: #F3EEFD; border-color: #F3EEFD; }
.selr-chip.is-on { background: #6736E2; border-color: #6736E2; color: #FFFFFA; }
.selr-chip.is-on .selr-chip-n { color: #EEE8FF; }

/* ---- the wall ---- */
.selr-story-wall {
  display: grid; width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.selr-story-card {
  position: relative; display: block; isolation: isolate;
  aspect-ratio: 9 / 16;
  border-radius: 20px; overflow: hidden;
  background: #161920; text-decoration: none;
}
.selr-story-card.is-off { display: none; }
.selr-story-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Three of the source clips carry their own burnt-in subtitle, baked into the
   frame: "realise how far" at 68% of CJN Solar's, "VERY EYE OPENING, AND IT'S
   PRETTY EASY" at 80% of the Melbourne owner's, "through setting" at 93% of
   Studio 5's. Darkening alone did not kill them, they are white type on a
   light room. This is the site's own glass instead, blur(12px) masked in from
   nothing so there is no seam: it destroys small type completely while the
   photograph behind it just softens. It also gives every caption a cleaner
   base to sit on, which is why it runs on all thirty and not only the three.
   Cheaper and truer than regrading thirty stills to fix three. */
.selr-story-card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 28%, #000 62%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 28%, #000 62%);
}

/* the scrim sits over the glass and carries the caption */
.selr-story-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(22,25,32,0) 0%, rgba(22,25,32,.24) 24%, rgba(22,25,32,.66) 48%,
    rgba(22,25,32,.89) 72%, rgba(22,25,32,.97) 100%);
}

/* the site's clip-size play control: one glass circle, 22px */
.selr-story-play {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.selr-story-play::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-38%, -50%);
  border-style: solid; border-width: 4px 0 4px 6.5px;
  border-color: transparent transparent transparent #FFFFFA;
}

.selr-story-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 16px 18px;
}
.selr-story-quote {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 15px; line-height: 1.35; letter-spacing: -0.03em;
  color: #FFFFFA;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.selr-story-who {
  display: flex; flex-direction: column; gap: 1px;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em;
}
.selr-story-who .n { color: #FFFFFA; }
.selr-story-who .r { color: rgba(255,255,250,.68); }

/* ---- tiers: the tile keeps a reel's size, the column count gives way ---- */
@media (max-width: 1399.98px) {
  .selr-story-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1199.98px) {
  .selr-story-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .selr-stories-page .selr-sec-inner { gap: 28px; }
  .selr-story-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .selr-stories-sub { font-size: 15px; }
  .selr-chip { font-size: 14px; padding: 9px 15px; }
  .selr-story-cap { padding: 12px 12px 14px; gap: 6px; }
  .selr-story-quote { font-size: 14px; -webkit-line-clamp: 4; }
  .selr-story-card::after { height: 78%; }
}

/* ---------- section grounds: band rhythm (2026-08-18) ----------
   Every .selr-sec shipped on the same #FCFCFA, so the whole page read as one
   unbroken white scroll. This alternates the two measured neutrals so the
   sections band as you move down, and gives the day section the one soft
   lavender field. Values are the measured palette only: #F7F5EF canvas,
   #FCFCFA near-white surface, #EEE8FF lavender tint. Reversible: delete block. */
#the-shift      { background: #FCFCFA; }
#before-after   { background: #F7F5EF; }
#from-the-room  { background: #FCFCFA; }
#the-day        { background: #EEE8FF; }
#schedule       { background: #FCFCFA; }
/* #ownership stays the purple band */
#businesses     { background: #F7F5EF; }
#in-the-room    { background: #FCFCFA; }
#your-day       { background: #F7F5EF; }

/* on the lavender field the white cards need a tinted hairline, not grey */
#the-day .selr-cap-visual,
#the-day .selr-cap-window,
#the-day .selr-cap-tabs,
#the-day .selr-cap-decision { border-color: #DFD5FA; }
#the-day .selr-cap-chips span { border-color: #DFD5FA; }

/* ---------- from the room: let the footage carry it (2026-08-18) ----------
   Luke's call: no band, no card, no chrome. The wall component ships a warm
   #F7F5EF band with near-white panels on it, which framed every clip twice
   over and dulled the grade. Scoped to this section only so the gallery and
   stories pages keep the component's own treatment. */
#from-the-room .selr-rail {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
#from-the-room .selr-panel {
  background: transparent;
  border-radius: 0;
}

/* ---------- day tiles: option D + tighter text (2026-08-18) ----------
   Luke picked D. White card, lavender hairline, lavender numeral. The card
   also had gap:46px, min-height:220px and margin-top:auto on the title, which
   parked the number at the top and the title at the bottom with a dead hole
   between them. Number and title now sit together. */
.selr-step-card {
  background: #FFFFFA;
  border: 1px solid #DFD5FA;
  gap: 14px;
  min-height: 0;
  padding: 26px 24px 28px;
}
.selr-step-num { color: rgba(103, 54, 226, .38); font-size: 34px; }
.selr-step-title { color: #242424; margin-top: 0; }

/* ---------- from the room: lift the faces (2026-08-18) ----------
   Measured: all 31 tile stills sit at luminance 117, warmth +12, saturation 18,
   the selrai.com.au house grade. That grade was set on room photography and
   leaves close-up faces looking bloodless. This is a display-side lift only,
   the source files are untouched, so the house grade itself is unchanged. */
#from-the-room .selr-panel-media img {
  filter: saturate(1.34) contrast(1.06) brightness(0.98);
}

/* ---------- section headings: restore the h2 size (2026-08-18) ----------
   Measured on the built page: before-after, from-the-room and the-day render
   their h2 at 60px, but schedule, ownership and your-day rendered at 16px.
   The Framer preset only sets --framer-font-size on a heading sitting directly
   inside the section wrapper. Those three sit inside their own head blocks
   (.selr-sched-head, .selr-band-inner, the your-day head), so the preset never
   applied and they fell back to the 16px body default. Set the variable from
   the page's own --selr-t-h2 token so all four match and stay responsive. */
#schedule .selr-sched-head h2,
#ownership .selr-band-h,
#your-day h2 {
  --framer-font-size: var(--selr-t-h2);
}
#ownership .selr-band-h { text-align: center; }


/* ---------- businesses rail: show the whole set (2026-08-18) ----------
   Eight of the eighteen logos we hold were on the page, in a 4-wide grid whose
   last column ran to the card edge. Six columns takes all eighteen in three
   clean rows with no ragged tail, and the tiles come down a little to suit. */
.selr-businesses-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.selr-businesses-rail .selr-business-logo { height: 88px; border-radius: 16px; }
@media (max-width: 1199.98px) {
  .selr-businesses-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .selr-businesses-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selr-businesses-rail .selr-business-logo { height: 78px; }
}

/* ---------- section headings: bring the scale down (2026-08-18) ----------
   --selr-t-h2 was a flat 60px. Short headings ("From the room.") carried it
   fine, but the longer ones wrapped to two lines and swamped the section they
   were introducing. Fluid now, so it eases down on narrower viewports and tops
   out lower, and the centred headings get room to sit on fewer lines. */
:root { --selr-t-h2: clamp(34px, 3.6vw, 50px); }
.selr-sec .framer-styles-preset-pc4jh9 { max-width: 1040px; }

/* Every section heading on one scale. The Framer preset carries its own size
   and ignored the token, so the three preset-driven headings sat at 80px while
   the three patched ones sat at 50px. Point them all at --selr-t-h2. */
.selr-sec h2.framer-styles-preset-pc4jh9,
#ownership .selr-band-h,
#schedule .selr-sched-head h2,
#your-day h2 { --framer-font-size: var(--selr-t-h2); }
.selr-businesses-copy h2 { font-size: var(--selr-t-h2); }

/* ---------- businesses: one running row (2026-08-18) ----------
   Was a 6-across grid beside the copy. Now the page's own drifting rail
   (motion.js data-selr-rail, 26px/s, scroll adds momentum, pauses on hover),
   the same mechanism the testimonial wall uses. The list is written twice so
   the loop wraps at half its width with no visible seam. */
.selr-businesses-inner { grid-template-columns: 1fr; gap: 34px; }
.selr-businesses-copy { text-align: center; }
.selr-businesses-copy h2 { max-width: 100%; margin-inline: auto; }
.selr-businesses-rail.selr-rail {
  display: flex;
  gap: 10px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.selr-businesses-rail.selr-rail::-webkit-scrollbar { display: none; }
.selr-businesses-rail.selr-rail > .selr-business-logo {
  flex: none;
  width: 172px;
  height: 92px;
  border-radius: 18px;
}
@media (max-width: 809.98px) {
  .selr-businesses-rail.selr-rail > .selr-business-logo { width: 140px; height: 78px; }
}

/* schedule head: when the two-column grid collapses, centre it rather than
   leaving it stranded against a full-width empty column */
@media (max-width: 1199.98px) {
  .selr-sched-head { align-items: center; text-align: center; }
  .selr-sched-head .framer-styles-preset-pc4jh9 { text-align: center; }
  .selr-sched-sub { max-width: 46ch; }
}

/* ---------- footer: restore the positioning context (2026-08-18) ----------
   PRE-EXISTING BUG, reproduced on a pristine checkout with every session
   change stashed. The harvested footer holds 37 position:absolute children
   (three image frames and the form inputs) but no ancestor between them and
   <body> is positioned, so they resolve against the initial containing block
   and paint at the top of the document. Symptom: Luke's portrait covering the
   hero at scroll 0. Giving the footer and its image frames a positioning
   context puts every one of them back inside the footer. */
/* !important is deliberate: the harvested Framer rules set position on these
   via content-hashed class selectors, which outrank a bare tag selector. */
footer { position: relative !important; }
footer .framer-1t04agm { position: relative !important; }

/* ---------- type audit fixes (2026-08-18) ----------
   Measured every text node on the built page against the tokens.css scale
   (display 80 / h2 60 / h3 45 / h4 30 / h5 25 / lead 20 / body 17 / sm 15 /
   meta 13). Three faults found and fixed here.

   1. Section headings ran at two sizes. before-after, from-the-room and
      the-day resolved at 60px off the Framer preset, while schedule,
      ownership, businesses and your-day sat at 34px. Feeding the preset a
      variable was not enough because it computes from its own default, so the
      size is set outright.
   2. The heading clamp floor was too low. At a ~900px viewport it bottomed out
      at 34px, which is h4 territory, not a section heading.
   3. Body copy split 17px / 16px across sections. 17px is the token. */
:root { --selr-t-h2: clamp(38px, 4.4vw, 56px); }

.selr-sec h2,
#ownership .selr-band-h,
#schedule .selr-sched-head h2,
#your-day h2.framer-text,
.selr-businesses-copy h2 { font-size: var(--selr-t-h2) !important; }

/* body copy back on the 17px token */
.selr-band-p,
#your-day .selr-support-center { font-size: var(--selr-t-body); }

/* The g548fb preset resolves to 16px and carries the section support lines.
   17px is the body token, and these sit directly under a 40px heading. */
.selr-sec .framer-styles-preset-g548fb,
.selr-band .framer-styles-preset-g548fb { font-size: var(--selr-t-body) !important; }

/* ---------- headings: the right typeface (2026-08-18) ----------
   Three of the seven section headings were rendering in Inter, not Manrope:
   schedule, ownership and your-day. Same cause as the size fault. They sit a
   level deeper than the Framer preset expects, so they inherited the body
   family instead of the display one. Manrope was loaded the whole time, it
   just was not reaching them. Display weight is 585, per tokens.css. */
.selr-sec h2,
#ownership .selr-band-h,
#schedule .selr-sched-head h2,
#your-day h2.framer-text,
.selr-businesses-copy h2 {
  font-family: "Manrope Variable", Manrope, sans-serif !important;
  font-variation-settings: "wght" var(--selr-display-wght, 585);
  letter-spacing: var(--selr-ls-h2);
  line-height: var(--selr-lh-h2);
}

/* ---------- from the room: mashup first (2026-08-18) ----------
   Was a drifting wall of 26 thumbnails, which asked a stranger to press play
   before they learned anything. Now one clip that plays itself, with three
   quotes readable beside it for the majority who never play video at all.
   Quotes chosen against the 33 onboarding forms: headspace answers "too much
   still lives in my head", 30-minutes answers "it will take months", and the
   three-builds line answers "what would I actually walk out with". */
/* ---------- the proof stage (2026-08-19) ----------
   The section is packaged like the site's own Testimonials block: one dark,
   full-width card (radius 40) with the mashup film standing in it, a rotating
   quote beside it, and a proof panel that slides in from the right edge once
   the card is in view (hover opens it early). Numbers live in the panel:
   400+ owners, 5 years, 263 on video, and the Claude Partner badge. The
   ambient layer is a frame of the film, blurred and darkened, so the card
   reads as one cinematic surface rather than text on a plain ground. */
.selr-proof-stage {
  --stage-ink: #FFFFFA;
  --stage-muted: rgba(255,255,250,.68);
  --stage-panel-w: 340px;
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 1320px;
  min-height: 620px;
  padding: 44px 44px 44px 48px;
  border-radius: 40px;
  overflow: hidden;
  background: #17151F;
  color: var(--stage-ink);
  isolation: isolate;
}
.selr-proof-ambient {
  position: absolute; inset: -6%; z-index: 0;
  width: 112%; height: 112%; object-fit: cover; object-position: center 40%;
  filter: blur(34px) saturate(1.05) brightness(.62);
  opacity: .9;
  pointer-events: none;
}
.selr-proof-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(23,21,31,.32) 0%, rgba(23,21,31,.62) 55%, rgba(23,21,31,.78) 100%);
  pointer-events: none;
}
.selr-proof-film {
  position: relative; z-index: 1;
  aspect-ratio: 9 / 16;
  width: 300px;
  border-radius: 24px;
  overflow: hidden;
  background: #1E1E24;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.selr-proof-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.selr-proof-copy {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  align-self: stretch;
  min-width: 0;
  padding-right: calc(var(--stage-panel-w) + 40px);
  transition: padding-right .7s cubic-bezier(.22,1,.36,1);
}
.selr-proof-h {
  margin: 0 0 34px;
  font-family: "Manrope Variable", "Manrope", sans-serif;
  font-size: clamp(44px, 4.3vw, 62px); line-height: 1;
  font-weight: 400; font-variation-settings: "wght" 585; letter-spacing: -0.04em;
  color: var(--stage-ink);
}
.selr-proof-quotes { position: relative; min-height: 250px; }
.selr-proof-quote {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 22px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.selr-proof-quote.is-on { opacity: 1; transform: none; pointer-events: auto; }
.selr-proof-quote blockquote {
  margin: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 40px; line-height: 1.12; letter-spacing: -0.035em;
  color: var(--stage-ink); text-wrap: balance;
}
.selr-proof-quote figcaption {
  display: flex; flex-direction: column; gap: 2px;
  font-family: "Manrope Variable", Manrope, sans-serif;
}
.selr-proof-quote .who { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--stage-ink); }
.selr-proof-quote .role { font-size: 13px; color: var(--stage-muted); }
/* The dot a person sees is 8px. The thing they have to hit is 24px, which is
   the minimum a target may be, so the button carries the hit area and a
   pseudo-element carries the paint. The gap moved inside the button for the
   same reason: two 8px dots 8px apart sit 16px between centres, and no amount
   of spacing rescues a target that close to the next one. */
.selr-proof-dots { display: flex; gap: 0; margin-top: 22px; }
.selr-proof-dots button {
  appearance: none; border: 0; padding: 0; cursor: pointer; background: none;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
.selr-proof-dots button::before {
  content: ''; display: block;
  width: 8px; height: 8px; border-radius: 8px;
  background: rgba(255,255,250,.35);
  transition: width .35s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.selr-proof-dots button.is-on { width: 42px; }
.selr-proof-dots button.is-on::before { width: 26px; background: #8B63FF; }
.selr-proof-dots button:focus-visible { outline: 2px solid #8B63FF; outline-offset: -2px; border-radius: 12px; }

/* the slide-in panel */
.selr-proof-panel {
  position: absolute; z-index: 2; top: 0; right: 0; bottom: 0;
  width: var(--stage-panel-w);
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  padding: 40px 36px 40px 40px;
  background: rgba(255,255,250,.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  border-left: 1px solid rgba(255,255,250,.14);
  transform: translateX(104%);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.selr-proof-panel.is-open { transform: none; }
.selr-proof-stat { display: flex; flex-direction: column; gap: 4px; }
.selr-proof-num {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -0.045em;
  color: var(--stage-ink); white-space: nowrap;
}
.selr-proof-num span { color: #8B63FF; font-size: .6em; vertical-align: top; margin-left: 2px; }
.selr-proof-desc {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 14px; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--stage-muted); max-width: 200px;
}
.selr-proof-badge {
  display: block; height: 52px; width: auto; margin-top: 4px;
}
@media (max-width: 1099.98px) {
  .selr-proof-stage { --stage-panel-w: 300px; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; padding: 36px; }
  .selr-proof-film { width: 260px; }
  .selr-proof-quote blockquote { font-size: 32px; }
  .selr-proof-h { margin-bottom: 26px; }
  .selr-proof-num { font-size: 38px; }
  .selr-proof-badge { height: 44px; }
}
@media (max-width: 899.98px) {
  .selr-proof-stage {
    grid-template-columns: 1fr; gap: 30px; min-height: 0;
    padding: 28px 22px 26px; border-radius: 30px; justify-items: center;
  }
  .selr-proof-film { width: 240px; }
  .selr-proof-copy { width: 100%; padding-right: 0; align-items: center; text-align: center; }
  .selr-proof-quotes { min-height: 190px; width: 100%; }
  .selr-proof-quote { align-items: center; }
  .selr-proof-quote blockquote { font-size: 26px; }
  .selr-proof-h { font-size: 44px; margin-bottom: 20px; }
  .selr-proof-dots { justify-content: center; }
  .selr-proof-panel {
    position: relative; inset: auto; width: 100%; transform: none;
    flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 22px;
    padding: 24px 22px; border-left: 0; border-top: 1px solid rgba(255,255,250,.14);
    border-radius: 22px; background: rgba(255,255,250,.08);
  }
  .selr-proof-stat { flex: 1 1 40%; }
  .selr-proof-num { font-size: 36px; }
  .selr-proof-badge { flex: 1 1 100%; height: 40px; width: 130px; object-fit: contain; object-position: left; margin: 0; }
}

/* ---------- proof film controls (2026-08-18, rebuilt) ----------
   One button shape, two jobs. Muted shows the labelled pill because that is
   the state worth selling. Once sound is on it collapses to the same quiet
   icon circle the pause button uses, so the invitation stops repeating itself.
   Icons are inline SVG. The earlier CSS-drawn speaker was fragile and read
   as a glyph nobody recognised. */
.selr-proof-btn {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 16px 0 13px;
  border: 0;
  border-radius: 40px;
  cursor: pointer;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #242424;
  background-color: rgba(255, 255, 250, .94);
  box-shadow: 0 4px 14px rgba(20, 18, 30, .18);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.selr-proof-btn:hover { transform: translateY(-1px); }
.selr-proof-btn:focus-visible { outline: 2px solid #6736E2; outline-offset: 3px; }
.selr-proof-btn svg { flex: none; display: block; }

/* icon-only variant: pause, and sound once it is on */
.selr-proof-btn.is-icon,
.selr-proof-btn.is-on {
  width: 38px;
  padding: 0;
  gap: 0;
  justify-content: center;
  color: #FFFFFA;
  background-color: rgba(20, 18, 30, .5);
  box-shadow: none;
}
.selr-proof-btn.is-icon:hover,
.selr-proof-btn.is-on:hover { background-color: rgba(20, 18, 30, .7); }
.selr-proof-btn.is-on [data-proof-sound-label] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* sound top-right, pause bottom-left: two corners, two jobs */
[data-proof-sound] { top: 14px; right: 14px; }
[data-proof-pause] { left: 14px; bottom: 14px; }

/* the slash shows only while muted, the waves only once sound is on */
[data-proof-sound] .wave { opacity: 0; }
[data-proof-sound].is-on .wave { opacity: 1; }
[data-proof-sound].is-on .slash { opacity: 0; }

/* pause shows bars, play shows the triangle */
[data-proof-pause] .p-play { display: none; }
[data-proof-pause].is-paused .p-bar { display: none; }
[data-proof-pause].is-paused .p-play { display: block; }

/* Claude Partner Network: the official lockup instead of a text stat, since
   the credential is the mark, not the word "Member". */
.selr-stat-badge { display: flex; align-items: center; justify-content: center; }
.selr-stat-badge img { width: auto; height: 42px; max-width: 100%; display: block; }
@media (max-width: 809.98px) { .selr-stat-badge img { height: 34px; } }

/* ---------- nav links: restore the collapsed row (2026-08-18) ----------
   The four links (The day / Gallery / Stories / Insights) were in the DOM with
   correct labels but rendering at 1px each, so the bar read as logo, gap,
   button. Chain of causes, measured: the Nav Item containers ship
   flex: 1 0 0px, the wrappers resolve to 4px, and each anchor carries
   overflow: clip, which hid what little was left. Sized from the text instead. */
.framer-1n7ywq0,
[data-selr-nav],
[data-selr-nav] [class*="-container"],
[data-selr-nav] > div > div {
  width: auto !important;
  min-width: 0;
  flex: 0 0 auto !important;
  overflow: visible !important;
}
[data-selr-nav] {
  display: flex !important;
  align-items: center;
  gap: 2px;
}
[data-selr-nav] a {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  padding: 9px 15px;
  white-space: nowrap;
  border-radius: 30px;
  transition: background-color .2s ease;
}
[data-selr-nav] a:hover { background-color: rgba(103, 54, 226, .09); }
[data-selr-nav] a p { margin: 0; white-space: nowrap; }
/* the sliding purple selector pill has no anchor now, keep it out of the flow */
[data-selr-nav] .framer-1fqkgne { position: absolute; }

/* the anchors ignored padding, so the four labels ran together as one word */
[data-selr-nav] a.framer-12klspw,
[data-selr-nav] [class*="-container"] > a {
  padding: 9px 14px !important;
  margin: 0 !important;
}
[data-selr-nav] { gap: 6px !important; }

/* ---------- button reset + footer nav scale (2026-08-18) ----------
   1. .selr-pill-btn was written for <a>. Used on a <button> it kept the user
      agent's own chrome, which is where the heavy black outset border on
      "Watch more" came from.
   2. (retired 2026-08-19) footer links were forced to body size here; the
      live site runs them at the 30px preset, so the override is gone. */
button.selr-pill-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  cursor: pointer;
}
/* Footer navigation links keep the site's own preset size (30px on desktop,
   25px tablet, 20px phone), measured off selrai.com.au 2026-08-19. An earlier
   override shrank them to body size and broke parity with the main site. */

/* YouTube player fills the 9:16 film frame the same way the <video> did */
.selr-proof-film #proof-yt,
.selr-proof-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Sound button toned down: dark translucent glass rather than a bright white
   pill, so it sits on the footage instead of punching a hole in it. */
.selr-proof-film .selr-proof-btn {
  background-color: rgba(18, 16, 26, .46);
  color: #FFFFFA;
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.selr-proof-film .selr-proof-btn:hover { background-color: rgba(18, 16, 26, .66); }
.selr-proof-film .selr-proof-btn.is-on { background-color: rgba(18, 16, 26, .34); }
.selr-proof-film .selr-proof-btn.is-on:hover { background-color: rgba(18, 16, 26, .58); }

/* ---------- pill buttons: dot removed (2026-08-18) ----------
   The trailing dot is a Kora template pattern, not a Selr one. Luke's call to
   drop it. Hidden rather than stripped from the markup so the partials stay
   close to the captured source, and the gap goes with it so the label sits
   centred instead of leaving a hole where the dot was. */
.selr-pill-dot { display: none; }
.selr-pill-btn { gap: 0; }

/* Every dot, everywhere. Three separate systems shipped one: .selr-pill-dot on
   the page pills, .dot inside .selr-btn from tokens.css, and .dot inside the
   enquiry form's .btn. All hidden here so none of them can come back. */
.selr-pill-dot,
.selr-btn .dot,
.selr-event-form .btn .dot { display: none !important; }
.selr-pill-btn, .selr-btn, .selr-event-form .btn { gap: 0; }

/* ---------- chrome parity with selrai.com.au (2026-08-19) ----------
   The email copy icon was captured mid draw-on (stroke-dashoffset at the end
   of its dash), so only a speck rendered inside the disc. Settle it drawn. */
[data-framer-name="Copy to clipboard"] svg path { stroke-dashoffset: 0 !important; }

/* Sub-pages (gallery, stories) open under the fixed nav the way the site's own
   inner pages do: the first heading clears the pill with room to breathe. */
.selr-gallery-page .selr-sec-inner,
.selr-locations-page .selr-sec-inner,
.selr-stories-page .selr-sec-inner { padding-top: 170px; }
@media (max-width: 809.98px) {
  .selr-gallery-page .selr-sec-inner,
  .selr-locations-page .selr-sec-inner,
  .selr-stories-page .selr-sec-inner { padding-top: 120px; }
}

/* Phone menu. The captured nav only shipped the closed variant (opening was
   Framer runtime). The links card is already in the markup, parked absolute
   and transparent: opening lays it out under the pill, same shape as the
   site's own dropdown. Toggled by selr-chrome.js on the hamburger. */
.selr-nav-open [data-framer-name="Phone Closed"] {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 12px !important;
}
.selr-nav-open [data-framer-name="Phone Closed"] [data-framer-name="Mobile Nav Links"] {
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  padding: 8px 17px 0 !important;
  transform: none !important;
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
}
.selr-nav-open [data-framer-name="Hamburger Icon"] [data-framer-name="Middle"] { opacity: 0 !important; }
.selr-nav-open [data-framer-name="Hamburger Icon"] [data-framer-name="Top"] { transform: translateY(6px) rotate(45deg) !important; }
.selr-nav-open [data-framer-name="Hamburger Icon"] [data-framer-name="Bottom"] { transform: translateY(-6px) rotate(-45deg) !important; }
[data-framer-name="Phone Closed"] [data-framer-name="Open Menu"] { cursor: pointer; }


/* The menu bar carries the city too, so it is on screen at every scroll
   position. The bar's white container is a flex row, so the tag simply
   extends it; nothing is overlaid and nothing moves. */
[data-framer-name="Nav Container"] { gap: 10px; }
.selr-city-tag-nav { margin-right: 6px; }
@media (max-width: 809.98px) {
  .selr-city-tag-nav { height: 28px; font-size: 13px; padding: 0 13px 0 10px; margin: 0 0 0 10px; }
}