/* =============================================================================
   Harmony Pavett — harmonypavett.com static rebuild
   Tokens transcribed verbatim from Elementor kit `.elementor-kit-10`.
   ========================================================================== */

@import url("../assets/fonts/fonts.css");

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* palette */
  --c-primary:   #E2B7B9;   /* blush — section headings */
  --c-secondary: #B48E92;   /* mauve — subheads, buttons */
  --c-text:      #5D5D5D;   /* body copy, lower page */
  --c-heading:   #444444;   /* body copy, upper page */
  --c-muted:     #656565;
  --c-teal:      #069494;
  --c-teal-dark: #006171;   /* SEND MESSAGE only */
  --c-white:     #FFFFFF;
  --c-offwhite:  #FBFAFA;   /* text on dark cards */

  /* section tints */
  --t-music:       #FFF4F2;
  --t-testimonial: #FFF0EA;
  --t-retreat:     #FDF4F1;
  --t-egg:         #FFFEFD;
  --t-faq:         #FFF3F3;
  --t-contact:     #F5E3E3;

  /* type */
  --font-body:    "Poppins", sans-serif;
  --font-accent:  "Montserrat", sans-serif;
  --font-serif:   "Cinzel", serif;

  --fs-display:   75px;   /* hero + card headings, weight 100 */
  --fs-heading:   60px;   /* section headings, weight 200 */
  --fs-event:     35px;
  --fs-player:    30px;
  --fs-album:     24px;
  --fs-subhead:   18px;
  --fs-body:      17px;
  --fs-card:      16px;
  --fs-accent:    11px;

  /* layout */
  --container:      1140px;
  --container-wide: 1267px;
  --section-pad-y:  132px;
  --section-pad-b:  66px;

  --shadow-card: 0 25px 50px -25px rgba(0, 0, 0, .5);
}

/* -----------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 200 var(--fs-body)/26px var(--font-body);
  color: var(--c-text);
  background: var(--c-offwhite);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }

:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 3px; }

/* -----------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

/* max-width carries 20px of gutter so the *content box* is exactly 1140 / 1267,
   matching Elementor's zero-padding containers while keeping gutters on narrow screens */
.container {
  width: 100%;
  max-width: calc(var(--container) + 40px);
  margin-inline: auto;
  padding-inline: 20px;
}

.container--wide { max-width: calc(var(--container-wide) + 40px); }

.section { padding-block: var(--section-pad-y) var(--section-pad-b); }
.section--flush { padding-block: 0; }

/* These sections are full-bleed containers on the original; the card inside
   carries the width (96vw for the hero, 80vw for the rest). Leaving them in the
   1140 container clamped the cards and pinched their columns. */
.hero > .container,
.section--vibrational > .container,
.section--newsletter > .container,
.section--bali > .container { max-width: 100%; padding-inline: 0; }

.section--music       { background: var(--t-music); }
.section--testimonial { background: var(--t-testimonial); }
.section--retreat     { background: var(--t-retreat); }
.section--egg         { background: var(--t-egg); }
.section--faq         { background: var(--t-faq); }
.section--contact     { background: var(--t-contact); }

