/* ==========================================================================
   Healing by Sargam — Main stylesheet
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset and base
   3.  Layout helpers
   4.  Buttons and links
   5.  Header and navigation
   5b. Mega menu
   6.  Hero
   6b. Carousel (shared)
   7.  Services
   8.  Healers
   9.  Award
   10. Booking steps
   11. Reviews
   12. Journal
   12b. Inner pages
   12c. Profile pages and journal
   12d. Service artwork and motion
   12e. Sticky booking button, shop and product pages
   12g. Issues we help you with
   12f. Daily panchang bar
   12h. Personal Day (Home page)
   12i. Home product showcase
   13a. Newsletter sign-up and the order reference
   13b. Signature services
   13. Footer
   14. Scroll reveal
   15. Page transitions
   16. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Brand colors, taken from the logo */
  --plum-950: #1e0836;
  --plum-900: #2a0d42;
  --plum-800: #32124c;
  --plum-600: #6b3fa0;
  --lavender: #9b7fc0;

  --gold: #d9a441;
  --gold-bright: #f6ad1f;
  --gold-deep: #8a5a0c;
  --orange: #f28c28;
  --whatsapp: #25d366;

  /* Surfaces and text */
  --paper: #fbf9fe;
  --mist: #f5f1fb;
  --white: #ffffff;
  --ink: #1c1226;
  --ink-soft: #5c4a72;

  /* Lines */
  --line: rgba(50, 18, 76, 0.12);
  --line-strong: rgba(138, 90, 12, 0.35);
  --line-on-dark: rgba(255, 255, 255, 0.16);

  /* Typography */
  --font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-body: "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;

  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.2rem, 1.8vw, 1.55rem);
  --text-2xl: clamp(1.4rem, 2.2vw, 2rem);
  --text-hero: clamp(1.9rem, 3.8vw, 3rem);

  /* Spacing and shape */
  --space-section: clamp(4.5rem, 9vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1200px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --header-height: 90px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

p {
  font-size: 0.85rem;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--plum-800);
  color: var(--white);
  border-radius: var(--radius-sm);
  transition: top 0.2s;
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
}

/* A tighter section, for content that does not need much breathing room */
.section--compact {
  padding-block: clamp(3rem, 6vw, 4.75rem);
}

.section--compact .section__head {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.section--paper {
  background: var(--paper);
}

.section--mist {
  background: var(--mist);
}

.section--dark {
  background: var(--plum-900);
  color: var(--white);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section__title {
  max-width: 18ch;
  font-size: var(--text-2xl);
  color: var(--plum-800);
}

.section__title--single {
  max-width: none;
}

.section--dark .section__title {
  color: var(--white);
}


/* ==========================================================================
   4. Buttons and links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
  text-align: center;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.btn--sm {
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
}

.btn--gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--plum-950);
  box-shadow: 0 6px 20px rgba(246, 173, 31, 0.28);
}

.btn--gold:hover {
  box-shadow: 0 10px 32px rgba(246, 173, 31, 0.5);
}

.btn--whatsapp {
  background: var(--whatsapp);
  color: #0a2e1a;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

.btn--whatsapp:hover {
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
}

.btn--plum {
  background: var(--plum-800);
  color: var(--white);
}

.btn--plum:hover {
  background: var(--plum-600);
  box-shadow: 0 8px 24px rgba(50, 18, 76, 0.25);
}

.btn--outline-light {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.btn--outline-light:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

.btn--outline-dark {
  border-color: var(--plum-800);
  color: var(--plum-800);
}

.btn--outline-dark:hover {
  background: var(--plum-800);
  color: var(--white);
}

/* Breathing glow, used once on the main hero button */
.btn--glow {
  animation: btn-glow 4.5s ease-in-out infinite;
}

@keyframes btn-glow {
  0%,
  100% {
    box-shadow: 0 6px 20px rgba(246, 173, 31, 0.28);
  }
  50% {
    box-shadow: 0 6px 34px rgba(246, 173, 31, 0.55);
  }
}

/* Text link with an underline that grows from the left */
.text-link {
  position: relative;
  display: inline-block;
  padding-bottom: 0.2rem;
  font-weight: 700;
  color: var(--plum-800);
}

.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
}

.section--dark .text-link {
  color: var(--white);
}


/* ==========================================================================
   5. Header and navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(251, 249, 254, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.3s;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 28px rgba(42, 13, 66, 0.1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

.brand {
  flex: none;
}

.brand__logo {
  width: auto;
  height: 68px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.85rem;
  background: none;
  border: 0;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--plum-800);
  border-radius: var(--radius-sm);
  transition: color 0.2s, background-color 0.2s;
}

.nav__link:hover,
.nav__link.is-current {
  color: var(--gold-deep);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-bright), var(--orange));
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.25s var(--ease-out);
}

.nav__link:hover::after,
.nav__link.is-current::after,
.nav__item--has-menu:hover > .nav__link::after,
.nav__item--mega.is-open > .nav__link::after {
  transform: translateX(-50%) scaleX(1);
}

/* On large screens the menu items fill the header height, so there is no
   gap between a menu item and its dropdown for the pointer to fall into */
@media (min-width: 1001px) {
  .nav {
    height: 100%;
  }

  .nav .btn {
    white-space: nowrap;
  }

  .nav__list {
    align-self: stretch;
    align-items: stretch;
  }

  .nav__item {
    display: flex;
    align-items: center;
  }
}

.nav__caret {
  width: 0.7rem;
  height: 0.7rem;
  transition: transform 0.25s var(--ease-out);
}

.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu:focus-within .nav__caret,
.nav__item--mega.is-open .nav__caret {
  transform: rotate(180deg);
}

.nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgba(42, 13, 66, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.25s var(--ease-out),
    transform 0.25s var(--ease-out),
    visibility 0.25s;
}

.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__menu-link {
  display: block;
  padding: 0.6rem 0.9rem;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  transition: color 0.2s, background-color 0.2s;
}

.nav__menu-link:hover {
  color: var(--plum-800);
  background: var(--mist);
}

@media (min-width: 1001px) and (max-width: 1180px) {
  .site-header__inner,
  .nav {
    gap: 0.75rem;
  }

  .nav__link {
    padding-inline: 0.55rem;
    font-size: 0.9rem;
  }

  .brand__logo {
    height: 58px;
  }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--plum-800);
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  margin: auto;
  background: currentColor;
  transition: background-color 0.2s;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.site-header.is-open .nav-toggle__bars {
  background: transparent;
}

.site-header.is-open .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header.is-open .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1000px) {
  .nav-toggle {
    display: block;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    max-height: calc(100svh - var(--header-height));
    padding: 1rem var(--gutter) 1.5rem;
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(42, 13, 66, 0.12);
  }

  .site-header.is-open .nav {
    display: flex;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    padding: 0.85rem 0.5rem;
  }

  .nav__link::after {
    display: none;
  }

  .nav__link.is-current {
    background: var(--mist);
  }

  .nav__item {
    display: block;
  }

  .nav__caret {
    display: none;
  }

  /* On small screens the sub menus are always open as a flat list */
  .nav__menu {
    position: static;
    min-width: 0;
    padding: 0 0 0.5rem 1rem;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}


/* ==========================================================================
   5b. Mega menu
   Opens under the header when Services is hovered or focused (see main.js).
   On small screens it becomes a plain list inside the mobile menu.
   ========================================================================== */

/* The panel is positioned against the header, so the menu item must not be */
.nav__item--mega {
  position: static;
}

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--gold-bright), var(--orange), var(--lavender)) 1;
  box-shadow: 0 24px 64px rgba(50, 18, 76, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity 0.22s var(--ease-out),
    transform 0.22s var(--ease-out),
    visibility 0.22s;
}

.nav__item--mega.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mega__inner {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding-block: 1.5rem;
}

/* Promo card on the left */
.mega__promo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1.4rem 1.25rem;
  overflow: hidden;
  background: linear-gradient(160deg, var(--plum-900), var(--plum-800));
  border-radius: var(--radius-md);
  color: var(--white);
}

.mega__promo::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(246, 173, 31, 0.2), transparent 70%);
  pointer-events: none;
}

.mega__promo-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-bright);
}

.mega__promo-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.3;
}

.mega__promo-text {
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.mega__promo .btn {
  position: relative;
  white-space: nowrap;
}

/* Service cards on the right */
.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.mega__label {
  margin: 0.9rem 0 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-deep);
}

.mega__label--first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.mega__card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 12px;
  transition:
    background-color 0.18s,
    border-color 0.18s,
    transform 0.18s;
}

.mega__card:hover,
.mega__card:focus-visible {
  background: var(--mist);
  border-color: var(--line);
  transform: translateX(3px);
}

.mega__tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--plum-600), var(--plum-900));
}

.mega__tile svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Each service keeps its own color, as on the previous site */
.mega__tile--tarot {
  background: linear-gradient(135deg, #3d1a66, #230e3d);
}

.mega__tile--numerology {
  background: linear-gradient(135deg, #2a1660, #150a38);
}

.mega__tile--relationships {
  background: linear-gradient(135deg, #7a1a40, #4d0f28);
}

.mega__tile--cord {
  background: linear-gradient(135deg, #1a3566, #0e1e40);
}

.mega__tile--crystal {
  background: linear-gradient(135deg, #0d4d66, #072e40);
}

.mega__tile--reiki {
  background: linear-gradient(135deg, #0f5c3a, #073823);
}

.mega__tile--oils {
  background: linear-gradient(135deg, #7a5200, #3f2a00);
}

.mega__tile--salts {
  background: linear-gradient(135deg, #1a3566, #0e1e40);
}

.mega__tile--candles {
  background: linear-gradient(135deg, #7a1a40, #4d0f28);
}

.mega__tile--crystals {
  background: linear-gradient(135deg, #0d4d66, #072e40);
}

.mega__tile--jars {
  background: linear-gradient(135deg, #0f5c3a, #073823);
}

.mega__tile--potlis {
  background: linear-gradient(135deg, #8a3a1a, #4a1c0a);
}

.mega__tile--yantras {
  background: linear-gradient(135deg, #5a1a6e, #2a0838);
}

.mega__tile--signature {
  background: linear-gradient(135deg, var(--gold-bright), var(--orange));
}

.mega__tile--signature svg {
  stroke: var(--plum-950);
}

.mega__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mega__title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--plum-800);
}

.mega__sub {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* Cards fade in one after another each time the menu opens */
.nav__item--mega.is-open .mega__card {
  animation: mega-card-in 0.35s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 25ms);
}

@keyframes mega-card-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Dims and blurs the page behind the open menu */
.mega-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(18, 8, 30, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s, visibility 0.22s;
}

.mega-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1000px) {
  .mega-overlay {
    display: none;
  }

  .mega {
    position: static;
    background: none;
    border-top: 0;
    border-image: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .mega__inner {
    display: block;
    padding: 0 0 0.5rem 1rem;
  }

  .mega__promo {
    display: none;
  }

  .mega__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .mega__label {
    margin: 0.5rem 0 0.25rem 0.25rem;
    padding-top: 0.75rem;
  }

  .mega__card {
    padding: 0.5rem 0.25rem;
  }

  .mega__card:hover {
    transform: none;
  }

  .nav__item--mega.is-open .mega__card {
    animation: none;
  }
}


/* ---- Small screens: each dropdown opens in place inside the mobile menu ---- */

.nav__expand {
  display: none;
}

@media (max-width: 1000px) {
  .nav__item--mega {
    position: relative;
  }

  .nav__item--mega > .nav__link {
    padding-right: 3.6rem;
  }

  .nav__expand {
    position: absolute;
    top: 0.3rem;
    right: 0;
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    color: var(--plum-800);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: transform 0.3s var(--ease-out), background-color 0.2s;
  }

  .nav__expand:hover,
  .nav__expand:focus-visible {
    background: var(--mist);
  }

  .nav__expand svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s var(--ease-out);
  }

  .nav__item--mega.is-expanded > .nav__expand svg {
    transform: rotate(180deg);
  }

  .mega {
    position: static;
    display: none;
    background: transparent;
    border: 0;
    border-image: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__item--mega.is-expanded .mega {
    display: block;
    animation: mega-drop 0.3s var(--ease-out) both;
  }

  .mega__inner {
    display: block;
    width: 100%;
    padding: 0.2rem 0 0.8rem 0.4rem;
  }

  /* The promo card is for wide screens; the pages themselves are what matters here */
  .mega__promo {
    display: none;
  }

  .mega__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .mega__label {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
  }

  .mega__card {
    padding: 0.55rem 0.5rem;
  }

  @keyframes mega-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(calc(100svh - var(--header-height)), 860px);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 70% at 72% 48%, rgba(107, 63, 160, 0.55), transparent 70%),
    linear-gradient(160deg, var(--plum-950) 0%, var(--plum-800) 100%);
  color: var(--white);
}

.hero__stars,
.page-hero__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.hero__kicker {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
}

.hero__title {
  font-size: var(--text-hero);
  line-height: 1.06;
  color: var(--white);
}

.hero__lead {
  max-width: 32rem;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-dark);
}

.hero__fact {
  display: flex;
  flex-direction: column;
}

.hero__fact-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--gold-bright);
}

.hero__fact-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}

/* The emblem sits inside two slowly turning rings */
.hero__visual {
  position: relative;
  width: min(100%, 520px);
  margin-inline: auto;
  aspect-ratio: 1;
  transform: translate3d(0, var(--parallax, 0px), 0);
}

.hero__orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orbit__line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
}

.orbit__line--draw {
  stroke-opacity: 0.65;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: orbit-draw 2.6s var(--ease-out) 0.3s forwards;
}

.orbit__line--dots {
  stroke-opacity: 0.55;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.1 14;
}

.orbit__line--dashes {
  stroke-opacity: 0.3;
  stroke-dasharray: 3 9;
}

.orbit__spin {
  transform-origin: 50% 50%;
  transform-box: view-box;
}

.orbit__spin--clockwise {
  animation: spin 140s linear infinite;
}

.orbit__spin--counter {
  animation: spin 100s linear infinite reverse;
}

.orbit__star {
  fill: var(--gold-bright);
}

.hero__emblem {
  position: absolute;
  inset: 17%;
  width: 66%;
  height: 66%;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(246, 173, 31, 0.4),
    0 0 70px rgba(246, 173, 31, 0.22),
    0 30px 80px rgba(0, 0, 0, 0.45);
  animation:
    emblem-in 1.6s var(--ease-out) 0.2s both,
    float 9s ease-in-out 1.8s infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes emblem-in {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Page load sequence: text rises in, then the headline catches the light once */
.hero__rise--1 {
  --step: 0;
}

.hero__rise--2 {
  --step: 3;
}

.hero__rise--3 {
  --step: 4;
}

.hero__rise--4 {
  --step: 5;
}

.hero__rise {
  animation: rise 0.9s var(--ease-out) both;
  animation-delay: calc(0.15s + var(--step, 0) * 0.12s);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero__title,
  .page-hero__title {
    background: linear-gradient(
      100deg,
      var(--white) 0%,
      var(--white) 42%,
      var(--gold-bright) 50%,
      var(--white) 58%,
      var(--white) 100%
    );
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation:
      rise 0.9s var(--ease-out) 0.27s both,
      shimmer 2.8s ease-in-out 1.2s 1 forwards;
  }
}

@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    order: -1;
    width: min(54vw, 250px);
  }

  .hero {
    padding-top: 1.5rem;
  }
}


/* ==========================================================================
   6b. Carousel (shared by Services and Reviews)
   Cards scroll sideways and snap into place. Buttons and progress bar are
   wired up in main.js through the data-carousel attributes.
   ========================================================================== */

.carousel__track {
  display: flex;
  gap: 1.25rem;
  padding: 0.75rem 0 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__controls[hidden] {
  display: none;
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1rem;
}

.carousel__progress {
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: var(--line);
  border-radius: 2px;
}

.carousel__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform: scaleX(var(--progress, 0.1));
  transform-origin: left;
  transition: transform 0.2s linear;
}

.carousel__buttons {
  display: flex;
  gap: 0.5rem;
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--plum-800);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
}

.carousel__btn:hover:not(:disabled) {
  background: var(--plum-800);
  border-color: var(--plum-800);
  color: var(--white);
}

.carousel__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   7. Services
   ========================================================================== */

.service-card {
  display: flex;
  flex: 1 0 min(240px, 82%);
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.3s;
}

.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 20px 44px rgba(42, 13, 66, 0.12);
}

.service-card__glyph,
.feature-card__glyph {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--gold-deep);
  transition:
    transform 0.4s var(--ease-out),
    background-color 0.3s,
    color 0.3s;
}

.service-card__glyph svg,
.feature-card__glyph svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card:hover .service-card__glyph,
.service-card:focus-visible .service-card__glyph {
  transform: rotate(-10deg) scale(1.06);
  background: var(--plum-800);
  border-color: var(--plum-800);
  color: var(--gold-bright);
}

.service-card__name {
  margin-top: 0.35rem;
  font-size: 1.45rem;
  color: var(--plum-800);
}

.service-card__desc {
  flex: 1;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.service-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.service-card__price {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-deep);
}

.service-card__arrow {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--plum-800);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease-out);
}

