@charset "UTF-8";
@media print{
*,
*::before,
*::after {
text-shadow: none !important;
		box-shadow: none !important;
}

a {
text-decoration: underline;
}

img {
page-break-inside: avoid;
}

p,
h2 {
orphans: 3;
		widows: 3;
}

h2 {
page-break-after: avoid;
}

@page {
		size: a3;
	}

body {
min-width: 992px !important;
}

}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(25, 25, 25, 0);
}
aside,
footer,
header,
nav,
section {
display: block;
}
body {
margin: 0;
	font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #434345;
	text-align: left;
	background-color: #191919;
}
hr {
box-sizing: content-box;
	height: 0;
	overflow: visible;
}
h1,
h2{
margin-top: 0;
	margin-bottom: 0.5rem;
}
p {
margin-top: 0;
	margin-bottom: 1rem;
}
address {
margin-bottom: 1rem;
	font-style: normal;
	line-height: inherit;
}
ul,
dl {
margin-top: 0;
	margin-bottom: 1rem;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: .5rem;
	margin-left: 0;
}
strong {
font-weight: bolder;
}
a {
color: inherit;
	text-decoration: none;
	background-color: transparent;
}
a:hover {
color: inherit;
	text-decoration: underline;
}
img {
vertical-align: middle;
	border-style: none;
}
button {
border-radius: 0;
}

/* Modern keyboard focus indicator for buttons */
button:focus {
	outline: none;
}

button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

button {
margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}
button {
overflow: visible;
}
button {
text-transform: none;
}
button,
html [type="button"] {
appearance: button;
}
[hidden] {
display: none !important;
}
h1,
h2{
margin-bottom: 0.5rem;
	font-family: inherit;
	font-weight: 400;
	line-height: 1.1;
	color: inherit;
}
h1 {
font-size: 45px;
}
h2 {
font-size: 38px;
}