/* two-column image + text row — 520 + 100 gap + 520 = 1140 */
.split {
  display: flex;
  align-items: center;
  gap: 100px;
}
.split__media { flex: 0 0 520px; }
.split__media img {
  width: 520px;
  height: 520px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.split__body { flex: 0 0 520px; min-width: 0; }
.split--reverse { flex-direction: row-reverse; }

/* Stack of widgets on Elementor's 20px rhythm.
   Children STRETCH to the column width — headings, dividers, paragraphs and
   forms all measure the full column on the original. Only buttons opt out,
   since they size to their own content. */
.stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.stack > .btn,
.stack > .btn-row { align-self: flex-start; }
.stack--center { text-align: center; }
.stack--center > * { margin-inline: auto; }

/* -----------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.display {
  font-size: var(--fs-display);
  font-weight: 100;
  line-height: 1;
  letter-spacing: normal;
}

.section-heading {
  font-size: var(--fs-heading);
  font-weight: 200;
  line-height: 1;
  color: var(--c-primary);
}

.section-subhead {
  font-size: var(--fs-subhead);
  font-weight: 400;
  line-height: 1;
  color: var(--c-secondary);
}

.eyebrow {
  font-size: var(--fs-card);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}

.meta {
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.lead   { font-size: var(--fs-body); font-weight: 200; line-height: 26px; }
.body   { font-size: var(--fs-body); font-weight: 200; line-height: 26px; }
.body--card { font-size: var(--fs-card); font-weight: 200; line-height: 24px; }
.body--dark { color: var(--c-heading); }

/* Elementor divider: a 1px rule inside a widget with 2px block padding.
   Width and color vary per instance — see the modifiers. */
.divider {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .11);
  margin-block: 2px;
}
.divider--hero    { width: 399px; border-top-color: rgba(251, 250, 250, .15); }
.divider--intro   { width: 285px; border-top-color: rgba(0, 0, 0, .17); }
.divider--onlight { border-top-color: rgba(0, 0, 0, .11); }
.divider--ondark  { border-top-color: rgba(251, 250, 250, .15); }

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

/* -----------------------------------------------------------------------------
   5. The card motif
   Four blocks share this: rounded box, cover photo, dark overlay, deep shadow.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--c-offwhite);
  box-shadow: var(--shadow-card);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.card > * { position: relative; z-index: 1; }

/* DEPARTURE FROM THE ORIGINAL (deliberate, client direction):
   the WordPress site sets these three cards to 80vw with 10% inner padding,
   which leaves a 64vw content area. Widened to 90vw — sitting just inside the
   hero's 96vw — with the padding cut from 8vw to 5vw, so the content area goes
   64vw -> 80vw: 25% wider text and form columns. Change the two values below
   together to dial it further. */
.card--music,
.card--newsletter,
.card--retreat { width: 90vw; max-width: 100%; margin-inline: auto; }

/* --- hero (section 1) ---
   Top padding reserves the nav row (38 card pad + 71 nav + 20 gap = 129px),
   because the header is positioned over the card rather than nested inside it. */