.service-card:hover .service-card__arrow,
.service-card:focus-visible .service-card__arrow {
  transform: translateX(5px);
}

/* The signature programmes are set apart as the premium option */
.service-card--featured {
  background: linear-gradient(160deg, var(--plum-900), var(--plum-800));
  border-color: transparent;
  color: var(--white);
}

.service-card--featured:hover,
.service-card--featured:focus-visible {
  border-color: rgba(246, 173, 31, 0.5);
}

.service-card--featured .service-card__glyph {
  color: var(--gold-bright);
  border-color: rgba(246, 173, 31, 0.5);
}

.service-card--featured:hover .service-card__glyph,
.service-card--featured:focus-visible .service-card__glyph {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--plum-950);
}

.service-card--featured .service-card__name {
  color: var(--white);
}

.service-card--featured .service-card__desc {
  color: rgba(255, 255, 255, 0.78);
}

.service-card--featured .service-card__foot {
  border-top-color: var(--line-on-dark);
}

.service-card--featured .service-card__price {
  color: var(--gold-bright);
}

.service-card--featured .service-card__arrow {
  stroke: var(--gold-bright);
}

.services__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.1rem 1.5rem;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.services__help-text {
  color: var(--ink-soft);
}


/* ==========================================================================
   8. Healers
   Two compact profile cards: a round portrait beside the name, then the
   key facts, a short description and a link.
   ========================================================================== */

.healers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.healer {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.healer__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.healer__avatar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--plum-900), var(--plum-800));
  border-radius: 50%;
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 4px var(--gold);
}

/* Shown behind the photo, and on its own until a photo is added */
.healer__avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/emblem.webp") center / cover no-repeat;
}

.healer__avatar.has-photo::before,
.healer__avatar--plain::before {
  display: none;
}

.healer__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.healer__drop {
  position: relative;
  width: 54%;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.healer__role {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-deep);
}

.healer__name {
  margin-top: 0.1rem;
  font-size: var(--text-xl);
  color: var(--plum-800);
}

.healer__traits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.healer__trait {
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.healer__trait--badge {
  background: var(--plum-800);
  border-color: var(--plum-800);
  color: var(--gold-bright);
}

.healer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}

.healer__stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.healer__stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--plum-800);
}

.healer__stat-label {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.healer__desc {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.healer__link {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 900px) {
  .healers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .healer__avatar {
    width: 72px;
    height: 72px;
  }
}


/* ==========================================================================
   9. Award
   ========================================================================== */

.award {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.award__main {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.award__seal {
  flex: none;
  width: clamp(72px, 9vw, 96px);
  height: clamp(72px, 9vw, 96px);
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.award__seal-star {
  fill: var(--gold-bright);
  stroke: none;
}

.award__source {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-bright);
}

.award__title {
  margin-top: 0.2rem;
  font-size: var(--text-xl);
}

.award__desc {
  max-width: 36rem;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
}


/* ==========================================================================
   10. Booking steps
   ========================================================================== */

.steps {
  --steps-gap: clamp(1.5rem, 4vw, 3.5rem);
  --num-size: 54px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--steps-gap);
}

.step {
  position: relative;
}

/* Line that links each step to the next; it draws itself as the section appears */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--num-size) / 2);
  left: calc(var(--num-size) + 14px);
  width: calc(100% + var(--steps-gap) - var(--num-size) - 28px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--lavender));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-out) 0.5s;
}

.steps.is-visible .step:not(:last-child)::after {
  transform: scaleX(1);
}

.steps.is-visible .step:nth-child(2)::after {
  transition-delay: 1s;
}

.step__num {
  display: grid;
  place-items: center;
  width: var(--num-size);
  height: var(--num-size);
  margin-bottom: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--plum-800);
}

.step__title {
  font-size: 1.4rem;
  color: var(--plum-800);
}

.step__desc {
  max-width: 26rem;
  margin-top: 0.6rem;
  color: var(--ink-soft);
}

.steps__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.steps__cta-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--plum-800);
}

@media (max-width: 800px) {
  .steps {
    --steps-gap: 2rem;

    grid-template-columns: 1fr;
  }

  .step {
    display: grid;
    grid-template-columns: var(--num-size) minmax(0, 1fr);
    column-gap: 1.25rem;
  }

  .step:not(:last-child)::after {
    top: calc(var(--num-size) + 14px);
    left: calc(var(--num-size) / 2);
    width: 1px;
    height: calc(100% + var(--steps-gap) - var(--num-size) - 28px);
    background: linear-gradient(180deg, var(--gold), var(--lavender));
    transform: scaleY(0);
    transform-origin: top;
  }

  .steps.is-visible .step:not(:last-child)::after {
    transform: scaleY(1);
  }

  .step__num {
    grid-row: span 2;
    margin-bottom: 0;
  }
}


/* ==========================================================================
   11. Reviews
   ========================================================================== */

.rating {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rating__score {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--plum-800);
}

.rating__stars {
  color: var(--gold-bright);
  font-size: 1.15rem;
  letter-spacing: 0.15em;
}

.rating__note {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.review {
  position: relative;
  display: flex;
  flex: 0 0 min(360px, 86%);
  flex-direction: column;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
}

.review::before {
  content: "\201C";
  position: absolute;
  top: 0.5rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.28;
  pointer-events: none;
}

.review__stars {
  margin-bottom: 0.9rem;
  color: var(--gold-bright);
  letter-spacing: 0.15em;
}

.review__service {
  align-self: flex-start;
  margin-bottom: 0.9rem;
  padding: 0.2rem 0.75rem;
  background: var(--mist);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--plum-600);
}

.review__text {
  flex: 1;
  color: var(--ink);
  line-height: 1.7;
}

.review__author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.review__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--plum-800);
  font-weight: 700;
  color: var(--white);
}

.review:nth-child(4n + 2) .review__avatar {
  background: var(--plum-600);
}

.review:nth-child(4n + 3) .review__avatar {
  background: var(--gold-deep);
}

.review:nth-child(4n) .review__avatar {
  background: var(--lavender);
}

.review__name {
  display: block;
  font-weight: 700;
  line-height: 1.3;
}

.review__meta {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
}


/* ==========================================================================
   12. Journal
   ========================================================================== */

.journal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.post:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(42, 13, 66, 0.12);
}

.post__cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(160deg, var(--plum-900), #4b2080);
}

.post__cover--numerology {
  background: linear-gradient(160deg, #0d1a3d, #2a3d8a);
}

.post__cover--reiki {
  background: linear-gradient(160deg, #073823, #145c3a);
}

.post__cover::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(246, 173, 31, 0.35);
  border-radius: 50%;
  transition: transform 0.6s var(--ease-out);
}

.post:hover .post__cover::after {
  transform: scale(1.35);
}

.post__glyph {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
}

.post__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.post__category {
  color: var(--plum-600);
}

.post__read {
  font-weight: 600;
  color: var(--ink-soft);
}

.post__title {
  margin-top: 0.8rem;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--plum-800);
}

.post__title a:hover {
  color: var(--gold-deep);
}

.post__excerpt {
  margin-top: 0.7rem;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.post__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 0.88rem;
}

.post__author {
  font-weight: 600;
  color: var(--ink-soft);
}

@media (max-width: 960px) {
  .journal {
    grid-template-columns: 1fr;
  }

  .post {
    flex-direction: row;
  }

  .post__cover {
    flex: 0 0 34%;
    aspect-ratio: auto;
  }
}

@media (max-width: 560px) {
  .post {
    flex-direction: column;
  }

  .post__cover {
    flex: none;
    aspect-ratio: 16 / 9;
  }
}


/* ==========================================================================
   12b. Inner pages
   Page heading, plan cards, service finder, FAQ and closing call to action,
   shared by the Services hub, the service pages and the Reiki page.
   ========================================================================== */

/* ---- Page heading ---- */

.page-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 90% at 85% 10%, rgba(107, 63, 160, 0.5), transparent 70%),
    linear-gradient(160deg, var(--plum-950), var(--plum-800));
  color: var(--white);
}

.page-hero__inner {
  position: relative;
}

/* Soft rotating rings on the right, echoing the Home page emblem.
   Profile pages place a round portrait in the middle of them. */
.page-hero__visual {
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(38vw, 460px);
  aspect-ratio: 1;
  transform: translateY(calc(-50% + var(--parallax, 0px)));
  pointer-events: none;
}

.page-hero__orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.45;
  overflow: visible;
}

.page-hero__portrait {
  position: absolute;
  inset: 19%;
}

.page-hero__portrait--art {
  inset: 3%;
}

.page-hero__portrait .healer__avatar {
  width: 100%;
  height: 100%;
  box-shadow:
    0 0 0 3px var(--plum-950),
    0 0 0 5px var(--gold),
    0 24px 60px rgba(0, 0, 0, 0.4);
}

@media (max-width: 900px) {
  .page-hero__visual {
    right: -30%;
    width: 90vw;
    opacity: 0.25;
  }

  /* On small screens the portrait sits above the text instead */
  .page-hero__visual--profile {
    position: relative;
    top: auto;
    right: auto;
    width: min(62vw, 260px);
    margin: 0 auto 2rem;
    opacity: 1;
    transform: none;
  }
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.4rem;
  opacity: 0.5;
}

.breadcrumb a:hover {
  color: var(--gold-bright);
}

.page-hero__title {
  max-width: 20ch;
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  text-wrap: balance;
}

.page-hero__lead {
  max-width: 38rem;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.page-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.chip {
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(246, 173, 31, 0.5);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-bright);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
  margin-top: 2rem;
}

.page-hero__from {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
}

.page-hero__price {
  margin-left: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--gold-bright);
}

/* ---- Facts strip under the heading ---- */

.trust {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.trust__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem 2rem;
  padding-block: 1.15rem;
}

