/*

TemplateMo 568 DigiMedia

https://templatemo.com/tm-568-digimedia

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles

05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* NEW start */

/* NEW end */

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  font-weight: 300;
  color: #afafaf;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: "Poppins", sans-serif;
}

::selection {
  background: #fa65b1;
  color: #fff !important;
}

::-moz-selection {
  background: #fa65b1;
  color: #fff !important;
}

@media (max-width: 991px) {
  html,
  body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
}

.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #726ae3;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.section-heading h4 {
  color: #2a2a2a;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 25px;
}

.section-heading h4 em {
  font-style: normal;
  color: #726ae3;
}

.section-heading .line-dec {
  width: 50px;
  height: 2px;
  background-color: #726ae3;
}

.border-first-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #fa65b1 !important;
  border: 1px solid #fa65b1 !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.5s;
}

.border-first-button a:hover {
  background-color: #fa65b1;
  color: #fff !important;
}

/* 
---------------------------------------------
intro
--------------------------------------------- 
*/

.intro-banner {
  text-align: center;
  padding-top: 200px;
  margin-bottom: 100px;
  position: relative;
}

.intro-banner:after {
  content: "";
  background-image: url(../images/slider-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 262px;
  height: 625px;
  z-index: 1;
}
/*
.intro-banner:before {
  content: '';
  background-image: url(../images/slider-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0px;
  width: 1159px;
  height: 797px;
  z-index: 2;
}
*/

.intro-banner img {
  max-width: 152px;
  margin-bottom: 30px;
}

.intro-banner h1 {
  font-size: 36px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}

.intro-banner h4 {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 400;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.intro-banner a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #fa65b1 !important;
  border: 1px solid #fa65b1 !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.5s;
  position: relative;
  z-index: 2;
}

.intro-banner a:hover {
  background-color: #fa65b1;
  color: #fff !important;
}

.demos {
  padding-top: 60px;
}

.demo-item {
  position: relative;
  z-index: 2;
}

.demos img {
  transition: all 0.5s;
  border-radius: 23px;
}

.demos img:hover {
  opacity: 1;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
}

.demos h4 {
  text-align: center;
  font-size: 20px;
  margin-top: 30px;
  font-weight: 700;
  text-transform: uppercase;
}

/* 


/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: #fff;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #fa65b1;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #fa65b1;
  border-radius: 50%;
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 226px 0px 120px 0px;
  position: relative;
  overflow: hidden;
  z-index: 0; /* Key fix */
}

/* Left background */
.main-banner::after {
  content: "";
  background-image: url(../images/slider-left-dec.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 60px;
  width: 262px;
  height: 625px;
  z-index: -1;
}

/* Right background */
.main-banner::before {
  content: "";
  background-image: url(../images/slider-right-dec.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 60px;
  width: 1159px;
  height: 797px;
  z-index: -1;
}

/* Ensure main content is layered above */
.main-banner > .container {
  position: relative;
  z-index: 1;
}

/* NEW start */
.scroll-arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  color: #a259ff;
  border-radius: 50%;
  text-decoration: none;
  animation: bounce 2s infinite;
  transition: all 0.3s ease;
  margin-top: 30px;
  cursor: pointer;
}

.scroll-arrow:hover {
  background-color: #a259ff;
  color: white;
}

/* Smooth expand effect */
.expand-hover {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}

.expand-hover:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.hero-button.expand-hover:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  transform: scale(1.04);
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(6px);
  }
  60% {
    transform: translateY(3px);
  }
}
/* NEW end */
/* 3 progress bar circles */

.progress-value div {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal; /* allow line breaks */
  text-align: center;
  padding: 0 5px;
}

.skill-item .progress {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
}

/* Pink - Kpop */
.kpop-circle .progress-left .progress-bar,
.kpop-circle .progress-right .progress-bar {
  border-color: #ff3ea5;
}

/* Purple - Bubblegum */
.bubblegum-circle .progress-left .progress-bar,
.bubblegum-circle .progress-right .progress-bar {
  border-color: #a259ff;
}

/* Orange - Dance/Electro */
.dance-circle .progress-left .progress-bar,
.dance-circle .progress-right .progress-bar {
  border-color: #ffa14a;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .skill-item .progress {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
  }

  .progress-value div {
    font-size: 13px;
  }

  .hero-button {
    margin-top: 20px;
  }
}

/* HERO — layout + type */
.main-banner {
  min-height: 100vh;
  padding: 40px 0;
  position: relative;
}
.hero-eyebrow {
  letter-spacing: 1.5px;
  color: #ff3ea5;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hero-title {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.14;
  margin: 0 0 16px;
}
.hero-title .g1 {
  background: linear-gradient(90deg, #ff3ea5, #a259ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title .g2 {
  background: linear-gradient(90deg, #ffd86b, #ff3ea5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: 1.02rem;
  max-width: 480px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, #ff3ea5, #a259ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Genre circles (kept your existing structure, just spacing + safety) */
.genre-row {
  display: flex;
  gap: 22px;
  justify-content: center;
  margin-bottom: 20px;
}
.skill-item .progress {
  transform: scale(0.92);
}
.progress-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

/* CTA buttons */
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 26px;
}
.btn-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.25s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, #ff3ea5, #a259ff);
  box-shadow: 0 12px 30px rgba(162, 89, 255, 0.28);
}
.btn-primary::before {
  /* subtle glassy sweep on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transition: 0.25s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(162, 89, 255, 0.34);
}
.btn-primary:hover::before {
  opacity: 1;
}

.btn-ghost {
  color: #ff3ea5;
  border: 2px solid #ff3ea5;
  background: transparent;
}
.btn-ghost:hover {
  background: rgba(255, 62, 165, 0.08);
  transform: translateY(-2px);
  color: #ff3ea5;
}

/* Scroll pill */
.scroll-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff3ea5, #a259ff);
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* Mobile refinements */
@media (max-width: 575.98px) {
  .hero-title {
    font-size: 2.4rem;
    line-height: 1.12;
  }
  .genre-row {
    gap: 14px;
    margin-bottom: 18px;
  }
  .skill-item {
    min-width: 132px;
  } /* keeps labels off the rim */
  .skill-item .progress {
    transform: scale(0.88);
  }
  .btn-pill {
    width: 100%;
    text-align: center;
  }
  .hero-ctas {
    flex-direction: column;
    gap: 10px;
  }
  .container {
    padding-left: 20px;
    padding-right: 20px;
  } /* extra breathing room */
}

/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/

#about {
  padding-top: 130px;
}

.about-left-image img {
  margin-right: 45px;
}

.about-right-content p {
  margin-top: 30px;
  margin-bottom: 45px;
}

/* ===================== ABOUT (Portrait Video) ===================== */
.about {
  padding: clamp(48px, 6vw, 96px) 24px;
}
.about__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

/* stack on mobile, side-by-side on lg */
@media (min-width: 992px) {
  .about__inner {
    grid-template-columns: 420px 1fr; /* portrait card + copy */
  }
}

/* Eyebrow */
.about .eyebrow {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a259ff; /* violet */
  margin: 0 0 10px;
}

/* Title */
.about__title {
  font-weight: 900;
  line-height: 1.1;
  color: #1b1b1f; /* ink */
  font-size: clamp(28px, 3.2vw, 44px);
  margin: 0 0 14px;
}
.about__title span {
  color: #a259ff; /* violet */
}

/* Body copy (kept narrow so it never feels too long) */
.about__text {
  color: #6b6b75; /* muted */
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  max-width: 62ch;
  margin: 0;
}

/* ==== Portrait "phone" card ==== */
.about__media {
  display: grid;
  place-items: center;
}

.phone-card {
  background: #ffffff; /* card */
  padding: 14px;
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(162, 89, 255, 0.18); /* soft violet shadow */
  border: 1px solid rgba(162, 89, 255, 0.14);
  width: min(100%, 420px);
}
.phone-card__screen {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 9/16; /* portrait */
  background: #f4f4f6;
  position: relative;
}

/* Make either <video> or <iframe> fill the screen area */
.phone-card__screen > video,
.phone-card__screen > iframe {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
}

/* Small spacing tweaks when stacked */
@media (max-width: 991px) {
  .about__media {
    order: -1;
  } /* video first on mobile */
  .about__title {
    text-wrap: balance;
  }

  .about__title,
  .about__copy,
  .about__text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .about__title h2,
  .about__title p,
  .about__text p {
    text-align: center;
  }
}

.about-divider {
  height: 2px;
  width: 60px;
  margin: 1.5rem 0;
  background: linear-gradient(90deg, #ff6ec7, #9c6eff);
  border-radius: 2px;
}

.about-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  text-wrap: balance;
}

.about-highlights li {
  margin: 0.6rem 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}

.about-highlights li strong {
  color: #7b2ff7; /* your purple brand colour */
  font-weight: 600;
}

.about-cta-note {
  margin-top: 1.5rem;
  font-style: italic;
  font-size: 0.95rem;
  color: #6a4fc9; /* softer purple so it doesn’t compete with headings */
  text-align: left;
}

@media (max-width: 768px) {
  .about-cta-note {
    text-align: center;
  }
}


/* STUDIO CREDIT */
/* Overlay studio badge */
.studio-credit-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(17, 24, 39, 0.65); /* dark backdrop */
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none; /* won’t block video controls */
}