.card--hero {
  width: 96vw;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 15px;
  padding: 129px 4.8vw 6.72vw;   /* 5% / 7% of the 96vw card */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-image: url("../assets/img/New-Horizontal.jpg");
  background-position: top center;
  min-height: 679px;
}
.card--hero::before {
  background-image: linear-gradient(260deg, #00000000 0%, #000000 100%);
  opacity: .8;
}

/* --- Vibrational Medicine (section 5) --- */
.card--music {
  padding: 5vw;                  /* widened content area — see note above */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 100px;
  background-image: url("../assets/img/New-Horizontal-1.jpg");
  background-position: top center;
}
/* two equal columns with a 100px gutter inside the card's 10% padding */
.card--music .card__col,
.card--newsletter .card__col,
.card--retreat .card__col { flex: 1 1 0; min-width: 0; }
.card--music::before {
  background-image: linear-gradient(180deg, #00000045 0%, #000000F7 78%);
  opacity: .61;
}

/* --- Stay Connected (section 8) --- */
.card--newsletter {
  padding: 2.5vw;                /* widened content area — see note above */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 100px;
  background-image: url("../assets/img/storysculptorai_a_diverse_group_of_spiritual_people_sitting_i_36cb614c-d583-4030-b98e-d8c4f35df20f_3.png");
  background-position: center center;
}
.card--newsletter::before { background-color: #000000; opacity: .6; }

/* --- Bali Retreat (section 12) --- */
.card--retreat {
  padding: 5vw;                  /* widened content area — see note above */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 100px;
  background-image: url("../assets/img/Untitled-1-7.jpg");
  background-position: center center;
}
.card--retreat::before { background-color: #000000; opacity: .6; }

/* --- Music Sheets hero (page 2) --- */
.card--sheets {
  width: 96vw;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 15px;
  padding: 129px 4.8vw 6.72vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 499px;
  background-image: url("../assets/img/Untitled-5-1.jpg");
  background-position: top center;
}
.card--sheets::before {
  background-image: linear-gradient(260deg, #00000000 0%, #000000 100%);
  opacity: .8;
}

.card__col { flex: 1; min-width: 0; }

/* -----------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--c-offwhite);
  background: var(--c-teal);
  border-radius: 3px;
  padding: 12px 24px;
  transition: opacity .2s ease;
}
.btn:hover { opacity: .85; }

.btn--mauve     { background: var(--c-secondary); }
.btn--teal-dark { background: var(--c-teal-dark); }

/* form submits: taller, flush padding, stretch to the column */
.btn--submit {
  padding: 0 24px;
  height: 40px;
  width: 100%;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* -----------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 12px; }

.form input,
.form textarea {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 300;
  color: var(--c-heading);
  background: rgba(255, 255, 255, .79);
  border: 0;
  border-radius: 3px;
}
.form textarea { height: 120px; padding-block: 12px; resize: vertical; }
.form input::placeholder,
.form textarea::placeholder { color: var(--c-muted); }

.form-note {
  margin-top: 4px;
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-offwhite);
  background: rgba(0, 0, 0, .35);
  border-radius: 3px;
  padding: 8px 12px;
}
.section--contact .form-note {
  color: var(--c-heading);
  background: rgba(255, 255, 255, .7);
}

/* -----------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */

/* sits over the hero card; 64px = 26px section pad + 38px card pad,
   so the nav row lands where the original's nested nav does */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: 64px;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.site-header__logo img { width: 200px; height: 51px; object-fit: contain; }

.nav { display: flex; align-items: center; gap: 44px; }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--c-offwhite);
  padding-block: 6px;
}

.nav__caret { width: 8px; height: 5px; fill: currentColor; }

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  min-width: 180px;
  padding: 8px 0;
  background: var(--c-white);
  border-radius: 3px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

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

.nav__dropdown a {
  display: block;
  padding: 10px 18px;
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--c-secondary);
}
.nav__dropdown a:hover { background: var(--t-contact); }

.nav-toggle { display: none; }

/* -----------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--c-teal);
  color: var(--c-offwhite);
  min-height: 66px;
  display: flex;
  align-items: center;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* -----------------------------------------------------------------------------
   10. Sections 1–4
   -------------------------------------------------------------------------- */

.hero { padding-top: 26px; }

.card--hero .display { max-width: 100%; }

/* both hero buttons are a fixed 150px on the original, not padding-sized */
.card--hero .btn { width: 150px; padding-inline: 0; }
/* original leaves 45px between the subhead and the buttons, not the 20px rhythm */
.card--hero .btn-row { margin-top: 25px; gap: 20px; }

/* trailing paragraph margin the WP theme applies inside text widgets;
   without it this section lands 12px short of the original's 221px */
.section--intro { padding-block: 0 12px; }
.intro__copy { width: 570px; max-width: 100%; }

.section--split { padding-block: 0; }
.section--split.section--mentoring { padding-block: 10px; }

/* labelled paragraph blocks in "How Harmony Helps" */
.pathway {
  display: block;
  font-weight: 400;
  color: var(--c-secondary);
}

/* -----------------------------------------------------------------------------
   11. Audio player
   Geometry transcribed from the Audier/MediaElement player: 372px wide,
   71px track rows on rgba(0,0,0,.2), a translucent now-playing bar, and a
   mauve control bar.
   -------------------------------------------------------------------------- */

.player-heading {
  font-size: var(--fs-player);
  font-weight: 200;
  line-height: 1;
  margin-bottom: 20px;
}

.player {
  width: 100%;
  max-width: 372px;
  border-radius: 15px 15px 5px 5px;
  overflow: hidden;
}

.player__list {
  max-height: 215px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.player__track {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "cue label" ".  desc";
  column-gap: 6px;
  align-content: center;
  min-height: 71px;
  padding: 10px;
  margin-bottom: 1px;
  background: rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: background .2s ease;
}
.player__track:hover { background: rgba(0, 0, 0, .3); }

.player__cue {
  grid-area: cue;
  font-size: 13px;
  line-height: 20px;
  color: #EB5802;
  visibility: hidden;
}
.player__track.is-active .player__cue { visibility: visible; }

.player__label {
  grid-area: label;
  font-size: 20px;
  font-weight: 300;
  line-height: 20px;
  color: var(--c-primary);
}

.player__desc {
  grid-area: desc;
  font-size: 14px;
  font-weight: 300;
  line-height: 31px;
  color: var(--c-secondary);
}

.player__now {
  min-height: 35px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  background: rgba(0, 0, 0, .16);
  font-size: 16px;
  font-style: italic;
  font-weight: 300;
  color: var(--c-offwhite);
}

.player__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 10px;
  background: var(--c-secondary);
  border-radius: 5px;
}

.player__play {
  flex: 0 0 32px;
  height: 40px;
  position: relative;
}
.player__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--c-white);
}
.player__play.is-playing::before {
  border-width: 0;
  width: 11px;
  height: 14px;
  border-left: 4px solid var(--c-white);
  border-right: 4px solid var(--c-white);
}