.trust__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.trust__item::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ---- Plan cards ----
   Each card has an illustrated header in the colours of its service, then the
   details. The header artwork and the tilt effect are described in 12d. */

.plans-group + .plans-group {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.plans-group__head {
  margin-bottom: 2rem;
}

/* A short gold line draws itself under each group title as it scrolls into view */
.plans-group__head::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 1.1rem;
  background: linear-gradient(90deg, var(--gold-bright), var(--orange));
  transform-origin: left;
}

@supports (animation-timeline: view()) {
  .plans-group__head::after {
    animation: line-grow linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 70%;
  }
}

@keyframes line-grow {
  from {
    transform: scaleX(0);
  }
}

.plans-group__title {
  font-size: var(--text-xl);
  color: var(--plum-800);
}

.plans-group__intro {
  max-width: 40rem;
  margin-top: 0.4rem;
  color: var(--ink-soft);
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}

.plans--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A lone plan spans the full width and lists what is included in columns */
.plans--1 {
  grid-template-columns: minmax(0, 1fr);
}

.plans--1 .plan__features {
  columns: 3;
  column-gap: 2.5rem;
}

.plans--1 .plan__features li {
  break-inside: avoid;
}

.plan {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;

  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    border-color 0.3s;
}

.plan:hover {
  --lift: -6px;

  border-color: var(--line-strong);
  box-shadow: 0 28px 60px rgba(42, 13, 66, 0.16);
}

/* While the pointer moves over a card it follows quickly */
.plan.is-tilting {
  transition:
    transform 0.08s linear,
    box-shadow 0.4s var(--ease-out),
    border-color 0.3s;
}

/* A soft golden light that follows the pointer across the card */
.plan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(246, 173, 31, 0.14), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.plan:hover::after {
  opacity: 1;
}

/* Illustrated header */
.plan__art,
.product-card__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 178px;
  padding-bottom: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, var(--art-glow, rgba(190, 150, 255, 0.38)), transparent 58%),
    linear-gradient(135deg, var(--art-a, #4b2080), var(--art-b, #1e0836));
}

/* A faint pattern that drifts slowly behind the symbol */
.plan__art::before,
.mini-plan__art::before,
.product-card__art::before,
.product__stage::before {
  content: "";
  position: absolute;
  inset: -72px;
  background-image: var(--art-pattern, none);
  background-size: 72px 72px;
  animation: pattern-drift 90s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 28%, transparent 78%);
}

@keyframes pattern-drift {
  to {
    transform: translate(72px, 72px);
  }
}

/* A band of light sweeps across the header when the card is hovered */
.plan__art::after,
.product-card__art::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.24), transparent);
  opacity: 0;
  transform: skewX(-20deg);
}

.plan:hover .plan__art::after,
.product-card:hover .product-card__art::after {
  animation: art-shine 1.2s ease;
}

@keyframes art-shine {
  from {
    opacity: 1;
    transform: translateX(0) skewX(-20deg);
  }

  to {
    opacity: 1;
    transform: translateX(520%) skewX(-20deg);
  }
}

.plan__medallion {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(246, 173, 31, 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  box-shadow:
    0 0 36px rgba(246, 173, 31, 0.28),
    inset 0 0 18px rgba(246, 173, 31, 0.12);
  color: var(--gold-bright);
  animation: medallion-float 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}

/* A dashed ring that turns slowly around the medallion */
.plan__medallion::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px dashed rgba(246, 173, 31, 0.55);
  border-radius: 50%;
  animation: spin 32s linear infinite;
}

.plan__medallion svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan:hover .plan__medallion,
.product-card:hover .plan__medallion {
  transform: scale(1.1) rotate(-6deg);
  box-shadow:
    0 0 54px rgba(246, 173, 31, 0.5),
    inset 0 0 22px rgba(246, 173, 31, 0.2);
}

@keyframes medallion-float {
  50% {
    translate: 0 -7px;
  }
}

.plans > .plan:nth-child(2) { --i: 1; }
.plans > .plan:nth-child(3) { --i: 2; }
.plans > .plan:nth-child(4) { --i: 3; }
.plans > .plan:nth-child(5) { --i: 4; }
.plans > .plan:nth-child(6) { --i: 5; }
.plans > .plan:nth-child(7) { --i: 6; }

.plan__art .plan__tag {
  position: absolute;
  bottom: 0.9rem;
  left: 1rem;
  z-index: 2;
  padding: 0.25rem 0.75rem;
  background: rgba(18, 8, 30, 0.6);
  border: 1px solid rgba(246, 173, 31, 0.35);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gold-bright);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.plan__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: 0.2rem 0.7rem;
  background: var(--gold-bright);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--plum-950);
}

.plan__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.6rem 1.6rem;
}

.plan__name {
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--plum-800);
}

.plan__tagline {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--plum-600);
}

.plan__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.plan__label {
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--plum-800);
}

.plan__features li {
  position: relative;
  padding-left: 1.45rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.plan__features li + li {
  margin-top: 0.35rem;
}

/* A small gold tick before each included item */
.plan__features li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--gold-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.plan__chip {
  padding: 0.15rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.plan__best {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.plan__delivery {
  align-self: flex-start;
  padding: 0.3rem 0.85rem;
  background: var(--mist);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--plum-600);
}

.plan__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.plan__price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--plum-800);
}

.plan__tax {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* The premium plan is set apart in dark purple */
.plan--premium {
  background: linear-gradient(160deg, var(--plum-900), var(--plum-800));
  border-color: transparent;
  color: var(--white);
}

.plan--premium:hover {
  border-color: rgba(246, 173, 31, 0.5);
}

.plan--premium .plan__name,
.plan--premium .plan__price,
.plan--premium .plan__label {
  color: var(--white);
}

.plan--premium .plan__tagline {
  color: var(--gold-bright);
}

.plan--premium .plan__desc,
.plan--premium .plan__best,
.plan--premium .plan__tax {
  color: rgba(255, 255, 255, 0.78);
}

.plan--premium .plan__delivery {
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold-bright);
}

.plan--premium .plan__features li::before {
  background: var(--gold-bright);
}

.plan--premium .plan__foot {
  border-top-color: var(--line-on-dark);
}

.plan--premium .btn--plum {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--plum-950);
}

.plans-group__link {
  margin-top: 0.7rem;
}

/* Topic chips above the tarot sessions */
.topic-picker {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 1.5rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.topic-picker__title {
  margin-bottom: 0.8rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--plum-800);
}

.topic-picker__hint {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.plans-note {
  max-width: 44rem;
  margin-top: 2rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

@media (max-width: 960px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plans--1 .plan__features {
    columns: 2;
  }
}

@media (max-width: 640px) {
  .plans,
  .plans--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .plans--1 .plan__features {
    columns: 1;
  }
}

/* ---- Services hub: category links, finder and compact plan cards ---- */

.category-nav-wrap {
  margin-top: 2.5rem;
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-nav__link {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--plum-800);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.category-nav__link:hover {
  background: var(--plum-800);
  border-color: var(--plum-800);
  color: var(--white);
}

.finder {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.finder__title {
  font-size: var(--text-xl);
  color: var(--plum-800);
}

.finder__intro {
  margin-top: 0.4rem;
  color: var(--ink-soft);
}

.finder__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.finder__option {
  padding: 0.65rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--plum-800);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.finder__option:hover {
  border-color: var(--gold);
}

.finder__option[aria-pressed="true"] {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(246, 173, 31, 0.2);
}

.finder__result {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(160deg, var(--plum-900), var(--plum-800));
  border-radius: var(--radius-md);
  color: var(--white);
}

.finder__result[hidden] {
  display: none;
}

.finder__label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-bright);
}

.finder__result-title {
  margin-top: 0.2rem;
  font-size: 1.5rem;
}

.finder__result-text {
  max-width: 36rem;
  margin: 0.4rem 0 1.1rem;
  color: rgba(255, 255, 255, 0.8);
}

.category__tagline {
  margin-top: 0.35rem;
  color: var(--ink-soft);
}

.mini-plan {
  display: flex;
  flex: 0 0 min(300px, 82%);
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.3s;
}

.mini-plan:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: 0 22px 48px rgba(42, 13, 66, 0.14);
}

.mini-plan__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 92px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, var(--art-glow, rgba(190, 150, 255, 0.38)), transparent 58%),
    linear-gradient(135deg, var(--art-a, #4b2080), var(--art-b, #1e0836));
}

.mini-plan__medallion {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(246, 173, 31, 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 24px rgba(246, 173, 31, 0.28);
  color: var(--gold-bright);
  transition: transform 0.5s var(--ease-out);
}

.mini-plan__medallion svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-plan:hover .mini-plan__medallion {
  transform: scale(1.12) rotate(-6deg);
}

.mini-plan__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.4rem 1.4rem;
}

.mini-plan__tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-deep);
}

.mini-plan__name {
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--plum-800);
}

.mini-plan__desc {
  flex: 1;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.mini-plan__delivery {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.mini-plan__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.mini-plan__price {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--plum-800);
}

/* ---- Frequently asked questions ---- */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.faq-layout__intro {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.faq-layout__text {
  margin-top: 1rem;
  color: var(--ink-soft);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item:first-child {
  border-top: 1px solid var(--line);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  color: var(--plum-800);
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

/* Plus sign that turns into a cross when the answer is open */
.faq__question::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat;
  color: var(--gold-deep);
  transition: transform 0.3s var(--ease-out);
}

.faq__item[open] .faq__question::after {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 2rem 1.25rem 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .faq-layout__intro {
    position: static;
  }
}

/* ---- Closing call to action ---- */

.section--cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(107, 63, 160, 0.55), transparent 70%),
    linear-gradient(160deg, var(--plum-950), var(--plum-800));
}

.cta__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.cta__title {
  font-size: var(--text-2xl);
}

.cta__text {
  margin-top: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

/* ---- Reiki page: introduction and healer profile ---- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.split__eyebrow {
  margin-bottom: 0.6rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-deep);
}

.split__title {
  font-size: var(--text-2xl);
  color: var(--plum-800);
}

.split__text {
  margin-top: 1.1rem;
  color: var(--ink-soft);
}

.split__link {
  margin-top: 1.25rem;
}

/* A quote beside a long text stays in view while you read */
.split > .quote-card {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

@media (max-width: 900px) {
  .split > .quote-card {
    position: static;
  }
}

.split__aside {
  display: grid;
  gap: 1rem;
}

.info-card {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.info-card__title {
  font-size: 1.25rem;
  color: var(--plum-800);
}

.info-card__text {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.profile-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(160deg, var(--plum-900), var(--plum-800));
  border-radius: var(--radius-lg);
  color: var(--white);
}

.profile-card__name {
  font-size: var(--text-xl);
}

.profile-card__role {
  margin-top: 0.25rem;
  font-size: 0.92rem;
  color: var(--gold-bright);
}

.profile-card .healer__stats {
  margin-top: 1.25rem;
  border-block-color: var(--line-on-dark);
}

/* A card holding only figures needs no space above them */
.profile-card .healer__stats:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.profile-card .healer__stat-value {
  color: var(--gold-bright);
}

.profile-card .healer__stat-label {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.journal--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .journal--2 {
    grid-template-columns: 1fr;
  }
}

.journal--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .journal--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .journal--3 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   12c. Profile pages and journal
   About pages, the blog index and individual articles.
   ========================================================================== */

/* ---- Key figures ---- */

.stat-band {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.stat-band__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.25rem 2rem;
  padding-block: 1.75rem;
}

.stat-band__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.stat-band__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--plum-800);
}

.stat-band__label {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---- Pull quote ---- */

.quote-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: linear-gradient(160deg, var(--plum-900), var(--plum-800));
  border-radius: var(--radius-lg);
  color: var(--white);
}

.quote-card__text {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.4;
}

.quote-card__cite {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.92rem;
  font-style: normal;
  font-weight: 700;
  color: var(--gold-bright);
}

/* ---- Feature cards ---- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.feature-card {
  padding: 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.feature-card__title {
  margin-top: 1.1rem;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--plum-800);
}

.feature-card__text {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 960px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Awards and certificates ---- */

.award-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1rem;
}

.award-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.award-card--featured {
  grid-row: span 3;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: linear-gradient(160deg, var(--plum-900), var(--plum-800));
  border-color: transparent;
  color: var(--white);
}

.award-card__seal {
  flex: none;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.award-card--featured .award-card__seal {
  width: 72px;
  height: 72px;
  stroke: var(--gold-bright);
}

.award-card__label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-deep);
}

.award-card--featured .award-card__label {
  color: var(--gold-bright);
}

.award-card__title {
  margin-top: 0.15rem;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--plum-800);
}

.award-card--featured .award-card__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--white);
}

.award-card__meta {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.award-card--featured .award-card__meta {
  font-weight: 700;
  color: var(--gold-bright);
}

.award-card__text {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 800px) {
  .award-grid {
    grid-template-columns: 1fr;
  }

  .award-card--featured {
    grid-row: auto;
  }
}

/* ---- Blog index ---- */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter__btn {
  padding: 0.55rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--plum-800);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.filter__btn:hover {
  border-color: var(--gold);
}

.filter__btn[aria-pressed="true"] {
  background: var(--plum-800);
  border-color: var(--plum-800);
  color: var(--white);
}

.post[hidden] {
  display: none;
}

.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.featured-post .post__cover {
  aspect-ratio: auto;
  min-height: 340px;
}

.featured-post .post__cover::after {
  width: 170px;
  height: 170px;
}

.featured-post .post__glyph {
  width: 64px;
  height: 64px;
}

.featured-post__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.featured-post__label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-deep);
}

