@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Lato:wght@400;700;900&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap");

:root {
  --blue: #28bfff;
  --deep: #087ec8;
  --ice: #dff8ff;
  --black: #02050a;
  --silver: #dce7ed;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #070b10;
  color: #fff;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
.page-shell {
  max-width: 1500px;
  margin: auto;
  border-radius: 0 0 48px 48px;
  overflow: hidden;
  background: #02050a;
  box-shadow: 0 40px 100px #000c;
}
header {
  height: 78px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #03070c;
  border-bottom: 1px solid #ffffff1f;
  position: relative;
  z-index: 20;
}
.logo img {
  width: 185px;
  max-height: 54px;
  object-fit: contain;
}
nav {
  display: flex;
  gap: 30px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
nav a {
  padding: 11px 0;
  border-bottom: 2px solid transparent;
}
nav a:hover {
  border-color: var(--blue);
}
.explore,
.hamb {
  border: 0;
  background: var(--blue);
  color: #00121f;
  min-height: 40px;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.explore span {
  margin-left: 10px;
}
.hamb {
  display: none;
}
.shade {
  position: fixed;
  inset: 0;
  background: #000b;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
.shade.on {
  opacity: 1;
  pointer-events: auto;
}
aside {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 80;
  width: min(430px, 94vw);
  height: 100vh;
  padding: 28px;
  background: linear-gradient(145deg, #effbff, #51ccff 50%, #0879b6);
  color: #06121b;
  transform: translateX(105%);
  transition: 0.45s;
  overflow: auto;
}
aside.open {
  transform: none;
}
aside > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #0004;
  font-weight: 900;
  letter-spacing: 0.16em;
}
aside button {
  border: 0;
  background: none;
  font-size: 36px;
}
aside > a {
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  border-bottom: 1px solid #0003;
  font: 700 18px Georgia;
  transition: 0.25s;
}
aside > a:hover {
  padding-left: 10px;
  background: #ffffff44;
}
aside > a span {
  font: 9px Arial;
}
.agency-hero {
  min-height: 555px;
  padding: 76px 8% 58px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, #05070ed9, #030912b5 44%, transparent 70%),
    url("images/reference-hero.png") center/cover;
}
.hero-text {
  position: relative;
  z-index: 2;
  width: 56%;
}
.hero-text > small,
.grid-lead > small,
.section-title > small,
.about-copy > small {
  font-size: 8px;
  letter-spacing: 0.22em;
  color: #c7f3ff;
  font-weight: 900;
}
.hero-text h1 {
  font:
    900 clamp(48px, 6vw, 86px)/0.94 Impact,
    Arial Black,
    sans-serif;
  letter-spacing: -0.015em;
  margin: 22px 0;
  text-transform: uppercase;
}
.hero-text h1 em {
  color: var(--blue);
  font-style: normal;
}
.hero-text p {
  max-width: 510px;
  color: #c5d5de;
  font-size: 13px;
  line-height: 1.7;
}
.hero-text > a,
.grid-lead > a,
.about-copy > a,
.community a {
  display: inline-flex;
  gap: 20px;
  background: var(--blue);
  color: #001522;
  padding: 14px 18px;
  margin-top: 12px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
  box-shadow: 0 0 26px #20baff55;
  transition: 0.3s;
}
.hero-text > a:hover,
.grid-lead > a:hover {
  transform: translateY(-4px);
}
.hero-stats {
  position: absolute;
  right: 3%;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  gap: 25px;
}
.hero-stats p {
  margin: 0;
  padding-left: 15px;
  border-left: 2px solid var(--blue);
}
.hero-stats b,
.hero-stats span {
  display: block;
}
.hero-stats b {
  font: 700 25px Impact;
}
.hero-stats span {
  color: #abc2cf;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.creative-grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(2, 1fr);
  grid-template-rows: repeat(2, 215px);
  gap: 8px;
  padding: 8px;
  background: #04080d;
}
.grid-lead {
  grid-row: 1/3;
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #020408, #09141e);
  border: 1px solid #ffffff12;
}
.grid-lead h2 {
  font: 900 clamp(40px, 4.2vw, 66px)/0.98 Impact;
  margin: 20px 0 24px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.grid-lead h2 em {
  color: var(--blue);
  font-style: normal;
}
.grid-lead p {
  color: #aebfc9;
  font-size: 12px;
  line-height: 1.65;
  max-width: 400px;
}
.ad {
  position: relative;
  overflow: hidden;
  padding: 24px;
  background-size: 200% 200%;
  transition: 0.4s;
}
.ad:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #02050aca, transparent 72%);
}
.ad:hover {
  transform: scale(0.98);
}
.ad > div {
  position: relative;
  z-index: 2;
  max-width: 56%;
}
.ad small {
  font-size: 6px;
  letter-spacing: 0.18em;
}
.ad h3 {
  font: 900 clamp(23px, 2vw, 36px)/1.02 Impact;
  margin: 12px 0 18px;
  letter-spacing: 0.01em;
}
.ad b {
  background: #fff;
  color: #06121b;
  padding: 7px 9px;
  font-size: 7px;
}
.ad1 {
  background-image: url("images/luxury-prompt-generators.png");
  background-position: center;
}
.ad2 {
  background-image: url("images/top-sell.png");
  background-position: center;
}
.ad3 {
  background-image: url("images/editable-canva-templates.png");
  background-position: center;
}
.ad4 {
  background-image: url("images/prompts.png");
  background-position: center;
}
.phone-showcase {
  min-height: 630px;
  position: relative;
  overflow: hidden;
  padding: 60px 4% 40px;
  background: radial-gradient(
    ellipse at 50% 70%,
    #0b6aa9,
    #042742 35%,
    #02060b 68%
  );
}
.phone-row {
  max-width: 1200px;
  height: 430px;
  margin: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 17px;
  perspective: 1100px;
}
.device {
  width: min(225px, 22%);
  aspect-ratio: 9/17.5;
  padding: 7px;
  border-radius: 27px;
  background: linear-gradient(135deg, #07101a, #e5edf1 20%, #111 38%, #020306);
  box-shadow:
    0 36px 45px #000b,
    0 0 20px #fff4;
  transition: 0.45s;
  animation: hover 5s ease-in-out infinite;
}
.device:hover {
  translate: 0 -22px;
}
.d1 {
  transform: rotate(-5deg);
}
.d2 {
  transform: translateY(-24px) rotate(-2deg);
}
.d3 {
  transform: translateY(-18px) rotate(2deg);
}
.d4 {
  transform: rotate(5deg);
}
.screen {
  height: 100%;
  border-radius: 20px;
  padding: 35px 13px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-image: linear-gradient(0deg, #020b15e8, transparent 65%);
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #07111d;
  overflow: hidden;
}

.d1 .screen {
  background-image:
    linear-gradient(0deg, #020b15e8, transparent 65%),
    url("images/bundle-seasonal.png");
}

.d2 .screen {
  background-image:
    linear-gradient(0deg, #020b15e8, transparent 65%),
    url("images/bundle-typography.png");
}

.d3 .screen {
  background-image:
    linear-gradient(0deg, #020b15e8, transparent 65%),
    url("images/bundle-affirmation.png");
}

.d4 .screen {
  background-image:
    linear-gradient(0deg, #020b15e8, transparent 65%),
    url("images/bundle-birthday.png");
}
.screen small {
  font-size: clamp(12px, 1.15vw, 16px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
}
.screen h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(18px, 1.75vw, 28px);
  font-weight: 500;
  line-height: 1;
  margin: 10px 0 12px;
  letter-spacing: -0.015em;
}
.screen b {
  font-size: 7px;
  background: var(--blue);
  color: #00121f;
  padding: 8px;
  align-self: flex-start;
}
.modern-title {
  text-align: center;
  margin-top: -8px;
  text-transform: uppercase;
}
.modern-title span {
  display: block;
  font: 900 clamp(48px, 6vw, 88px)/0.8 Impact;
  color: var(--silver);
  -webkit-text-stroke: 1px #111;
}
.modern-title strong {
  display: block;
  color: var(--blue);
  font: italic 700 clamp(24px, 3vw, 42px) Georgia;
  transform: rotate(-2deg);
}
.marquee {
  overflow: hidden;
  background: var(--blue);
  color: #00121f;
  transform: rotate(-1deg) scale(1.02);
  position: relative;
  z-index: 5;
}
.marquee div {
  width: max-content;
  padding: 15px;
  font: 900 14px Arial;
  letter-spacing: 0.1em;
  animation: marquee 26s linear infinite;
}
.products {
  padding: 115px 0;
  background: #02060b;
  overflow: hidden;
}
.section-title {
  max-width: 1250px;
  margin: 0 auto 50px;
  padding: 0 5vw;
}
.section-title h2 {
  font: 900 clamp(50px, 6vw, 88px)/0.96 Impact;
  margin: 15px 0;
}
.section-title h2 em {
  color: var(--blue);
  font-style: normal;
}
.product-row {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 10px 5vw 45px;
  scroll-snap-type: x mandatory;
}
.product {
  flex: 0 0 min(340px, 80vw);
  padding: 20px;
  background: linear-gradient(145deg, #087fbf, #05263c);
  border: 1px solid #ffffff44;
  scroll-snap-align: start;
  transition: 0.4s;
}
.product:nth-child(even) {
  background: linear-gradient(145deg, #e9faff, #51caff);
  color: #06131c;
}
.product:hover {
  transform: translateY(-12px);
}
.product img {
  width: 100%;
  height: 290px;
  object-fit: cover;
}
.product h3 {
  font: 700 26px/1.05 Georgia;
}
.product b {
  font-size: 8px;
  letter-spacing: 0.13em;
}
.paths {
  padding: 115px 5vw;
  background: linear-gradient(145deg, #e9faff, #78d9ff);
  color: #06121b;
}
.paths .section-title {
  padding: 0;
}
.paths .section-title small {
  color: #0573aa;
}
.path-grid {
  max-width: 1250px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.path {
  min-height: 360px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  background: #06111a;
  color: #fff;
  border-top: 6px solid var(--blue);
  transition: 0.4s;
}
.path:nth-child(2) {
  background: #fff;
  color: #06121b;
}
.path:hover {
  transform: translateY(-12px);
}
.path span {
  font-size: 10px;
}
.path h3 {
  font: 900 40px/1 Impact;
  text-transform: uppercase;
  margin: auto 0 18px;
}
.path p {
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.72;
}
.path b {
  margin-top: 24px;
  font-size: 8px;
  letter-spacing: 0.14em;
}
.about {
  padding: 115px 5vw;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 7vw;
  align-items: center;
  background: #03070b;
}
.about-image {
  height: 520px;
  overflow: hidden;
  box-shadow: 25px 25px 0 var(--blue);
}
.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-copy h2 {
  font: 900 clamp(48px, 5vw, 78px)/0.95 Impact;
}
.about-copy h2 em {
  display: block;
  color: var(--blue);
  font-style: normal;
}
.about-copy p {
  color: #b9cbd4;
  line-height: 1.8;
}
.reviews {
  padding: 110px 5vw;
  background: #0a1722;
}
.review-grid {
  max-width: 1250px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.review-grid article {
  padding: 30px;
  background: #fff;
  color: #06121b;
  border-bottom: 6px solid var(--blue);
}
.review-grid p {
  font: italic 20px/1.6 Georgia;
}
.review-grid b {
  font-size: 10px;
}
.review-buttons {
  text-align: center;
  margin-top: 30px;
}
.review-buttons a {
  display: inline-block;
  padding: 14px 20px;
  background: var(--blue);
  color: #00121f;
  margin: 5px;
  font-size: 9px;
  font-weight: 900;
}
.community {
  padding: 45px 5vw;
  text-align: center;
  background: radial-gradient(circle, #2fc3ff, #077fbd 42%, #02070d 80%);
}
.community > div {
  max-width: 1100px;
  margin: auto;
  padding: 35px 30px;
  border: 1px solid #ffffff77;
  background: #010d17bb;
}
.community h2 {
  font: 900 clamp(48px, 6vw, 88px)/0.95 Impact;
}
.community h2 em {
  color: #8be5ff;
  font-style: normal;
}
.community p {
  max-width: 680px;
  margin: 0 auto 25px;
  line-height: 1.8;
}

.community-logo {
  display: block;
  width: min(420px, 82%);
  height: auto;
  margin: 0 auto 18px;
  object-fit: contain;
}
footer {
  text-align: center;
  padding: 65px 5vw 25px;
  background: #010306;
}
footer img {
  width: 230px;
  max-height: 90px;
  object-fit: contain;
}
footer div {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
  padding: 25px;
  border-block: 1px solid #ffffff20;
  font-size: 9px;
  text-transform: uppercase;
}
footer p {
  color: #6f818b;
  font-size: 9px;
}
.rise {
  opacity: 0;
  transform: translateY(42px);
  transition: 0.8s;
}
.rise.visible {
  opacity: 1;
  transform: none;
}
@keyframes hover {
  50% {
    translate: 0 -13px;
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 900px) {
  nav {
    display: none;
  }
  .hamb {
    display: block;
  }
  .explore {
    display: none;
  }
  nav.open {
    display: flex;
    position: fixed;
    inset: 78px 0 0;
    background: #02060bf7;
    flex-direction: column;
    padding: 45px;
    font: 30px Georgia;
    z-index: 60;
  }
  .agency-hero {
    min-height: 720px;
    background-position: 60% center;
  }
  .hero-text {
    width: 78%;
  }
  .hero-stats {
    display: none;
  }
  .creative-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 380px 190px 190px;
  }
  .grid-lead {
    grid-column: 1/3;
    grid-row: auto;
  }
  .path-grid,
  .review-grid,
  .about {
    grid-template-columns: 1fr;
  }
  .about-image {
    height: 430px;
  }
}
@media (max-width: 560px) {
  .page-shell {
    border-radius: 0 0 28px 28px;
  }
  header {
    padding: 0 16px;
  }
  .logo img {
    width: 150px;
  }
  .agency-hero {
    min-height: 650px;
    padding: 70px 20px 35px;
    background-position: 62% center;
  }
  .hero-text {
    width: 95%;
  }
  .hero-text h1 {
    font-size: 14vw;
  }
  .creative-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 340px repeat(2, 170px);
    gap: 5px;
    padding: 5px;
  }
  .grid-lead {
    padding: 28px 22px;
  }
  .grid-lead h2 {
    font-size: 12vw;
  }
  .ad {
    padding: 14px;
  }
  .ad > div {
    max-width: 76%;
  }
  .ad h3 {
    font-size: 21px;
  }
  .phone-showcase {
    min-height: 490px;
    padding: 45px 6px 28px;
  }
  .phone-row {
    height: 285px;
    gap: 5px;
  }
  .device {
    width: 24%;
    padding: 3px;
    border-radius: 15px;
  }
  .screen {
    border-radius: 11px;
    padding: 24px 6px 9px;
  }
  .screen small {
    font-size: 2.8vw;
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  .screen h3 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 3.8vw;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.015em;
  }
  .modern-title span {
    font-size: 10vw;
  }
  .products,
  .paths,
  .about,
  .reviews,
  .community {
    padding-top: 85px;
    padding-bottom: 85px;
  }
  .about {
    padding-left: 18px;
    padding-right: 18px;
  }
  .about-image {
    height: 340px;
    box-shadow: 13px 13px var(--blue);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .rise {
    opacity: 1;
    transform: none;
  }
}

/* ONE-ON-ONE BOOKING PAGE — scoped so the new homepage stays unchanged */
.one-on-one-page {
  background: #02060b;
  color: #fff;
  font-family: Montserrat, Arial, sans-serif;
}
.one-on-one-page nav {
  height: 78px;
  padding: 0 clamp(18px, 5vw, 70px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #03070c;
  border-bottom: 1px solid #28bfff55;
  position: relative;
  z-index: 30;
}
.one-on-one-page nav .logo img {
  display: block;
  width: 190px;
  max-height: 55px;
  object-fit: contain;
}
.one-on-one-page nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.one-on-one-page nav li {
  list-style: none;
}
.one-on-one-page nav a {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  padding: 10px 0;
}
.one-on-one-page nav a:hover,
.one-on-one-page .nav-booking-link {
  color: #28bfff;
  border-color: #28bfff;
}
.one-on-one-page .menu-toggle {
  display: none;
  color: #28bfff;
  font-size: 25px;
  cursor: pointer;
}
.booking-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #0c88c7, #031523 58%, #010306);
  animation: introAway 0.7s 2s forwards;
}
.booking-intro-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 30px;
}
.intro-title-wrap {
  text-align: center;
}
.intro-small-text {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3em;
  color: #dff8ff;
}
.intro-title-graphic {
  display: block;
  width: min(590px, 60vw);
  max-height: 260px;
  object-fit: contain;
}
.intro-butterfly {
  width: min(130px, 15vw);
  filter: drop-shadow(0 0 20px #28bfff);
  animation: bookingFloat 2.5s ease-in-out infinite;
}
.intro-butterfly-right {
  animation-delay: -1.2s;
}
.coaching-hero {
  min-height: 650px;
  padding: 110px 5vw;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, #02060bf2 0, #03101dd9 48%, #03101d55),
    url("images/book-your-one-on-one.png") right center/contain no-repeat,
    radial-gradient(circle at 75% 40%, #28bfff77, #05233a 38%, #02060b 72%);
}
.coaching-hero:after {
  content: "";
  position: absolute;
  right: 5%;
  bottom: -120px;
  width: 440px;
  height: 440px;
  border: 1px solid #28bfff66;
  border-radius: 50%;
  box-shadow: 0 0 80px #28bfff55;
}
.coaching-hero-content {
  position: relative;
  z-index: 2;
  max-width: 790px;
}
.coaching-eyebrow,
.one-on-one-page .section-tag {
  display: block;
  color: #8de3ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.coaching-hero h1 {
  max-width: 760px;
  margin: 18px 0 25px;
  font:
    900 clamp(60px, 7vw, 108px)/0.96 Impact,
    Arial Black,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.coaching-hero h1:after {
  content: ".";
  color: #28bfff;
}
.coaching-hero-text {
  max-width: 720px;
  color: #c6dce7;
  font-size: 17px;
  line-height: 1.8;
}
.coaching-primary-btn,
.coaching-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 25px;
  margin-top: 20px;
  background: #28bfff;
  color: #001522;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 30px #28bfff55;
  transition: 0.3s;
}
.coaching-primary-btn:hover,
.coaching-book-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px #0008;
}
.coaching-container {
  width: min(1250px, 90%);
  margin: auto;
}
.coaching-intro,
.coaching-booking-section,
.coaching-process-section,
.coaching-policy-section,
.coaching-final-cta {
  padding: 110px 0;
}
.coaching-intro {
  background: linear-gradient(145deg, #e9faff, #74d7ff);
  color: #06121b;
}
.coaching-intro .section-tag,
.coaching-booking-section .section-tag {
  color: #0576af;
}
.coaching-intro h2,
.coaching-booking-section h2,
.coaching-process-section h2,
.coaching-policy-box h2,
.coaching-final-box h2 {
  margin: 15px 0 25px;
  font:
    900 clamp(45px, 5vw, 76px)/1 Impact,
    Arial Black,
    sans-serif;
  text-transform: uppercase;
}
.coaching-intro-text {
  max-width: 900px;
  font-size: 16px;
  line-height: 1.85;
  color: #17455d;
}
.coaching-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 48px;
}
.coaching-topic-card {
  min-height: 210px;
  padding: 28px;
  background: #06121b;
  color: #fff;
  border-top: 6px solid #28bfff;
  box-shadow: 0 20px 40px #0475ac33;
  transition: 0.35s;
}
.coaching-topic-card:nth-child(even) {
  background: #fff;
  color: #06121b;
}
.coaching-topic-card:hover {
  transform: translateY(-9px);
}
.coaching-topic-card h3 {
  margin: 0 0 14px;
  font: 700 27px/1.1 Georgia;
}
.coaching-topic-card p {
  margin: 0;
  line-height: 1.7;
  opacity: 0.75;
}
.coaching-booking-section {
  background: #f7fcff;
  color: #06121b;
}
.coaching-price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 45px;
}
.coaching-price-card {
  padding: 42px;
  background: #06121b;
  color: #fff;
  border: 1px solid #ffffff2b;
  box-shadow: 0 28px 60px #00101f40;
}
.coaching-featured-card {
  background: linear-gradient(145deg, #087fbe, #03233a);
  border-color: #8ce5ff;
  transform: translateY(-15px);
}
.coaching-card-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #8de5ff;
}
.coaching-price-card h3 {
  font: 700 34px Georgia;
  margin: 18px 0;
}
.coaching-price {
  font: 900 clamp(58px, 6vw, 88px) Impact;
  color: #fff;
}
.coaching-price-card p,
.coaching-price-card li {
  color: #d2e5ed;
  line-height: 1.65;
}
.coaching-price-card ul {
  padding-left: 20px;
}
.coaching-price-card li {
  margin: 9px 0;
}
.coaching-price-note {
  text-align: center;
  color: #567282;
  margin: 30px 0 0;
}
.coaching-process-section {
  background: #02060b;
}
.coaching-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 45px;
}
.coaching-process-card {
  padding: 30px;
  background: linear-gradient(145deg, #0b89c8, #04263e);
  border-bottom: 5px solid #8de5ff;
}
.coaching-process-card > span {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #a8eaff;
}
.coaching-process-card h3 {
  font: 700 26px/1.1 Georgia;
}
.coaching-process-card p {
  color: #c7dbe5;
  line-height: 1.7;
}
.coaching-policy-section {
  background: linear-gradient(145deg, #dff8ff, #69d3ff);
  color: #06121b;
}
.coaching-policy-box {
  width: min(1050px, 90%);
  margin: auto;
  padding: 55px;
  background: #fff;
  border-left: 8px solid #087ec8;
  box-shadow: 24px 24px 0 #06121b;
}
.coaching-policy-box .section-tag {
  color: #0877b0;
}
.coaching-policy-box p {
  line-height: 1.75;
  color: #294e62;
  border-bottom: 1px solid #d7e7ee;
  padding-bottom: 14px;
}
.coaching-final-cta {
  background: radial-gradient(circle, #2cc3ff, #087fbd 42%, #02060b 82%);
}
.coaching-final-box {
  width: min(1050px, 90%);
  margin: auto;
  padding: 75px 35px;
  text-align: center;
  background: #010d17c9;
  border: 1px solid #ffffff70;
  box-shadow: 0 0 70px #28bfff55;
}
.coaching-final-box p {
  max-width: 720px;
  margin: 0 auto;
  color: #d6edf7;
  line-height: 1.8;
}
.one-on-one-page .footer {
  padding: 65px 5vw 25px;
  text-align: center;
  background: #010306;
}
.one-on-one-page .footer-logo img {
  width: 220px;
  max-height: 80px;
  object-fit: contain;
}
.one-on-one-page .footer-accent {
  width: 70px;
  height: 3px;
  margin: 20px auto;
  background: #28bfff;
  box-shadow: 0 0 15px #28bfff;
}
.one-on-one-page .footer p {
  color: #8ba0aa;
}
.one-on-one-page .footer-links {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
  margin: 25px 0;
  padding: 22px;
  border-block: 1px solid #ffffff22;
}
.one-on-one-page .footer-copy {
  font-size: 9px;
  color: #6f818b;
}
@keyframes introAway {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@keyframes bookingFloat {
  50% {
    transform: translateY(-14px) rotate(4deg);
  }
}
@media (max-width: 900px) {
  .one-on-one-page nav ul {
    display: none;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    padding: 35px;
    background: #02060bf8;
    flex-direction: column;
    align-items: flex-start;
  }
  .one-on-one-page nav ul.mobile-menu-open {
    display: flex;
  }
  .one-on-one-page .menu-toggle {
    display: block;
  }
  .coaching-hero {
    min-height: 610px;
    padding: 90px 5vw;
    background-position: 130% center;
  }
  .coaching-topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .coaching-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .one-on-one-page nav {
    padding: 0 16px;
  }
  .one-on-one-page nav .logo img {
    width: 150px;
  }
  .booking-intro-inner {
    gap: 8px;
    padding: 16px;
  }
  .intro-title-graphic {
    width: 70vw;
  }
  .intro-butterfly {
    width: 12vw;
  }
  .coaching-hero {
    min-height: 580px;
    padding: 80px 20px;
    background-image:
      linear-gradient(#02060bd9, #02060be6),
      url("images/book-your-one-on-one.png");
    background-position: center;
    background-size: cover;
  }
  .coaching-hero h1 {
    font-size: 16vw;
  }
  .coaching-hero-text {
    font-size: 15px;
  }
  .coaching-intro,
  .coaching-booking-section,
  .coaching-process-section,
  .coaching-policy-section,
  .coaching-final-cta {
    padding: 80px 0;
  }
  .coaching-topic-grid,
  .coaching-price-grid,
  .coaching-process-grid {
    grid-template-columns: 1fr;
  }
  .coaching-featured-card {
    transform: none;
  }
  .coaching-price-card {
    padding: 30px;
  }
  .coaching-policy-box {
    padding: 34px 24px;
    box-shadow: 12px 12px 0 #06121b;
  }
  .coaching-final-box {
    padding: 55px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .booking-intro-overlay {
    display: none;
  }
  .intro-butterfly {
    animation: none;
  }
}
/* Keep the welcome graphic off the main booking hero */
.one-on-one-page .coaching-hero {
  background: radial-gradient(
    circle at 78% 42%,
    #28bfff66,
    #05233a 36%,
    #02060b 72%
  ) !important;
}
/* Show the complete About photo without cropping Glam */
.about-image {
  height: auto !important;
}

.about-image img {
  display: block;
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
}
/* =========================================================
   MOBILE RESPONSIVE FIXES
   Added to keep categories accessible and prevent image crop
   ========================================================= */

@media (max-width: 900px) {
  /* Keep the category / Explore button visible on tablets and phones */
  .explore {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    flex-shrink: 0;
  }

  /* Save header space on smaller screens */
  .explore span {
    display: none;
  }

  /* Keep both mobile controls visible and aligned */
  header {
    gap: 10px;
  }

  .hamb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Make the category sidebar fit smaller screens cleanly */
  aside {
    width: min(430px, 100vw);
    max-width: 100%;
  }

  /* Prevent the homepage hero photo from aggressively cropping on mobile */
  .agency-hero {
    background-image:
      linear-gradient(90deg, #05070ed9, #030912b5 44%, #02050a66 70%),
      url("images/reference-hero.png");
    background-size: cover, contain;
    background-position:
      center,
      center bottom;
    background-repeat: no-repeat;
    background-color: #02050a;
  }
}

@media (max-width: 560px) {
  /* Mobile header spacing */
  header {
    padding: 0 12px;
  }

  .logo img {
    width: 138px;
  }

  .explore,
  .hamb {
    min-width: 40px;
    min-height: 40px;
    padding: 0 10px;
  }

  /* Full-width category drawer on phones */
  aside {
    width: 100vw;
    max-width: 100vw;
    padding: 22px 18px 32px;
  }

  aside > a {
    min-height: 58px;
    grid-template-columns: 32px 1fr auto;
    font-size: 17px;
  }

  /* Preserve the full hero image as much as possible on narrow phones */
  .agency-hero {
    min-height: 650px;
    padding: 70px 20px 35px;
    background-image:
      linear-gradient(180deg, #02050acc 0%, #02050a99 42%, #02050abb 100%),
      url("images/reference-hero.png");
    background-size: cover, contain;
    background-position:
      center,
      center bottom;
    background-repeat: no-repeat;
    background-color: #02050a;
  }

  .hero-text {
    width: 100%;
    max-width: 100%;
  }

  /* Keep text from overflowing narrow screens */
  .hero-text h1,
  .grid-lead h2,
  .section-title h2,
  .about-copy h2,
  .community h2 {
    overflow-wrap: anywhere;
  }

  /* Keep the About photo fully visible */
  .about-image {
    height: auto !important;
  }

  .about-image img {
    display: block;
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}

/* =========================================================
   FINAL MOBILE MENU + HEADER FIX
   - One hamburger on mobile
   - Hamburger opens category drawer
   - No full-screen mobile nav overlay
   - Header is not sticky/fixed on mobile
   ========================================================= */

@media (max-width: 900px) {
  /* Desktop navigation stays hidden on mobile */
  #topNav,
  #topNav.open {
    display: none !important;
  }

  /* Hide desktop Explore button on mobile */
  .explore {
    display: none !important;
  }

  /* Show one mobile hamburger */
  .hamb {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-width: 48px;
    min-height: 48px;
    padding: 0 15px;
    font-size: 20px;
  }

  /* Explicitly prevent a sticky/fixed website header */
  header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
  }

  /* Drawer remains the only mobile menu */
  aside {
    position: fixed;
    top: 0;
    right: 0;
    width: min(430px, 92vw);
    max-width: 92vw;
    height: 100dvh;
    z-index: 80;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 560px) {
  header {
    height: 74px;
    padding: 0 14px;
  }

  .logo img {
    width: 150px;
    max-width: 62vw;
  }

  .hamb {
    min-width: 48px;
    min-height: 48px;
    padding: 0 14px;
  }

  /* Give the drawer a little breathing room instead of a full-screen wall */
  aside {
    width: 90vw;
    max-width: 360px;
    padding: 24px 20px 32px;
  }

  aside > div {
    position: static;
    background: transparent;
  }

  aside > a {
    min-height: 58px;
    font-size: 17px;
  }
}

/* =========================================================
   WORKSHOPS PAGE
   ========================================================= */

.workshops-page {
  background: #02060b;
}

.workshops-hero {
  min-height: 610px;
  padding: 95px 7%;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 38%, #28bfff55, transparent 28%),
    linear-gradient(135deg, #02050a 0%, #061b2b 52%, #087ec8 125%);
}

.workshops-hero:after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -90px;
  bottom: -180px;
  border-radius: 50%;
  border: 1px solid #ffffff28;
  box-shadow:
    0 0 80px #28bfff33,
    inset 0 0 80px #28bfff22;
}

.workshops-hero-copy {
  width: min(820px, 100%);
  position: relative;
  z-index: 2;
}

.workshops-hero-copy > small,
.workshop-section-heading > small,
.workshop-feature-copy > small,
.workshop-portal-box > small,
.workshop-support small {
  display: block;
  color: #9be9ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.workshops-hero h1 {
  margin: 20px 0 24px;
  font:
    900 clamp(58px, 7vw, 106px)/0.94 Impact,
    Arial Black,
    sans-serif;
  text-transform: uppercase;
}

.workshops-hero h1 em,
.workshop-section-heading h2 em,
.workshop-portal-box h2 em {
  color: #28bfff;
  font-style: normal;
}

.workshops-hero p {
  max-width: 650px;
  color: #c4d9e4;
  font-size: 16px;
  line-height: 1.8;
}

.workshops-hero a,
.workshop-primary-button,
.upcoming-workshop-card a,
.portal-button,
.workshop-support a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  margin-top: 18px;
  background: #28bfff;
  color: #001522;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  box-shadow: 0 0 28px #28bfff44;
  transition: 0.3s;
}

.workshops-hero a:hover,
.workshop-primary-button:hover,
.upcoming-workshop-card a:hover,
.portal-button:hover,
.workshop-support a:hover {
  transform: translateY(-4px);
}

.workshop-container {
  width: min(1240px, 90%);
  margin: auto;
}

.workshop-feature {
  padding: 110px 0;
  background: #f5fbff;
  color: #06121b;
}

.workshop-section-heading {
  max-width: 860px;
  margin-bottom: 45px;
}

.workshop-section-heading > small {
  color: #0875ad;
}

.workshop-section-heading h2 {
  margin: 14px 0 20px;
  font:
    900 clamp(48px, 6vw, 82px)/0.96 Impact,
    Arial Black,
    sans-serif;
  text-transform: uppercase;
}

.workshop-section-heading p {
  color: #3e6173;
  font-size: 15px;
  line-height: 1.8;
}

.workshop-feature-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  background: #07121b;
  color: #fff;
  box-shadow: 0 34px 80px #0015222b;
}

.workshop-feature-media {
  min-height: 490px;
  padding: 28px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 55% 45%, #38c5ff66, transparent 30%),
    linear-gradient(145deg, #08253a, #02060b 68%);
}

.workshop-feature-media:before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid #ffffff24;
}

.workshop-status {
  position: absolute;
  left: 28px;
  top: 28px;
  z-index: 2;
  padding: 9px 11px;
  background: #e9faff;
  color: #052033;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.workshop-art {
  position: relative;
  z-index: 2;
  width: 82%;
  padding: 44px 28px;
  text-align: center;
  border: 1px solid #28bfff99;
  box-shadow:
    0 0 55px #28bfff2b,
    inset 0 0 45px #28bfff1d;
}

.workshop-art span,
.workshop-art small {
  display: block;
  color: #a5eaff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.workshop-art strong {
  display: block;
  margin: 20px 0;
  color: #fff;
  font:
    900 clamp(38px, 4vw, 62px)/0.96 Impact,
    Arial Black,
    sans-serif;
}

.workshop-feature-copy {
  padding: clamp(36px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.workshop-feature-copy h3 {
  margin: 15px 0 20px;
  font:
    700 clamp(31px, 3.2vw, 48px)/1.05 Georgia,
    serif;
}

.workshop-feature-copy p {
  color: #c9dae3;
  line-height: 1.8;
}

.workshop-detail-grid {
  margin: 24px 0 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid #ffffff1f;
}

.workshop-detail-grid > div {
  padding: 19px 15px 19px 0;
}

.workshop-detail-grid b,
.workshop-detail-grid span {
  display: block;
}

.workshop-detail-grid b {
  margin-bottom: 7px;
  color: #86e1ff;
  font-size: 8px;
  letter-spacing: 0.15em;
}

.workshop-detail-grid span {
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
}

.workshop-primary-button {
  align-self: flex-start;
}

.workshop-upcoming {
  padding: 110px 0;
  background: linear-gradient(145deg, #dff8ff, #72d5ff);
  color: #06121b;
}

.light-heading {
  margin-bottom: 38px;
}

.upcoming-workshop-card {
  min-height: 300px;
  padding: clamp(32px, 5vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #06121b;
  color: #fff;
  border-left: 7px solid #28bfff;
  box-shadow: 26px 26px 0 #087ec8;
}

.upcoming-workshop-card:after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -90px;
  top: -90px;
  border-radius: 50%;
  border: 1px solid #28bfff55;
  box-shadow: 0 0 55px #28bfff33;
}

.upcoming-label {
  align-self: flex-start;
  padding: 8px 11px;
  background: #28bfff;
  color: #001522;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.upcoming-workshop-card h3 {
  margin: 22px 0 14px;
  font:
    700 clamp(30px, 4vw, 48px) Georgia,
    serif;
}

.upcoming-workshop-card p {
  max-width: 680px;
  color: #c6d9e3;
  line-height: 1.75;
}

.upcoming-workshop-card a {
  align-self: flex-start;
}

.workshop-portal-section {
  padding: 120px 5vw;
  background: radial-gradient(
    circle at 50% 40%,
    #087ec8 0%,
    #052640 30%,
    #02060b 72%
  );
}

.workshop-portal-box {
  width: min(1040px, 100%);
  margin: auto;
  padding: clamp(50px, 7vw, 80px) clamp(25px, 5vw, 55px);
  text-align: center;
  background: #010b13d6;
  border: 1px solid #ffffff4d;
  box-shadow: 0 0 75px #28bfff33;
}

.workshop-portal-box h2 {
  margin: 17px 0 22px;
  font:
    900 clamp(48px, 6vw, 82px)/0.97 Impact,
    Arial Black,
    sans-serif;
}

.workshop-portal-box p {
  max-width: 700px;
  margin: 0 auto;
  color: #d0e3ec;
  line-height: 1.8;
}

.portal-link-placeholder {
  opacity: 0.55;
  pointer-events: none;
}

.workshop-support {
  padding: 85px 0;
  background: #f7fcff;
  color: #06121b;
}

.workshop-support-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}

.workshop-support h2 {
  margin: 12px 0;
  font:
    900 clamp(38px, 5vw, 64px)/1 Impact,
    Arial Black,
    sans-serif;
  text-transform: uppercase;
}

.workshop-support p {
  max-width: 700px;
  margin: 0;
  color: #46687a;
  line-height: 1.7;
}

.workshop-support a {
  flex: 0 0 auto;
  margin-top: 0;
}

@media (max-width: 900px) {
  .workshop-feature-card {
    grid-template-columns: 1fr;
  }
  .workshop-feature-media {
    min-height: 410px;
  }
  .workshop-support-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .workshop-detail-grid {
    grid-template-columns: 1fr;
  }
  .workshop-detail-grid > div {
    border-bottom: 1px solid #ffffff16;
  }
}

@media (max-width: 560px) {
  .workshops-hero {
    min-height: 560px;
    padding: 80px 20px 60px;
  }

  .workshops-hero h1 {
    font-size: 15vw;
  }

  .workshop-feature,
  .workshop-upcoming {
    padding: 82px 0;
  }

  .workshop-feature-media {
    min-height: 340px;
    padding: 18px;
  }

  .workshop-feature-media:before {
    inset: 15px;
  }

  .workshop-art {
    width: 90%;
    padding: 38px 16px;
  }

  .workshop-feature-copy {
    padding: 34px 24px 38px;
  }

  .upcoming-workshop-card {
    box-shadow: 12px 12px 0 #087ec8;
  }

  .workshop-portal-section {
    padding: 85px 18px;
  }

  .workshop-support {
    padding: 75px 0;
  }
}

/* =========================================================
   BEST SELLERS — SINGLE CLEAN INFINITE CAROUSEL
   ========================================================= */
.products {
  overflow: hidden;
}

.product-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 10px 0 45px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  scrollbar-width: none;

  animation-name: glamBestSellerScroll !important;
  animation-duration: 40s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;

  will-change: transform;
}

.product-row::-webkit-scrollbar {
  display: none;
}

.product-row:hover {
  animation-play-state: paused !important;
}

@keyframes glamBestSellerScroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - 11px), 0, 0);
  }
}

/* =========================================================
   GLAM HUSTLE HUB — LUMINOUS BRAND TEMPLATE REFRESH
   Keeps the approved layout and functionality unchanged.
   ========================================================= */

:root {
  --blue: #168fea;
  --deep: #103b63;
  --ice: #edf9ff;
  --black: #171a1e;
  --silver: #dfe7ee;
  --white: #ffffff;
  --pearl: #f8fcff;
  --chrome: linear-gradient(
    135deg,
    #ffffff 0%,
    #cbd6df 21%,
    #ffffff 42%,
    #9cacb9 62%,
    #f8fcff 83%,
    #c8d3dc 100%
  );
  --sapphire-gloss: linear-gradient(
    135deg,
    #62c7ff 0%,
    #168fea 38%,
    #0d70c4 68%,
    #103b63 100%
  );
  --pearl-surface:
    radial-gradient(circle at 14% 18%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 83% 22%, #7dd0ff 0 1px, transparent 2px),
    radial-gradient(circle at 76% 78%, #ffffff 0 2px, transparent 3px),
    linear-gradient(145deg, #ffffff 0%, #eef9ff 48%, #dcecf7 100%);
  --soft-shadow: 0 22px 55px rgba(16, 59, 99, 0.16);
  --glam-shadow:
    0 20px 50px rgba(16, 59, 99, 0.2),
    0 0 30px rgba(22, 143, 234, 0.22);
}

body,
.workshops-page,
.one-on-one-page {
  background:
    radial-gradient(circle at 8% 12%, rgba(22, 143, 234, 0.14), transparent 25%),
    radial-gradient(circle at 92% 35%, rgba(215, 232, 244, 0.72), transparent 22%),
    linear-gradient(145deg, #ffffff, #edf8ff 54%, #d9ecf8);
  color: var(--black);
  font-family: "Lato", Arial, sans-serif;
}

.page-shell {
  background: var(--pearl);
  box-shadow:
    0 35px 90px rgba(16, 59, 99, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.9);
}

header,
.one-on-one-page nav {
  background: rgba(255, 255, 255, 0.94);
  color: var(--deep);
  border-bottom: 1px solid rgba(16, 59, 99, 0.18);
  box-shadow:
    0 9px 28px rgba(16, 59, 99, 0.11),
    inset 0 -1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
}

nav,
.explore,
.hamb,
.hero-text > a,
.grid-lead > a,
.about-copy > a,
.community a,
.review-buttons a,
.screen b,
.workshops-hero a,
.workshop-primary-button,
.upcoming-workshop-card a,
.portal-button,
.workshop-support a,
.coaching-primary-btn,
.coaching-book-btn {
  font-family: "Lato", Arial, sans-serif;
}

nav a:hover,
.one-on-one-page nav a:hover,
.one-on-one-page .nav-booking-link {
  color: var(--blue);
  border-color: var(--blue);
}

.explore,
.hamb,
.hero-text > a,
.grid-lead > a,
.about-copy > a,
.community a,
.review-buttons a,
.screen b,
.workshops-hero a,
.workshop-primary-button,
.upcoming-workshop-card a,
.portal-button,
.workshop-support a,
.coaching-primary-btn,
.coaching-book-btn {
  position: relative;
  overflow: hidden;
  background: var(--sapphire-gloss);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 10px 25px rgba(22, 143, 234, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -2px 5px rgba(16, 59, 99, 0.35);
  text-shadow: 0 1px 1px rgba(16, 59, 99, 0.32);
}

.explore:before,
.hero-text > a:before,
.grid-lead > a:before,
.about-copy > a:before,
.community a:before,
.review-buttons a:before,
.workshops-hero a:before,
.workshop-primary-button:before,
.portal-button:before,
.workshop-support a:before,
.coaching-primary-btn:before,
.coaching-book-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.7) 47%, transparent 63%);
  transform: translateX(-140%);
  transition: transform 0.65s ease;
  pointer-events: none;
}

.explore:hover:before,
.hero-text > a:hover:before,
.grid-lead > a:hover:before,
.about-copy > a:hover:before,
.community a:hover:before,
.review-buttons a:hover:before,
.workshops-hero a:hover:before,
.workshop-primary-button:hover:before,
.portal-button:hover:before,
.workshop-support a:hover:before,
.coaching-primary-btn:hover:before,
.coaching-book-btn:hover:before {
  transform: translateX(140%);
}

aside {
  background:
    radial-gradient(circle at 86% 12%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 15% 78%, #ffffff 0 2px, transparent 3px),
    linear-gradient(145deg, #ffffff 0%, #9edcff 45%, #168fea 100%);
  color: var(--deep);
  box-shadow: -25px 0 60px rgba(16, 59, 99, 0.3);
}

aside > div,
aside > a {
  border-color: rgba(16, 59, 99, 0.2);
}

aside > a:hover {
  background: rgba(255, 255, 255, 0.55);
}

.agency-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(239,248,255,.94) 39%, rgba(229,245,255,.38) 67%, rgba(16,59,99,.05) 100%),
    url("images/reference-hero.png") center/cover;
  color: var(--black);
  border-bottom: 1px solid rgba(16, 59, 99, 0.17);
}

.agency-hero:before,
.workshops-hero:before,
.coaching-hero:before,
.community:before,
.phone-showcase:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 16%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 28% 75%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 14%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 62%, rgba(255,255,255,.9) 0 1px, transparent 2px);
  opacity: 0.86;
}

.hero-text > small,
.grid-lead > small,
.section-title > small,
.about-copy > small,
.workshops-hero-copy > small,
.workshop-section-heading > small,
.workshop-feature-copy > small,
.workshop-portal-box > small,
.workshop-support small,
.coaching-eyebrow,
.one-on-one-page .section-tag {
  color: var(--blue);
  font-family: "Cinzel", Georgia, serif;
}

.hero-text h1,
.grid-lead h2,
.section-title h2,
.path h3,
.about-copy h2,
.community h2,
.workshops-hero h1,
.workshop-section-heading h2,
.workshop-portal-box h2,
.workshop-support h2,
.coaching-hero h1,
.coaching-intro h2,
.coaching-booking-section h2,
.coaching-process-section h2,
.coaching-policy-box h2,
.coaching-final-box h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.hero-text h1 em,
.grid-lead h2 em,
.section-title h2 em,
.about-copy h2 em,
.community h2 em,
.workshops-hero h1 em,
.workshop-section-heading h2 em,
.workshop-portal-box h2 em {
  color: var(--blue);
  text-shadow:
    0 2px 0 #ffffff,
    0 0 22px rgba(22, 143, 234, 0.38);
}

.hero-text p,
.grid-lead p,
.about-copy p,
.workshops-hero p,
.workshop-section-heading p,
.workshop-support p,
.coaching-hero-text,
.coaching-intro-text {
  color: #36566c;
}

.hero-stats {
  color: var(--deep);
}

.hero-stats p {
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(9px);
}

.hero-stats span {
  color: #53758b;
}

.creative-grid {
  background: linear-gradient(145deg, #c6e8fa, #ffffff 45%, #dcecf6);
}

.grid-lead {
  color: var(--black);
  background: var(--pearl-surface);
  border: 1px solid #ffffff;
  box-shadow: inset 0 0 40px rgba(255,255,255,.9);
}

.ad {
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.16);
}

.ad:after {
  background: linear-gradient(90deg, rgba(16,59,99,.88), rgba(16,59,99,.42) 48%, transparent 80%);
}

.ad b {
  background: var(--chrome);
  color: var(--deep);
  border: 1px solid #ffffff;
  box-shadow: 0 6px 20px rgba(16,59,99,.22);
}

.phone-showcase {
  background:
    radial-gradient(ellipse at 50% 74%, rgba(22,143,234,.55), transparent 42%),
    radial-gradient(circle at 13% 18%, rgba(255,255,255,.94) 0 2px, transparent 3px),
    linear-gradient(145deg, #ffffff 0%, #dff4ff 34%, #71c7f6 72%, #168fea 120%);
  color: var(--deep);
}

.device {
  background: var(--chrome);
  border: 2px solid rgba(255,255,255,.94);
  box-shadow:
    0 32px 50px rgba(16, 59, 99, 0.27),
    0 0 30px rgba(255,255,255,.85),
    inset 0 0 8px rgba(255,255,255,.9);
}

.modern-title span {
  color: #ffffff;
  -webkit-text-stroke: 1px rgba(16, 59, 99, 0.35);
  text-shadow:
    0 2px 0 #a7b9c7,
    0 6px 18px rgba(16, 59, 99, 0.2),
    0 0 24px rgba(255,255,255,.85);
}

.modern-title strong {
  color: var(--deep);
  font-family: "Playfair Display", Georgia, serif;
  text-shadow: 0 1px 0 #fff;
}

.marquee {
  background: var(--sapphire-gloss);
  color: #ffffff;
  border-block: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 8px 24px rgba(16,59,99,.22),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.products {
  background:
    radial-gradient(circle at 7% 18%, rgba(22,143,234,.14), transparent 22%),
    radial-gradient(circle at 93% 80%, rgba(16,59,99,.12), transparent 24%),
    linear-gradient(145deg, #ffffff, #edf8ff 50%, #dcecf6);
  color: var(--black);
}

.product {
  background: linear-gradient(145deg, #ffffff, #e7f5fd);
  color: var(--deep);
  border: 1px solid #ffffff;
  box-shadow: var(--soft-shadow);
}

.product:nth-child(even) {
  background: linear-gradient(145deg, #8ed8ff, #168fea 68%, #0e70bd);
  color: #ffffff;
}

.product img {
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 12px 30px rgba(16,59,99,.16);
}

.paths {
  background:
    radial-gradient(circle at 12% 22%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 87% 76%, #ffffff 0 2px, transparent 3px),
    linear-gradient(145deg, #f9fdff, #bce8ff 50%, #70c9f7);
  color: var(--deep);
}

.path,
.path:nth-child(2) {
  background: rgba(255, 255, 255, 0.92);
  color: var(--deep);
  border: 1px solid rgba(255,255,255,.95);
  border-top: 6px solid var(--blue);
  box-shadow: var(--glam-shadow);
}

.path:nth-child(2) {
  background: var(--sapphire-gloss);
  color: #ffffff;
}

.about {
  background:
    radial-gradient(circle at 86% 18%, rgba(22,143,234,.15), transparent 24%),
    linear-gradient(145deg, #ffffff, #edf8ff 64%, #dcebf5);
  color: var(--black);
}

.about-image {
  border: 5px solid #ffffff;
  box-shadow:
    18px 18px 0 var(--blue),
    24px 24px 0 #c4d0d9,
    0 30px 65px rgba(16,59,99,.2);
}

.reviews {
  background:
    radial-gradient(circle at 9% 18%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 90% 28%, #ffffff 0 1px, transparent 2px),
    linear-gradient(145deg, #168fea, #60c4fa 48%, #dff4ff 115%);
  color: #ffffff;
}

.reviews .section-title > small,
.reviews .section-title h2 em {
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(16,59,99,.34);
}

.review-grid article {
  background: rgba(255,255,255,.94);
  color: var(--deep);
  border: 1px solid rgba(255,255,255,.95);
  border-bottom: 6px solid var(--deep);
  box-shadow: var(--glam-shadow);
}

.community {
  position: relative;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.9), transparent 18%),
    linear-gradient(145deg, #ffffff, #bfe9ff 42%, #168fea 115%);
  color: var(--deep);
}

.community > div {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.74);
  border: 1px solid #ffffff;
  box-shadow:
    0 24px 65px rgba(16,59,99,.2),
    inset 0 0 45px rgba(255,255,255,.72);
  backdrop-filter: blur(9px);
}

.community h2 em {
  color: var(--blue);
}

footer,
.one-on-one-page .footer {
  background:
    radial-gradient(circle at 50% 0, rgba(22,143,234,.14), transparent 34%),
    linear-gradient(145deg, #ffffff, #e8f5fc);
  color: var(--deep);
  border-top: 1px solid rgba(16,59,99,.15);
}

footer div,
.one-on-one-page .footer-links {
  border-color: rgba(16,59,99,.16);
}

footer p,
.one-on-one-page .footer p,
.one-on-one-page .footer-copy {
  color: #648094;
}

/* Workshops page */
.workshops-hero {
  background:
    radial-gradient(circle at 82% 38%, rgba(255,255,255,.85), transparent 19%),
    linear-gradient(135deg, #ffffff 0%, #dff4ff 47%, #6fc9f8 100%);
  color: var(--deep);
}

.workshops-hero p {
  color: #36566c;
}

.workshops-hero-copy > small {
  color: var(--blue);
}

.workshop-feature,
.workshop-support {
  background: var(--pearl-surface);
  color: var(--deep);
}

.workshop-feature-card {
  background: #ffffff;
  color: var(--deep);
  border: 1px solid #ffffff;
  box-shadow: var(--glam-shadow);
}

.workshop-feature-media {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.92), transparent 23%),
    linear-gradient(145deg, #8ed9ff, #168fea 60%, #103b63);
}

.workshop-art {
  background: rgba(16,59,99,.35);
  border-color: rgba(255,255,255,.85);
  box-shadow:
    0 0 55px rgba(255,255,255,.28),
    inset 0 0 45px rgba(255,255,255,.15);
}

.workshop-feature-copy p {
  color: #46667a;
}

.workshop-detail-grid {
  border-color: rgba(16,59,99,.16);
}

.workshop-detail-grid span {
  color: var(--deep);
}

.workshop-upcoming {
  background:
    radial-gradient(circle at 9% 15%, #ffffff 0 2px, transparent 3px),
    linear-gradient(145deg, #f8fdff, #bde9ff 52%, #66c5f6);
}

.upcoming-workshop-card {
  background: rgba(255,255,255,.94);
  color: var(--deep);
  border: 1px solid #ffffff;
  border-left: 7px solid var(--blue);
  box-shadow:
    20px 20px 0 rgba(22,143,234,.8),
    var(--soft-shadow);
}

.upcoming-workshop-card p {
  color: #45677b;
}

.workshop-portal-section {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.92), transparent 18%),
    linear-gradient(145deg, #dff4ff, #60c5fa 52%, #168fea);
}

.workshop-portal-box {
  background: rgba(255,255,255,.82);
  color: var(--deep);
  border-color: #ffffff;
  box-shadow: var(--glam-shadow);
  backdrop-filter: blur(10px);
}

.workshop-portal-box p {
  color: #42647a;
}

/* One-on-one page */
.booking-intro-overlay {
  background:
    radial-gradient(circle, rgba(255,255,255,.96), rgba(184,232,255,.94) 48%, rgba(22,143,234,.96));
}

.intro-small-text {
  color: var(--deep);
}

.coaching-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0, rgba(232,247,255,.93) 47%, rgba(216,241,255,.22)),
    url("images/book-your-one-on-one.png") right center/contain no-repeat,
    linear-gradient(145deg, #ffffff, #8bd6fd);
  color: var(--black);
}

.coaching-hero:after {
  border-color: rgba(22,143,234,.35);
  box-shadow: 0 0 80px rgba(22,143,234,.25);
}

.coaching-intro,
.coaching-booking-section,
.coaching-policy-section {
  background: var(--pearl-surface);
  color: var(--deep);
}

.coaching-topic-card,
.coaching-topic-card:nth-child(even),
.coaching-price-card,
.coaching-featured-card,
.coaching-process-card {
  background: rgba(255,255,255,.94);
  color: var(--deep);
  border: 1px solid #ffffff;
  border-top: 6px solid var(--blue);
  box-shadow: var(--soft-shadow);
}

.coaching-featured-card {
  background: var(--sapphire-gloss);
  color: #ffffff;
}

.coaching-featured-card p,
.coaching-featured-card li,
.coaching-featured-card .coaching-price {
  color: #ffffff;
}

.coaching-price-card:not(.coaching-featured-card) p,
.coaching-price-card:not(.coaching-featured-card) li,
.coaching-price-card:not(.coaching-featured-card) .coaching-price {
  color: var(--deep);
}

.coaching-process-section {
  background:
    radial-gradient(circle at 12% 20%, #ffffff 0 2px, transparent 3px),
    linear-gradient(145deg, #168fea, #6dccf9 55%, #dff4ff);
  color: #ffffff;
}

.coaching-process-card p {
  color: #46667a;
}

.coaching-policy-box {
  background: rgba(255,255,255,.95);
  border-left-color: var(--blue);
  box-shadow:
    18px 18px 0 #a9b8c4,
    var(--soft-shadow);
}

.coaching-final-cta {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.9), transparent 20%),
    linear-gradient(145deg, #dff4ff, #67c8f8 56%, #168fea);
}

.coaching-final-box {
  background: rgba(255,255,255,.82);
  color: var(--deep);
  border-color: #ffffff;
  box-shadow: var(--glam-shadow);
  backdrop-filter: blur(10px);
}

.coaching-final-box p {
  color: #42647a;
}

@media (max-width: 760px) {
  header,
  .one-on-one-page nav {
    background: rgba(255,255,255,.97);
  }

  .agency-hero {
    background:
      linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(235,248,255,.88) 60%, rgba(16,59,99,.25) 100%),
      url("images/hero-mobile.jpg") center top/cover;
  }

  .hero-text {
    color: var(--black);
  }

  .hero-stats p {
    background: rgba(255,255,255,.85);
  }

  .coaching-hero {
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(227,246,255,.9) 66%, rgba(22,143,234,.22)),
      url("images/book-your-one-on-one.png") center bottom/contain no-repeat;
  }

  .about-image {
    box-shadow:
      10px 10px 0 var(--blue),
      15px 15px 0 #c4d0d9,
      0 24px 45px rgba(16,59,99,.18);
  }
}

/* Compact Glam Vault callout */
.community {
  padding: 30px 5vw;
}

.community > div {
  padding: 24px 28px 28px;
}

.community-logo {
  width: min(310px, 68%);
  max-height: 185px;
  margin: 0 auto 4px;
}

.community h2 {
  margin: 10px 0 14px;
  font-size: clamp(38px, 4.8vw, 66px);
  line-height: 1;
}

.community p {
  margin: 0 auto 16px;
  line-height: 1.65;
}

.community a {
  margin-top: 4px;
}

@media (max-width: 560px) {
  .community {
    padding: 22px 16px;
  }

  .community > div {
    padding: 20px 18px 24px;
  }

  .community-logo {
    width: min(250px, 78%);
    max-height: 150px;
  }

  .community h2 {
    margin-top: 8px;
    font-size: clamp(34px, 11vw, 48px);
  }
}

/* =========================================================
   GLAM PUBLISHED WEBSITE RUNTIME
========================================================= */

.glam-published-theme-active {
  --glam-live-primary:
    var(--glam-published-primary, #168fea);

  --glam-live-secondary:
    var(--glam-published-secondary, #103b63);

  --glam-live-accent:
    var(--glam-published-accent, #ffffff);
}


/* Published button colors */

.glam-published-theme-active
a[class*="btn"],
.glam-published-theme-active
button[class*="btn"],
.glam-published-theme-active
.cta,
.glam-published-theme-active
[class*="button"] {
  --glam-runtime-button-bg:
    var(--glam-published-button-bg, #168fea);

  --glam-runtime-button-text:
    var(--glam-published-button-text, #ffffff);
}


/* Mansion hotspot runtime */

[data-glam-hover="glow"]:hover {
  box-shadow:
    0 0 25px
    rgba(22, 143, 234, 0.6);
}

[data-glam-hover="lift"]:hover {
  transform:
    translateY(-4px);
}

[data-glam-hover="zoom"]:hover {
  transform:
    scale(1.05);
}

[data-glam-hover="outline"]:hover {
  outline:
    2px solid
    var(--glam-live-primary);
}


/* =========================================================
   SECTION ANIMATIONS
========================================================= */

.glam-live-fade-up {
  animation:
    glamLiveFadeUp
    0.7s ease both;
}

.glam-live-fade-in {
  animation:
    glamLiveFadeIn
    0.7s ease both;
}

.glam-live-slide-left {
  animation:
    glamLiveSlideLeft
    0.7s ease both;
}

.glam-live-slide-right {
  animation:
    glamLiveSlideRight
    0.7s ease both;
}

.glam-live-pop {
  animation:
    glamLivePop
    0.55s ease both;
}

.glam-live-float,
[data-glam-animation="float"] {
  animation:
    glamLiveFloat
    3.4s ease-in-out infinite;
}

.glam-live-soft-glow,
[data-glam-animation="soft-glow"] {
  animation:
    glamLiveGlow
    3s ease-in-out infinite;
}

[data-glam-animation="pulse"] {
  animation:
    glamLivePulse
    2.8s ease-in-out infinite;
}


@keyframes glamLiveFadeUp {

  from {
    opacity: 0;
    transform:
      translateY(20px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }

}


@keyframes glamLiveFadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


@keyframes glamLiveSlideLeft {

  from {
    opacity: 0;
    transform:
      translateX(-24px);
  }

  to {
    opacity: 1;
    transform:
      translateX(0);
  }

}


@keyframes glamLiveSlideRight {

  from {
    opacity: 0;
    transform:
      translateX(24px);
  }

  to {
    opacity: 1;
    transform:
      translateX(0);
  }

}


@keyframes glamLivePop {

  from {
    opacity: 0;
    transform:
      scale(0.96);
  }

  to {
    opacity: 1;
    transform:
      scale(1);
  }

}


@keyframes glamLiveFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-6px);
  }

}


@keyframes glamLiveGlow {

  0%,
  100% {
    filter:
      brightness(1);
  }

  50% {
    filter:
      brightness(1.08);
  }

}


@keyframes glamLivePulse {

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

  50% {
    transform:
      scale(1.025);
  }

}


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

  .glam-live-fade-up,
  .glam-live-fade-in,
  .glam-live-slide-left,
  .glam-live-slide-right,
  .glam-live-pop,
  .glam-live-float,
  .glam-live-soft-glow,
  [data-glam-animation] {
    animation:
      none !important;
  }

}