.player__rail {
  flex: 1;
  height: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
}
.player__fill {
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, .9);
}

.player__time {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 400;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   12. Carousel
   -------------------------------------------------------------------------- */

.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }

.carousel__track {
  display: flex;
  align-items: stretch;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.carousel__slide { flex: 0 0 100%; min-width: 0; }

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  z-index: 2;
  color: var(--c-secondary);
}
.carousel__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.carousel__arrow--prev { left: -45px; }
.carousel__arrow--prev::before { transform: rotate(-135deg); }
.carousel__arrow--next { right: -45px; }
.carousel__arrow--next::before { transform: rotate(45deg); }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
}
.carousel__dots button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-secondary);
  opacity: .35;
  transition: opacity .2s ease;
}
.carousel__dots button.is-active { opacity: 1; }

/* --- Vibrational Medicine section --- */
.section--vibrational { padding-block: 132px 113px; }

/* --- video carousel --- */
.section--video { padding-block: 57px 95px; }
.section--video .container { max-width: calc(1135px + 40px); }
.section--video .stack { gap: 20px; margin-bottom: 20px; }
.carousel--video .carousel__dots { margin-top: 10px; }
.video-thumb { display: block; position: relative; }
.video-thumb img { width: 100%; height: auto; box-shadow: var(--shadow-card); }
.video-thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 0 18px 30px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .9);
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5));
  transition: transform .2s ease;
}
.video-thumb:hover::after { transform: translate(-50%, -50%) scale(1.12); }

/* --- album carousel: ~3 slides of 327px across a 1080px viewport --- */
.section--albums { padding-block: 0 55px; }
.carousel--albums { padding-inline: 30px; }
.carousel--albums .carousel__track { gap: 20px; }
.carousel--albums .carousel__slide { flex: 0 0 327px; padding-block: 10px; align-self: stretch; }

.album { display: flex; flex-direction: column; }
.album__cover {
  width: 307px;
  height: 307px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: var(--shadow-card);
}
.album__title {
  font-size: var(--fs-album);
  font-weight: 200;
  line-height: 1;
  color: var(--c-secondary);
  margin-block: 20px;
}
.album .player { max-width: 307px; }

/* Album players sit on the pale #FFF4F2 section, not on a dark photo, so the
   original gives them a much lighter treatment than the Featured Tracks
   player: 3% black rows at 40px, and a blush now-playing bar with dark text. */
.album .player__track {
  min-height: 40px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, .03);
  grid-template-areas: "cue label";
  align-content: center;
}
.album .player__track:hover { background: rgba(0, 0, 0, .07); }
.album .player__label { font-size: 20px; line-height: 26px; }
.album .player__desc { display: none; }
.album .player__now {
  min-height: 66px;
  background: var(--c-primary);
  color: #333;
  font-style: italic;
}
/* Fixed 300px player: the list flexes to fill whatever the now-bar and
   controls leave, so a one-track album is the same height as a six-track one
   and every slide in the carousel lines up. */
.album .player {
  height: 300px;
  display: flex;
  flex-direction: column;
}
.album .player__list {
  flex: 1;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
}
.album .player__now,
.album .player__controls { flex: 0 0 auto; }
.btn--block { width: 307px; margin-top: 20px; }