.studio-credit-badge a {
  color: #a5b4fc; /* soft violet-blue */
  font-weight: 600;
  text-decoration: none;
  pointer-events: auto; /* make the link clickable */
}

.studio-credit-badge a:hover {
  text-decoration: underline;
}

/* Footer studio credit */
.studio-credit a img{
  display:inline-block !important;
  width:auto !important;
  max-width:none !important;
  height:46px;              /* ← was 18px, increase to 24–28px for visibility */
  margin-left:1px;
  vertical-align:middle;    /* keeps logo aligned with the text baseline */
  opacity:.9;
  filter:grayscale(100%);
  transition:opacity .2s ease;
}

.studio-credit a:hover img{
  opacity:1;
}


/* Skills */
.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

.skill-item {
  text-align: center;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.first-skill-item .progress .progress-bar {
  border-color: #fa65b1;
}

.second-skill-item .progress .progress-bar {
  border-color: #726ae3;
}

.third-skill-item .progress .progress-bar {
  border-color: #f58b56;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 25px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress .progress-value div {
  margin-top: 10px;
}
.progress .progress-value span {
  font-size: 18px;
  text-transform: none;
  color: #afafaf;
  font-weight: 300;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}
.progress {
  margin-bottom: 1em;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services {
  padding-top: 130px;
  position: relative;
}

.services:after {
  content: "";
  background-image: url(../images/services-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 786px;
  height: 1217px;
  z-index: 0;
}

.services:before {
  content: "";
  background-image: url(../images/services-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 400px;
  width: 161px;
  height: 413px;
  z-index: 0;
}

.services .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.services .section-heading .line-dec {
  margin: 0 auto;
}

.services .naccs {
  position: relative;
  z-index: 1;
}

.services .icon {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.services .naccs .menu div h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
}

.services .icon img {
  margin-bottom: 10px;
  max-width: 60px;
  min-width: 60px;
}

.services .naccs .menu {
  text-align: center;
  margin-bottom: 30px;
}

.services .naccs .menu div {
  color: #2a2a2a;
  margin: 0px;
  width: 15%;
  font-size: 20px;
  font-weight: 700;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 15px;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services .naccs .menu div .thumb {
  display: inline-block;
  width: 100%;
  padding: 30px 0px;
  background-color: #fff;
}

.services .naccs .menu div.active {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.services ul.nacc {
  height: 100% !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 15px;
  padding: 80px 120px 50px 120px;
}

.services ul.nacc li {
  width: 100%;
}

.services ul.nacc li .right-image img {
  max-width: 420px;
  float: right;
}

.services .nacc .thumb h4 {
  color: #2a2a2a;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 25px;
}

.services .nacc .thumb .main-white-button {
  text-align: right;
  margin-top: 40px;
}

.services .nacc .thumb .main-white-button a {
  background-color: #8d99af;
  color: #fff;
}

.services .nacc .thumb .main-white-button a i {
  background-color: #fff;
  color: #8d99af;
}

.services .left-text h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fa65b1 !important;
}

.services .left-text p {
  margin-bottom: 30px;
}

.nacc .ticks-list span {
  display: inline-block;
  opacity: 1;
  margin-right: 45px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 400;
}

/* NEW services detail cards (start) */
/* header */
.psl-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.psl-title {
  margin: 0;
  font-weight: 900;
}
.psl-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ff3ea5;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 10px 24px rgba(255, 62, 165, 0.18);
}
.psl-sub {
  margin: 10px 0 14px;
}

/* features */
.psl-features {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0 6px;
}
@media (max-width: 991px) {
  .psl-features {
    grid-template-columns: 1fr;
  }
}

.psl-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px 14px;
  border: 1.5px solid rgba(162, 89, 255, 0.16);
  box-shadow: 0 12px 28px rgba(162, 89, 255, 0.1);
}
.psl-card h6 {
  margin: 8px 0 6px;
  font-weight: 900;
}
.psl-card p {
  margin: 0;
}

/* colored square icons */
.psl-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.psl-icon.mic {
  background: linear-gradient(135deg, #a259ff, #6f3cff);
}
.psl-icon.keys {
  background: linear-gradient(135deg, #ffb700, #ff7a00);
}
.psl-icon.meters {
  background: linear-gradient(135deg, #5aa6ff, #3c7dff);
}
.psl-icon.vox {
  background: linear-gradient(135deg, #ff3ea5, #ff5f72);
}
.psl-icon.stacks {
  background: linear-gradient(135deg, #00c2a8, #09a777);
}
.psl-icon.stems {
  background: linear-gradient(135deg, #ff8ad1, #ff3ea5);
}

/* price cards */
.psl-prices {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}
.psl-price {
  flex: 1 1 240px;
  background: #fff;
  border: 2px solid #ff3ea5;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 16px 36px rgba(255, 62, 165, 0.12);
}
.psl-price .t {
  font-weight: 900;
}
.psl-price .£ {
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.1;
}
.psl-price .n {
  opacity: 0.75;
  margin-top: 4px;
  font-weight: 700;
}

/* NEW services detail cards (end) */
/* Badges / pills */
.price-pill{
  display:inline-block;
  margin-left:10px;
  padding:6px 10px;
  border:2px solid #f54ea2;
  border-radius:999px;
  font-size:.9rem;
  font-weight:700;
  color:#f54ea2;
  vertical-align:middle;
}
.badge-popular{
  display:inline-block;
  margin-left:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  color:#6f3cff;
  background:rgba(162,89,255,.12);
  vertical-align:middle;
}
.badge-fastest{
  display:inline-block;
  margin-left:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  color:#0b8b3c;
  background:rgba(11,139,60,.12);
  vertical-align:middle;
}

/* Song service cta buttons */
/* ===== Song service CTAs ===== */
.service-ctas{
  display:flex;
  justify-content:center;          /* <-- center horizontally */
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:22px;
}

.service-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:52px;                     /* larger than pills */
  padding:0 26px;
  border-radius:999px;
  font-weight:800;                  /* bolder than pills */
  font-size:16px;
  text-decoration:none;
  letter-spacing:.2px;
  transition:transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
  position:relative;
}

.service-btn::after{               /* subtle arrow so these read as actions */
  content:"→";
  margin-left:10px;
  font-weight:800;
  transform:translateX(0);
  transition:transform .15s ease;
}

.service-btn:hover::after{ transform:translateX(2px); }

.service-btn-primary{
  color:#fff;
  border:0;
  background:linear-gradient(135deg,#ff3ea5,#a259ff);
  box-shadow:0 14px 36px rgba(162,89,255,.28);
}

.service-btn-primary:hover{
  box-shadow:0 18px 44px rgba(162,89,255,.36);
  transform:translateY(-1px);
}

.service-btn-ghost{
  color:#7b3dff;                   /* a touch deeper than your pills */
  border:2px solid #a259ff;
  background:#ffffff;              /* solid white so it doesn’t look like a pill */
  box-shadow:0 8px 22px rgba(162,89,255,.12);
}

.service-btn-ghost:hover{
  background:rgba(162,89,255,.06);
  transform:translateY(-1px);
}

/* Optional: make the whole row align left on very small screens */
@media (max-width:480px){
  .service-ctas{ justify-content:flex-start; }
}


/* MUSIC PLAYER start */
/* ====== GRID ====== */
.demo-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 991px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
}

/* ====== CARD ====== */
.demo-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 18px;
  border: 1.5px solid rgba(162, 89, 255, 0.16);
  box-shadow: 0 12px 28px rgba(162, 89, 255, 0.1);
  position: relative;
  overflow: visible;
}
.demo-top {
  margin-bottom: 10px;
}
.demo-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.2px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #a259ff;
  background: rgba(162, 89, 255, 0.12);
  border: 1px solid rgba(162, 89, 255, 0.18);
}
.demo-title {
  margin: 8px 0 4px;
  font-weight: 900;
}
.demo-desc {
  margin: 0;
  color: #555;
}

/* ====== TOGGLE (with gliding slider) ====== */
.variant-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 6px;
  border-radius: 999px;
  background: rgba(162, 89, 255, 0.1);
  border: 1px solid rgba(162, 89, 255, 0.18);
  margin: 8px 0 12px;
  user-select: none;
  isolation: isolate;
  z-index: 10;
  pointer-events: auto;
}
.variant-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #6f3cff;
  cursor: pointer;
  position: relative;
  z-index: 11;
  pointer-events: auto;
}
.variant-btn.active {
  color: #a259ff;
}
.variant-slider {
  position: absolute;
  z-index: 1;
  inset: 6px;
  width: calc(50% - 6px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(162, 89, 255, 0.2);
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ====== PLAYER ====== */
.player {
  display: flex;
  align-items: center;
  gap: 12px;
}
.play-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ff3ea5, #a259ff);
  box-shadow: 0 10px 24px rgba(162, 89, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.play-btn.paused {
  background: linear-gradient(135deg, #a259ff, #6f3cff);
}

.progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Neutral progress track + solid fill */
.progress {
  position: relative;
  height: 8px;
  border-radius: 999px;
  flex: 1;
  background: #e8e8e8;
  border: 1px solid #d5d5d5;
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #a259ff;
}
.time {
  font-weight: 700;
  color: #555;
  font-size: 0.9rem;
}
.time .sep {
  opacity: 0.6;
  margin: 0 4px;
}

/* make sure the first card's toggle is on top and clickable */
.song-card {
  position: relative;
  overflow: visible;
}

.variant-toggle {
  position: relative;
  z-index: 10; /* lift above any overlays */
  pointer-events: auto; /* ensure clicks land */
}

.variant-btn {
  position: relative;
  z-index: 11; /* above the slider */
  pointer-events: auto;
}

/* MUSIC PLAYER end */

/* MUSIC PLAYER NEW BELOW */
/* GRID */
.demo-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 991px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
}

/* CARD */
.demo-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 18px;
  border: 1.5px solid rgba(162, 89, 255, 0.16);
  box-shadow: 0 12px 28px rgba(162, 89, 255, 0.1);
  position: relative;
}
.demo-top {
  margin-bottom: 10px;
}
.demo-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.2px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #a259ff;
  background: rgba(162, 89, 255, 0.12);
  border: 1px solid rgba(162, 89, 255, 0.18);
}
.demo-title {
  margin: 8px 0 4px;
  font-weight: 900;
}
.demo-desc {
  margin: 0;
  color: #555;
}

/* TOGGLE with GLIDE */
.variant-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 6px;
  border-radius: 999px;
  background: rgba(162, 89, 255, 0.1);
  border: 1px solid rgba(162, 89, 255, 0.18);
  margin: 8px 0 12px;
  user-select: none;
  isolation: isolate; /* keeps slider under buttons */
}
.variant-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #6f3cff;
  cursor: pointer;
  position: relative;
  z-index: 2; /* above slider */
}
.variant-btn.active {
  color: #a259ff;
}

.variant-slider {
  position: absolute;
  z-index: 1;
  inset: 6px;
  width: calc(50% - 6px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(162, 89, 255, 0.2);
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* PLAYER */
.player {
  display: flex;
  align-items: center;
  gap: 12px;
}
.play-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ff3ea5, #a259ff);
  box-shadow: 0 10px 24px rgba(162, 89, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.play-btn.paused {
  background: linear-gradient(135deg, #a259ff, #6f3cff);
}

.progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.progress {
  position: relative;
  height: 8px;
  border-radius: 999px;
  flex: 1;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.progress,
.progress-wrap {
  pointer-events: auto;
} /* make sure it's clickable */
.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #ff3ea5, #a259ff);
}
.time {
  font-weight: 700;
  color: #555;
  font-size: 0.9rem;
}
.time .sep {
  opacity: 0.6;
  margin: 0 4px;
}

.copyright {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(0,0,0,0.45);
  margin-top: 1.5rem;
}

/* FAN REACTIONS TEST */
/* Wrapper */
.quotes{
  position: relative;
  margin-top: 14px;
  padding: 16px 18px;
  background:#fff;
  border:1.5px solid rgba(162,89,255,.16);
  border-radius:22px;
  box-shadow:0 28px 60px rgba(162,89,255,.10);
  display:grid; grid-template-columns: 1fr; align-items:center;
}

/* Slides */
.quote{ display:none; margin:0; }
.quote.current{ display:block; }

/* Text quote style */
.quote blockquote{
  font-size: clamp(1.05rem, 1.2vw + .8rem, 1.4rem);
  font-weight: 800; color:#1f1f22; margin:0 0 8px;
}
.quote figcaption{ color:#6b6b76; font-weight:600; }

/* Screenshot style */
.shot-wrap{
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(162,89,255,.16);
  box-shadow:0 14px 32px rgba(162,89,255,.12);
  background:#f9f7ff;
}
.shot-wrap img{
  display:block; width:100%; height:auto;
  /* keep screenshots tidy even if tall */
  max-height: 460px; object-fit: cover;
}

/* Arrows */
.q-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1.5px solid rgba(162,89,255,.28);
  background:#fff; color:#6f3cff; font-weight:900; font-size:22px;
  display:grid; place-items:center; cursor:pointer;
  transition:box-shadow .2s ease, transform .15s ease, border-color .2s ease;
}
.q-left{ left:10px; } .q-right{ right:10px; }
.q-nav:hover{ box-shadow:0 12px 26px rgba(162,89,255,.18); transform:translateY(-50%) scale(1.03); border-color:rgba(162,89,255,.45); }

/* Minor section bits */
.section-subtitle{
  display:block; font-size:.9rem; letter-spacing:.16em; text-transform:uppercase;
  color:#a259ff; font-weight:800; margin-bottom:8px;
}
.highlight{ background:linear-gradient(90deg,#a259ff,#ff3ea5); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.disclaimer{ margin-top:10px; color:#8a8aa1; font-size:.95rem; }

/* Responsive tightening */
@media (max-width: 640px){
  .quotes{ padding:14px 14px; }
  .q-nav{ width:40px; height:40px; font-size:20px; }
  .shot-wrap img{ max-height: 62vw; }
}

/* INLINE CTA */
.cta-inline {
  text-align: center;
  margin: 2rem 0;
}

.cta-ghost {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: 2px solid #a855f7; /* Purple border */
  border-radius: 999px; /* pill shape */
  color: #a855f7;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.cta-ghost:hover {
  background: #a855f7;
  color: white;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

/* Quick Sessions blurb */
.quick-blurb {
  max-width: 640px;
  margin: 0 auto 28px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1.5px solid rgba(162, 89, 255, 0.22);
  background: rgba(162, 89, 255, 0.06);
  box-shadow: 0 8px 22px rgba(162, 89, 255, 0.1);
  text-align: center;
}

.quick-blurb p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #333;
}

.quick-blurb strong {
  color: #a259ff;
  font-weight: 800;
}

.quick-blurb em {
  font-style: normal;
  font-weight: 600;
  color: #6f3cff;
}

.quick-blurb a {
  color: #a259ff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(162, 89, 255, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.quick-blurb a:hover {
  color: #6f3cff;
  border-color: #6f3cff;
}



/* 
---------------------------------------------
Free Quote / Repeatable CTA
--------------------------------------------- 
*/

/* ================= Free Quote / CTA (clean glass card) ================= */

.free-quote{
  /* remove purple bg; keep section airy but compact */
  background:#fff;
  padding: 80px 0;
  text-align:center;
  position:relative;
  z-index:2;
  margin-top: 110px; /* same placement as before, a tad tighter */
}

/* Glass card with gentle shadow + inner glow edge */
.free-quote .cta-card.pro{
  max-width: 920px;
  margin: 0 auto;
  padding: 34px 36px 30px;
  border-radius: 22px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 20px 46px rgba(20, 3, 46, .08),
    0 2px 0 rgba(255,255,255,.65) inset;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

/* small eyebrow for hierarchy */
.free-quote .cta-eyebrow{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  color: #8a8a98;
}

/* Headline with gradient emphasis on key words */
.free-quote .cta-title{
  margin: 0 0 14px;
  line-height: 1.12;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  color: #242424;
}
.free-quote .cta-title span{
  background: linear-gradient(90deg,#ff3ea5 0%, #a259ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Primary button (gradient ring + soft glow) */
.free-quote .cta-primary{
  display:inline-block;
  margin-top: 4px;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  color: #6f3cff;
  background: #fff;
  border: 2px solid transparent;
  box-shadow:
    0 8px 24px rgba(162, 89, 255, .18),
    0 0 0 2px rgba(162, 89, 255, .14);
  position: relative;
}
.free-quote .cta-primary::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  background: linear-gradient(90deg,#ff3ea5,#a259ff);
  z-index:-1;
  filter: blur(10px);
  opacity:.25;
}
.free-quote .cta-primary:hover{
  color:#fff;
  background: linear-gradient(90deg,#ff3ea5,#a259ff);
  box-shadow:
    0 10px 26px rgba(162, 89, 255, .28),
    0 0 0 0 transparent;
  transform: translateY(-1px);
}

/* Thin gradient accent bar */
.free-quote .cta-divider{
  display:block;
  width: 84px; height: 4px; border-radius: 4px;
  margin: 16px auto 12px;
  background: linear-gradient(90deg,#ff3ea5,#a259ff);
  opacity:.9;
}

/* Blurb copy */
.free-quote .cta-blurb{
  max-width: 760px;
  margin: 0 auto;
  color: #4a4a55;
  font-size: 1.03rem;
  line-height: 1.65;
}

/* Chips: pill links that feel tappable */
.free-quote .cta-chip{
  display:inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
  color:#6f3cff;
  text-decoration:none;
  border: 1.5px solid rgba(162,89,255,.38);
  background: rgba(162,89,255,.06);
  box-shadow: 0 4px 12px rgba(162,89,255,.10);
  transition: all .2s ease;
}
.free-quote .cta-chip:hover{
  background:#6f3cff; color:#fff; border-color:#6f3cff;
}

/* spacing tweaks on small screens */
@media (max-width: 768px){
  .free-quote{ padding: 64px 0; }
  .free-quote .cta-card.pro{ padding: 26px 18px 22px; }
  .free-quote .cta-title{ font-size: clamp(26px, 6.5vw, 36px); }
  .free-quote .cta-blurb{ font-size: 1rem; }
}

/* ===== Background variants for the CTA section ===== */
.free-quote--shelf {
  background: radial-gradient(1200px 400px at 50% 80%, rgba(162,89,255,.08), transparent 60%),
              radial-gradient(900px 300px at 20% 40%, rgba(255,62,165,.06), transparent 60%),
              #fff;
}

.free-quote--hero {
  background:
    radial-gradient(400px 200px at 20% 30%, rgba(162,89,255,.10), transparent 60%),
    radial-gradient(520px 240px at 80% 70%, rgba(255,62,165,.08), transparent 60%),
    #fff;
}

.free-quote--shelf .cta-card,
.free-quote--hero  .cta-card {
  /* slightly lighter shadow so it floats above the bg */
  box-shadow: 0 20px 50px rgba(162,89,255,.12), 0 8px 18px rgba(0,0,0,.06);
}

/* ====== Stylised Divider ====== */
.section-divider {
  border: 0;
  height: 2px;
  width: 60%;
  margin: 80px auto 60px; /* space above and below */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,62,165,0.85), /* pink with soft transparency */
    rgba(162,89,255,0.85), /* purple with soft transparency */
    transparent
  );
  border-radius: 2px;
}



/* ====== REELS SECTION (horizontal) ====== */
/* --- REELS STRIP CONTAINER (rounded background) --- */
.reels-wrap {
  position: relative;
  padding: 18px 52px; /* room for arrows */
  margin: 8px 0 24px;
  background: linear-gradient(
    180deg,
    rgba(162, 89, 255, 0.08),
    rgba(162, 89, 255, 0.14)
  );
  border: 1px solid rgba(162, 89, 255, 0.18);
  border-radius: 28px; /* <= rounded all around */
  overflow: hidden; /* ensures the bottom-right is rounded */
  box-shadow: 0 20px 40px rgba(162, 89, 255, 0.1);
}

/* keep your existing reel scroller — just enhance it */
.reels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 0 12px;
}
.reels::-webkit-scrollbar {
  display: none;
}
.reels {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* reel cards (9:16) */
.reel-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.reel-media {
  width: 100%;
  aspect-ratio: 9 / 16; /* perfect Reel size */
  object-fit: cover;
  display: block;
  background: #f2f2f2;
}
.reel-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e9d8ff;
  color: #7c3aed;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #d8c7ff;
}
.reel-title {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #222;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.1);
}
.reel-link {
  position: absolute;
  inset: 0;
}

/* arrows */
.reel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  font-size: 24px;
  font-weight: 900;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reel-nav.left {
  left: 10px;
}
.reel-nav.right {
  right: 10px;
}
.reel-nav:hover {
  transform: translateY(-50%) scale(1.04);
}

/* FEATURED REELS */
/* ===== Featured Reels Shelf ===== */

.reels-shelf {
  position: relative;
  padding: 20px 56px; /* space for arrows */
  margin-top: 8px;
}

.reels-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(162, 89, 255, 0.1),
    rgba(255, 62, 165, 0.08)
  );
  border-radius: 24px; /* <- rounded ALL corners */
  box-shadow: 0 18px 40px rgba(162, 89, 255, 0.18);
  pointer-events: none;
}

/* track */
.reels-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px; /* card width */
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px 4px 10px;
  scrollbar-width: none;
}
.reels-track::-webkit-scrollbar {
  display: none;
}

/* card (same language as studio grid) */
.reel-card {
  position: relative;
  height: 462px; /* 9:16 against 260px width */
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(162, 89, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.reel-card .media-wrap {
  position: relative;
  width: 100%;
  height: 78%; /* tall preview */
  background: #eee;
  overflow: hidden;
}
.reel-card .media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.reel-card:hover .media {
  transform: scale(1.03);
}

.reel-card .labels {
  padding: 10px 12px 12px;
}
.reel-card .badge {
  display: inline-block;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.2px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #a259ff;
  background: rgba(162, 89, 255, 0.12);
  border: 1px solid rgba(162, 89, 255, 0.18);
}
.reel-card .title {
  margin: 8px 0 0;
  font-weight: 900;
  font-size: 1.02rem;
}

/* clickable overlay */
.reel-card .cover-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* arrows */
.reel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 0;
  background: #fff;
  color: #6f3cff;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(162, 89, 255, 0.25);
  cursor: pointer;
  z-index: 3;
}
.reel-nav.left {
  left: 10px;
}
.reel-nav.right {
  right: 10px;
}
.reel-nav:hover {
  transform: translateY(-50%) scale(1.05);
}

.reels-track {
  justify-content: center; /* center the two reels */
}

.ext-link {
  font-size: 12px;
  color: grey
}

/* Center "In the Studio / Featured Reels" */
.reels-heading {
  text-align: center;
}

.reels-heading h6 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: #6f3cff;
  margin-bottom: 6px;
}

.reels-heading h4 {
  font-weight: 900;
  margin-bottom: 8px;
}

.reels-heading .line-dec {
  margin: 0 auto;
}

/* hover-to-preview cue (optional): start playing on hover via JS; no icon needed */

/* GALLERY */
/* Uniform gallery grid */
.studio-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .studio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .studio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .studio-grid {
    grid-template-columns: 1fr;
  }
}

.studio-card {
  background: #fff;
  border: 1px solid rgba(162, 89, 255, 0.16);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(162, 89, 255, 0.1);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.studio-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(162, 89, 255, 0.16);
}

/* Fix all tiles to the same visual size */
.media-wrap {
  aspect-ratio: 4 / 5; /* change to 1/1 or 16/9 if you prefer */
  width: 100%;
  overflow: hidden;
}
.media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #f4f4f6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.studio-card figcaption {
  padding: 12px 14px 14px;
}
.studio-card h5 {
  margin: 6px 0 2px;
  font-weight: 800;
}
.studio-card p {
  margin: 0;
  color: #555;
}

/* Badges */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid;
}
.badge.latest {
  color: #a259ff;
  background: rgba(162, 89, 255, 0.12);
  border-color: rgba(162, 89, 255, 0.24);
}
.badge.archive {
  color: #ff3ea5;
  background: rgba(255, 62, 165, 0.12);
  border-color: rgba(255, 62, 165, 0.24);
}

/* responsive tweak */
@media (max-width: 991px) {
  .reels-wrap {
    padding: 14px 46px;
  }
  .reels {
    grid-auto-columns: 64vw;
  }
  .masonry {
    columns: 1;
  }
  .masonry-media {
    height: 240px;
  }
}

/* ====== All videos (vertical) ====== */
.video-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.video-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid rgba(162, 89, 255, 0.16);
  box-shadow: 0 12px 28px rgba(162, 89, 255, 0.1);
}
.video-item .thumb {
  width: 96px;
  height: 128px;
  object-fit: cover;
  border-radius: 12px;
}
.video-copy h5 {
  margin: 0 0 4px;
  font-weight: 900;
}
.video-copy p {
  margin: 0 0 6px;
  color: #555;
}
.video-meta {
  font-size: 0.9rem;
  color: #666;
}
.video-meta .chip {
  display: inline-block;
  background: rgba(162, 89, 255, 0.12);
  color: #a259ff;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  margin-right: 6px;
}
.video-meta .sep {
  margin: 0 6px;
  opacity: 0.6;
}
.video-cta {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  background: linear-gradient(135deg, #ff3ea5, #a259ff);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(162, 89, 255, 0.25);
}

/* ====== Quotes slider ====== */
.quotes {
  position: relative;
  padding: 24px 64px;
  border-radius: 18px;
  background: #fff;
  border: 1.5px solid rgba(162, 89, 255, 0.16);
  box-shadow: 0 12px 28px rgba(162, 89, 255, 0.1);
  overflow: hidden;
}
.quote {
  display: none;
  margin: 0;
}
.quote.current {
  display: block;
}
.quote blockquote {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 6px;
}
.quote figcaption {
  color: #666;
}

.q-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.04);
  color: #a259ff;
  font-size: 22px;
  font-weight: 700;
}
.q-left {
  left: 12px;
}
.q-right {
  right: 12px;
}
.q-nav:hover {
  background: rgba(0, 0, 0, 0.06);
}
.quote-note {
  margin-top: 8px;
  color: #777;
  font-size: 0.92rem;
}

/* responsive */
@media (max-width: 991px) {
  .reels-wrap {
    padding: 6px 44px;
  }
  .reels {
    grid-auto-columns: 64vw;
  }
  .reel {
    width: auto;
    height: 75vh;
    max-height: 520px;
  }
  .video-item {
    grid-template-columns: 84px 1fr auto;
  }
  .video-item .thumb {
    width: 84px;
    height: 120px;
  }
}

/* Behind the scenes PICS */
/* Masonry gallery using CSS columns (simple & fast) */
.masonry {
  column-count: 3;
  column-gap: 16px;
}
@media (max-width: 991px) {
  .masonry {
    column-count: 2;
  }
}
@media (max-width: 560px) {
  .masonry {
    column-count: 1;
  }
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid rgba(162, 89, 255, 0.16);
  box-shadow: 0 12px 28px rgba(162, 89, 255, 0.1);
}
.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}

.masonry-item figcaption {
  padding: 12px 12px 14px;
}
.masonry-item h5 {
  margin: 6px 0 4px;
  font-weight: 900;
}
.masonry-item p {
  margin: 0;
  color: #555;
  font-size: 0.95rem;
}

/* Badges */
.badge {
  display: inline-block;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.2px;
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
  border: 1px solid;
}
.badge.latest {
  color: #a259ff;
  background: rgba(162, 89, 255, 0.12);
  border-color: rgba(162, 89, 255, 0.18);
}
.badge.archive {
  color: #ff3ea5;
  background: rgba(255, 62, 165, 0.1);
  border-color: rgba(255, 62, 165, 0.22);
}

/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  padding-top: 130px;
}

.contact-us .section-heading .line-dec {
  margin: 0 auto;
}

.contact-us .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

form#contact:before {
  background-image: url(../images/contact-top-right.png);
  position: absolute;
  right: 0;
  top: 0;
  width: 726px;
  height: 78px;
  background-repeat: no-repeat;
  content: "";
  z-index: 1;
}