.featured-post__title {
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--plum-800);
}

.featured-post__excerpt {
  color: var(--ink-soft);
}

.featured-post__meta {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.featured-post__link {
  align-self: flex-start;
  margin-top: 0.5rem;
}

@media (max-width: 800px) {
  .featured-post {
    grid-template-columns: 1fr;
  }

  .featured-post .post__cover {
    min-height: 200px;
  }
}

.topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.topics__label {
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---- Article ---- */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1.5rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
}

.article-meta strong {
  color: var(--white);
}

/* Two-column article layout: main content + sticky ToC sidebar */
.article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.article__body {
  min-width: 0;
}

/* Sidebar ToC */
.post-toc-sidebar {
  position: sticky;
  top: 6rem;
}

.post-toc {
  padding: 1.35rem 1.25rem;
  background: linear-gradient(145deg, var(--white) 0%, color-mix(in srgb, var(--gold) 4%, var(--white)) 100%);
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-radius: var(--radius-md);
}

.post-toc__title {
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--plum-800);
}

.post-toc__list {
  display: grid;
  gap: 0.45rem;
}

.post-toc__list li {
  padding-left: 0.75rem;
  border-left: 2px solid color-mix(in srgb, var(--gold) 35%, transparent);
}

.post-toc__list a {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-soft);
  transition: color 0.2s;
}

.post-toc__list a:hover {
  color: var(--plum-600);
}

.post-toc__list li.is-active {
  border-left-color: var(--gold);
}

.post-toc__list li.is-active a {
  color: var(--plum-600);
  font-weight: 500;
}

@media (max-width: 800px) {
  .article__layout {
    grid-template-columns: 1fr;
  }

  /* sidebar is 2nd in DOM; pull it above the article on mobile */
  .post-toc-sidebar {
    position: static;
    order: -1;
  }
}

/* post-cover for browse-all card */
.post__cover--all {
  background: linear-gradient(145deg, var(--plum-900), color-mix(in srgb, var(--plum-800) 70%, var(--gold-deep)));
}

.prose > * + * {
  margin-top: 1.25rem;
}

.prose h2 {
  margin-top: 2.5rem;
  font-size: var(--text-xl);
  color: var(--plum-800);
}

.prose p {
  font-size: 1.1rem;
  line-height: 1.8;
}

.prose a {
  color: var(--plum-600);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.2em;
  transition: color 0.2s;
}

.prose a:hover {
  color: var(--gold-deep);
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.tag {
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.author-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.author-card .healer__avatar {
  width: 72px;
  height: 72px;
}

.author-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--plum-800);
}

.author-card__bio {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .author-card {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ==========================================================================
   12d. Service artwork and motion
   Colour themes, the illustrations beside service page headings, and the
   animation that brings them to life. Plan card artwork is in 12b.
   ========================================================================== */

/* ---- Colour themes: one per service, used by plan cards and their headers ---- */

.theme-tarot {
  --art-a: #52248f;
  --art-b: #1e0836;
  --art-glow: rgba(190, 150, 255, 0.4);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23F6AD1F'%3E%3Cpath fill-opacity='.45' d='M14 8l1.4 4.6L20 14l-4.6 1.4L14 20l-1.4-4.6L8 14l4.6-1.4z'/%3E%3Ccircle cx='52' cy='22' r='1.5' fill-opacity='.5'/%3E%3Ccircle cx='32' cy='56' r='1.2' fill-opacity='.45'/%3E%3Cpath fill-opacity='.35' d='M58 50l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-numerology {
  --art-a: #2a3d8a;
  --art-b: #0d1a3d;
  --art-glow: rgba(130, 160, 255, 0.38);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M24 0v72M48 0v72M0 24h72M0 48h72' stroke='%239FB4FF' stroke-opacity='.22' fill='none'/%3E%3Cg fill='%239FB4FF' fill-opacity='.4' font-family='serif' font-size='11' text-anchor='middle'%3E%3Ctext x='12' y='17'%3E4%3C/text%3E%3Ctext x='36' y='17'%3E9%3C/text%3E%3Ctext x='60' y='17'%3E2%3C/text%3E%3Ctext x='12' y='41'%3E3%3C/text%3E%3Ctext x='36' y='41'%3E5%3C/text%3E%3Ctext x='60' y='41'%3E7%3C/text%3E%3Ctext x='12' y='65'%3E8%3C/text%3E%3Ctext x='36' y='65'%3E1%3C/text%3E%3Ctext x='60' y='65'%3E6%3C/text%3E%3C/g%3E%3C/svg%3E");
}

.theme-relationships {
  --art-a: #8a1f4b;
  --art-b: #3f0d24;
  --art-glow: rgba(255, 140, 180, 0.38);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFB3CC' stroke-opacity='.28'%3E%3Ccircle cx='26' cy='36' r='20'/%3E%3Ccircle cx='46' cy='36' r='20'/%3E%3C/g%3E%3Cpath fill='%23FFB3CC' fill-opacity='.4' d='M36 41c-4-3-6-5-6-7.5a3 3 0 0 1 6-1 3 3 0 0 1 6 1c0 2.500-2 4.500-6 7.500z'/%3E%3C/svg%3E");
}

.theme-cord {
  --art-a: #1f4a8f;
  --art-b: #0b1a3a;
  --art-glow: rgba(120, 180, 255, 0.38);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%239CC8FF' stroke-opacity='.3' stroke-linecap='round'%3E%3Cpath d='M0 18q9-12 18 0t18 0 18 0 18 0'/%3E%3Cpath d='M0 54q9-12 18 0t18 0 18 0 18 0'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-crystal {
  --art-a: #12708a;
  --art-b: #072a3a;
  --art-glow: rgba(120, 235, 240, 0.38);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%239BF0F0' stroke-opacity='.28'%3E%3Cpath d='M36 4L68 36 36 68 4 36z'/%3E%3Cpath d='M4 36h64M36 4v64'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-signature {
  --art-a: #6b3fa0;
  --art-b: #2a0d42;
  --art-glow: rgba(246, 173, 31, 0.38);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F6AD1F' stroke-opacity='.28'%3E%3Ccircle cx='36' cy='36' r='12'/%3E%3Ccircle cx='36' cy='36' r='24'/%3E%3Cpath d='M36 0v72M0 36h72M10 10l52 52M62 10L10 62' stroke-opacity='.14'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-reiki {
  --art-a: #16805a;
  --art-b: #06382a;
  --art-glow: rgba(130, 240, 200, 0.38);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%239BF0D0' stroke-opacity='.32'%3E%3Ccircle cx='36' cy='36' r='8'/%3E%3Ccircle cx='36' cy='36' r='16'/%3E%3Ccircle cx='36' cy='36' r='26'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Heading artwork: shared motion ---- */

.art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.art-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: art-pulse 6s ease-in-out infinite;
}

@keyframes art-pulse {
  50% {
    opacity: 0.6;
    transform: scale(1.07);
  }
}

.art-bob {
  animation: art-bob 7s ease-in-out infinite;
}

.art-bob--1 {
  animation-delay: -1.5s;
}

.art-bob--2 {
  animation-delay: -3.2s;
  animation-duration: 8s;
}

.art-bob--3 {
  animation-delay: -4.6s;
  animation-duration: 6.5s;
}

@keyframes art-bob {
  50% {
    transform: translateY(-9px);
  }
}

.art-spark {
  fill: var(--gold-bright);
  transform-box: fill-box;
  transform-origin: center;
  animation: art-twinkle 3.4s ease-in-out infinite;
}

.art-spark.s2 { animation-delay: -0.7s; }
.art-spark.s3 { animation-delay: -1.4s; }
.art-spark.s4 { animation-delay: -2.1s; }
.art-spark.s5 { animation-delay: -2.7s; }
.art-spark.s6 { animation-delay: -3s; }

@keyframes art-twinkle {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.55);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Tarot: the cards fan out, then float */
.tarot__card {
  transform-box: view-box;
  transform-origin: 210px 390px;
}

.tarot__card--left {
  transform: rotate(-24deg);
  animation: tarot-fan-left 1.6s var(--ease-out) 0.6s backwards;
}

.tarot__card--right {
  transform: rotate(24deg);
  animation: tarot-fan-right 1.6s var(--ease-out) 0.6s backwards;
}

.tarot__card--center {
  animation: tarot-rise 1.3s var(--ease-out) 0.3s backwards;
}

@keyframes tarot-fan-left {
  from {
    transform: rotate(0deg);
  }
}

@keyframes tarot-fan-right {
  from {
    transform: rotate(0deg);
  }
}

@keyframes tarot-rise {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
}

.tarot__numeral {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.14em;
  fill: var(--gold-bright);
}

/* Numerology: the grid draws itself, then each number lights up in turn */
.num__ring {
  transform-box: view-box;
  transform-origin: 210px 210px;
  animation: spin 90s linear infinite;
}

.num__ring-digit {
  font-family: var(--font-display);
  font-size: 17px;
  fill: var(--gold-bright);
  fill-opacity: 0.7;
}

.num__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: orbit-draw 1.4s var(--ease-out) 0.4s forwards;
}

.num__digit {
  font-family: var(--font-display);
  font-size: 58px;
  fill: url(#num-gold);
  opacity: 0.62;
  animation: num-digit 5s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 0.55s);
}

.num__halo {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: num-halo 5s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 0.55s);
}

.num__digit.h1, .num__halo.h1 { --d: 0; }
.num__digit.h2, .num__halo.h2 { --d: 1; }
.num__digit.h3, .num__halo.h3 { --d: 2; }
.num__digit.h4, .num__halo.h4 { --d: 3; }
.num__digit.h5, .num__halo.h5 { --d: 4; }
.num__digit.h6, .num__halo.h6 { --d: 5; }
.num__digit.h7, .num__halo.h7 { --d: 6; }
.num__digit.h8, .num__halo.h8 { --d: 7; }
.num__digit.h9, .num__halo.h9 { --d: 8; }

@keyframes num-digit {
  0%,
  22%,
  100% {
    opacity: 0.62;
  }

  8% {
    opacity: 1;
  }
}

@keyframes num-halo {
  0%,
  22%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }

  8% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Relationships: the circles breathe together and the heart beats */
.rel__circle,
.rel__lens {
  transform-box: view-box;
  transform-origin: 210px 210px;
  animation: rel-breathe 6s ease-in-out infinite;
}

.rel__orbit {
  transform-box: view-box;
  transform-origin: 210px 210px;
  animation: spin 40s linear infinite;
}

.rel__heart {
  transform-box: fill-box;
  transform-origin: center;
  animation: heartbeat 2.2s ease-in-out infinite;
}

@keyframes rel-breathe {
  50% {
    transform: scale(1.04);
  }
}

@keyframes heartbeat {
  0%,
  56%,
  100% {
    transform: scale(1);
  }

  14%,
  42% {
    transform: scale(1.14);
  }

  28% {
    transform: scale(1);
  }
}

/* Cord cutting: the cord flows away, the scissors snip, sparkles rise */
.cord__line {
  stroke-dasharray: 7 9;
}

.cord__line--left {
  animation: cord-flow 2.2s linear infinite;
}

.cord__line--right {
  animation: cord-flow 2.2s linear infinite reverse;
}

@keyframes cord-flow {
  to {
    stroke-dashoffset: 32;
  }
}

.cord__blade {
  transform-box: view-box;
  transform-origin: 210px 262px;
}

.cord__blade--a {
  animation: snip-a 3.4s ease-in-out infinite;
}

.cord__blade--b {
  animation: snip-b 3.4s ease-in-out infinite;
}

@keyframes snip-a {
  0%,
  50%,
  100% {
    transform: rotate(0deg);
  }

  22% {
    transform: rotate(-17deg);
  }

  32% {
    transform: rotate(1deg);
  }
}

@keyframes snip-b {
  0%,
  50%,
  100% {
    transform: rotate(0deg);
  }

  22% {
    transform: rotate(17deg);
  }

  32% {
    transform: rotate(-1deg);
  }
}

.cord__ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: cord-ring 3.6s ease-out infinite;
}

.cord__ring--2 {
  animation-delay: -1.8s;
}

@keyframes cord-ring {
  from {
    opacity: 0.7;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

.cord__spark {
  opacity: 0;
  animation: cord-rise 3.4s ease-out infinite;
}

.cord__spark.cs1 { --dx: -30px; animation-delay: 0.7s; }
.cord__spark.cs2 { --dx: -8px; animation-delay: 0.9s; }
.cord__spark.cs3 { --dx: 20px; animation-delay: 1s; }
.cord__spark.cs4 { --dx: -48px; animation-delay: 1.2s; }
.cord__spark.cs5 { --dx: 40px; animation-delay: 1.3s; }

@keyframes cord-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }

  12% {
    opacity: 1;
  }

  70%,
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), -80px) scale(1);
  }
}

/* Crystal: a band of light moves across the cluster */
.cry__shine {
  animation: cry-shine 5.5s ease-in-out infinite;
}

@keyframes cry-shine {
  0% {
    transform: translateX(0);
  }

  60%,
  100% {
    transform: translateX(660px);
  }
}

/* Signature: the geometry layers turn in opposite directions */
.sig__layer {
  transform-box: view-box;
  transform-origin: 210px 210px;
}

.sig__layer--outer {
  animation: spin 120s linear infinite;
}

.sig__layer--squares {
  animation: spin 70s linear infinite reverse;
}

.sig__layer--flower {
  animation: spin 50s linear infinite;
}

.sig__layer--stars {
  animation: spin 36s linear infinite reverse;
}