/* -----------------------------------------------------------------------------
   13. Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, .9);
}
.lightbox.is-open { display: flex; }

.lightbox__frame {
  width: min(100%, 1100px);
  aspect-ratio: 16 / 9;
}
.lightbox__frame iframe { width: 100%; height: 100%; border: 0; }

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 42px;
  line-height: 1;
  color: var(--c-white);
  opacity: .8;
}
.lightbox__close:hover { opacity: 1; }

/* -----------------------------------------------------------------------------
   14. Sections 8–17
   -------------------------------------------------------------------------- */

/* --- 8 · Stay Connected --- */
.section--newsletter { padding-block: 132px 99px; }


/* --- 11 · Testimonials --- */
.section--testimonial { padding-block: 115px 73px; }
.section--testimonial .stack { margin-bottom: 40px; }
.carousel--testimonial { padding-inline: 30px; }
/* The original uses Swiper's equal-height mode, so a two-line quote still
   reserves room for the longest one — that's the dead gap under short
   testimonials. Here only the active slide is in flow, so the section height
   follows the quote being read. No JS height maths, nothing to fall out of
   sync: the box simply wraps whatever is showing. */
.carousel--testimonial .carousel__viewport { overflow: visible; }
.carousel--testimonial .carousel__track {
  display: block;
  transform: none !important;
  transition: none;
}
.carousel--testimonial .carousel__slide {
  display: none;
  width: 100%;
  border-radius: 20px;
  padding: 20px;
}
.carousel--testimonial .carousel__slide.is-current {
  display: flex;
  animation: quote-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes quote-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .carousel--testimonial .carousel__slide.is-current { animation: none; }
}

.testimonial {
  margin: 0;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Quotes run at their natural length on the original — 102px to 383px.
   An earlier pass clamped these to four lines, which truncated most of them. */
.testimonial__text {
  font-size: var(--fs-body);
  font-weight: 200;
  line-height: 26px;
  color: var(--c-text);
  width: 980px;
  max-width: 100%;
}
.testimonial__by {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
}
.testimonial__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
}
.testimonial__name {
  font-size: var(--fs-subhead);
  font-weight: 400;
  color: var(--c-secondary);
}
.testimonial__title {
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--c-muted);
}

/* --- 12 · Bali Sacred Retreat --- */
.section--bali { padding-block: 132px 113px; }


/* --- 13 · Upcoming Events --- */
.section--events { padding-block: 0 188px; }
.events__heading { margin-bottom: 125px; }

/* full-width row of two 545px columns; the event card is centred in the left */
.events__row {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}
.events__col { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }

.event {
  width: 436px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.event__meta { line-height: 22px; color: var(--c-secondary); }
.event__image {
  width: 436px;
  height: 212px;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}
.event__title {
  font-size: var(--fs-event);
  font-weight: 200;
  line-height: 35px;
  color: var(--c-secondary);
}
.event__body { color: var(--c-secondary); }
.event__cta { width: 436px; }

/* --- 14 · Harmonic Egg --- */
.section--egg { padding-block: 132px 156px; }

/* --- 15 · FAQ — two columns of 520px, matching the original --- */
.section--faq { padding-block: 0; }

.accordion {
  display: grid;
  grid-template-columns: 520px 520px;
  gap: 20px 100px;
  align-content: start;
  padding-block: 64px;
}

.accordion__item {
  border-bottom: 1px solid rgba(180, 142, 146, .25);
}
.accordion__q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 78px 18px 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  font-size: var(--fs-subhead);
  font-weight: 400;
  line-height: 22px;
  color: var(--c-secondary);
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.accordion__item[open] .accordion__q::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.accordion__a {
  padding: 0 40px 20px 0;
  font-size: var(--fs-card);
  font-weight: 200;
  line-height: 24px;
  color: var(--c-text);
}

/* --- 16 · Contact --- */
.section--contact { padding-block: 132px 142px; }
.split--contact { align-items: flex-start; }
.contact__heading { color: var(--c-secondary); }

.contact__email {
  font-size: var(--fs-body);
  font-weight: 200;
  color: var(--c-text);
}
.contact__email:hover { color: var(--c-secondary); }

.socials { display: flex; gap: 22px; }
.socials a {
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--c-secondary);
}
.socials a:hover { color: var(--c-teal-dark); }