hr {
margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.small {
font-size: 80%;
	font-weight: 400;
}
html *:first-child {
margin-top: 0;
}
html *:last-child {
margin-bottom: 0;
}
a:hover,
a:focus {
text-decoration: none;
	outline: none;
}
iframe {
display: block;
}
button:hover {
cursor: pointer;
}
.hr {
height: 1px;
	padding: 0px;
	margin-top: 30px;
	margin-bottom: 30px;
	background: #f5f5f5;
	border: none;
}
.hr-gradient {
	background: linear-gradient(to right, white 0%, #d9d9d9 50%, white 100%);
}
h1 {
margin-top: 26px;
	margin-bottom: 21px;
	font-size: 36px;
	line-height: 1.4;
}
@media (min-width: 768px){
h1 {
line-height: 1.4;
		font-size: 39.6px;
}
}
@media (min-width: 1200px){
h1 {
line-height: 1.3;
		font-size: 40.5px;
}
}
@media (min-width: 1600px){
h1 {
line-height: 1.2;
		font-size: 45px;
}
}
h2 {
margin-top: 42px;
	margin-bottom: 17px;
	font-size: 32px;
	line-height: 1.3;
}
@media (min-width: 768px){
h2 {
line-height: 1.3;
		font-size: 34.4px;
}
}
@media (min-width: 1200px){
h2 {
line-height: 1.24211;
		font-size: 35px;
}
}
@media (min-width: 1600px){
h2 {
line-height: 1.18421;
		font-size: 38px;
}
}

p,
.p {
margin-top: 18px;
	margin-bottom: 18px;
}
p a:hover,
.p a:hover {
text-decoration: underline;
}
.small{
font-size: 93.75%;
}

.bg-lighter {
background: #f5f5f5;
	fill: #f5f5f5;
}

/* ==================================================
   NEXT PLAYLIST / "YOU MAY ALSO LIKE" LINK
   Bottom-of-article link. The MDI arrow starts light blue,
   turns green, and slides right on hover.

   HTML/CSS dependencies to keep:
   .btn-more, .icon, .icon-xxs, .mdi, .mdi-arrow-right
   DO NOT REMOVE .mdi-arrow-right — it supplies the visible arrow glyph.
   ================================================== */

.btn-more {
font-size: 17px;
	font-weight: 700;
	line-height: 18px;
}
.btn-more * + .icon {
transition: .3s;
	display: inline-block;
	margin-left: 8px;
}
.btn-more .icon {
color: #55bbeb;
}
.btn-more .icon-xxs {
font-size: 18px;
	line-height: 18px;
}
.btn-more:hover .icon {
color: #42b574;
}
.btn-more:hover * + .icon {
transform: translateX(4px);
}
@font-face {
	font-family: "Material Design Icons";
	src: url("../fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2");
	font-weight: normal;
	font-style: normal;
}
.mdi {
display: inline-block;
	font-weight: 400;
	font-style: normal;
	font-family: "Material Design Icons";
	font-size: inherit;
	text-rendering: auto;
	transform: translate(0, 0);
}
.mdi-cellphone-android:before {
    content: "";
}
.mdi-music-note:before {
content: "";
}

/* Required by the bottom "You May Also Like" next-playlist link. */
.mdi-arrow-right:before {
	content: "\f14f";
}
.page .text-middle {
  vertical-align: middle;
}

.icon {
position: relative;
	display: inline-block;
	font-weight: 400;
	font-size: 54px;
	line-height: 56px;
	font-style: normal;
}
.icon:before {
display: inline-block;
	position: relative;
}
.icon-xxs {
font-size: 24px;
	line-height: 24px;
}
.breadcrumb-classic {
position: relative;
}
.breadcrumb-classic {
fill: #000000;
	background: linear-gradient(90deg, #000000 0%, #36454f 100%);
}
.breadcrumb-classic:before {
fill: #36454f;
	background: linear-gradient(270deg, #000000 0%, #36454f 100%);
}
.breadcrumb-classic,
.breadcrumb-classic a {
color: #ffffff;
}
.breadcrumb-classic:before {
position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	animation: fadeBoth 6s infinite;
}
.breadcrumb-classic > *:not(svg) {
position: relative;
	z-index: 1;
}
@keyframes fadeBoth {
	0%,
	100% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}
.label {
padding: 0.2em 0.6em 0.2em;
}
.label-custom {
display: inline-block;
	padding: 8px;
	font-size: 8px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	letter-spacing: .06em;
	transition: .3s;
}
.label-custom {
color: #ffffff;
}
.label-rounded-custom {
border-radius: 3px;
}
.label-xs-custom {
padding: 3px 5px;
}
.label-success {
color: #212529;
	background-color: #abcc37;
}
.page-loader-variant-1 {
position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 25px;
	z-index: 9999999;
	background: #191919;
	transition: .3s all ease;
}
.page-loader-variant-1 .spinner {
width: 56px;
	height: 56px;
	background: url("../images/633328.png") no-repeat transparent -2240px 0;
	animation: 1.5s sprite-animation steps(40) infinite;
	display: inline-block;
}
.page-loader-variant-1.loaded {
opacity: 0;
	visibility: hidden;
	z-index: -1;
}
.page-loader-variant-1.loaded .spinner {
animation: none;
}
[data-x-mode] .page-loader-variant-1 {
display: none;
}

/* ==================================================
   PAGE LOADER LOGO
   ================================================== */
.page-loader-logo {
    margin-top: -20px;
    margin-left: -18px;
}


/* ==================================================
   ART OF SOUND PLAYLIST — MODERN 2026 LAYOUT
   Purpose-built structural CSS for playlist pages.
   ================================================== */

:root {
  --playlist-content-max: 800px;
  --playlist-sidebar-width: 270px;
  --playlist-layout-gap: clamp(36px, 4vw, 64px);
  --playlist-page-gutter: clamp(20px, 4vw, 48px);
  --playlist-section-space: clamp(72px, 8vw, 124px);
}

.page {
  overflow: hidden;
  background-color: #ffffff;
}

.page-loader-logo {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-loader-status {
  margin-top: 41px;
  text-align: center;
}

/* Breadcrumb */
.playlist-breadcrumb {
  color: #ffffff;
}

.playlist-breadcrumb-inner {
  width: min(1200px, calc(100% - (2 * var(--playlist-page-gutter))));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 10px;
  padding-block: 34px;
  position: relative;
  z-index: 1;
}

.playlist-breadcrumb-title {
  display: none;
  margin: 0;
}

.playlist-breadcrumb-icon {
  display: none;
  line-height: 1;
}

/* Shaped playlist navigation */
.playlist-breadcrumb-trail {
  --crumb-point: 14px;
}

.playlist-breadcrumb-trail ol {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.playlist-breadcrumb-trail .breadcrumb-item {
  position: relative;
}

.playlist-breadcrumb-trail .breadcrumb-item + .breadcrumb-item {
  margin-left: -7px;
}

.playlist-breadcrumb-trail .breadcrumb-item a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 28px 8px 20px;

  color: #ffffff;
  background: linear-gradient(135deg, #454a4e 0%, #596064 100%);

  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;

  clip-path: polygon(
    0 0,
    calc(100% - var(--crumb-point)) 0,
    100% 50%,
    calc(100% - var(--crumb-point)) 100%,
    0 100%,
    var(--crumb-point) 50%
  );

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.18s ease;
}

/* First crumb has a clean rounded left edge */
.playlist-breadcrumb-trail .breadcrumb-item:first-child a {
  padding-left: 18px;
  border-radius: 6px 0 0 6px;

  clip-path: polygon(
    0 0,
    calc(100% - var(--crumb-point)) 0,
    100% 50%,
    calc(100% - var(--crumb-point)) 100%,
    0 100%
  );
}

/* Second crumb receives the interlocking notch */
.playlist-breadcrumb-trail .breadcrumb-item + .breadcrumb-item a {
  padding-left: 30px;
}

/* Subtle Art Of Sound hover */
.playlist-breadcrumb-trail .breadcrumb-item a:hover,
.playlist-breadcrumb-trail .breadcrumb-item a:focus {
  color: #ffffff;
  background: linear-gradient(135deg, #555b5f 0%, #6b7276 100%);
}

/* Second crumb slides slightly right */
.playlist-breadcrumb-trail .breadcrumb-item + .breadcrumb-item a:hover,
.playlist-breadcrumb-trail .breadcrumb-item + .breadcrumb-item a:focus {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .playlist-breadcrumb-inner {
    padding-block: 50px;
  }

  .playlist-breadcrumb-icon {
    display: block;
  }
}

@media (min-width: 1200px) {
  .playlist-breadcrumb-inner {
    grid-template-columns: 5fr 2fr 5fr;
    justify-items: stretch;
  }

  .playlist-breadcrumb-title {
    display: block;
    text-align: left;
    font-size: 45px;
    line-height: 1.2;
  }

  .playlist-breadcrumb-icon {
    text-align: center;
  }

  .playlist-breadcrumb-trail ol {
    justify-content: flex-end;
  }
}

/* Main article + sidebar */
.playlist-main {
  padding: var(--playlist-section-space) var(--playlist-page-gutter);
}

.playlist-layout {
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 66px;
}

.playlist-article {
  width: 100%;
  max-width: var(--playlist-content-max);
  margin-inline: auto;
  text-align: left;
}

.playlist-article > h1 {
  margin-top: 0;
}

.playlist-article-body {
  margin-top: 20px;
}

.playlist-tips {
  margin-top: 41px;
}

.playlist-tips-first {
  margin-top: 30px;
}

.rd-navbar-nav {
  margin-top: 10px;
}

.playlist-divider {
  height: 1px;
  margin: 41px 0 30px;
  border: 0;
  background: linear-gradient(to right, #ffffff 0%, #d9d9d9 50%, #ffffff 100%);
}

.playlist-listen-title {
  margin-top: 41px;
}

.playlist-spotify-media {
  margin-top: 30px;
}

.playlist-category-first {
  margin-top: 41px;
}

.planning-portal-reminder {
  margin-top: 41px;
}

.next-playlist-link {
  margin-top: 30px;
  text-align: right;
}

.next-playlist-text {
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
  text-transform: uppercase;
  vertical-align: middle;
}

.next-playlist-arrow {
  vertical-align: middle;
}

/* Sidebar */
.playlist-sidebar {
  width: 100%;
  max-width: var(--playlist-content-max);
  margin-inline: auto;
  text-align: left;
}

.playlist-sidebar-group + .playlist-sidebar-group {
  margin-top: 41px;
}

.sidebar-playlist-label,
.footer-section-label {
  margin: 0 0 18px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-playlist-label::after {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    margin-top: 18px;
    background:
        linear-gradient(#191919, #191919) 0 0 / 40px 100% no-repeat,
        #d9d9d9;
    animation: sidebar-divider-slide 6s ease-in-out infinite alternate;
}

.playlist-sidebar-group:nth-child(2) .sidebar-playlist-label::after {
    animation-direction: alternate-reverse;
}

@keyframes sidebar-divider-slide {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 160px 0;
    }
}

.playlist-link-list,
.footer-link-list {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

/* Playlist links — blue line becomes music note on hover */
.playlist-link-list li {
    position: relative;
    padding-left: 18px;
}

.playlist-link-list li + li {
    margin-top: 10px;
}

.playlist-link-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.75em;
    width: 2px;
    height: 18px;
    border-radius: 2px;
    background: #55bbeb;
    transform: translateY(-50%);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.playlist-link-list li::after {
    content: "";
    position: absolute;
    left: -2px;
    top: 0.75em;
    width: 15px;
    height: 15px;
    background: url("/images/webp/music-note.webp") center / contain no-repeat;
    opacity: 0;
    transform: translateY(-50%) scale(0.7);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.playlist-link-list li:has(a:hover)::before {
    opacity: 0;
    transform: translateY(-50%) scaleY(0.4);
}

.playlist-link-list li:has(a:hover)::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.playlist-link-list a {
    display: inline-block;
    transition: color 0.18s ease, transform 0.18s ease;
}

.playlist-link-list a:hover {
    color: #55bbeb;
    transform: translateX(8px);
}

@media (min-width: 480px) and (max-width: 991.98px) {
  .playlist-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }

  .playlist-sidebar-group + .playlist-sidebar-group {
    margin-top: 0;
  }
}

@media (min-width: 992px) {
  .playlist-layout {
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    max-width: 100%;
    align-items: start;
    column-gap: var(--playlist-layout-gap);
  }

  .playlist-sidebar {
    max-width: none;
    margin: 0;
  }
}

@media (min-width: 1200px) {
  .playlist-layout {
    width: 75%;
  }
}

@media (min-width: 1600px) {
  .playlist-layout {
    width: 66.6667%;
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
  }
}

/* Footer */
.page-footer {
  position: relative;
  z-index: 1;
  padding: 66px var(--playlist-page-gutter) 34px;
  background: #191919;
  color: #ffffff;
}

.footer-inner {
  width: min(1200px, 100%);
  margin-inline: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 45px;
  align-items: start;
  text-align: center;
}

.footer-brand {
  display: inline-block;
}

.footer-logo {
  display: block;
  width: 275px;
  max-width: 100%;
  height: auto;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 15px;
  font-style: normal;
}

.footer-contact span {
  font-weight: 700;
}

.footer-contact a,
.footer-link-list a {
  color: #9b9b9b;
}

.footer-contact a:hover,
.footer-link-list a:hover {
  color: #55bbeb;
}

.footer-link-list {
  margin-top: 0;
}

.site-copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 50px 0 0;
  color: #434345;
  font-size: 15px;
  text-align: center;
}

.site-copyright a {
  color: inherit;
}

@media (min-width: 480px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand-column {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .footer-inner {
    width: min(900px, 100%);
  }

  .footer-grid {
    grid-template-columns: 3fr 2fr 2fr;
    gap: 30px;
  }

  .footer-brand-column {
    grid-column: auto;
  }

  .footer-logo {
    margin-left: -30px;
  }
}

.rd-navbar {
display: none;
	position: relative;
	z-index: 1999;
	text-align: left;
}
.rd-navbar ul {
list-style-type: none;
	margin-bottom: 0;
}
.rd-navbar a {
transition: .3s all ease;
}
.rd-navbar-static.rd-navbar--is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.rd-navbar-fixed,
.rd-navbar-static {
  display: block;
}

/* ==================================================
   NAVBAR AUTO-HIDE — DESKTOP & MOBILE
   ================================================== */

/* Desktop */
.rd-navbar-static.rd-navbar--is-stuck {
  transition: transform 0.3s ease;
}

.rd-navbar-static.rd-navbar--is-stuck.navbar-auto-hidden {
  transform: translateY(-100%);
}

/* Mobile */
@media (max-width: 1199.98px) {

  .rd-navbar-fixed .rd-navbar-panel,
  .rd-navbar-fixed .rd-navbar-toggle,
  .rd-navbar-fixed .rd-navbar-brand {
    transition: transform 0.3s ease;
  }

  .rd-navbar-fixed.navbar-auto-hidden .rd-navbar-panel,
  .rd-navbar-fixed.navbar-auto-hidden .rd-navbar-toggle {
    transform: translateY(-100%);
  }

  .rd-navbar-fixed.navbar-auto-hidden .rd-navbar-brand {
    transform: translate(-50%, -100%);
  }

}

.rd-navbar--no-transition,
.rd-navbar--no-transition * {
transition: none !important;
}

/* ==================================================
   HEADER & MOBILE NAVBAR BRANDING
   ================================================== */

.header-logo {
  margin-top: -8px;
  margin-left: 30px;
}

.mobile-brand-name {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
}

/* ==================================================
   NAVBAR MOBILE
   ================================================== */

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav-wrap {
	transition: 0.3s all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-panel {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 16;
}

.rd-navbar-default.rd-navbar-fixed,
.rd-navbar-default.rd-navbar-fixed .rd-navbar-panel {
	height: 69px;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle {
	position: fixed;
	z-index: 17;
	top: 4px;
	left: 4px;
	display: inline-block;
	width: 48px;
	height: 48px;
	font-size: 24px;
	line-height: 48px;
	text-align: center;
	color: #ffffff;
	background: none;
	border: none;
	outline: none;
	padding: 0;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle span {
	position: relative;
	display: block;
	margin: auto;
	transition: .3s all ease;
	transform: rotate(180deg);
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle span:before,
.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle span:after {
	transform-origin: 1.71429px center;
	content: "";
	position: absolute;
	left: 0;
	top: -8px;
	transition: .3s all ease;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle span:after {
	top: 8px;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle span,
.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle span:before,
.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle span:after {
	width: 24px;
	height: 4px;
	background-color: #ffffff;
	backface-visibility: hidden;
	border-radius: 0;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle.active span {
	transform: rotate(360deg);
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle.active span:before,
.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle.active span:after {
	top: 0;
	width: 15px;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle.active span:before {
	transform: rotate3d(0, 0, 1, -40deg);
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-toggle.active span:after {
	transform: rotate3d(0, 0, 1, 40deg);
}

@media (max-width: 1199.98px) {
  .rd-navbar-default.rd-navbar-fixed .rd-navbar-brand {
    display: block;
    position: fixed;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }

  .rd-navbar-default.rd-navbar-fixed .rd-navbar-brand .header-logo {
    width: auto;
    height: 55px;
    margin: 0;
  }
}

.rd-navbar-default.rd-navbar-light.rd-navbar-fixed .rd-navbar-panel {
	background: #ffffff;
	box-shadow: 0 1px 10px 0 rgba(67, 67, 69, 0.3);
}

.rd-navbar-default.rd-navbar-light.rd-navbar-fixed .rd-navbar-toggle span,
.rd-navbar-default.rd-navbar-light.rd-navbar-fixed .rd-navbar-toggle span:before,
.rd-navbar-default.rd-navbar-light.rd-navbar-fixed .rd-navbar-toggle span:after {
	background: #212121;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 280px;
	bottom: 0;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
	z-index: 15;
	transform: translateX(-105%);
	padding: 56px 10px 0;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav-wrap.active {
	transform: translateX(0);
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-mobile-scroll {
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-mobile-brand {
	display: block;
	text-align: center;
	margin-top: 30px;
}

/* Mobile Call Now CTA */
.mobile-call-cta {
  display: block;
  width: 240px;
  max-width: 100%;
  margin: 0 auto;
}

.mobile-call-cta img {
  display: block;
  width: 100%;
  height: auto;
}

.rd-navbar-default.rd-navbar-light.rd-navbar-fixed .rd-navbar-nav-wrap {
	color: #191919;
	background: #ffffff;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav {
	padding: 0;
	margin-top: 15px;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav > li:last-child {
	margin-bottom: 10px;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav li {
	float: none;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav li + li {
	margin-top: 5px;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav li a {
	cursor: pointer;
	display: block;
	padding: 8px 30px 8px 15px;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav li a span {
	vertical-align: middle;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav li .rd-navbar-label {
	margin-left: 5px;
}

.rd-navbar-default.rd-navbar-static .rd-navbar-nav::after{
display: block;
	clear: both;
	content: "";
}
.rd-navbar-default.rd-navbar-static .rd-navbar-nav > li{
float: left;
	position: relative;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-nav > li > a{
position: relative;
	display: inline-block;
	vertical-align: middle;
	letter-spacing: 0.06em;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-nav > li > a:after{
content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 2px;
	margin-top: 4px;
	transition: .3s all ease;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-nav > li > a:after{
	background: linear-gradient(90deg, #42b574 0%, #84c450 100%);
}
.rd-navbar-default.rd-navbar-static .rd-navbar-nav > li > a > .rd-navbar-label{
position: absolute;
	margin: -10px 0 0 -15px;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-nav > li.active > a:after,
.rd-navbar-default.rd-navbar-static .rd-navbar-nav > li.focus > a:after,
.rd-navbar-default.rd-navbar-static .rd-navbar-nav > li > a:hover:after{
left: 0;
	width: 100%;
}

.rd-navbar-default.rd-navbar-static .rd-navbar-nav > li + li{
margin-left: 37px;
}

.rd-navbar-default.rd-navbar-light.rd-navbar-static .rd-navbar-nav > li a{
color: #212121;
}

.rd-navbar-default.rd-navbar-static .rd-navbar-inner.active .rd-navbar-nav-wrap{
opacity: 0;
	visibility: hidden;
}

@media (min-width: 480px){
.rd-navbar-default.rd-navbar-fixed .rd-navbar-mobile-brand {
display: none;
}

.rd-navbar-default.rd-navbar-fixed .rd-navbar-brand {
display: block;
		transform: translateX(-50%);
}
}
.rd-navbar-default.rd-navbar-static .rd-navbar-mobile-brand {
display: none;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-brand {
float: left;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-brand img {
vertical-align: baseline;
}

.rd-navbar-default.rd-navbar-static .rd-navbar-menu-wrap {
float: right;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-brand {
margin-top: 9px;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-panel .rd-navbar-toggle {
display: none;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-inner {
transition: .3s all ease;
	padding: 32px 55px 20px 55px;
	position: relative;
	text-align: left;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-inner::after {
display: block;
	clear: both;
	content: "";
}
.rd-navbar-default.rd-navbar-static .rd-navbar-inner.active .rd-navbar-panel {
opacity: 0;
	visibility: hidden;
}

.rd-navbar-default.rd-navbar-static .rd-navbar-nav-wrap,
.rd-navbar-default.rd-navbar-static .rd-navbar-panel{
transition: .3s all ease;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-nav-wrap {
margin-top: 11px;
	display: inline-block;
}
.rd-navbar-default.rd-navbar-static .rd-navbar-nav-wrap::after {
display: block;
	clear: both;
	content: "";
}

.rd-navbar-default.rd-navbar-static.rd-navbar--is-stuck {
box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.15);
}

.rd-navbar-default.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-inner {
padding-top: 15px;
	padding-bottom: 15px;
}

.rd-navbar-default.rd-navbar-light.rd-navbar-static .rd-navbar-inner{
padding: 40px 85px 43px 85px;
}
.rd-navbar-default.rd-navbar-light.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-inner{
padding-top: 15px;
	padding-bottom: 15px;
}

.rd-navbar-default.rd-navbar-light {
background: #ffffff;
}

.rd-navbar-default.rd-navbar-light.rd-navbar-static.rd-navbar--is-stuck {
background: #ffffff;
}

@keyframes sprite-animation {
	from {
		background-position: 0 0;
	}
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    opacity: 1;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

.jump-nav-links {
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

/* ==================================================
   PLAYLIST PAGE COMPONENTS
   ================================================== */

.playlist-category.bg-lighter {
	position: relative;
	background: #fafafa;
	box-shadow: 0 0 0 100vmax #fafafa;
	clip-path: inset(0 -100vmax);
	padding-top: 41px;
	padding-bottom: 41px;
}

.playlist-nav-jump {
	margin-top: 24px;
	padding: 18px 20px;
	border: 1px solid #e7e7e7;
	border-radius: 10px;
	background: #fafafa;
}

.playlist-nav-jump strong {
	display: block;
	margin-bottom: 10px;
}

.playlist-nav-jump a {
	display: inline-block;
	margin: 4px 12px 4px 0;
	font-weight: 700;
}

/* --------------------------------------------------
   SPOTIFY PLAYLIST FACADE
   -------------------------------------------------- */

.spotify-playlist-facade {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.spotify-playlist-facade-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* --------------------------------------------------
   PLAYLIST CATEGORIES + SONGS
   -------------------------------------------------- */

.playlist-category {
	scroll-margin-top: 105px;
}

.playlist-song {
	margin-top: 26px;
}

.playlist-song:first-of-type {
	margin-top: 18px;
}

.playlist-song strong.song-title {
	color: #222;
}

/* Adds slight optical spacing after italicized song titles in body copy */
.song-title-inline {
    margin-right: 2px;
}

/* --------------------------------------------------
   PLAYLIST FUN FACTS
   -------------------------------------------------- */

.playlist-song:has(+ .song-fact-toggle) {
  margin-bottom: 0;
}

.song-description-continuation {
  margin-bottom: 0;
}

.song-fact-toggle {
  display: inline-block;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #42a5d9;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.song-fact-panel {
  margin-top: 10px;
  padding: 14px 16px;
  border-left: 3px solid #42a5d9;
  background: #f7fbfd;
  border-radius: 0 8px 8px 0;
}

/* --------------------------------------------------
   MOBILE
   -------------------------------------------------- */

@media (max-width: 575px) {

    .playlist-nav-jump a {
        display: block;
        margin: 8px 0;
    }

}

/* ==================================================
   NAVBAR TYPOGRAPHY
   ================================================== */

.rd-navbar-default.rd-navbar-fixed .rd-navbar-nav li a,
.rd-navbar-default.rd-navbar-static .rd-navbar-nav > li > a{
  font-size: 13px;
  font-weight: 900;
  line-height: 24px;
  text-transform: uppercase;
}

/*
 * Playlist Song Number Accent
 * Keeps playlist numbers in the normal text color while
 * matching the vertical divider to each category background.
 * --------------------------------------------------
 */

.song-number {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: 10px;
	font-weight: 700;
}

.song-number::after {
	content: "";
	width: 2px;
	height: 16px;
	border-radius: 1px;
}

/* Periwinkle */
.bokeh-periwinkle .song-number::after {
	background: rgba(139, 157, 224, 0.45);
}

/* Gold */
.bokeh-gold .song-number::after {
	background: rgba(246, 190, 72, 0.45);
}

/* Watermelon */
.bokeh-watermelon .song-number::after {
	background: rgba(230, 92, 104, 0.45);
}

/* Lavender */
.bokeh-purple .song-number::after {
	background: rgba(177, 145, 220, 0.45);
}

/* Rose Pink */
.bokeh-rose-pink .song-number::after {
	background: rgba(239, 135, 175, 0.45);
}

/* Playlist Disco Ball Icon
 * Reuses the site's existing favicon artwork as the playlist cue icon.
 * --------------------------------------------------
 */
.playlist-disco-ball {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* Playlist Category Intro
 * Vertically centers the disco ball cue with the intro text.
 * --------------------------------------------------
 */
.playlist-nav-intro {
	display: flex;
	align-items: center;
}

/* ==================================================
   BOKEH SECTION BASE
   ================================================== */

.bokeh-gold,
.bokeh-purple,
.bokeh-periwinkle,
.bokeh-watermelon,
.bokeh-rose-pink {
    position: relative;
    z-index: 0;
    padding-top: 41px;
    padding-bottom: 41px;
}

/* ==================================================
   STATIC COLOR GRADIENT
   ================================================== */

.bokeh-gold::before,
.bokeh-purple::before,
.bokeh-periwinkle::before,
.bokeh-watermelon::before,
.bokeh-rose-pink::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            var(--bokeh-color-1) 0%,
            var(--bokeh-color-2) 50%,
            var(--bokeh-color-3) 88%,
            var(--bokeh-color-4) 100%,
            #ffffff 100%
        );
}

/* Touch-first devices use a softened solid background in bokeh sections */
@media (hover: none) and (pointer: coarse) {
    .bokeh-gold::before,
    .bokeh-purple::before,
    .bokeh-periwinkle::before,
    .bokeh-watermelon::before,
    .bokeh-rose-pink::before {
        background: var(--bokeh-color-1);
        opacity: 0.68;
    }
}

/* ==================================================
   CONTENT LAYER
   ================================================== */

.bokeh-gold > *,
.bokeh-purple > *,
.bokeh-periwinkle > *,
.bokeh-watermelon > *,
.bokeh-rose-pink > * {
    position: relative;
    z-index: 2;
}

/* ==================================================
   BOKEH PARTICLE FIELD
   ================================================== */

.bokeh-particles {
    position: absolute !important;
    z-index: 1 !important;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    overflow: hidden;
    pointer-events: none;
}

/* ==================================================
   BOKEH PARTICLE BASE
   ================================================== */

.bokeh-particle {
    position: absolute;

    width: var(--size);
    height: var(--size);

    left: var(--left);
    top: var(--top);

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        rgba(255, 255, 255, calc(var(--core-alpha) * var(--bokeh-intensity, 1))) 0 50%,
        rgba(255, 255, 255, calc(var(--edge-alpha) * var(--bokeh-intensity, 1))) 51% 63%,
        transparent 72%
    );

    opacity: 1;

    filter: blur(var(--blur));
    box-shadow: none;

    transform-origin: center;

    will-change: transform;

    animation-name: bokehOrganicWander;
    animation-duration: var(--duration);
    animation-delay: var(--delay);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

/* ==================================================
   TINY BOKEH
   ================================================== */

.bokeh-particle--tiny {
    --core-alpha: 0.48;   /* 28% -> 48% */
    --edge-alpha: 0.206;  /* 12% -> 20.6% */
    --blur: 0.12px;
}

/* ==================================================
   SMALLER BOKEH
   ================================================== */

.bokeh-particle--smaller {
    --core-alpha: 0.52;   /* 32% -> 52% */
    --edge-alpha: 0.171;  /* 10.5% -> 17.1% */
    --blur: 0.18px;
}

/* ==================================================
   SMALL BOKEH
   ================================================== */

.bokeh-particle--small {
    --core-alpha: 0.56;   /* 36% -> 56% */
    --edge-alpha: 0.14;   /* 9% -> 14% */
    --blur: 0.25px;
}

/* ==================================================
   MEDIUM BOKEH
   ================================================== */

.bokeh-particle--medium {
    --core-alpha: 0.58;   /* 38% -> 58% */
    --edge-alpha: 0.107;  /* 7% -> 10.7% */
    --blur: 0.36px;
}

/* ==================================================
   SEMI-LARGE BOKEH
   ================================================== */

.bokeh-particle--semi-large {
    --core-alpha: 0.54;   /* 34% -> 54% */
    --edge-alpha: 0.056;  /* 3.5% -> 5.6% */
    --blur: 0.5px;
}

/* ==================================================
   LARGE BOKEH
   ================================================== */

.bokeh-particle--large {
    --core-alpha: 0.50;   /* 30% -> 50% */
    --edge-alpha: 0.063;  /* 3.8% -> 6.3% */
    --blur: 0.7px;
}

/* ==================================================
   LARGE GLOW BOKEH
   ================================================== */

.bokeh-particle--glow {
    --core-alpha: 0.54;   /* 34% -> 54% */
    --edge-alpha: 0.060;  /* 3.8% -> 6.0% */
    --blur: 0.9px;
}

/* ==================================================
   EXTRA-LARGE GLOW BOKEH
   ================================================== */

.bokeh-particle--xl-glow {
    --core-alpha: 0.58;   /* 38% -> 58% */
    --edge-alpha: 0.046;  /* 3% -> 4.6% */
    --blur: 1.2px;
}

/* ==================================================
   ORGANIC BOKEH MOVEMENT
   ================================================== */

@keyframes bokehOrganicWander {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: 1;
    }

    17% {
        transform:
            translate3d(
                var(--x1),
                var(--y1),
                0
            )
            scale(var(--scale-1));

        opacity: 1;
    }

    38% {
        transform:
            translate3d(
                var(--x2),
                var(--y2),
                0
            )
            scale(var(--scale-2));

        opacity: 1;
    }

    61% {
        transform:
            translate3d(
                var(--x3),
                var(--y3),
                0
            )
            scale(var(--scale-3));

        opacity: 1;
    }

    83% {
        transform:
            translate3d(
                var(--x4),
                var(--y4),
                0
            )
            scale(var(--scale-4));

        opacity: 1;
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: 1;
    }
}

/* ==================================================
   REDUCED MOTION
   ================================================== */

@media (prefers-reduced-motion: reduce) {

    .bokeh-particle {
        animation: none;
        opacity: 1;
    }
}

/* ==================================================
   GOLD BOKEH ONLY
   ================================================== */

.bokeh-gold {
    --bokeh-intensity: 0.68;
}

/* Gold: use the normal white page background */

.bokeh-gold::before {
    display: none;
}

/* Light champagne-gold bokeh particles */

.bokeh-gold .bokeh-particle {
    background:
        radial-gradient(
            circle,
            rgba(252, 246, 230, calc(var(--core-alpha) * var(--bokeh-intensity, 1))) 0 50%,
            rgba(252, 246, 230, calc(var(--edge-alpha) * var(--bokeh-intensity, 1))) 51% 63%,
            transparent 72%
        );
}

/* Gold: fade bokeh toward the far-right edge */
.bokeh-gold > .bokeh-particles {
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 46%,
        transparent 76%
    );

    mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 46%,
        transparent 76%
    );
}

/* ==================================================
   PURPLE GRADIENT
   ================================================== */

.bokeh-purple {
    --bokeh-intensity: 1.00;

    --bokeh-color-1: rgba(177,145,220,0.20);
    --bokeh-color-2: rgba(203,180,232,0.16);
    --bokeh-color-3: rgba(226,211,242,0.12);
    --bokeh-color-4: rgba(246,240,251,0.06);
}

/* ==================================================
   PERIWINKLE GRADIENT
   ================================================== */

.bokeh-periwinkle {
    --bokeh-intensity: 1.00;

    --bokeh-color-1: rgba(139,157,224,0.22);
    --bokeh-color-2: rgba(174,184,235,0.18);
    --bokeh-color-3: rgba(211,216,244,0.13);
    --bokeh-color-4: rgba(242,243,252,0.07);
}

/* ==================================================
   WATERMELON GRADIENT
   ================================================== */

.bokeh-watermelon {
    --bokeh-intensity: 0.46;

    --bokeh-color-1: rgba(230,92,104,0.20);
    --bokeh-color-2: rgba(239,139,147,0.16);
    --bokeh-color-3: rgba(247,191,197,0.12);
    --bokeh-color-4: rgba(253,234,236,0.06);
}

/* ==================================================
   ROSE PINK GRADIENT
   ================================================== */

.bokeh-rose-pink {
    --bokeh-intensity: 1.00;

    --bokeh-color-1: rgba(239,135,175,0.20);
    --bokeh-color-2: rgba(246,174,202,0.16);
    --bokeh-color-3: rgba(251,211,226,0.12);
    --bokeh-color-4: rgba(255,240,246,0.06);
}

/* ==================================================
   POP CULTURE & FUN FACTS - ATTENTION ANIMATIONS

   fact-waiting:
   Repeating attention wiggle used by the FIRST Fun
   Facts button while it is low in the viewport.
   The movement includes tiny pauses so it feels
   playful rather than constantly vibrating.

   fact-first-pop:
   Fires once when the FIRST button reaches the
   middle attention zone. Stops the waiting wiggle,
   pops upward, gives one excited wiggle, then settles.

   fact-entrance:
   Normal one-time entrance wiggle for later
   Fun Facts buttons.

   fact-wiggle:
   Subtle reminder used later by the randomized
   45–60 second reminder timer.
   ================================================== */

.song-fact-toggle {
	transform-origin: center;
}

/* --------------------------------------------------
   FIRST BUTTON - REPEATING "NOTICE ME" WIGGLE

   Quick, energetic attention wiggle followed by a
   long rest before repeating.

   JS removes this class once the button reaches
   the middle attention zone.
   -------------------------------------------------- */

.song-fact-toggle.fact-waiting {
	animation: fact-waiting-wiggle 6s ease-in-out infinite;
}

@keyframes fact-waiting-wiggle {

	/* Start calm */
	0% {
		transform: translateY(0) rotate(0deg) scale(1);
	}

	/* Excited "hey, look at me!" wiggle */
	3% {
		transform: translateY(-2px) rotate(-3deg) scale(1.02);
	}

	6% {
		transform: translateY(0) rotate(3deg) scale(1.025);
	}

	9% {
		transform: translateY(-3px) rotate(-3deg) scale(1.025);
	}

	12% {
		transform: translateY(0) rotate(3deg) scale(1.02);
	}

	15% {
		transform: translateY(-2px) rotate(-2deg) scale(1.015);
	}

	18% {
		transform: translateY(0) rotate(2deg) scale(1.01);
	}

	21% {
		transform: translateY(-1px) rotate(-1deg) scale(1.005);
	}

	24% {
		transform: translateY(0) rotate(0deg) scale(1);
	}

	/* Long rest before doing it again */
	25%,
	100% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
}

/* --------------------------------------------------
   FIRST BUTTON - "YOU SAW ME!" POP + WIGGLE

   Original stronger celebration pop.
   Starting point for controlled tone-down testing.
   -------------------------------------------------- */

.song-fact-toggle.fact-first-pop {
	animation: fact-first-pop 1.15s ease-out;
}

@keyframes fact-first-pop {

	0% {
		transform: translateY(0) scale(1) rotate(0deg);
	}

	/* Happy jump */
	16% {
		transform: translateY(-6px) scale(1.04) rotate(-1deg);
	}

	/* Land */
	30% {
		transform: translateY(1px) scale(1.025) rotate(1.5deg);
	}

	/* Excited wiggle */
	44% {
		transform: translateY(-2px) scale(1.025) rotate(-2deg);
	}

	58% {
		transform: translateY(0) scale(1.02) rotate(2deg);
	}

	72% {
		transform: translateY(-1px) scale(1.015) rotate(-1.25deg);
	}

	86% {
		transform: translateY(0) scale(1.005) rotate(0.75deg);
	}

	/* Settle */
	100% {
		transform: translateY(0) scale(1) rotate(0deg);
	}
}

/* --------------------------------------------------
   LATER BUTTONS - NORMAL ENTRANCE WIGGLE

   These do NOT use the repeating waiting behavior.
   -------------------------------------------------- */

.song-fact-toggle.fact-entrance {
	animation: fact-entrance-wiggle 0.8s ease-in-out;
}

@keyframes fact-entrance-wiggle {

	0%,
	100% {
		transform: rotate(0deg) scale(1);
	}

	20% {
		transform: rotate(-1.5deg) scale(1.01);
	}

	40% {
		transform: rotate(1.5deg) scale(1.015);
	}

	60% {
		transform: rotate(-1.25deg) scale(1.01);
	}

	80% {
		transform: rotate(0.75deg) scale(1.005);
	}
}

/* --------------------------------------------------
   RANDOM 45–60 SECOND REMINDER WIGGLE
   -------------------------------------------------- */

.song-fact-toggle.fact-wiggle {
	animation: fact-reminder-wiggle 0.8s ease-in-out;
}

@keyframes fact-reminder-wiggle {

	0%,
	100% {
		transform: rotate(0deg) scale(1);
	}

	20% {
		transform: rotate(-2deg) scale(1.02);
	}

	40% {
		transform: rotate(2deg) scale(1.02);
	}

	60% {
		transform: rotate(-2deg) scale(1.02);
	}

	80% {
		transform: rotate(1.5deg) scale(1.01);
	}
}

/* --------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.song-fact-toggle.fact-waiting,
	.song-fact-toggle.fact-first-pop,
	.song-fact-toggle.fact-entrance,
	.song-fact-toggle.fact-wiggle {
		animation: none;
	}
}

/* ==================================================
   IMAGE CALL TO ACTION

   Turns the CTA graphic into one large clickable
   call-to-action.

   The image scales responsively while receiving a
   seamless button-like grow on hover.

   Performance:
   - Animates transform only.
   - Uses GPU compositing support for smoother scaling.
   - Uses constant-speed linear movement.
   - Avoids filter animation on large images.
   ================================================== */

.cta-image {
	width: 100%;
	max-width: 800px;
	margin: 45px auto;
	text-align: center;
}

.cta-image a {
	display: block;
	width: 100%;
	text-decoration: none;
}

.cta-image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;

	transform: translateZ(0) scale(1);
	transform-origin: center;
	will-change: transform;

	transition: transform 0.20s linear;
}

/* --------------------------------------------------
   DESKTOP HOVER

   Begins one continuous, constant-speed grow as soon
   as the mouse enters the CTA.
   -------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

	.cta-image a:hover img {
		transform: translateZ(0) scale(1.025);
	}

}

/* --------------------------------------------------
   KEYBOARD ACCESSIBILITY
   -------------------------------------------------- */

.cta-image a:focus-visible {
	outline: 3px solid #55bbeb;
	outline-offset: 6px;
	border-radius: 4px;
}

/* --------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.cta-image img {
		transition: none;
	}

	.cta-image a:hover img {
		transform: translateZ(0) scale(1);
	}

}

/* ==================================================
   MOBILE JUMP NAV SPACING
   ================================================== */

@media (max-width: 992px) {

    .playlist-nav-jump {
        margin-bottom: 41px;
    }

}

/* ==================================================
   ART OF SOUND SPOTIFY PLAYLIST EXPERIENCE
   Inline playlist + desktop mini player
   ================================================== */

/* ==================================================
   SPOTIFY COLOR VARIABLES + MAIN WRAPPER
   ================================================== */

.aos-spotify {
  --spotify-black: #121212;
  --spotify-charcoal: #181818;
  --spotify-border: rgba(255,255,255,.10);
  --spotify-muted: #b3b3b3;
  --spotify-green: #1ed760;

  position: relative;
  width: 100%;
}

.aos-spotify-home {
  position: relative;
  min-height: 1px;
}

/* ==================================================
   SPOTIFY PLAYLIST FACADE
   Shown before the visitor intentionally loads Spotify
   ================================================== */

.spotify-playlist-facade {
  position: relative;

  display: block;

  width: 100%;
  padding: 0;

  overflow: hidden;

  border: 0;
  border-radius: 14px;

  background: var(--spotify-black);

  cursor: pointer;
}

.spotify-playlist-facade-image {
  display: block;

  width: 100%;
  height: auto;
}

/* ==================================================
   NORMAL INLINE SPOTIFY PLAYER SHELL
   ================================================== */

.aos-spotify-player-shell {
  position: relative;

  z-index: 1;

  width: 100%;

  overflow: hidden;

  border: 1px solid var(--spotify-border);
  border-radius: 14px;

  background: var(--spotify-black);

  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

/* ==================================================
   SPOTIFY TOOLBAR
   ================================================== */

.aos-spotify-toolbar {
  display: flex;

  min-height: 58px;

  padding: 10px 12px 10px 16px;

  align-items: center;
  justify-content: space-between;
  gap: 16px;

  border-bottom: 1px solid var(--spotify-border);

  background: linear-gradient(
    180deg,
    #242424 0%,
    #181818 100%
  );

  color: #fff;
}

.aos-spotify-toolbar-copy {
  display: flex;

  min-width: 0;

  flex-direction: column;
  gap: 2px;
}

.aos-spotify-toolbar-copy strong {
  overflow: hidden;

  color: #fff;

  font-size: 15px;
  font-weight: 800;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.aos-spotify-eyebrow {
  color: var(--spotify-muted);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .11em;
}

/* ==================================================
   EXPANDED PLAYER CONTROLS
   Expanded mode has been intentionally retired.
   Existing HTML controls remain hidden until cleanup.
   ================================================== */

#aos-spotify-expand,
#aos-spotify-close-float,
#aos-spotify-mini-expand,
#aos-spotify-backdrop {
  display: none !important;
}

/* ==================================================
   INLINE SPOTIFY HEIGHT
   Starting target: approximately six visible songs
   ================================================== */

#aos-spotify-embed {
  width: 100%;
  height: 515px !important;

  overflow: hidden;

  background: var(--spotify-black);
}

#aos-spotify-embed iframe {
  display: block;

  width: 100% !important;
  height: 515px !important;

  border: 0;
}

/* ==================================================
   DESKTOP MINI PLAYER
   ================================================== */

.aos-spotify-mini {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 1040;

  width: min(420px, calc(100vw - 48px));
  min-height: 92px;

  padding: 12px 12px 12px 16px;

  align-items: center;
  justify-content: space-between;
  gap: 14px;

  border: 1px solid var(--spotify-border);
  border-radius: 14px;

  background: linear-gradient(
    180deg,
    #242424 0%,
    #181818 100%
  );

  color: #fff;

  box-shadow: 0 24px 70px rgba(0,0,0,.42);

transform: translateX(calc(100% + 40px));

opacity: 0;

transition:
  transform .3s ease,
  opacity .3s ease;
}

.aos-spotify.is-floating .aos-spotify-mini {
  display: flex;

  transform: translateX(0);

  opacity: 1;
}

/* ==================================================
   MINI PLAYER ARTWORK
   ================================================== */

.aos-spotify-mini-artwork-wrap {
  width: 56px;
  height: 56px;

  flex: 0 0 56px;

  overflow: hidden;

  border-radius: 8px;

  background: #282828;
}

.aos-spotify-mini-artwork {
  display: block;

  width: 56px;
  height: 56px;

  object-fit: cover;
}

/* ==================================================
   MINI PLAYER SONG INFORMATION
   ================================================== */

.aos-spotify-mini-copy {
  display: flex;

  min-width: 0;

  flex: 1 1 auto;
  flex-direction: column;

  gap: 3px;
}

.aos-spotify-mini-copy strong {
  display: block;

  overflow: hidden;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.aos-spotify-mini-status {
  color: var(--spotify-green);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .11em;
}

.aos-spotify-mini-subtitle {
  display: block;

  overflow: hidden;

  color: var(--spotify-muted);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==================================================
   MINI PLAYER PROGRESS BAR
   ================================================== */

.aos-spotify-mini-progress-row {
  display: flex;

  width: 100%;

  margin-top: 5px;

  align-items: center;
  gap: 6px;
}

.aos-spotify-mini-time {
  flex: 0 0 auto;

  color: var(--spotify-muted);

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.aos-spotify-mini-progress-track {
  position: relative;

  display: block;

  height: 3px;

  flex: 1 1 auto;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(255,255,255,.18);
}

.aos-spotify-mini-progress {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 0;

  border-radius: inherit;

  background: var(--spotify-green);
}

/* ==================================================
   MINI PLAYER ACTION BUTTONS
   ================================================== */

.aos-spotify-mini-actions {
  display: flex;

  flex: 0 0 auto;

  align-items: center;
  gap: 7px;
}

.aos-spotify-mini-button {
  display: inline-grid;

  width: 38px;
  height: 38px;

  padding: 0;

  place-items: center;

  border: 1px solid var(--spotify-border);
  border-radius: 50%;

  background: #2b2b2b;

  color: #fff;

  font-size: 16px;

  cursor: pointer;
}

.aos-spotify-mini-close {
  font-size: 24px;
}

/* ==================================================
   MINI PLAYER TUCKED STATE
   ================================================== */

.aos-spotify.is-floating.is-tucked .aos-spotify-mini {
  transform: translateX(calc(100% + 40px));

  opacity: 0;

  pointer-events: none;
}

/* ==================================================
   MINI PLAYER RESTORE HANDLE
   ================================================== */

.aos-spotify-tuck-handle {
  position: fixed;

  right: 0;
  bottom: 38px;

  z-index: 1041;

  display: inline-flex;

  width: 34px;
  height: 48px;

  padding: 0;

  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 4px;

  border: 1px solid var(--spotify-border);
  border-right: 0;
  border-radius: 10px 0 0 10px;

  background: var(--spotify-charcoal);

  cursor: pointer;

  box-shadow: 0 12px 32px rgba(0,0,0,.30);
}

.aos-spotify-tuck-handle span {
  display: block;

  width: 14px;
  height: 2px;

  border-radius: 999px;

  background: #fff;
}

/* ==================================================
   MOBILE MINI PLAYER
   Floating mini-player remains desktop-only
   ================================================== */

@media (max-width: 767.98px) {

  .aos-spotify-mini,
  .aos-spotify-tuck-handle {
    display: none !important;
  }

}

/* =========================================================
   BOOKED CLIENT — PLANNING PORTAL REMINDER
   ========================================================= */

.planning-portal-reminder a {
    display: inline-block;
    color: #1687e8;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.planning-portal-reminder a:hover,
.planning-portal-reminder a:focus {
    color: #1687e8;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .planning-portal-reminder a:hover {
        transform: scale(1.015);
    }
}