.sig__core {
  transform-box: fill-box;
  transform-origin: center;
  animation: art-pulse 3.6s ease-in-out infinite;
}

/* Reiki: ripples spread from the drop and bubbles rise */
.rk__ripple {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: rk-ripple 4.5s ease-out infinite;
}

.rk__ripple--2 {
  animation-delay: 1.5s;
}

.rk__ripple--3 {
  animation-delay: 3s;
}

@keyframes rk-ripple {
  0% {
    opacity: 0.8;
    transform: scale(0.5);
  }

  100% {
    opacity: 0;
    transform: scale(2.3);
  }
}

.rk__bubble {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: rk-bubble 5s ease-in infinite;
}

.rk__bubble.b2 { animation-delay: -1.2s; }
.rk__bubble.b3 { animation-delay: -2.4s; }
.rk__bubble.b4 { animation-delay: -3.3s; }
.rk__bubble.b5 { animation-delay: -4.1s; }

@keyframes rk-bubble {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }

  15% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateY(-170px) scale(1.1);
  }
}

.rk__orbit {
  transform-box: view-box;
  transform-origin: 210px 230px;
  animation: spin 50s linear infinite;
}


/* ---- Product artwork: motion ---- */

/* Oils: petals drift, drops float, the liquid catches the light */
.oil__petal {
  transform-box: fill-box;
  transform-origin: center;
  animation: petal-drift 9s ease-in-out infinite;
}

.oil__petal.pt2 { animation-delay: -2.2s; }
.oil__petal.pt3 { animation-delay: -4.5s; }
.oil__petal.pt4 { animation-delay: -6.4s; }

@keyframes petal-drift {
  50% {
    transform: translate(12px, -16px) rotate(26deg);
  }
}

.oil__drop {
  transform-box: fill-box;
  transform-origin: center;
  animation: drop-float 5s ease-in-out infinite;
}

.oil__drop.d2 { animation-delay: -1.7s; }
.oil__drop.d3 { animation-delay: -3.2s; }

@keyframes drop-float {
  50% {
    transform: translateY(-13px) scale(1.1);
  }
}

.oil__shimmer {
  animation: oil-shimmer 6s ease-in-out infinite;
}

@keyframes oil-shimmer {
  0%,
  100% {
    opacity: 0.12;
    transform: translateX(0);
  }

  50% {
    opacity: 0.4;
    transform: translateX(76px);
  }
}

/* Salts: crystals sparkle inside the jar */
.salt__bit {
  transform-box: fill-box;
  transform-origin: center;
  animation: salt-sparkle 3.6s ease-in-out infinite;
}

.salt__bit.t2 { animation-delay: -0.6s; }
.salt__bit.t3 { animation-delay: -1.2s; }
.salt__bit.t4 { animation-delay: -1.8s; }
.salt__bit.t5 { animation-delay: -2.4s; }
.salt__bit.t6 { animation-delay: -3s; }

@keyframes salt-sparkle {
  50% {
    opacity: 0.35;
    transform: scale(1.5) rotate(20deg);
  }
}

/* Candles: flames flicker and the glow breathes */
.candle__flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flame-flicker 2.4s ease-in-out infinite;
}

.candle__flame.c2 { animation-delay: -0.8s; animation-duration: 2.1s; }
.candle__flame.c3 { animation-delay: -1.5s; animation-duration: 2.7s; }

@keyframes flame-flicker {
  0%,
  100% {
    transform: scaleY(1) skewX(0deg);
  }

  22% {
    transform: scaleY(1.08) skewX(3deg);
  }

  48% {
    transform: scaleY(0.94) skewX(-2.5deg);
  }

  74% {
    transform: scaleY(1.05) skewX(2deg);
  }
}

.candle__glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: art-pulse 2.6s ease-in-out infinite;
}

.candle__glow.c2 { animation-delay: -0.9s; }
.candle__glow.c3 { animation-delay: -1.6s; }

.candle__ember {
  opacity: 0;
  animation: ember-rise 4s ease-out infinite;
}

.candle__ember.e2 { animation-delay: 0.8s; }
.candle__ember.e3 { animation-delay: 1.6s; }
.candle__ember.e4 { animation-delay: 2.4s; }
.candle__ember.e5 { animation-delay: 3.1s; }

@keyframes ember-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(10px, -70px);
  }
}

/* Happiness jar: the charms float, the tag swings */
.jar__item {
  transform-box: fill-box;
  transform-origin: center;
  animation: jar-float 7s ease-in-out infinite;
}

.jar__item.j2 { animation-delay: -1.1s; }
.jar__item.j3 { animation-delay: -2.3s; }
.jar__item.j4 { animation-delay: -3.4s; }
.jar__item.j5 { animation-delay: -4.6s; }
.jar__item.j6 { animation-delay: -5.7s; }

@keyframes jar-float {
  50% {
    transform: translate(3px, -9px) rotate(14deg);
  }
}

.jar__tag {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: tag-swing 4s ease-in-out infinite;
}

@keyframes tag-swing {
  50% {
    transform: rotate(7deg);
  }
}

/* Potli: it sways gently and the tassel swings */
.potli__sway {
  transform-box: view-box;
  transform-origin: 210px 108px;
  animation: potli-sway 6s ease-in-out infinite;
}

@keyframes potli-sway {
  50% {
    transform: rotate(2.4deg);
  }
}

.potli__tassel {
  transform-box: view-box;
  transform-origin: 258px 154px;
  animation: tassel-swing 3.6s ease-in-out infinite;
}

@keyframes tassel-swing {
  50% {
    transform: rotate(-8deg);
  }
}

/* Yantra: the triangles draw themselves, the petals turn, the centre glows */
.yantra__petals {
  transform-box: view-box;
  transform-origin: 210px 210px;
}

.yantra__petals--a {
  animation: spin 110s linear infinite;
}

.yantra__petals--b {
  animation: spin 80s linear infinite reverse;
}

.yantra__tri {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: orbit-draw 1.5s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.16s + 0.3s);
}

.yantra__tri:nth-child(2) { --i: 1; }
.yantra__tri:nth-child(3) { --i: 2; }
.yantra__tri:nth-child(4) { --i: 3; }
.yantra__tri:nth-child(5) { --i: 4; }
.yantra__tri:nth-child(6) { --i: 5; }
.yantra__tri:nth-child(7) { --i: 6; }
.yantra__tri:nth-child(8) { --i: 7; }
.yantra__tri:nth-child(9) { --i: 8; }

.yantra__bindu {
  transform-box: fill-box;
  transform-origin: center;
  animation: art-pulse 2.8s ease-in-out infinite;
}


/* ==========================================================================
   12e. Sticky booking button, shop and product pages
   ========================================================================== */

/* ---- Sticky "Book a session" tab on the right edge ---- */

.side-book {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 0.75rem;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-radius: 14px 0 0 14px;
  box-shadow: -6px 10px 30px rgba(246, 173, 31, 0.35);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--plum-950);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  transition: padding 0.3s var(--ease-out), box-shadow 0.3s;
}

.side-book:hover,
.side-book:focus-visible {
  padding-inline: 1.1rem;
  box-shadow: -10px 14px 40px rgba(246, 173, 31, 0.55);
}

.side-book__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(180deg);
}

/* A soft ring that pulses outwards to draw the eye */
.side-book::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(246, 173, 31, 0.55);
  animation: side-pulse 3s ease-out infinite;
  pointer-events: none;
}

@keyframes side-pulse {
  70%,
  100% {
    box-shadow: 0 0 0 16px rgba(246, 173, 31, 0);
  }
}

/* On phones it becomes a pill in the bottom corner */
@media (max-width: 700px) {
  .side-book {
    top: auto;
    right: 1rem;
    bottom: 1rem;
    padding: 0.8rem 1.15rem;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(246, 173, 31, 0.45);
    writing-mode: horizontal-tb;
    transform: none;
  }

  .side-book:hover,
  .side-book:focus-visible {
    padding-inline: 1.15rem;
  }

  .side-book__icon {
    transform: none;
  }
}

/* ---- Colour themes for the product pages ---- */

.theme-oils {
  --art-a: #8f5d0a;
  --art-b: #3f2a00;
  --art-glow: rgba(246, 198, 90, 0.42);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23F6C65A'%3E%3Cpath fill-opacity='.4' d='M18 8c4 6 6 9 6 12a6 6 0 0 1-12 0c0-3 2-6 6-12z'/%3E%3Cpath fill-opacity='.28' d='M52 40c3 5 5 7 5 10a5 5 0 0 1-10 0c0-3 2-5 5-10z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F6C65A' stroke-opacity='.22'%3E%3Ccircle cx='54' cy='16' r='5'/%3E%3Ccircle cx='20' cy='54' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-salts {
  --art-a: #27518f;
  --art-b: #0e1e40;
  --art-glow: rgba(160, 190, 255, 0.4);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FDE7EF' stroke-opacity='.34'%3E%3Cpolygon points='20,8 28,13 28,23 20,28 12,23 12,13'/%3E%3Cpolygon points='52,40 59,44 59,52 52,56 45,52 45,44'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' fill-opacity='.4'%3E%3Ccircle cx='50' cy='16' r='1.6'/%3E%3Ccircle cx='16' cy='50' r='1.4'/%3E%3Ccircle cx='36' cy='36' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-candles {
  --art-a: #8a2a4f;
  --art-b: #3a0c20;
  --art-glow: rgba(255, 170, 120, 0.4);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFB347' stroke-opacity='.34'%3E%3Cpath d='M20 8c5 7 7 11 7 15a7 7 0 0 1-14 0c0-4 2-8 7-15z'/%3E%3Cpath d='M54 40c4 6 6 9 6 12a6 6 0 0 1-12 0c0-3 2-6 6-12z'/%3E%3C/g%3E%3Cg fill='%23FFB347' fill-opacity='.4'%3E%3Ccircle cx='50' cy='16' r='1.5'/%3E%3Ccircle cx='16' cy='52' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-crystals {
  --art-a: #12708a;
  --art-b: #072a3a;
  --art-glow: rgba(120, 235, 240, 0.4);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%239BF0F0' stroke-opacity='.28'%3E%3Cpath d='M36 4L68 36 36 68 4 36z'/%3E%3Cpath d='M4 36h64M36 4v64'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-jars {
  --art-a: #177a52;
  --art-b: #073823;
  --art-glow: rgba(150, 240, 190, 0.4);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23FFB3CC' fill-opacity='.42'%3E%3Cpath d='M18 12c-3-2-5-4-5-6a2.4 2.4 0 0 1 5-1 2.4 2.4 0 0 1 5 1c0 2-2 4-5 6z'/%3E%3Cpath d='M52 48c-3-2-5-4-5-6a2.4 2.4 0 0 1 5-1 2.4 2.4 0 0 1 5 1c0 2-2 4-5 6z'/%3E%3C/g%3E%3Cg fill='%23F6AD1F' fill-opacity='.4'%3E%3Ccircle cx='50' cy='16' r='1.6'/%3E%3Ccircle cx='20' cy='52' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-potlis {
  --art-a: #9a3e1c;
  --art-b: #3f1608;
  --art-glow: rgba(255, 170, 110, 0.4);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M0 0L72 72M72 0L0 72' stroke='%23F6AD1F' stroke-opacity='.16' fill='none'/%3E%3Cg fill='%23F6AD1F' fill-opacity='.4'%3E%3Ccircle cx='36' cy='36' r='2'/%3E%3Ccircle cx='0' cy='36' r='1.5'/%3E%3Ccircle cx='72' cy='36' r='1.5'/%3E%3Ccircle cx='36' cy='0' r='1.5'/%3E%3Ccircle cx='36' cy='72' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-yantras {
  --art-a: #5a1a6e;
  --art-b: #220630;
  --art-glow: rgba(220, 150, 255, 0.4);
  --art-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F6AD1F' stroke-opacity='.26'%3E%3Crect x='16' y='16' width='40' height='40'/%3E%3Ccircle cx='36' cy='36' r='16'/%3E%3Cpath d='M36 20L50 44H22z' stroke-opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Breadcrumb bar above a product ---- */

.crumb-bar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.crumb-bar .breadcrumb {
  margin: 0;
  padding-block: 1rem;
  color: var(--ink-soft);
}

.crumb-bar .breadcrumb a:hover {
  color: var(--gold-deep);
}

/* ---- Shop page ---- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    border-color 0.3s;
}

.product-card:hover,
.product-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 28px 60px rgba(42, 13, 66, 0.16);
}

.product-card__art {
  height: 190px;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem 1.5rem 1.6rem;
}

.product-card__name {
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--plum-800);
}

.product-card__desc {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.product-card__price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--plum-800);
}

.product-card__from {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.product-card__link {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--plum-800);
}

@media (max-width: 960px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Product page ---- */

.product {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

.product__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.product__gallery {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
}

.product__stage {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 15%, var(--art-glow), transparent 58%),
    linear-gradient(135deg, var(--art-a), var(--art-b));
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(42, 13, 66, 0.22);
}

.product__stage::before {
  inset: -72px;
}

.product__art {
  position: absolute;
  inset: 6%;
}

.product__chip {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  padding: 0.3rem 0.9rem;
  background: rgba(18, 8, 30, 0.6);
  border: 1px solid rgba(246, 173, 31, 0.4);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-bright);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.product__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.product__highlight {
  position: relative;
  padding: 1.1rem 0.9rem 1rem;
  background: linear-gradient(145deg, var(--white) 0%, color-mix(in srgb, var(--gold) 5%, var(--white)) 100%);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.product__highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 75%);
  pointer-events: none;
}

.product__highlight:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--gold) 18%, transparent);
}