.btn--wide { width: 100%; }

/* -----------------------------------------------------------------------------
   15. Music Sheets page
   -------------------------------------------------------------------------- */

.section--sheets { padding-block: 0 0; }

/* 4 columns of 248px with a 50px gutter — 248×4 + 50×3 = 1142 */
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 248px);
  gap: 50px;
  justify-content: space-between;
  align-items: start;
}

.sheet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.sheet__cover {
  width: 248px;
  height: 248px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.sheet__title {
  font-size: var(--fs-subhead);
  font-weight: 400;
  line-height: 22px;
  color: var(--c-secondary);
}
.sheet__soon {
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  line-height: 24px;
  color: var(--c-muted);
}
.sheet__link,
.sheet__tracks a {
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  line-height: 24px;
  color: var(--c-teal);
}
.sheet__link:hover,
.sheet__tracks a:hover { color: var(--c-teal-dark); }

.sheet__tracks { display: flex; flex-direction: column; }
.sheet__tracks li { line-height: 26.5px; }
.sheet__soon,
.sheet__link { line-height: 39px; }

.sheet__tracks span {
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--c-muted);
}

/* -----------------------------------------------------------------------------
   16. Responsive
   Breakpoints and type overrides taken from the original kit's own media
   queries: the 60px heading drops to 40px and the 75px display to 45px at
   767px; neither changes at 1024px.
   -------------------------------------------------------------------------- */

/* --- tablet --- */
@media (max-width: 1024px) {
  /* keep the fluid 80vw width so the cards retain a gutter instead of
     running edge to edge */
  .card--music,
  .card--newsletter,
  .card--retreat { width: 86vw; }

  /* cards stack */
  .card--music,
  .card--newsletter,
  .card--retreat {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 7vw;
  }
  .card--music .card__col--player,
  .card--newsletter .card__col,
  .card--retreat .card__col { flex: 1 1 auto; width: 100%; }

  /* the Vibrational card swaps to its tablet artwork on the original */
  .card--music { background-image: url("../assets/img/Untitled-1-1.jpg"); }

  .card--hero { min-height: 560px; padding: 120px 6% 8%; }
  .card--sheets { min-height: 420px; }

  /* container gutter narrows to 15px, matching the original */
  .container,
  .container--wide,
  .section--video .container { max-width: 100%; padding-inline: 15px; }

  /* split rows stay side by side on tablet, as the original does —
     two equal columns with a 50px gutter and a square fluid image */
  .split { gap: 50px; align-items: flex-start; }
  .split__media,
  .split__body { flex: 1 1 0; width: auto; min-width: 0; }
  .split__media img { width: 100%; height: auto; aspect-ratio: 1; }

  .divider--hero,
  .divider--intro { width: 100%; max-width: 399px; }

  .intro__copy { width: 100%; }

  /* section rhythm compresses */
  .section { padding-block: 80px 48px; }
  .section--vibrational,
  .section--newsletter,
  .section--bali,
  .section--contact,
  .section--egg { padding-block: 80px 48px; }
  .section--events { padding-block: 0 80px; }
  .events__heading { margin-bottom: 60px; }
  .section--testimonial { padding-block: 72px 48px; }
  .section--faq { padding-block: 48px; }
  .section--video { padding-block: 48px 56px; }
  .section--albums { padding-block: 0 56px; }

  /* accordion collapses to one column */
  .accordion { grid-template-columns: 1fr; gap: 0; }

  /* sheet grid: 3 across */
  .sheet-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .sheet__cover { width: 100%; height: auto; aspect-ratio: 1; }

  /* carousels: arrows move inside, albums show 2 */
  .carousel__arrow--prev { left: -8px; }
  .carousel__arrow--next { right: -8px; }
  .carousel--albums,
  .carousel--testimonial { padding-inline: 34px; }
  .carousel--albums .carousel__slide { flex: 0 0 calc(50% - 10px); }
  .album__cover,
  .album .player,
  .btn--block { width: 100%; max-width: none; }
  .carousel--testimonial .carousel__slide { min-height: 0; }
  .testimonial__text { width: 100%; }

  .event,
  .event__image,
  .event__cta { width: 100%; }
  .event__image { height: auto; aspect-ratio: 436 / 212; }

  .card--music .player,
  .player { max-width: 100%; }
}