.contact-dec img {
  max-width: 224px;
  position: absolute;
  right: 25px;
  top: -242px;
}

form#contact:after {
  background-image: url(../images/contact-bottom-right.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 532px;
  height: 106px;
  background-repeat: no-repeat;
  content: "";
  z-index: 1;
}

form#contact {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  background-color: #fff;
  border-radius: 23px;
  text-align: center;
}

form#contact #map iframe {
  border-top-left-radius: 23px;
  border-bottom-left-radius: 23px;
  margin-bottom: -7px;
  position: relative;
  z-index: 2;
}

.fill-form {
  padding: 80px 60px 80px 30px;
}

.fill-form .info-post {
  margin-bottom: 20px;
}

.fill-form .icon {
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 23px;
  padding: 25px 15px;
}

.fill-form .icon img {
  max-width: 60px;
  display: block;
  margin: 0 auto;
}

.fill-form .icon a {
  margin-top: 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  transition: all 0.3s;
}

.fill-form .icon:hover a {
  color: #fa65b1;
}

form#contact input {
  width: 100%;
  height: 46px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  border-radius: 23px;
  margin-top: 30px;
}

form#contact input::placeholder {
  color: #aaa;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 200px;
  min-height: 200px;
  height: 200px;
  border-radius: 23px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-top: 30px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #fa65b1;
  margin-top: 30px;
  width: 100%;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: 1px solid #fa65b1;
  transition: all 0.3s;
  outline: none;
}