.product__highlight-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 18%, var(--white)), color-mix(in srgb, var(--gold) 8%, var(--white)));
  border: 1px solid color-mix(in srgb, var(--gold-deep) 35%, transparent);
  border-radius: 50%;
  color: var(--gold-deep);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--gold) 20%, transparent);
}

.product__highlight-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product__highlight-title {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--plum-800);
  letter-spacing: 0.01em;
}

.product__highlight-text {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.product__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  color: var(--plum-800);
}

.product__tagline {
  margin-top: 0.6rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.product__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin-top: 1.25rem;
}

.product__price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--plum-800);
}

.product__price-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.product__lead {
  margin-top: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

@media (max-width: 960px) {
  /* On small screens: artwork, then the order form, then the highlights */
  .product__layout {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .product__gallery {
    display: contents;
  }

  .product__stage {
    order: 1;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }

  .product__info {
    order: 2;
  }

  .product__highlights {
    order: 3;
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .product__highlights {
    grid-template-columns: 1fr;
  }
}

/* ---- Order form ---- */

.order-card {
  margin-top: 1.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(42, 13, 66, 0.08);
}

.order-card__heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--plum-800);
}

.order-card__heading + .options,
.order-card__heading + .form-grid {
  margin-top: 1rem;
}

.order-card__heading--spaced {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.step-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--plum-950);
}

.options {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.option:hover {
  border-color: var(--gold);
}

.option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The round marker turns gold when the option is chosen */
.option::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color 0.2s, background 0.2s;
}

.option.is-selected {
  background: #fffaf0;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(246, 173, 31, 0.18);
}

.option.is-selected::before {
  border-color: var(--gold-bright);
  background: radial-gradient(circle, var(--gold-bright) 42%, transparent 46%);
}

.option:focus-within {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.option__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.option__name {
  font-weight: 700;
  line-height: 1.3;
  color: var(--plum-800);
}

.option__detail {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.option__price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--plum-800);
}

.qty-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 999px;
}

.qty__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--plum-800);
}

.qty__btn {
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--plum-800);
  transition: background-color 0.2s;
}

.qty__btn:hover {
  background: var(--mist);
}

.qty__input {
  width: 44px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  -moz-appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.total {
  text-align: right;
}

.total__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.total__value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--plum-800);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--plum-800);
}

.field__label small {
  font-weight: 600;
  color: var(--ink-soft);
}

.field__input,
.field__textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: #9a8bab;
}

.field__input:focus,
.field__textarea:focus {
  background: var(--white);
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(246, 173, 31, 0.2);
  outline: none;
}

.field__textarea {
  min-height: 110px;
  resize: vertical;
}

.field__hint {
  align-self: flex-end;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.field--error .field__input,
.field--error .field__textarea {
  border-color: #c0392b;
}

.field__error {
  font-size: 0.8rem;
  color: #b3261e;
}

.field__error:empty {
  display: none;
}

[data-field="intention"] .field__label,
[data-field^="intention_"] .field__label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--plum-800);
  margin-bottom: 0.75rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 5%, var(--white)) 0%, color-mix(in srgb, var(--plum-800) 4%, var(--white)) 100%);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 14px;
  margin-bottom: 0.65rem;
}

.chip-btn {
  padding: 0.4rem 1rem;
  background: var(--white);
  border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--plum-800);
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: background 0.22s, color 0.22s, border-color 0.22s, box-shadow 0.22s, transform 0.15s;
}

.chip-btn:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--white)), color-mix(in srgb, var(--gold) 6%, var(--white)));
  border-color: var(--gold-deep);
  color: var(--plum-900);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--gold) 25%, transparent), 0 1px 3px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.chip-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--plum-900) 0%, color-mix(in srgb, var(--plum-800) 80%, var(--gold-deep)) 100%);
  border-color: transparent;
  color: var(--gold-bright);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--plum-900) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(0);
  text-shadow: 0 1px 6px rgba(0,0,0,0.2);
}

/* A field only robots can see, so humans never fill it */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.order-card__submit {
  width: 100%;
  margin-top: 1.4rem;
  padding: 1.05rem 1.5rem;
  font-size: 1.05rem;
}

.order-card__submit:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
  animation: none;
}

.form-status {
  min-height: 1.2em;
  margin-top: 0.8rem;
  font-size: 0.9rem;
  text-align: center;
  color: #b3261e;
}

.form-note {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft);
}

.order-success {
  padding: 1rem 0 0.5rem;
  text-align: center;
}

.order-success[hidden] {
  display: none;
}

.order-success:focus {
  outline: none;
}

.order-success__mark {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.1rem;
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.order-success__mark circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: orbit-draw 0.9s var(--ease-out) forwards;
}

.order-success__mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: orbit-draw 0.6s var(--ease-out) 0.7s forwards;
}

.order-success__title {
  font-size: var(--text-xl);
  color: var(--plum-800);
}

.order-success__text {
  max-width: 28rem;
  margin: 0.6rem auto 0;
  color: var(--ink-soft);
}

.order-success__summary {
  margin: 1.1rem auto 0;
  padding: 0.9rem 1.1rem;
  max-width: 28rem;
  background: var(--mist);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: left;
  white-space: pre-line;
  color: var(--ink-soft);
}

.order-success__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.25rem;
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .total {
    text-align: left;
  }
}

/* ---- Below the product ---- */

.check-list li {
  position: relative;
  padding-left: 1.7rem;
  line-height: 1.5;
}

.check-list li + li {
  margin-top: 0.6rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.28em;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--gold-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.notes {
  display: grid;
  gap: 0.9rem;
  max-width: 48rem;
}

.note {
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  color: var(--ink-soft);
}

/* ==========================================================================
   12g. Issues we help you with
   A dark band of six cards, shown on the Home page and every service page.
   ========================================================================== */

.concerns {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(107, 63, 160, 0.5), transparent 70%),
    linear-gradient(160deg, var(--plum-900), var(--plum-950));
}

/* Faint stars drift slowly behind the cards */
.concerns::before {
  content: "";
  position: absolute;
  inset: -72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23F6AD1F'%3E%3Cpath fill-opacity='.4' d='M14 8l1.4 4.6L20 14l-4.6 1.4L14 20l-1.4-4.6L8 14l4.6-1.4z'/%3E%3Ccircle cx='52' cy='22' r='1.5' fill-opacity='.45'/%3E%3Ccircle cx='32' cy='56' r='1.2' fill-opacity='.4'/%3E%3Cpath fill-opacity='.3' d='M58 50l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  opacity: 0.55;
  animation: pattern-drift 120s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
  pointer-events: none;
}

.concerns .container {
  position: relative;
}

.concerns__head {
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}

.concerns__eyebrow {
  margin-bottom: 0.6rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-bright);
}

.concerns__head .section__title {
  max-width: none;
}

.concerns__lead {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.76);
}

.concerns__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.concern-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    transform 0.4s var(--ease-out),
    background-color 0.3s,
    border-color 0.3s,
    box-shadow 0.4s var(--ease-out);
}

.concern-card:hover,
.concern-card:focus-visible {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(246, 173, 31, 0.55);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
}

.concern-card:hover .plan__medallion,
.concern-card:focus-visible .plan__medallion {
  transform: scale(1.1) rotate(-6deg);
  box-shadow:
    0 0 54px rgba(246, 173, 31, 0.5),
    inset 0 0 22px rgba(246, 173, 31, 0.2);
}

.concern-card .plan__medallion {
  margin: 0.4rem 0.4rem 0.6rem;
}

.concerns__grid > :nth-child(2) { --i: 1; }
.concerns__grid > :nth-child(3) { --i: 2; }
.concerns__grid > :nth-child(4) { --i: 3; }
.concerns__grid > :nth-child(5) { --i: 4; }
.concerns__grid > :nth-child(6) { --i: 5; }

.concern-card__title {
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--white);
}

.concern-card__text {
  flex: 1;
  font-size: 0.97rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.concern-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold-bright);
}

.concern-card__arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease-out);
}

.concern-card:hover .concern-card__arrow,
.concern-card:focus-visible .concern-card__arrow {
  transform: translateX(5px);
}

.concerns__note {
  max-width: 46rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 960px) {
  .concerns__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .concerns__grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   12f. Daily panchang bar
   A slim bar above the header. The content is written by js/panchang.js and
   the bar stays hidden until it has something to show.
   ========================================================================== */

.panchang-bar {
  display: none;
  background: var(--plum-950);
  border-bottom: 1px solid rgba(246, 173, 31, 0.28);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.86);
}

.panchang-bar.is-ready {
  display: block;
}

.panchang-bar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
}

.panchang-bar__label {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.55rem;
  padding-right: 1rem;
  border-right: 1px solid var(--line-on-dark);
}

.panchang-bar__title {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}

.panchang-bar__date {
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

.pc-moon {
  display: inline-grid;
  flex: none;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 6px rgba(246, 231, 180, 0.45));
}

.pc-moon svg {
  width: 100%;
  height: 100%;
}

.pc-moon__dark {
  fill: #3a2455;
  stroke: rgba(246, 173, 31, 0.55);
  stroke-width: 0.8;
}

.pc-moon__lit {
  fill: #f6e7b4;
}

/* The summary items run along the bar, and scroll when they do not fit */
.panchang-bar__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}

.panchang-bar__track {
  display: flex;
  width: max-content;
}

.pc-list {
  display: flex;
  align-items: center;
}

.pc-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-inline: 1.15rem;
  white-space: nowrap;
}

/* A small gold diamond divides the items */
.pc-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--gold);
  opacity: 0.8;
  transform: translateY(-50%) rotate(45deg);
}

.pc-item__key {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold-bright);
}

.pc-item__value {
  font-weight: 700;
  color: var(--white);
}

.pc-item__note {
  color: rgba(255, 255, 255, 0.62);
}

.pc-item__badge {
  padding: 0.05rem 0.55rem;
  background: var(--gold-bright);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--plum-950);
}

.panchang-bar.is-scrolling .panchang-bar__track {
  animation: pc-marquee var(--pc-duration, 60s) linear infinite;
}

.panchang-bar.is-scrolling:hover .panchang-bar__track,
.panchang-bar.is-scrolling:focus-within .panchang-bar__track,
.panchang-bar.is-paused .panchang-bar__track,
.panchang-bar.is-open .panchang-bar__track {
  animation-play-state: paused;
}

@keyframes pc-marquee {
  to {
    transform: translateX(-50%);
  }
}

.panchang-bar__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.6rem;
}

.panchang-bar__city {
  max-width: 9.5rem;
  padding: 0.3rem 1.6rem 0.3rem 0.65rem;
  background-color: rgba(255, 255, 255, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23F6AD1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.55rem center;
  background-repeat: no-repeat;
  background-size: 0.6rem;
  border: 1px solid var(--line-on-dark);
  border-radius: 8px;
  font: inherit;
  font-size: 0.78rem;
  color: var(--white);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.panchang-bar__city option {
  color: var(--ink);
}

.panchang-bar__toggle {
  padding: 0.32rem 0.85rem;
  background: transparent;
  border: 1px solid rgba(246, 173, 31, 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gold-bright);
  transition: background-color 0.25s, color 0.25s;
}

.panchang-bar__toggle:hover,
.panchang-bar.is-open .panchang-bar__toggle {
  background: var(--gold-bright);
  color: var(--plum-950);
}

.panchang-bar__pause {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
  color: var(--white);
}

.panchang-bar:not(.is-scrolling) .panchang-bar__pause {
  display: none;
}

.panchang-bar__pause svg {
  width: 12px;
  height: 12px;
}

.pc-pause__bars {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.pc-pause__play {
  display: none;
  fill: currentColor;
}

.panchang-bar.is-paused .pc-pause__bars {
  display: none;
}

.panchang-bar.is-paused .pc-pause__play {
  display: block;
}

/* The details panel opens below the bar */
.panchang-panel {
  padding-block: 1.5rem 1.25rem;
  background: var(--plum-900);
  border-top: 1px solid var(--line-on-dark);
  animation: pc-open 0.35s var(--ease-out);
}

.panchang-panel[hidden] {
  display: none;
}

@keyframes pc-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.panchang-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}

.panchang-panel__title {
  font-size: 1.3rem;
  color: var(--white);
}

.panchang-panel__city {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}

.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.85rem;
}

.pc-card {
  padding: 0.9rem 1.05rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}

.pc-card__key {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--gold-bright);
}

.pc-card__value {
  margin-top: 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
}

.pc-card__note {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

.panchang-panel__note {
  max-width: 52rem;
  margin-top: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

/* On phones the bar becomes two rows: the date and button above, the scrolling items below */
@media (max-width: 700px) {
  .panchang-bar__inner {
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    padding-block: 0.45rem;
  }

  .panchang-bar__label {
    order: 1;
    padding-right: 0;
    border-right: 0;
  }

  .panchang-bar__actions {
    order: 2;
    margin-left: auto;
  }

  .panchang-bar__viewport {
    order: 3;
    flex: 1 0 100%;
  }

  .panchang-bar__title,
  .panchang-bar__actions .panchang-bar__city {
    display: none;
  }
}


/* ==========================================================================
   12h. Personal Day (Home page)
   A compact section: two dropdowns and one card. It stays hidden until
   js/numerology.js is ready, because it is no use without it.
   ========================================================================== */

.daily-day {
  display: none;
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}

.daily-day.is-ready {
  display: block;
}

.daily-day__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.daily-day__eyebrow {
  margin-bottom: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-deep);
}

.daily-day__title {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.15;
  color: var(--plum-800);
}

.daily-day__date {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--plum-600);
}