/* --- mobile --- */
@media (max-width: 767px) {
  :root {
    --fs-display: 45px;
    --fs-heading: 40px;
    --fs-event:   28px;
    --fs-player:  24px;
  }

  .hero { padding-top: 12px; }
  .card--hero { min-height: 480px; padding: 104px 7% 10%; }
  .card--sheets { min-height: 340px; padding: 104px 7% 10%; }

  .card--music,
  .card--newsletter,
  .card--retreat { padding: 10% 7%; gap: 32px; }

  .section { padding-block: 56px 32px; }
  .section--vibrational,
  .section--newsletter,
  .section--bali,
  .section--contact,
  .section--egg { padding-block: 56px 32px; }
  .section--events { padding-block: 0 56px; }
  .events__heading { margin-bottom: 40px; }
  .section--testimonial { padding-block: 48px 32px; }
  .section--faq { padding-block: 32px; }
  .section--video { padding-block: 32px 40px; }
  .section--albums { padding-block: 0 40px; }
  .section--intro { padding-block: 0 12px; }

  /* header collapses to a drawer */
  .site-header { padding-top: 26px; }
  .site-header__logo img { width: 150px; height: 38px; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    z-index: 60;
  }
  .nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--c-offwhite);
    border-radius: 2px;
  }

  /* drawer toggles on display, not opacity — deterministic, and it keeps the
     closed menu out of the tab order without needing inert */
  .nav {
    display: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: rgba(0, 0, 0, .94);
  }
  .nav.is-open { display: flex; }
  .nav__link { font-size: 14px; }

  .nav__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-top: 6px;
    background: none;
    box-shadow: none;
    text-align: center;
    padding: 0;
  }
  .nav__dropdown a { color: var(--c-primary); padding: 6px 0; }
  .nav__dropdown a:hover { background: none; }

  /* single column everywhere */
  .sheet-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .carousel--albums .carousel__slide { flex: 0 0 100%; }

  .btn-row { width: 100%; }
  .card--hero .btn { width: calc(50% - 10px); min-width: 0; }

  .split--contact .split__body + .split__body { margin-top: 8px; }

  .player__label { font-size: 17px; }
  .player__track { min-height: 62px; }

  .site-footer { padding-block: 14px; }
  .site-footer__inner { flex-direction: column; gap: 8px; text-align: center; }

  .lightbox { padding: 16px; }
  .lightbox__close { top: 8px; right: 12px; }
}

/* very narrow phones */
@media (max-width: 420px) {
  .sheet-grid { grid-template-columns: 1fr; }
  .card--hero .btn { width: 100%; }
}

/* =============================================================================
   17. Polish
   Additive only — no colour or type changes. Everything here is either an
   interaction state the original never had, or an accessibility floor.
   ========================================================================== */

::selection { background: var(--c-primary); color: #3a2b2c; }

/* keyboard users get a visible, on-brand focus ring everywhere */
:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 20px;
  top: -60px;
  z-index: 300;
  padding: 12px 20px;
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--c-offwhite);
  background: var(--c-teal);
  border-radius: 3px;
  transition: top .2s ease;
}
.skip-link:focus { top: 20px; }
#main:focus { outline: none; }

/* --- buttons: lift instead of just fading --- */
.btn {
  transition: transform .25s cubic-bezier(.2, .8, .2, 1),
              box-shadow .25s ease,
              filter .25s ease;
}
.btn:hover {
  opacity: 1;
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55);
}
.btn:active { transform: translateY(0); box-shadow: none; }

/* --- photographs: a whisper of lift on hover --- */
.split__media img,
.album__cover,
.sheet__cover,
.video-thumb img {
  transition: transform .5s cubic-bezier(.2, .8, .2, 1),
              box-shadow .5s ease;
}
.split__media:hover img,
.album:hover .album__cover,
.sheet:hover .sheet__cover,
.video-thumb:hover img {
  transform: translateY(-4px);
  box-shadow: 0 34px 60px -28px rgba(0, 0, 0, .55);
}