form#contact button:hover {
  background-color: #fa65b1 !important;
  color: #fff !important;
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background-image: url(../images/footer-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
}

footer p {
  text-align: center;
  margin: 20px 0px;
  color: #fff;
}

footer p a {
  color: #fff;
  transition: all 0.5s;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 992px) {
  .intro-banner:before {
    display: none;
  }
  form#contact {
    overflow: hidden;
  }
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
    padding: 226px 0px 30px 0px;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }
  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;
  }
  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }
  .service-item {
    text-align: center;
  }
  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 70px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .services .naccs .menu div .thumb {
    padding: 5px;
  }
  .services .icon img {
    margin: 0px;
  }
  .services ul.nacc li.active {
    padding: 45px;
  }
  .services .naccs .menu div {
    font-size: 0px;
  }
  .services ul.nacc li .right-image img {
    float: none;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }
  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 30px;
  }
  .post-item .thumb img {
    max-width: 140px;
  }
  .post-item .right-content p {
    display: none;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
}

/* ===== Footer socials ===== */
.footer-socials{
  margin-top: 10px;
  margin-bottom: 30px;
  display: flex;
  gap: 10px 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.social-btn{
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 999px;
  color: #fff; /* icon color */
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .15s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  text-decoration: none;
}
.social-btn:hover{
  background: #ffffff;
  color: #6f3cff;                 /* your brand purple on hover */
  border-color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(162,89,255,0.22);
}

/* allow slight brand accent if you want to differentiate */
.social-btn.ig:hover{ color:#d946ef; }  /* soft magenta on hover */
.social-btn.tt:hover{ color:#111; }     /* solid black on hover for TikTok */
.social-btn.mail:hover{ color:#6f3cff;} /* purple for email hover */

/* Accessible text email next to the icons */
.footer-email{
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease, box-shadow .25s ease;
}
.footer-email:hover{
  background:#fff; color:#6f3cff; border-color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(162,89,255,0.22);
}

/* On very light footers, flip colors */
footer.light .social-btn,
footer.light .footer-email{
  color:#333;
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
}
footer.light .social-btn:hover,
footer.light .footer-email:hover{
  background:#111; color:#fff; border-color:#111;
}


/* CONSULTATION PAGE */
/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #22252a;
  background: #ffffff;
}

/* Layout helpers */
.page { padding-bottom: 60px; }
.container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* Breadcrumb */
.crumbs {
  width: min(1100px, 92%);
  margin: 18px auto 0;
  font-size: 13px;
  color: #8b8fa0;
}
.crumbs .crumb { color: #8b8fa0; text-decoration: none; }
.crumbs .crumb:hover { text-decoration: underline; }
.crumbs .current { color: #555a6f; font-weight: 600; }
.crumbs .sep { margin: 0 6px; color: #c9c9d5; }

/* ---------------------------
   HERO (base styles)
---------------------------- */
.consult-hero {
  padding: 56px 0 28px;
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(164, 127, 255, 0.08), transparent 60%),
    radial-gradient(1200px 500px at 90% 10%, rgba(255, 62, 165, 0.08), transparent 60%);
  text-align: center; /* ✅ center align hero text */
}
.consult-hero .container {
  max-width: 900px;
  margin: 0 auto;
}

/* Center supporting text in hero */
.consult-hero .lead,
.consult-hero .bullets,
.consult-hero p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #a04bff;
  font-weight: 700;
  font-size: 12px;
  margin: 0 0 8px;
}

.title {
  margin: 0 0 8px;
  font-size: clamp(28px, 4.5vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  color: #191c23;
}
.title .grad {
  background: linear-gradient(90deg, #ff3ea5, #a259ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead {
  margin: 6px 0 18px;
  color: #6d738a;
  font-size: clamp(15px, 2.2vw, 18px);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------
   CHIPS
---------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px;
  justify-content: center;
}
.chip {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  color: #7f3cff;
  background: rgba(162, 89, 255, 0.12);
  border: 1px solid rgba(162, 89, 255, 0.22);
}

/* ---------------------------
   BUTTONS
---------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  will-change: transform;
}
.btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(162, 89, 255, 0.2); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #ff3ea5, #a259ff);
  box-shadow: 0 10px 30px rgba(162, 89, 255, 0.35);
  border: 0;
}
.btn-primary:hover { box-shadow: 0 14px 36px rgba(162, 89, 255, 0.42); }

.btn-ghost {
  color: #a259ff;
  border: 2px solid #a259ff;
  background: transparent;
}
.btn-ghost:hover {
  background: rgba(162, 89, 255, 0.07);
}

.btn-outline {
  color: #a259ff;
  border: 2px solid rgba(162, 89, 255, 0.5);
  background: transparent;
}
.btn-outline:hover { background: rgba(162, 89, 255, 0.07); }

/* Button row */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 10px;
  justify-content: center;
}

/* ---------------------------
   BULLETS
---------------------------- */
.bullets {
  margin: 16px auto 0;
  padding-left: 20px;
  max-width: 720px;
  color: #5c6074;
  text-align: left;
}
.bullets li { margin: 6px 0; }

/* ---------------------------
   INFO BAR (green bar under hero)
---------------------------- */
.howbar {
  margin: 22px auto 0;
  padding: 12px 14px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #065f46;
  border-radius: 12px;
  max-width: 720px;
  text-align: center;
}

/* ---------- Page container under hero ---------- */
.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px 72px;
}

/* ---------- Section titles ---------- */
.h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 12px;
}

/* ---------- Steps list ---------- */
.steps {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}
.step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .04);
  padding: 16px 18px;
}
.step-num {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex: 0 0 30px;
}
.step-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
}
.muted {
  color: #6b7280;
  margin: 0;
}