.daily-day__text {
  margin-top: 0.6rem;
  color: var(--ink-soft);
}

.daily-day__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.75rem;
  max-width: 24rem;
  margin-top: 1.1rem;
}

.field__select {
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%238A5A0C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.85rem center;
  background-repeat: no-repeat;
  background-size: 0.65rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.daily-day__error {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #b3261e;
}

.daily-day__error:empty {
  display: none;
}

.daily-day__note {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* The card that shows the result */
.daily-day__card {
  display: flex;
  align-items: center;
  min-height: 15rem;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 0%, rgba(155, 127, 192, 0.35), transparent 55%),
    linear-gradient(150deg, var(--plum-900), var(--plum-950));
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(42, 13, 66, 0.22);
  color: var(--white);
}

.daily-day__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  max-width: 22rem;
  margin: auto;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
}

.daily-day__empty[hidden],
.daily-day__result[hidden] {
  display: none;
}

.daily-day__empty svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daily-day__result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.1rem, 3vw, 1.9rem);
  align-items: center;
  width: 100%;
}

.daily-day__number {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(246, 173, 31, 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  box-shadow:
    0 0 40px rgba(246, 173, 31, 0.28),
    inset 0 0 20px rgba(246, 173, 31, 0.12);
}

/* A dashed ring that turns slowly around the number */
.daily-day__number::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px dashed rgba(246, 173, 31, 0.55);
  border-radius: 50%;
  animation: spin 32s linear infinite;
}

.daily-day__label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.daily-day__digit {
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--gold-bright);
}

.daily-day__digit.is-new {
  animation: pd-pop 0.7s var(--ease-out);
}

@keyframes pd-pop {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(-12deg);
  }
}

.daily-day__theme {
  font-size: 1.65rem;
  line-height: 1.15;
  color: var(--white);
}

.daily-day__brings {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.84);
}

.daily-day__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.25rem;
  margin-top: 0.9rem;
}

.daily-day__lists dt {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold-bright);
}

.daily-day__lists dd {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.daily-day__more {
  display: inline-block;
  margin-top: 1rem;
  border-bottom: 1px solid rgba(246, 173, 31, 0.5);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold-bright);
  transition: border-color 0.25s;
}

.daily-day__more:hover {
  border-bottom-color: var(--gold-bright);
}

@media (max-width: 900px) {
  .daily-day__layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .daily-day__result {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .daily-day__lists {
    text-align: left;
  }
}


/* ==========================================================================
   12i. Home product showcase
   Tabs on the left, one animated product on the right. The glow and
   background change with the product, and it plays through them by itself.
   ========================================================================== */

.showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--plum-950);
}

.showcase__bgs {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* One backdrop per product; the active one fades in */
.showcase__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 65% 85% at 72% 48%, var(--art-glow), transparent 68%),
    linear-gradient(160deg, var(--art-b) -10%, var(--plum-950) 78%);
  transition: opacity 1.1s ease;
}

.showcase__bg.is-active {
  opacity: 1;
}

.showcase__bg::after {
  content: "";
  position: absolute;
  inset: -72px;
  background-image: var(--art-pattern);
  background-size: 72px 72px;
  opacity: 0.45;
  animation: pattern-drift 100s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 12%, transparent 68%);
  mask-image: radial-gradient(ellipse at 70% 45%, #000 12%, transparent 68%);
}

.showcase__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.32;
  pointer-events: none;
  animation: showcase-drift 20s ease-in-out infinite alternate;
}

.showcase__orb--gold {
  top: -8rem;
  left: -6rem;
  width: 26rem;
  height: 26rem;
  background: rgba(246, 173, 31, 0.6);
}

.showcase__orb--violet {
  right: -8rem;
  bottom: -10rem;
  width: 30rem;
  height: 30rem;
  background: rgba(155, 127, 192, 0.65);
  animation-duration: 26s;
}

@keyframes showcase-drift {
  to {
    transform: translate(60px, 40px) scale(1.15);
  }
}

.showcase__stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.showcase__head {
  max-width: 42rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.showcase__eyebrow {
  margin-bottom: 0.6rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-bright);
}

.showcase__title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  color: var(--white);
}

.showcase__lead {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.78);
}

.showcase__layout {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: center;
}

/* ---- Tabs ---- */

.showcase__tabs {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.showcase__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  text-align: left;
  color: var(--white);
  transition:
    background-color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s,
    transform 0.3s var(--ease-out);
}

.showcase__tab:hover {
  background: rgba(255, 255, 255, 0.11);
  transform: translateX(4px);
}

.showcase__tab:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.showcase__tab.is-active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(246, 173, 31, 0.7);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  transform: translateX(8px);
}

.showcase__tab-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(246, 173, 31, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--gold-bright);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}

.showcase__tab.is-active .showcase__tab-icon {
  box-shadow: 0 0 22px rgba(246, 173, 31, 0.45);
  transform: rotate(-8deg) scale(1.08);
}

.showcase__tab-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.showcase__tab-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.showcase__tab-price {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.66);
}

/* The bar along the tab fills while a product is on show, then the next one begins */
.showcase__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-bright), var(--orange));
}

.showcase__tab.is-active .showcase__progress {
  animation: showcase-progress var(--showcase-time, 7s) linear forwards;
}

@keyframes showcase-progress {
  to {
    width: 100%;
  }
}

.showcase.is-static .showcase__progress,
.showcase.is-static .showcase__pause {
  display: none;
}

.showcase.is-paused .showcase__progress,
.showcase.is-offscreen .showcase__progress,
.showcase__layout:hover .showcase__progress,
.showcase__layout:has(:focus-visible) .showcase__progress {
  animation-play-state: paused;
}

/* ---- The stage ---- */

.showcase__stage {
  position: relative;
  display: grid;
  min-height: 29rem;
}

.showcase__pause {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: var(--white);
  transition: background-color 0.25s;
}

.showcase__pause:hover {
  background: rgba(255, 255, 255, 0.24);
}

.showcase__pause svg {
  width: 13px;
  height: 13px;
}

.sc-pause__bars {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sc-pause__play {
  display: none;
  fill: currentColor;
}

.showcase.is-paused .sc-pause__bars {
  display: none;
}

.showcase.is-paused .sc-pause__play {
  display: block;
}

.showcase__panel {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
}

.showcase__panel[hidden] {
  display: none;
}

.showcase__art {
  position: relative;
  width: min(100%, 25rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

/* Two rings turn slowly around the illustration */
.showcase__art::before,
.showcase__art::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.showcase__art::before {
  inset: -3%;
  border: 1px dashed rgba(246, 173, 31, 0.45);
  animation: spin 60s linear infinite;
}

.showcase__art::after {
  inset: -11%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: spin 90s linear infinite reverse;
}

/* The illustration drifts a little with the pointer */
.showcase__art-inner {
  position: absolute;
  inset: -6%;
  transform: translate(calc(var(--px, 0) * 16px), calc(var(--py, 0) * 12px));
  transition: transform 0.3s ease-out;
}

.showcase__name {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  color: var(--white);
}

.showcase__tagline {
  margin-top: 0.45rem;
  font-weight: 700;
  color: var(--gold-bright);
}

.showcase__desc {
  margin-top: 0.85rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.showcase__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.showcase__options li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.86);
}

.showcase__options strong {
  font-weight: 800;
  color: var(--gold-bright);
}

.showcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.showcase__actions .btn {
  padding: 0.85rem 1.05rem;
  font-size: 0.9rem;
}

/* Each product arrives with a little choreography */
.showcase__panel.is-entering .showcase__art {
  animation: showcase-art 0.9s var(--ease-out) both;
}

.showcase__panel.is-entering .showcase__info > * {
  animation: showcase-rise 0.7s var(--ease-out) both;
}

.showcase__panel.is-entering .showcase__info > :nth-child(2) { animation-delay: 0.07s; }
.showcase__panel.is-entering .showcase__info > :nth-child(3) { animation-delay: 0.14s; }
.showcase__panel.is-entering .showcase__info > :nth-child(4) { animation-delay: 0.21s; }
.showcase__panel.is-entering .showcase__info > :nth-child(5) { animation-delay: 0.28s; }

@keyframes showcase-art {
  from {
    opacity: 0;
    transform: scale(0.86) rotate(-5deg);
  }
}

@keyframes showcase-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Off screen, everything holds still */
.showcase.is-offscreen .showcase__panel *,
.showcase.is-offscreen .showcase__panel::before,
.showcase.is-offscreen .showcase__art::before,
.showcase.is-offscreen .showcase__art::after,
.showcase.is-offscreen .showcase__orb,
.showcase.is-offscreen .showcase__bg::after {
  animation-play-state: paused;
}

.showcase__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* ---- Smaller screens ---- */

@media (max-width: 960px) {
  .showcase__layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* The tabs become a row that scrolls sideways */
  .showcase__tabs {
    flex-direction: row;
    margin-inline: calc(var(--gutter, 1.25rem) * -1);
    padding: 0.2rem var(--gutter, 1.25rem) 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .showcase__tabs::-webkit-scrollbar {
    display: none;
  }

  .showcase__tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 11rem;
    scroll-snap-align: center;
  }

  .showcase__tab:hover,
  .showcase__tab.is-active {
    transform: none;
  }

  .showcase__stage {
    min-height: 0;
  }

  .showcase__panel {
    grid-template-columns: 1fr;
  }

  .showcase__art {
    width: min(78%, 19rem);
  }

  .showcase__pause {
    top: -0.25rem;
  }
}

@media (max-width: 560px) {
  .showcase__actions .btn {
    flex: 1 1 100%;
  }
}


/* ==========================================================================
   13a. Newsletter sign-up and the order reference
   ========================================================================== */

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background:
    radial-gradient(ellipse 60% 120% at 0% 0%, rgba(246, 173, 31, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
}

.newsletter[hidden] {
  display: none;
}

.newsletter__title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--white);
}

.newsletter__text {
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.78);
}

.newsletter__form {
  display: grid;
  gap: 0.9rem;
}

.newsletter__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.newsletter__topic {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem 0.4rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.25s;
}

.newsletter__topic input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.newsletter__topic::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 0.5rem;
  border-radius: 50%;
  border: 2px solid var(--c, var(--gold));
  transition: background-color 0.2s;
}

.newsletter__topic:has(input:checked) {
  background: color-mix(in srgb, var(--c, #d9a441) 20%, transparent);
  border-color: var(--c, var(--gold));
  color: var(--white);
}

.newsletter__topic:has(input:checked)::before {
  background: var(--c, var(--gold));
}

.newsletter__topic:has(input:focus-visible) {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.newsletter__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 0.6rem;
}

.newsletter__input {
  min-width: 0;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: var(--white);
  font: inherit;
}

.newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter__input:focus {
  outline: 0;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 4px rgba(246, 173, 31, 0.18);
}

.newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
}

.newsletter__consent input {
  margin-top: 0.2rem;
  accent-color: var(--gold-bright);
}

.newsletter__msg {
  min-height: 1.3em;
  font-size: 0.86rem;
  font-weight: 700;
}

.newsletter__msg.is-ok {
  color: #7be3b4;
}

.newsletter__msg.is-error {
  color: #ff9aa9;
}

@media (max-width: 860px) {
  .newsletter {
    grid-template-columns: 1fr;
  }

  .newsletter__row {
    grid-template-columns: 1fr;
  }
}

.order-success__ref {
  display: inline-block;
  margin: 0.4rem 0 0.9rem;
  padding: 0.35rem 1rem;
  border: 1px solid rgba(217, 164, 65, 0.6);
  border-radius: 999px;
  background: rgba(217, 164, 65, 0.12);
  font-size: 0.9rem;
  color: var(--gold-deep);
}

.order-success__ref strong {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
}


/* ==========================================================================
   13b. Signature services
   The six personal services: their artwork, the situation list, the
   "Talk to Sargam" band, and the cards that link them together.
   ========================================================================== */

/* ---- Artwork ---- */

.art--sig-love,
.art--sig-business,
.art--sig-health,
.art--sig-family,
.art--sig-energy,
.art--sig-chakra {
  overflow: visible;
}

.sg__spin,
.sg__spin-rev,
.sg__spin-slow,
.sg__guard {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.sg__spin { animation: spin 70s linear infinite; }
.sg__spin-rev { animation: spin 48s linear infinite reverse; }
.sg__spin-slow { animation: spin 90s linear infinite; }

/* Love */
.sg__ring-a { animation: sg-draw-in-a 5s ease-in-out infinite alternate; }
.sg__ring-b { animation: sg-draw-in-b 5s ease-in-out infinite alternate; }

@keyframes sg-draw-in-a { to { transform: translateX(14px); } }
@keyframes sg-draw-in-b { to { transform: translateX(-14px); } }

.sg__beat {
  transform-box: fill-box;
  transform-origin: center;
  animation: sg-beat 2.2s ease-in-out infinite;
}

@keyframes sg-beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.18); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
}

.sg__rise {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sg-rise 6s ease-in infinite;
}

.sg__rise.r2 { animation-delay: -2s; }
.sg__rise.r3 { animation-delay: -4s; }

@keyframes sg-rise {
  0% { opacity: 0; transform: translateY(26px) scale(0.6); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.1); }
}

/* Business */
.sg__bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: sg-bar 5s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * 0.18s);
}