/* --- links --- */
.contact__email {
  position: relative;
  transition: color .2s ease;
}
.contact__email::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.contact__email:hover::after { transform: scaleX(1); }

.socials a { transition: color .2s ease, transform .2s ease; }
.socials a:hover { transform: translateY(-1px); }

/* --- form fields --- */
.form input,
.form textarea {
  transition: background .2s ease, box-shadow .2s ease;
}
.form input:focus,
.form textarea:focus {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 2px rgba(6, 148, 148, .35);
  outline: none;
}
.form-note { animation: note-in .3s ease both; }
@keyframes note-in { from { opacity: 0; transform: translateY(-4px); } }

/* --- accordion --- */
.accordion__item { transition: border-color .2s ease; }
.accordion__q { transition: color .2s ease; }
.accordion__q:hover { color: var(--c-teal); }
.accordion__a > p { animation: note-in .35s ease both; }

/* --- player --- */
.player__track { transition: background .2s ease, padding-left .2s ease; }
.player__track:hover { padding-left: 16px; }
.player__list { scrollbar-width: thin; scrollbar-color: var(--c-secondary) transparent; }
.player__list::-webkit-scrollbar { width: 6px; }
.player__list::-webkit-scrollbar-thumb {
  background: var(--c-secondary);
  border-radius: 3px;
}
.player__rail { transition: height .2s ease; }
.player__rail:hover { height: 12px; }

/* --- carousel affordances --- */
.carousel__arrow { transition: color .2s ease, transform .2s ease; }
.carousel__arrow:hover { color: var(--c-teal); }
.carousel__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.carousel__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
.carousel__dots button { transition: opacity .2s ease, transform .2s ease; }
.carousel__dots button:hover { opacity: .7; }
.carousel__dots button.is-active { transform: scale(1.35); }

/* --- header: condenses into a bar once you leave the hero --- */
.site-header { transition: padding-top .35s ease, background .35s ease, box-shadow .35s ease; }
.site-header.is-stuck {
  position: fixed;
  padding-block: 14px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .5);
}
.site-header.is-stuck .nav__link { color: var(--c-secondary); }
.site-header.is-stuck .nav-toggle span { background: var(--c-secondary); }
.site-header.is-stuck .site-header__logo img { filter: invert(1) brightness(.42) sepia(.5) saturate(2.2) hue-rotate(300deg); }

/* --- respect the user's motion preference --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover,
  .split__media:hover img,
  .album:hover .album__cover,
  .sheet:hover .sheet__cover,
  .video-thumb:hover img { transform: none; }
}

/* print: let people actually print the song sheets page */
@media print {
  .site-header, .carousel__arrow, .carousel__dots, .player, .lightbox, .skip-link { display: none !important; }
  body { background: #fff; }
  .card::before { display: none; }
}

/* =============================================================================
   18. Section rhythm — the breathing room between sections
   Measured from the live site at 1440: Elementor separates the white sections
   with percentage margins that resolve against the viewport — 7% (101px),
   10% (144px) and 5% (72px). The tinted blocks in the middle and the
   FAQ→contact→footer run flush. My earlier passes matched section HEIGHTS,
   which exclude margins entirely — this block restores the 779px of space
   between sections that was missing.
   ========================================================================== */

.section--intro       { margin-top: 7vw;  }   /* hero → intro (both pages)   */
.section--awakening   { margin-top: 7vw;  }   /* intro → For The Awakening   */
.section--how         { margin-top: 10vw; }   /* awakening → How H. Helps    */
.section--vibrational { margin-top: 5vw;  }   /* helps → music tint block    */
.section--meet        { margin-top: 10vw; }   /* newsletter → Meet Harmony   */
.section--mentoring   { margin-top: 10vw; }   /* meet → 1:1 Mentoring        */
.section--testimonial { margin-top: 5vw;  }   /* mentoring → testimonials    */

/* music-sheets page: intro → grid, grid → contact */
.section--sheets                    { margin-top: 7vw;  }
.section--sheets + .section--contact { margin-top: 10vw; }