/* ---------- Card (form block) ---------- */
.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .04);
  padding: 18px;
}

.under-form {
  margin-top: 10px;
  color: #6b7280;
}

/* Ensure the hero info bar matches centered layout */
.howbar {
  margin: 22px auto 0;
  max-width: 720px;
  text-align: center;
}


/* Form block */
.form-wrap { padding: 18px 0 10px; }
.card {
  background: #ffffff;
  border: 1px solid rgba(162, 89, 255, 0.18);
  border-radius: 22px;
  box-shadow: 0 25px 60px rgba(162, 89, 255, 0.10);
  padding: 8px;
  overflow: hidden;
}

/* Typeform makes its own height; we just give it a sane min-height holder */
.card [data-tf-live] { display: block; min-height: 680px; }

/* FAQ */
.faq { padding: 26px 0 12px; }
.faq-title {
  margin: 0 0 10px;
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 800;
}
.accordion { border-radius: 16px; overflow: hidden; border: 1px solid rgba(162, 89, 255, 0.18); }

.acc-btn {
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 0;
  padding: 18px 18px;
  font-weight: 700;
  color: #2b2f3a;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(162, 89, 255, 0.14);
  cursor: pointer;
}
.acc-btn:hover { background: rgba(162, 89, 255, 0.05); }
.acc-btn[aria-expanded="true"] .chev { transform: rotate(-90deg); }
.chev { transition: transform .2s ease; display: inline-block; color: #a259ff; font-style: normal; }

.acc-panel {
  padding: 0 18px 16px;
  color: #555a6f;
  background: linear-gradient(0deg, rgba(162, 89, 255, 0.06), rgba(162, 89, 255, 0.06)) #fff;
}

/* Tiny CTA under FAQ */
.tiny-cta { margin-top: 14px; }
.tiny-cta .btn { height: 44px; }

/* Footnote */
.footnote { padding-top: 8px; }
.note { color: #7a7f93; font-size: 14px; }
.note a { color: #a259ff; text-decoration: none; }
.note a:hover { text-decoration: underline; }

/* Responsive niceties */
@media (max-width: 640px) {
  .bullets { padding-left: 16px; }
  .acc-btn { padding: 16px; }
  .acc-panel { padding: 0 16px 16px; }
}

/* BOOK SONG PAGE */
*{box-sizing:border-box}
body{margin:0}

/* Layout containers */
.booksong-container{width:min(1100px,92%);margin:0 auto}

/* Hero */
.booksong-eyebrow{margin-top:18px;text-transform:uppercase;letter-spacing:1.2px;color:#a04bff;font-weight:700;font-size:12px}
.booksong-title{margin:6px 0 8px;font-size:clamp(28px,4.5vw,46px);font-weight:800;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.booksong-grad{background:linear-gradient(90deg,#ff3ea5,#a259ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.booksong-lead{color:#6d738a;max-width:760px;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.booksong-hero{
  padding:42px 0;
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(164,127,255,.08), transparent 60%),
    radial-gradient(1200px 500px at 90% 10%, rgba(255,62,165,.08), transparent 60%);
}

/* Grid */
.booksong-checkout{padding:18px 0 40px}
.booksong-grid{display:grid;grid-template-columns:360px 1fr;gap:20px}
@media(max-width:900px){.booksong-grid{grid-template-columns:1fr}}

/* Cards */
.booksong-card{
  background:#fff;border:1px solid rgba(162,89,255,.18);border-radius:22px;
  box-shadow:0 25px 60px rgba(162,89,255,.1);padding:20px
}
.booksong-h3{margin:0 0 10px;font-size:20px;font-weight:800;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.booksong-list{margin:0 0 14px;padding-left:18px;color:#555a6f;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Pills */
.booksong-pill-row{display:flex;flex-wrap:wrap;gap:8px}
.booksong-pill{
  padding:6px 10px;border-radius:999px;font-weight:600;font-size:12px;color:#7f3cff;
  background:rgba(162,89,255,.12);border:1px solid rgba(162,89,255,.22);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}

/* Options */
.booksong-option{
  display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;
  border:1px solid rgba(162,89,255,.14);margin:10px 0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}
.booksong-option:hover{background:rgba(162,89,255,.06)}
.booksong-sub{color:#6d738a;font-size:13px;margin-top:2px}
.booksong-small{padding:10px}

/* Terms + Actions */
.booksong-terms{display:flex;gap:10px;align-items:flex-start;margin:14px 0;color:#555a6f;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.booksong-tiny{color:#7a7f93;font-size:13px;margin:8px 0 0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Buttons */
.booksong-btn{
  display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:999px;
  font-weight:800;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s;background:#eee
}
.booksong-btn-primary{color:#fff;background:linear-gradient(135deg,#ff3ea5,#a259ff);box-shadow:0 10px 30px rgba(162,89,255,.35)}
.booksong-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.booksong-btn-primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(162,89,255,.42)}
.booksong-actions{margin-top:12px}


/* ========= BOOK SONG (scoped) ========= */
.bys-page { background:#fff; color:#1a1a1a; }

/* Header */
.bys-hero{
  padding:56px 20px 24px;
  text-align:center;
  background:
    radial-gradient(1200px 300px at 50% -80px, rgba(162,89,255,.10), transparent),
    linear-gradient(180deg, rgba(255,62,165,.10), rgba(162,89,255,.06) 40%, transparent);
}
.bys-eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-weight:800; color:#a259ff; margin:0 0 8px; }
.bys-title{ font-size:clamp(30px,4vw,46px); margin:0; font-weight:900; }
.bys-title span{
  background:linear-gradient(90deg,#ff3ea5,#a259ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.bys-sub{ margin:10px auto 0; max-width:780px; color:#6c6a80; font-weight:600; }

/* Layout */
.bys-container{ max-width:1100px; margin:28px auto 60px; padding:0 20px; display:grid; gap:20px; grid-template-columns: 1fr 1.1fr; }
@media (max-width: 940px){ .bys-container{ grid-template-columns:1fr; } }

.bys-col{
  background:#fff; border:1px solid rgba(162,89,255,.18);
  border-radius:18px; padding:22px; box-shadow:0 24px 60px rgba(162,89,255,.10);
}

/* Summary left */
.bys-box-title{ font-weight:900; font-size:1.25rem; margin:0 0 14px; }
.bys-bullets{ margin:0 0 16px 0; padding:0 0 0 20px; }
.bys-bullets li{ margin:6px 0; }
.bys-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.bys-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:.85rem;
  color:#6c6a80; background:rgba(162,89,255,.10); border:1px solid rgba(162,89,255,.22);
}

/* Plan toggle */
.bys-plan-toggle{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:6px 0 12px; }
.bys-plan-input{ position:absolute; opacity:0; pointer-events:none; }
.bys-plan-pill{
  position:relative; display:inline-flex; flex-direction:column; gap:4px;
  padding:12px 18px; border-radius:16px; border:2px solid #ff3ea5;
  background:#fff; color:#1a1a1a; font-weight:900; cursor:pointer;
  transition:box-shadow .2s, transform .12s, background .2s, color .2s, border-color .2s;
}
.bys-plan-pill .bys-pill-sub{ font-weight:800; font-size:.9rem; color:#7c79a8; }
.bys-plan-input:checked + .bys-plan-pill{
  background:linear-gradient(135deg,#ff3ea5,#a259ff); color:#fff; border-color:transparent;
  box-shadow:0 12px 28px rgba(162,89,255,.35);
}
.bys-plan-input:checked + .bys-plan-pill .bys-pill-sub{ color:#fff; opacity:.9; }
.bys-plan-pill:hover{ transform:translateY(-1px); }
.bys-plan-note{ margin:-6px 0 10px; font-weight:700; color:#7c79a8; }

/* Extra hours */
.bys-extra-wrap{
  border:1px dashed rgba(162,89,255,.25);
  background:rgba(162,89,255,.05);
  border-radius:14px; padding:12px; margin:10px 0 14px;
}
.bys-extra-label{ display:flex; flex-direction:column; font-weight:900; margin-bottom:8px; }
.bys-extra-help{ font-weight:600; color:#7c79a8; }
.bys-extra-ctrl{ display:flex; align-items:center; gap:10px; }
.bys-extra-btn{
  width:36px; height:36px; border-radius:10px; border:1px solid rgba(162,89,255,.4);
  background:#fff; font-weight:900; cursor:pointer;
}
#extraHours{
  width:70px; height:36px; text-align:center; border-radius:10px;
  border:1px solid rgba(162,89,255,.35); background:#fff; font-weight:900;
}

/* Payment form */
.bys-box-subtitle{ font-size:1.05rem; margin:18px 0 8px; font-weight:900; }

.bys-form{ display:block; }
.bys-pay-row{
  display:flex; flex-direction:column; gap:6px; border:1px solid rgba(162,89,255,.22);
  padding:14px; border-radius:14px; margin-bottom:10px; background:#fff;
}
.bys-pay-row input{ accent-color:#a259ff; }
.bys-pay-title{ font-weight:900; }
.bys-pay-sub{ color:#7c79a8; font-weight:600; }

.bys-addon{
  display:flex; align-items:center; gap:10px; border:1px dashed rgba(162,89,255,.25);
  padding:12px; border-radius:12px; margin-bottom:10px; background:rgba(162,89,255,.04);
}
.bys-addon input{ accent-color:#a259ff; }
.bys-addon-title{ font-weight:900; }
.bys-addon-sub{ color:#7c79a8; font-weight:600; }

.bys-terms{ display:flex; gap:10px; align-items:flex-start; margin:12px 0; }
.bys-terms input{ margin-top:3px; accent-color:#a259ff; }
.bys-terms a{ color:#6f3cff; font-weight:800; text-decoration:none; }
.bys-terms a:hover{ text-decoration:underline; }

.bys-btn-primary{
  width:100%; height:48px; border:none; border-radius:999px;
  background:linear-gradient(135deg,#ff3ea5,#a259ff); color:#fff; font-weight:900;
  box-shadow:0 12px 28px rgba(162,89,255,.32);
  transition:transform .12s, box-shadow .12s, opacity .12s;
}
.bys-btn-primary:disabled{ opacity:.55; box-shadow:none; cursor:not-allowed; }
.bys-btn-primary:not(:disabled):hover{ transform:translateY(-1px); box-shadow:0 18px 36px rgba(162,89,255,.42); }

.bys-footnote{ margin:10px 0 0; color:#7c79a8; font-weight:600; }

.bys-policy{ margin-top:10px; }
.bys-policy summary{ cursor:pointer; }

/* Base */
:root { --pink:#ff3ea5; --violet:#a259ff; --ink:#1c1f24; --muted:#6b6f76; --bg:#faf7ff; --card:#ffffff; --ring:rgba(162,89,255,.18); }
*{box-sizing:border-box}
body.booking-body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff}

/* Hero */
.booking-hero{background:linear-gradient(180deg,rgba(162,89,255,.12),transparent);padding:48px 0 8px}
.booking-container{width:min(1100px,92%);margin:0 auto}
.booking-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--violet);font-size:.8rem;margin:0 0 6px}
.booking-title{font-size:clamp(2rem,3.3vw,3rem);margin:0 0 6px;font-weight:800}
.booking-title span{background:linear-gradient(90deg,var(--pink),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.booking-sub{margin:0 0 10px;color:var(--muted)}

/* Layout */
.booking-main{padding:24px 0 64px}
.booking-grid{display:grid;grid-template-columns:360px 1fr;gap:24px}
@media (max-width: 980px){.booking-grid{grid-template-columns:1fr}}
.booking-card{background:var(--card);border:1px solid var(--ring);border-radius:16px;box-shadow:0 8px 24px rgba(162,89,255,.08);padding:20px}
.booking-card-title{margin:4px 0 12px;font-size:1.05rem;font-weight:800}

/* Summary */
.booking-summary .booking-list{margin:0 0 12px 0;padding:0 0 0 20px}
.booking-summary .booking-list li{margin:6px 0}
.booking-chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.booking-chip{background:rgba(162,89,255,.08);color:var(--violet);border:1px solid var(--ring);padding:6px 10px;border-radius:999px;font-weight:700;font-size:.8rem}
.booking-note{font-size:.9rem;color:var(--muted)}
.booking-note a{color:var(--violet);font-weight:700;text-decoration:none}

/* Plan toggle */
.booking-plan-toggle{display:flex;gap:10px;flex-wrap:wrap}
.plan-chip{border:1px solid var(--ring);background:#fff;border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer}
.plan-chip .plan-price{margin-left:8px;color:var(--violet);font-weight:800}
.plan-chip.active{background:linear-gradient(135deg,var(--pink),var(--violet));color:#fff;border-color:transparent}
.plan-chip.active .plan-price{color:#fff}
.booking-plan-help{color:var(--muted);margin:10px 0 0}

/* Controls */
.booking-rows{margin-top:14px}
.booking-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:10px 0 2px}
.booking-label{font-weight:700}
.booking-small{display:block;color:var(--muted);font-weight:500}
.booking-hours{display:flex;align-items:center;gap:8px}
.hours-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--ring);background:#fff;font-weight:800;cursor:pointer}
.hours-input{width:70px;height:36px;border-radius:10px;border:1px solid var(--ring);text-align:center;font-weight:700}

/* Options */
.booking-option{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--ring);border-radius:14px;padding:12px;margin:10px 0;cursor:pointer}
.booking-option input{margin-top:4px}
.booking-option-title{font-weight:800}
.booking-option-sub{color:var(--muted);font-size:.92rem}

/* Addons */
.booking-addon{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--ring);border-radius:14px;padding:12px;margin:10px 0;cursor:pointer}
.booking-addon input{margin-top:4px}
.booking-addon-title{font-weight:800}
.booking-addon-sub{color:var(--muted);font-size:.92rem}

/* Terms + CTA */
.booking-cta {
  display: none;
}
/* .booking-terms{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.95rem}
.booking-terms a{color:var(--violet);font-weight:700;text-decoration:none}
.booking-cta{margin-top:12px;width:100%;height:52px;border:0;border-radius:999px;color:#fff;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--pink),var(--violet));box-shadow:0 10px 30px rgba(162,89,255,.35);transition:transform .12s ease,box-shadow .12s ease;opacity:.5}
.booking-cta.enabled{opacity:1}
.booking-cta:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(162,89,255,.42)}
.booking-postnote{color:var(--muted);margin:8px 0 0} */


/* Request installments toggle */
/* Dim & disable PayPal when instalments are chosen or terms not agreed */
.paypal-disabled {
  pointer-events: none;
  opacity: .45;
  filter: grayscale(80%);
}


/* ====== PACKAGE SUMMARY part of the booksong.html page ======= */
/* ===== Package Summary Points (styled bullets) ===== */
.package-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.package-points li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.package-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent, #a45dff); /* fallback */
}

/* Rotate pastel colours for each point */
.package-points li:nth-child(1)::before { background: #d7c3ff; }
.package-points li:nth-child(2)::before { background: #ffd7a3; }
.package-points li:nth-child(3)::before { background: #a3d4ff; }
.package-points li:nth-child(4)::before { background: #c3ffd9; }
.package-points li:nth-child(5)::before { background: #ffc3d3; }
.package-points li:nth-child(6)::before { background: #ffe0a3; }
.package-points li:nth-child(7)::before { background: #d3c3ff; }


/* ====== WHAT HAPPENS NEXT part of the booksong.html page ======= */
.booking-steps { 
  display: flex; 
  flex-direction: column; 
  gap: 14px;
  margin: 10px 0 0; 
}

.booking-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(162,89,255,.06);
}

.step-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex: 0 0 48px;
}

/* Pastel tiles */
.bg-lav  { background: #d7c3ff; }
.bg-peach{ background: #ffd7a3; }
.bg-sky  { background: #a3d4ff; }
.bg-rose { background: #ffc3d3; }

.step-title {
  margin: 0 0 2px;
  font-weight: 800;
}

.step-desc {
  margin: 0;
  color: var(--muted);
}

.booking-steps-note {
  margin: 12px 0 0;
  color: var(--muted);
}

/* ========================= PAYPAL BUTTON ======================== */
/* Dim + block clicks until terms are accepted */
  #paypal-button-container { transition: opacity .15s ease }
  #paypal-button-container.paypal-disabled {
    opacity: .45;
    filter: grayscale(1);
    pointer-events: none;   /* stops clicks */
  }

  
/* ========================= SONG START PAGE ====================== */
.kick-page{ background:#fff; color:#1a1a1a; }
.kick-hero{
  padding:56px 20px 24px; text-align:center;
  background:
    radial-gradient(1200px 300px at 50% -80px, rgba(162,89,255,.10), transparent),
    linear-gradient(180deg, rgba(255,62,165,.10), rgba(162,89,255,.06) 40%, transparent);
}
.kick-eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-weight:800; color:#a259ff; margin:0 0 8px; }
.kick-title{ font-size:clamp(30px,4vw,46px); margin:0; font-weight:900; }
.kick-sub{ margin:10px auto 0; max-width:760px; color:#6c6a80; font-weight:600; }
.kick-container{ max-width:1100px; margin:28px auto 60px; padding:0 20px; }
.kick-h2{ font-size:1.25rem; font-weight:900; margin:0 0 12px; }
.kick-step-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.kick-step{
  display:flex; gap:14px; align-items:flex-start; padding:14px;
  border:1px solid rgba(162,89,255,.18); border-radius:16px; background:#fff;
  box-shadow:0 18px 40px rgba(162,89,255,.10);
}
.kick-step-num{
  flex:0 0 36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff; font-weight:900; background:linear-gradient(135deg,#ff3ea5,#a259ff);
}
.kick-step-body h3{ margin:0 0 6px; font-weight:900; }
.kick-step-body p{ margin:0; color:#6c6a80; font-weight:600; }
.kick-embeds{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
@media (max-width: 940px){ .kick-embeds{ grid-template-columns:1fr; } }
.kick-card{
  padding:16px; border:1px solid rgba(162,89,255,.18); border-radius:16px; background:#fff;
  box-shadow:0 18px 40px rgba(162,89,255,.10);
}
.kick-summary{ margin-top:22px; }
.kick-summary-card{
  padding:16px; border:1px solid rgba(162,89,255,.18); border-radius:16px; background:#fff;
  box-shadow:0 18px 40px rgba(162,89,255,.10);
}
.kick-summary-card h3{ margin:0 0 8px; font-weight:900; }
.kick-summary-card ul{ margin:0 0 8px; padding-left:18px; }
.kick-note{ color:#6c6a80; font-weight:600; }

/* ============ TERMS ========== */
#terms-content, 
#terms-content p, 
#terms-content li, 
#terms-content span {
  color: #111; /* or #222 if you want slightly softer */
}

/* Artist entry/pro toggles */
/* Services-only toggle styles (unique class names) */

/* ===== MOBILE LAYOUT TWEAKS (keep desktop as-is) ===== */
@media (max-width: 575px){

  /* --- Service tab icons: 3 per row, smaller, no overlap --- */
  .services .naccs .menu{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center;
    gap:8px;
    margin-bottom:16px;
    white-space:normal;
  }
  .services .naccs .menu div{
    flex:0 1 calc(33.333% - 8px) !important; /* 3 per row */
    width:auto !important;
    font-size:14px !important;               /* smaller label */
    line-height:1.2;
  }
  .services .naccs .menu div .thumb{
    padding:12px 4px !important;
  }
  .services .icon img{
    max-width:40px !important;
    min-width:40px !important;
    margin-bottom:6px;
  }

  /* Pane padding so header/toggle never collide */
  .services ul.nacc li.active{
    padding:22px 14px 20px 14px !important;
  }
  /* Title + pill toggle: stack, centered */
  #services .left-text .svc-title{
    flex-wrap:wrap;
    gap:8px;
  }
  #services .left-text .svc-title > span:first-child{ font-size:1.35rem; }
  #services .left-text .svc-title .svc-toggle{
    width:100%; display:flex; justify-content:center; margin-top:2px;
  }
  #services .svc-toggle .variant-btn{ padding:6px 12px; font-size:.84rem; }

  /* Keep CTAs centered on small screens */
  .service-ctas{ justify-content:center !important; }
  .service-btn{ min-width:220px; }
}


/* Reels: prevent cropping and fit nicely on phones */
.reels-shelf,
.reels-track{ overflow-y: visible !important; }  /* safety */

@media (max-width: 575px){
  .reels-shelf{ padding: 14px 14px; }            /* softer shell */
  .reels-track{
    grid-auto-columns: 78vw;                     /* card width */
    overflow-x: auto;
    padding-bottom: 16px;                        /* no bottom cut */
    justify-content: flex-start;                 /* left-align strip */
  }
  .reel-card{
    width: 78vw;
    height: auto;                                /* let aspect rule it */
    overflow: visible;
  }
  .reel-card .media-wrap{
    height: auto;
    aspect-ratio: 9 / 16;                        /* perfect reel shape */
  }
  .reel-card .media{
    width: 100%; height: 100%; object-fit: cover;
  }
}


/* ===== MOBILE ONLY ===== */
@media (max-width: 575px){

  /* 1) Give the white service card much more inner padding */
  .services ul.nacc li.active{
    /* top | right | bottom | left */
    padding: 56px 30px 46px 30px !important;
  }

  /* 2) Center ONLY the main service title (“Custom Pop Single”) */
  .services .left-text .svc-title{
    flex-wrap: wrap;              /* let title sit on its own row */
    justify-content: center;      /* center the whole heading row */
    text-align: center;           /* affects the title text */
    gap: 10px;
  }
  .services .left-text .svc-title > span:first-child{
    width: 100%;                  /* title on its own line */
    display: block;
  }
  /* keep the toggle tidy under the title */
  .services .left-text .svc-title .svc-toggle{
    margin-top: 2px;
  }

  /* 3) Center ONLY the “Featured Reels” section title */
  #content .section-heading h4{
    text-align: center;
  }

  #content .section-heading h6{
    text-align: center;
  }

  #content .section-heading .line-dec {
    margin: 0 auto;
  }

  /* (optional) a touch more paragraph spacing so it breathes */
  .services .left-text > p{
    margin-bottom: 22px;
  }
}



/* Fix toggle text alignment on mobile */
@media (max-width: 575px){
  #services .svc-toggle{
    display: flex;
    justify-content: space-between;
  }
  #services .svc-toggle .variant-btn{
    flex: 1;
    text-align: center;   /* could also use left/right if you prefer */
    padding: 6px 0;
    font-size: .8rem;
  }
  #services .svc-toggle .variant-slider{
    width: 50%;
    left: 0;
    transition: .3s ease;
  }
  /* When "Plus" is active, move slider to the right */
  #services .svc-toggle[data-active="plus"] .variant-slider{
    left: 50%;
  }
}

/* Mobile: center the H4 service titles (not the body copy) */
@media (max-width:575px){
  #services .left-text h4{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;   /* centers the row */
    gap:8px;
    margin-bottom:12px;
    text-align:center;        /* centers plain text nodes inside h4 */
  }
  #services .left-text h4 > span:first-child{
    width:100%;
    text-align:center;        /* centers the title text */
    line-height:1.2;
  }

  /* Keep any pills/badges nicely centered under the title */
  #services .left-text h4 .price-pill,
  #services .left-text h4 .badge-fastest,
  #services .left-text h4 .chip{
    margin:0 auto;
  }
}