@keyframes sg-bar {
  0% { transform: scaleY(0); }
  30%, 88% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0.4; }
}

.sg__trend {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sg-trend 5s ease-in-out infinite;
}

@keyframes sg-trend {
  0%, 12% { stroke-dashoffset: 1; opacity: 1; }
  55%, 88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.sg__goal {
  transform-box: fill-box;
  transform-origin: center;
  animation: sg-goal 5s ease-in-out infinite;
}

@keyframes sg-goal {
  0%, 50% { opacity: 0; transform: scale(0.2); }
  62% { opacity: 1; transform: scale(1.3); }
  75%, 100% { opacity: 1; transform: scale(1); }
}

/* Health */
.sg__pulse {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sg-pulse 3.4s linear infinite;
}

@keyframes sg-pulse {
  0% { stroke-dashoffset: 1; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.sg__ripple {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sg-ripple 4.5s ease-out infinite;
  animation-delay: calc(var(--i) * 1.5s);
}

@keyframes sg-ripple {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.75); }
}

/* Family */
.sg__warm {
  transform-box: fill-box;
  transform-origin: center;
  animation: sg-warm 4.5s ease-in-out infinite;
}

@keyframes sg-warm {
  0%, 100% { opacity: 0.7; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Negative energies */
.sg__guard { animation: spin 80s linear infinite reverse; }

.sg__wisp {
  stroke-dasharray: 90;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: sg-wisp 5s ease-out infinite;
  animation-delay: calc(var(--i) * 0.7s);
}

@keyframes sg-wisp {
  0% { opacity: 0; stroke-dashoffset: 90; }
  25% { opacity: 0.85; }
  100% { opacity: 0; stroke-dashoffset: -90; }
}

.sg__core {
  transform-box: fill-box;
  transform-origin: center;
  animation: sg-core 3.6s ease-in-out infinite;
}

@keyframes sg-core {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.14) rotate(22deg); }
}

/* Chakra */
.sg__node {
  transform-box: fill-box;
  transform-origin: center;
  animation: sg-node 4.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.5s);
}

@keyframes sg-node {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  14% { opacity: 1; transform: scale(1.22); }
  30% { opacity: 0.75; transform: scale(1); }
}

/* ---- The heading ---- */

.sig-pricetag {
  align-self: center;
  margin: 0;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(246, 173, 31, 0.55);
  border-radius: 999px;
  background: rgba(246, 173, 31, 0.1);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--gold-bright);
}

/* ---- When this can help ---- */

.sig-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem clamp(1rem, 3vw, 2.5rem);
}

.sig-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.5;
  color: var(--plum-800);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.3s;
}

.sig-list__item:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 164, 65, 0.6);
  box-shadow: 0 14px 34px rgba(42, 13, 66, 0.1);
}

.sig-list__tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--plum-900);
}

.sig-list__tick svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sig-note {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(217, 164, 65, 0.12);
  border: 1px solid rgba(217, 164, 65, 0.5);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--plum-800);
}

.sig-prod__kind {
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---- The hub cards ---- */

.sig-card {
  gap: 0.6rem;
}

.sig-card .concern-card__text {
  flex: none;
}

.sig-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.sig-card__chips li {
  padding: 0.22rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}

.sig-card__label {
  margin-top: 0.7rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.sig-card__prods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}

.sig-card__prods li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

.sig-card__prods svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sig-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sig-card__price {
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.sig-card__foot .concern-card__link {
  margin-top: 0;
}

.mini-plan__price--text {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---- Talk to Sargam ---- */

.talk {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.talk__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.talk__eyebrow {
  margin-bottom: 0.6rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-bright);
}

.talk__title {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--white);
}

.talk__lead {
  margin-top: 1rem;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
}

.talk__price {
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(246, 173, 31, 0.1);
  border-left: 3px solid var(--gold-bright);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

.talk__direct {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.talk-card {
  margin-top: 0;
}

.pref {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pref__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pref__option {
  position: relative;
  cursor: pointer;
}

.pref__option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.pref__option span {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  color: var(--plum-800);
  background: var(--white);
  transition: all 0.25s;
}

.pref__option input:checked + span {
  background: var(--plum-800);
  border-color: var(--plum-800);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(42, 13, 66, 0.25);
}

.pref__option input:focus-visible + span {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* ---- Other services ---- */

.sig-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

.sig-mini {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.3s;
}

.sig-mini:hover,
.sig-mini:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(217, 164, 65, 0.7);
  box-shadow: 0 18px 40px rgba(42, 13, 66, 0.12);
}

.sig-mini__medallion {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--plum-800), var(--plum-950));
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.4);
  color: var(--gold-bright);
}

.sig-mini__medallion svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sig-mini__body {
  flex: 1;
  min-width: 0;
}

.sig-mini__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--plum-800);
}

.sig-mini__text {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.sig-mini .concern-card__arrow {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease-out);
}

.sig-mini:hover .concern-card__arrow {
  transform: translateX(4px);
}

/* Four products sit four across, then two by two, then one */
.product-grid.product-grid--sig {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .product-grid.product-grid--sig {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .product-grid.product-grid--sig {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .talk__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sig-related {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .sig-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .sig-pricetag {
    align-self: flex-start;
  }
}


/* ==========================================================================
   13. Footer
   ========================================================================== */

.site-footer {
  padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
  background: var(--plum-950);
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   Subscribe section (above footer)
   ========================================================================== */

.subscribe-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #1a0d2e 0%, #2d1248 45%, color-mix(in srgb, #2d1248 65%, #7b4f12) 100%);
}

.subscribe-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 15% 50%, rgba(212, 160, 23, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 85% 20%, rgba(212, 160, 23, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

.subscribe-section__header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.subscribe-section__eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.3rem 1rem;
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
}

.subscribe-section__heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--gold-bright);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.subscribe-section__subheading {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  max-width: 38rem;
  margin-inline: auto;
}

.subscribe-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  backdrop-filter: blur(6px);
}

.subscribe-section__label {
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.subscribe-section__title {
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--gold-bright);
  line-height: 1.2;
}

.subscribe-section__text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.subscribe-section__perks {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.subscribe-section__perk {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}

.subscribe-section__perk::before {
  content: "✦";
  color: var(--gold);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.subscribe-section__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.subscribe-section__fields .subscribe-section__input:last-child {
  grid-column: 1 / -1;
}

.subscribe-section__input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--white);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.subscribe-section__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.subscribe-section__input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
}

.subscribe-section__form .btn {
  margin-top: 0.25rem;
  width: 100%;
}

.subscribe-section__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  line-height: 1.45;
}

.subscribe-section__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 0.15rem;
  accent-color: var(--gold);
  cursor: pointer;
}

.subscribe-section__note {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
}

.subscribe-section__msg {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--gold-bright);
  text-align: center;
  min-height: 1.4em;
}

@media (max-width: 700px) {
  .subscribe-section__inner {
    grid-template-columns: 1fr;
  }

  .subscribe-section__fields {
    grid-template-columns: 1fr;
  }

  .subscribe-section__fields .subscribe-section__input:last-child {
    grid-column: auto;
  }
}

.subscribe-section__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  min-height: 180px;
  animation: fadeInUp 0.5s ease both;
}

.subscribe-section__success-icon {
  font-size: 2.2rem;
  color: var(--gold);
  margin-bottom: 1rem;
  line-height: 1;
}

.subscribe-section__success-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--gold-bright);
  margin-bottom: 0.6rem;
  line-height: 1.2;
}

.subscribe-section__success-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hbs-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--white);
}

.site-footer__emblem {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.site-footer__about {
  max-width: 22rem;
  margin-top: 1.1rem;
  font-size: 0.95rem;
}

.site-footer__heading {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-bright);
}

.site-footer__links {
  display: grid;
  gap: 0.55rem;
}

.site-footer__link {
  font-size: 0.95rem;
  transition: color 0.2s;
}

.site-footer__link:hover {
  color: var(--gold-bright);
}

.site-footer__contact {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.site-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 960px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__col--brand {
    grid-column: 1 / -1;
  }
}

/* Remove duplicate footer section label from old CSS */

@media (max-width: 560px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   14. Scroll reveal
   Elements only start hidden when JavaScript is running (the "js" class is
   added to <html> in the page head), so the page is fully readable without it.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   15. Page transitions
   Browsers that support cross-document view transitions fade between pages.
   ========================================================================== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 0.25s ease both fade-out;
}

::view-transition-new(root) {
  animation: 0.4s ease both fade-in;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}


/* ==========================================================================
   16. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .orbit__line--draw {
    stroke-dashoffset: 0;
  }

  .step:not(:last-child)::after {
    transform: none !important;
  }

  .hero__title {
    background-position: 0 0;
  }

  @view-transition {
    navigation: none;
  }
}


/* ==========================================================================
   Multi-intention order form & crystal guide
   ========================================================================== */

/* Price to be agreed */
.option__tbd {
  font-style: normal;
  font-size: 0.83rem;
  color: var(--plum-400);
}

.tbd-note {
  margin: 0 0 1.1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.88rem;
  background: rgba(var(--gold-rgb, 200 155 90), 0.1);
  border: 1px solid rgba(var(--gold-rgb, 200 155 90), 0.35);
  color: var(--plum-600);
}

:root[data-theme="dark"] .tbd-note {
  color: var(--plum-200);
  background: rgba(var(--gold-rgb, 200 155 90), 0.08);
}

/* Multi-intention group intro */
.multi-intent-intro {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--plum-500);
}

/* Each per-item slot */
.multi-intent-slot {
  padding: 1rem;
  margin: 0.4rem 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2, rgba(var(--plum-rgb, 80 40 120), 0.03));
}

.multi-intent-slot[hidden] { display: none; }

.multi-intent-group[hidden] { display: none; }

.multi-colour-slot[hidden] { display: none; }

/* Crystal guide table */
.cg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.cg-table th {
  padding: 0.6rem 0.9rem;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--plum-400);
  border-bottom: 2px solid var(--line);
}

.cg-table td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}

.cg-table tr:last-child td { border-bottom: 0; }

.cg__name { font-weight: 700; white-space: nowrap; }
.cg__assoc { color: var(--gold); font-style: italic; }
.cg__desc { color: var(--plum-500); }

.cg__care {
  margin: 1.2rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.88rem;
  background: rgba(var(--plum-rgb, 80 40 120), 0.04);
  border: 1px solid var(--line);
}

@media (max-width: 640px) {
  .cg-table { font-size: 0.82rem; }
  .cg-table th, .cg-table td { padding: 0.5rem 0.6rem; }
  .cg__assoc { display: block; }
}


/* ==========================================================================
   Home services grid — enhanced layout replacing the carousel
   ========================================================================== */

.services-home__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.services-home__eyebrow {
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.services-home__head .section__title {
  margin-bottom: 0;
}

.services-home__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 960px) {
  .services-home__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .services-home__grid {
    grid-template-columns: 1fr;
  }
  .services-home__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Cards in the home grid — override carousel flex sizing */
.service-card--home {
  flex: none;
  width: 100%;
  padding: 0;
  overflow: hidden;
  gap: 0;
  position: relative;
}

/* Coloured top accent bar */
.service-card__accent-bar {
  display: block;
  height: 4px;
  width: 100%;
  background: var(--svc-accent, var(--gold));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: height 0.3s var(--ease-out);
}

.service-card--home:hover .service-card__accent-bar,
.service-card--home:focus-visible .service-card__accent-bar {
  height: 6px;
}

/* Per-service accent colours — brand palette only */
[data-svc="tarot"]     { --svc-accent: var(--lavender); }
[data-svc="numerology"]{ --svc-accent: var(--plum-600); }
[data-svc="healing"]   { --svc-accent: var(--orange); }
[data-svc="signature"] { --svc-accent: var(--gold-bright); }

/* Inner padding for home cards */
.service-card--home .service-card__glyph,
.service-card--home .service-card__name,
.service-card--home .service-card__desc,
.service-card--home .service-card__perks,
.service-card--home .service-card__foot {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.service-card--home .service-card__glyph {
  margin-top: 1.5rem;
  width: 52px;
  height: 52px;
  background: color-mix(in srgb, var(--svc-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--svc-accent) 30%, transparent);
  color: var(--svc-accent);
}

.service-card--home:hover .service-card__glyph,
.service-card--home:focus-visible .service-card__glyph {
  background: var(--svc-accent);
  border-color: var(--svc-accent);
  color: var(--white);
}

.service-card--home .service-card__name {
  margin-top: 1rem;
  font-size: 1.25rem;
}

.service-card--home .service-card__desc {
  margin-top: 0.4rem;
  font-size: 0.92rem;
}

/* Benefit bullets */
.service-card__perks {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  list-style: none;
  flex: 1;
}

.service-card__perks li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.83rem;
  color: var(--ink-soft);
}

.service-card__perks li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--svc-accent, var(--gold));
}

.service-card--home .service-card__foot {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

/* Featured (Signature) card overrides */
.service-card--home.service-card--featured .service-card__perks {
  border-top-color: var(--line-on-dark);
}

.service-card--home.service-card--featured .service-card__perks li {
  color: rgba(255,255,255,0.72);
}

.service-card--home.service-card--featured .service-card__foot {
  border-top-color: var(--line-on-dark);
}

/* ==========================================================================
   PRODUCTS HIDDEN
   To restore: delete or comment out this entire block.
   ========================================================================== */
[data-products-nav],
#home-products,
[data-products-footer],
#products { display: none !important; }

/* Reflow footer to 4 columns when Products column is hidden */
.site-footer__grid {
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr);
}