/* ==========================================================
   Les Braid It — shared stylesheet
   ========================================================== */

:root {
  --black: #0D0D0D;
  --card: #171717;
  --border: #2A2A2A;
  --pink: #E8558F;
  --pink-light: #FBE4EF;
  --grey: #B3B3B3;
  --white: #FFFCF9;
  /* Frosted panels that keep text readable over the glowing swirl */
  --frost-bg: rgba(13, 13, 13, 0.82);
  --frost-blur: 10px;
  --frost-radius: 24px;
  /* Pink outline on the Service Highlights cards and the Let's connect box */
  --outline-width: 2px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  margin: 0 0 0.4em;
  color: var(--white);
}

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

img {
  max-width: 100%;
  display: block;
}
/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 6%;
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.logo {
  display: block;
  height: 80px;
  width: auto;
}

.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
}

/* Text-only navigation. To change the highlight colour, edit --nav-active. */
.main-nav {
  --nav-active: var(--pink);
}

.main-nav a {
  display: block;
  white-space: nowrap;
  padding: 6px 0;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Hot pink on hover, while pressed, and for the page you are on */
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a:active,
.main-nav a[aria-current="page"] {
  color: var(--nav-active);
}

.main-nav a:active,
.main-nav a[aria-current="page"] {
  border-bottom-color: var(--nav-active);
}

/* Login / My account stands out as a button */
.main-nav .nav-login a {
  padding: 8px 20px;
  border: 1px solid var(--nav-active);
  border-radius: 999px;
  color: var(--nav-active);
}

.main-nav .nav-login a:hover,
.main-nav .nav-login a:active,
.main-nav .nav-login a[aria-current="page"] {
  background: var(--nav-active);
  border-color: var(--nav-active);
  color: #160a10;
}

@media (max-width: 1100px) {
  .main-nav ul {
    gap: 24px;
  }
  .main-nav a {
    font-size: 13px;
    letter-spacing: 1px;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--pink);
}

/* Collapse to the menu button below 960px so seven links never get squeezed */
@media (max-width: 960px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(13, 13, 13, 0.97);
    border-bottom: 1px solid var(--border);
  }

  .main-nav ul li {
    padding: 16px 6%;
    border-top: 1px solid var(--border);
  }

  .main-nav a {
    display: inline-block;
  }

  .main-nav .nav-login a {
    padding: 6px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }

  .main-nav .nav-login a:hover,
  .main-nav .nav-login a:active,
  .main-nav .nav-login a[aria-current="page"] {
    background: none;
    color: var(--nav-active);
    border-bottom-color: var(--nav-active);
  }

  .main-nav.is-open ul {
    display: flex;
  }
}

@media (max-width: 720px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-outline {
    padding: 18px 30px;
    font-size: 14px;
  }
}

/* ---------- buttons ---------- */
.btn-primary,
.btn-outline {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 30px;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--pink);
}

.btn-primary {
  background: var(--pink);
  color: var(--black);
}
.btn-primary:hover {
  opacity: 0.88;
}

.btn-white {
  display: inline-block;
  padding: 13px 30px;
  border: 1px solid var(--white);
  border-radius: 30px;
  background: var(--white);
  color: var(--black);
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.btn-white:hover {
  background: var(--pink-light);
  border-color: var(--pink);
}

.transformation .btn-white { position: relative; z-index: 1; }

/* Home: white "Learn The 'Perfect' Sew In" button above the before and after picture */
.transformation-learn { margin-bottom: 22px; }
@media (max-width: 720px) {
  /* On phones, the same full width and height as the Check out portfolio button */
  .transformation-learn { display: block; padding: 18px 30px; font-size: 14px; }
}

/* Hidden from view but still read out by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Home: Express yourself banner with the two buttons underneath
   (.hero.hero-home so these beat the general .hero padding further down) */
.hero.hero-home {
  padding: 0 6% 34px;   /* no top gap: the strip with the banner's pause button makes the space */
}

.hero-banner {
  display: block;
  width: 100%;
  /* on laptops, keep the banner small enough that the buttons show without scrolling */
  max-width: min(1100px, calc((100vh - 250px) * 2));
  height: auto;
  margin: 0 auto 28px;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(232, 85, 143, 0.25);
}

.hero-actions > .btn-outline {
  --frost-radius: 30px;
}

@media (max-width: 720px) {
  /* Banner runs edge to edge on phones */
  .hero.hero-home {
    padding: 0 6% 30px;
  }

  .hero-banner {
    width: calc(100% + 12vw);
    max-width: none;
    margin: 0 -6vw 24px;
    border-radius: 0;
  }
}

/* Home: before / after slider with the classes button */
.transformation {
  padding: 0 6% 50px;
  text-align: center;
}

/* Home: link from the service highlights to the full portfolio */
.specialty-portfolio {
  margin-top: 26px;
}

/* On phones, match the Book Now button: full width and taller */
@media (max-width: 720px) {
  .specialty-portfolio {
    display: block;
    padding: 18px 30px;
    font-size: 14px;
  }
}

.btn-outline {
  background: transparent;
  color: var(--pink);
}
.btn-outline:hover {
  background: var(--pink);
  color: var(--black);
}

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  padding: 56px 6% 30px;
  text-align: center;
  overflow: hidden;
}

.hero-eyebrow {
  color: var(--pink);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  max-width: 800px;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
}

/* before / after comparison slider */
.before-after {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  margin: 44px auto 20px;
  border: 1px solid var(--pink-light);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(232, 85, 143, 0.18);
  user-select: none;
}

.before-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.before-after-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.before-after-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  background: var(--pink);
  transform: translateX(-50%);
  pointer-events: none;
}

.before-after-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid var(--pink);
  border-radius: 50%;
  background: var(--pink-light);
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.before-after-knob svg { width: 22px; height: 22px; stroke: var(--pink); }

.before-after-label {
  position: absolute;
  bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.7);
  border: 1px solid var(--pink);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
}

.before-after-label-before { left: 16px; }
.before-after-label-after { right: 16px; background: var(--pink); }

.before-after-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.before-after:has(.before-after-range:focus-visible) { outline: 2px solid var(--pink); outline-offset: 4px; }

.hero p {
  max-width: 560px;
  margin: 0 auto 32px;
  color: var(--grey);
  font-size: 15px;
  position: relative;
  z-index: 1;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ---------- specialties (home) ---------- */
.specialties {
  padding: 30px 6%;
  text-align: center;
}

.specialties h2 {
  font-size: 30px;
  margin-bottom: 40px;
}

.specialty-slider {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.specialty-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 8px;
}
.specialty-track::-webkit-scrollbar { display: none; }

.specialty-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 240px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: var(--outline-width) solid var(--pink);
  border-radius: 16px;
  padding: 16px 16px 22px;
  text-align: left;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.specialty-card:hover {
  border-color: var(--pink-light);
  transform: translateY(-4px);
}

.specialty-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--pink);
  border-radius: 12px;
  margin-bottom: 16px;
}

.specialty-card h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.specialty-card p {
  color: var(--grey);
  font-size: 13.5px;
  margin: 0 0 14px;
}

.specialty-link {
  margin-top: auto;
  color: var(--pink);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}


@media (max-width: 720px) {
  .specialty-card { flex-basis: 78%; min-width: 0; }
}

/* ---------- CTA strip (home) ---------- */
.cta-strip {
  position: relative;
  margin: 20px 6% 90px;
  padding: 48px 6%;
  text-align: center;
  background: var(--card);
  border: var(--outline-width) solid var(--pink);
  border-radius: 20px;
  overflow: hidden;
}

.cta-strip h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.cta-strip p {
  color: var(--grey);
  font-size: 14px;
  max-width: 480px;
  margin: 0 auto 26px;
}

/* ---------- portfolio page ---------- */
.portfolio-hero {
  padding: 22px 6% 10px;
  text-align: center;
}
.portfolio-hero h1 {
  margin: 0 0 6px;
  font-size: clamp(30px, 4.5vw, 44px);
}
.portfolio-hero p {
  margin: 0;
  color: var(--grey);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.portfolio-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--pink);
  color: var(--black);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- booking page ---------- */
.booking-page { min-height: calc(100vh - 150px); }
.booking-hero { padding: 44px 6% 26px; text-align: center; }
.booking-hero h1 { font-size: clamp(30px, 4.5vw, 48px); }
.booking-hero p { max-width: 560px; margin: 0 auto; color: var(--grey); font-size: 13px; }
.booking-services { max-width: 980px; margin: 0 auto 80px; padding: 0 6%; }
.booking-services-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.booking-services-heading h2 { margin: 0; font-size: clamp(24px, 3.5vw, 34px); }
.booking-services-heading .portfolio-cta { flex-shrink: 0; margin: 0; }
.heading-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }
.custom-request-wrap { position: relative; display: inline-flex; }
.custom-request-btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--pink); border-radius: 8px; background: var(--black); color: var(--pink); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; }
.custom-request-btn:hover { background: var(--pink); color: var(--black); }
.custom-request-wrap .info-toggle { position: absolute; top: -10px; right: -10px; background: var(--black); }
.service-controls { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0 0 18px; }
.service-control { display: flex; flex-direction: column; gap: 4px; color: var(--pink-light); font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; }
.service-control select { padding: 8px 12px; border: 1px solid var(--pink); border-radius: 10px; background: var(--card); color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 13px; text-transform: none; letter-spacing: normal; }
.booking-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px; border: 2px solid var(--pink); border-radius: 24px; box-shadow: 0 0 0 1px rgba(232, 85, 143, 0.25), inset 0 0 0 1px rgba(232, 85, 143, 0.22); }
.booking-service-card { padding: 16px; border: 2px solid var(--pink-light); border-radius: 22px; background: var(--card); text-align: center; }
.booking-service-card-link { display: block; color: inherit; text-decoration: none; }
.booking-service-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid var(--pink-light); border-radius: 14px; }
.service-photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; aspect-ratio: 2 / 3; padding: 16px; border: 1px dashed var(--pink); border-radius: 14px; background: radial-gradient(circle at 50% 38%, rgba(232, 85, 143, 0.28), transparent 62%), repeating-linear-gradient(135deg, rgba(251, 228, 239, 0.04) 0 10px, transparent 10px 20px), var(--card); transition: border-color 0.2s ease; }
.service-photo-placeholder svg { width: 38px; height: 38px; fill: var(--pink); opacity: 0.9; }
.service-photo-placeholder .placeholder-brand { color: var(--pink-light); font-family: 'Playfair Display', serif; font-style: italic; font-size: 20px; line-height: 1.2; }
.service-photo-placeholder .placeholder-note { color: var(--grey); font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.booking-service-card-link:hover .service-photo-placeholder { border-color: var(--pink-light); }
.service-gallery .service-photo-placeholder { aspect-ratio: 4 / 5; border-radius: 20px; }
.service-gallery .service-photo-placeholder svg { width: 48px; height: 48px; }
.service-gallery .service-photo-placeholder .placeholder-brand { font-size: 26px; }
.booking-service-card h3 { min-height: 42px; margin: 14px 0 4px; color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 13px; font-style: normal; letter-spacing: 0.7px; line-height: 1.4; text-transform: uppercase; }
.booking-service-card p { margin: 0 0 14px; color: var(--pink-light); font-size: 14px; }
.booking-service-card .service-hair-note { margin: 0 0 2px; color: var(--grey); font-size: 12px; }
.booking-service-card .service-equipment-note { margin: 0 0 2px; color: var(--grey); font-size: 12px; }
.booking-service-card .service-duration { margin: 0 0 14px; color: var(--grey); font-size: 12px; }
.booking-service-card .service-price + .service-hair-note,
.booking-service-card .service-price + .service-duration { margin-top: -10px; }
.booking-service-card .btn-primary { padding: 11px 16px; font-size: 11px; }
.booking-service { display: grid; grid-template-columns: minmax(230px, 360px) 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; max-width: 980px; margin: 0 auto 80px; padding: 0 6%; }
.booking-service-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 2px solid var(--pink); border-radius: 22px; }
.booking-service-copy h2 { font-family: 'Montserrat', sans-serif; font-style: normal; font-size: clamp(22px, 3vw, 32px); letter-spacing: 1px; text-transform: uppercase; }
.booking-price { color: var(--pink-light); font-size: 22px; font-weight: 600; }
.booking-description { max-width: 520px; color: var(--grey); font-size: 14px; }
.booking-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.booking-modal { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(13, 13, 13, 0.78); }
.booking-modal.is-open { display: flex; }
.booking-modal-panel { position: relative; width: min(100%, 580px); max-height: min(680px, 90vh); overflow-y: auto; padding: 34px clamp(22px, 5vw, 44px); background: rgba(122, 18, 61, 0.9); border: 1px solid var(--pink); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); }
.booking-modal-close { position: absolute; top: 12px; right: 16px; border: 0; background: transparent; color: var(--white); font-size: 28px; cursor: pointer; }
.booking-modal h2 { font-family: 'Montserrat', sans-serif; font-style: normal; font-size: 22px; letter-spacing: 1px; text-transform: uppercase; }
.addon-list { display: grid; gap: 10px; margin: 24px 0; }
.addon-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255, 252, 249, 0.28); color: var(--white); font-size: 13px; }
.addon-option span { display: flex; align-items: center; gap: 10px; }
.addon-option input, .time-option input { accent-color: var(--pink); }
.addon-option input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; cursor: pointer; }
.booking-modal-note { margin: 0 0 8px; color: var(--pink-light); font-size: 13px; }
.modal-service-hair-note { margin: 0 0 8px; color: rgba(255, 252, 249, 0.7); font-size: 12px; font-style: italic; }
.modal-service-hair-note:empty, .addons-label[hidden], .addon-list[hidden] { display: none; }
.availability { display: none; max-width: 980px; margin: 0 auto 80px; padding: 0 6%; }
.availability.is-visible { display: block; }
.availability-layout { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr); gap: 42px; align-items: start; }
.availability h2 { font-size: 28px; }
.selected-service { margin: 22px 0; padding: 18px; border: 1px solid var(--pink); border-radius: 12px; }
.selected-service strong { display: block; margin-bottom: 6px; color: var(--pink-light); text-transform: uppercase; }
.calendar-card { padding: 22px; border: 1px solid var(--pink-light); border-radius: 18px; background: var(--card); scroll-margin-top: 90px; }
.calendar-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.calendar-heading h3 { margin: 0; font-size: 22px; }
.calendar-heading .lightbox-nav { position: static; transform: none; width: 34px; height: 34px; border: 0; background: transparent; color: var(--white); font-size: 28px; cursor: pointer; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.calendar-grid span, .calendar-grid button { min-height: 44px; padding: 5px; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--black); color: var(--grey); font: inherit; font-size: 11px; text-align: right; }
.calendar-grid .weekday { min-height: auto; color: var(--pink-light); font-size: 9px; font-weight: 600; text-align: center; }
.calendar-grid button.is-available { background: rgba(232, 85, 143, 0.42); color: var(--white); cursor: pointer; transition: background 0.15s ease; }
.calendar-grid button.is-available:hover,
.calendar-grid button.is-selected { background: rgba(232, 85, 143, 0.22); }
.calendar-grid button.is-selected { outline: 2px solid var(--pink-light); outline-offset: -2px; }
.time-options-heading { margin: 20px 0 0; color: var(--pink-light); font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
.time-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; min-height: 0; }
.time-option { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--pink); border-radius: 20px; background: rgba(232, 85, 143, 0.42); color: var(--white); font-family: 'Playfair Display', serif; font-style: italic; cursor: pointer; transition: background 0.15s ease; }
.time-option:hover,
.time-option.is-selected { background: rgba(232, 85, 143, 0.22); }
.booking-details-form { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.booking-details-form[hidden] { display: none; }
.booking-details-title { margin: 0 0 18px; font-size: 22px; }
.booking-details-form .member-status { margin-bottom: 18px; }
.booking-details-form .form-note a { color: var(--pink); font-weight: 600; }

/* ---------- service detail page ---------- */
.service-top-cta { display: flex; justify-content: center; padding: 20px 6% 0; }
.service-top-cta .service-book-now { max-width: 440px; }

.service-hero { max-width: 480px; margin: 0 auto; padding: 30px 6% 50px; text-align: center; }

.service-gallery { position: relative; width: 100%; max-width: 300px; margin: 0 auto 22px; }
.service-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--pink-light); border-radius: 20px; cursor: zoom-in; }
.service-gallery .lightbox-nav { top: 50%; width: 40px; height: 40px; background: var(--pink-light); border-color: var(--pink); }
.service-gallery .lightbox-nav svg { width: 20px; height: 20px; stroke: var(--pink); }
.service-gallery-prev { left: -24px; }
.service-gallery-next { right: -24px; }

.service-title { margin: 0 0 14px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(24px, 5vw, 32px); letter-spacing: 3px; text-transform: uppercase; }

.service-meta { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; color: var(--pink); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; }
.service-meta span { display: flex; align-items: center; gap: 6px; }
.service-meta img { width: 18px; height: 18px; }
.service-meta-divider { color: var(--border); font-weight: 400; }

.service-features { background: var(--card); border-radius: 20px; padding: 22px 24px; margin: 0 0 26px; text-align: left; }
.service-features ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.service-features li { position: relative; padding-left: 26px; color: var(--white); font-size: 14px; line-height: 1.5; }
.service-features li::before { content: '\2713'; position: absolute; left: 0; color: var(--pink); font-weight: 700; }

.service-ref-note { margin: 0 0 14px; color: var(--pink); font-size: 14px; line-height: 1.75; text-align: left; }
.service-description { margin: 0 0 30px; color: var(--grey); font-size: 14px; line-height: 1.75; text-align: left; }

.service-kit { background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--pink); border-radius: 20px; padding: 24px; margin: 0 0 30px; text-align: left; }
.service-kit-title { margin: 0 0 6px; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 22px; color: var(--pink); }
.service-kit-intro { margin: 0 0 18px; color: var(--grey); font-size: 13.5px; line-height: 1.6; }
.service-kit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.service-kit-list li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--black); border: 1px solid var(--border); border-radius: 14px; color: var(--white); font-size: 13.5px; font-weight: 500; }
.service-kit-list li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.service-kit-list .service-kit-hair { grid-column: 1 / -1; flex-wrap: wrap; }
.service-kit-swatches { display: flex; gap: 8px; margin-left: auto; }
.kit-swatch { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--swatch); border: 2px solid var(--pink-light); color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; }

@media (max-width: 420px) {
  .service-kit-list { grid-template-columns: 1fr; }
  .service-kit-swatches { margin-left: 18px; width: 100%; }
}

.service-book-now { display: block; width: 100%; text-align: center; font-size: clamp(10px, 3.2vw, 13.5px); padding: 20px 8px; letter-spacing: 0.4px; white-space: nowrap; }
/* On very narrow screens, if the name still does not fit at the smallest size, let it wrap instead of cutting words off */
.service-book-now.is-wrapped { white-space: normal; line-height: 1.3; }
.service-book-now .book-text { display: inline-block; white-space: nowrap; }
.service-book-now.is-tight { letter-spacing: 0; }
.service-book-now.is-wrapped .book-text { white-space: normal; }

@media (max-width: 720px) {
  .booking-service, .availability-layout { grid-template-columns: 1fr; }
  .booking-service-image { max-width: 340px; margin: 0 auto; }
  .booking-services-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { flex-wrap: nowrap; width: 100%; gap: 10px; }
  .booking-services-heading .portfolio-cta,
  .custom-request-wrap { flex: 1 1 0; min-width: 0; }
  .portfolio-cta,
  .custom-request-btn { width: 100%; padding: 10px 8px; font-size: 10.5px; text-align: center; }
  .service-controls { flex-wrap: nowrap; gap: 10px; }
  .service-control { flex: 1 1 0; min-width: 0; }
  .service-control select { width: 100%; padding: 8px 6px; }
  .booking-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 10px; border-radius: 18px; }
  .booking-modal { padding: 16px; }
  .booking-modal-panel { padding: 30px 20px 26px; }
  .booking-modal h2 { font-size: 18px; }
  .booking-modal-note { font-size: 13px; line-height: 1.5; }
  .addon-list { gap: 4px; }
  .addon-option { flex-wrap: wrap; row-gap: 4px; padding: 12px 0; }
  .addon-option span:first-child { flex: 1 1 100%; font-size: 13px; }
  .addon-option span:last-child { flex: 1 1 100%; padding-left: 30px; color: var(--pink-light); font-size: 12px; }
  .booking-service-card { padding: 12px; }
  .booking-service-card h3 { min-height: 48px; font-size: 11px; }
  .service-top-cta { padding: 18px 5% 0; }
}

.portfolio-rail-wrap {
  position: relative;
  padding: 6px 0 80px;
}

.portfolio-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 8px 6% 30px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink) var(--card);
}

.portfolio-rail::-webkit-scrollbar {
  height: 8px;
}
.portfolio-rail::-webkit-scrollbar-track {
  background: var(--card);
}
.portfolio-rail::-webkit-scrollbar-thumb {
  background: var(--pink);
  border-radius: 8px;
}

.portfolio-item {
  flex: 0 0 auto;
  /* --pf-max-w is set by main.js so the whole first photo fits on screen under the heading */
  width: min(64vw, 260px, var(--pf-max-w, 260px));
  scroll-snap-align: start;
  text-align: center;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

.portfolio-item figure {
  margin: 0 0 10px;
  position: relative;
}

.portfolio-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid var(--pink);
  transition: transform 0.25s ease;
}

.portfolio-item:hover img {
  transform: scale(1.02);
}

.portfolio-caption {
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--white);
}

.rail-arrow-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--grey);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}

.rail-arrow-hint svg {
  width: 18px;
  height: 18px;
  stroke: var(--pink);
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;          
  padding: 40px 0;
  background: rgba(13, 13, 13, 0.7);
}

.lightbox.is-open {
  display: flex;
}

.lightbox-stage {
  position: relative;
  width: min(90vw, 420px);
  text-align: center;
}

.lightbox-stage img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4px;
}

.lightbox-caption {
  margin-top: 14px;
  color: var(--white);
  font-size: 15px;
  letter-spacing: 0.5px;
}

.lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: var(--white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: rgba(13, 13, 13, 0.6);
  border: 1px solid var(--pink);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox-nav svg {
  width: 20px;
  height: 20px;
  stroke: var(--pink);
}
.lightbox-prev { left: -18px; }
.lightbox-next { right: -18px; }

.lightbox-info-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.65);
  border: 1px solid var(--pink);
  color: var(--pink);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lightbox-info-panel {
  display: none;
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--pink);
  border-radius: 12px;
  color: var(--grey);
  font-size: 12.5px;
  line-height: 1.7;
  text-align: left;
  white-space: pre-line;
}

.lightbox-info-panel.is-open {
  display: block;
}

/* dim the other cards while the lightbox is open */
body.lightbox-active .portfolio-rail .portfolio-item {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

/* ---------- about / contact page ---------- */
.about-strip {
  position: relative;
  display: flex;
  gap: 26px;
  align-items: center;
  background: var(--card);
  margin: 0 6% 60px;
  padding: 26px;
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.about-strip img.about-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pink);
  flex-shrink: 0;
}

.about-strip p {
  margin: 0;
  color: var(--grey);
  font-size: 13.5px;
  line-height: 1.75;
  position: relative;
  z-index: 1;
}

.about-strip strong {
  color: var(--white);
}

.contact-icons {
  display: flex;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}

.contact-icons a {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.contact-icons a:hover {
  transform: translateY(-3px);
}
.contact-icons img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* ---------- tabs (contact) ---------- */
.tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 0 6% 50px;
  flex-wrap: wrap;
}

.tab-btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab {
  padding: 12px 26px;
  border-radius: 30px;
  border: 1px solid var(--pink);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pink);
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tab:hover,
.tab[aria-pressed="true"] {
  background: var(--pink);
  color: var(--black);
}

.info-toggle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--pink);
  background: transparent;
  color: var(--pink);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

.tab-info-panel {
  display: none;
  width: 100%;
  max-width: 640px;
  margin: -8px auto 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--pink);
  border-radius: 12px;
  color: var(--grey);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-line;
}
.tab-info-panel.is-open {
  display: block;
}
/* Contact page: the panel tucks up under the frosted tabs, so lift it above
   them (otherwise the frost covers its first lines) and keep it off the edges */
.tabs ~ .tab-info-panel {
  position: relative;
  z-index: 1;
  width: 88%;
}

/* ---------- form sections ---------- */
section.form-section {
  max-width: 640px;
  margin: 0 auto 60px;
  padding: 0 6%;
  scroll-margin-top: 90px;
  display: none;
}

section.form-section.is-active {
  display: block;
}

section.form-section h2 {
  font-size: 28px;
  margin-bottom: 6px;
}

.form-sub {
  color: var(--grey);
  font-size: 13px;
  margin-bottom: 26px;
  line-height: 1.6;
}

.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
}

.field {
  margin-bottom: 22px;
}

.field label {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pink-light);
  margin-bottom: 8px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  background: var(--black);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--pink);
}

.field input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--black);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--grey);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}
.field input[type="file"]::file-selector-button {
  padding: 8px 14px;
  margin-right: 12px;
  border: 1px solid var(--pink);
  border-radius: 20px;
  background: transparent;
  color: var(--pink);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover {
  background: var(--pink);
  color: var(--black);
}

.field textarea {
  resize: vertical;
  min-height: 100px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--grey);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.radio-option:hover {
  border-color: var(--pink);
}
.radio-option input {
  accent-color: var(--pink);
}

.other-input {
  margin-top: 8px;
  margin-left: 26px;
}

/* Contact forms: a spam trap field only bots fill in, kept off screen */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card form[data-contact-form] { position: relative; }
.form-card form[data-contact-form] .member-status { margin-bottom: 18px; }
.contact-success { padding: 10px 0; text-align: center; }
.contact-success h3 { margin: 0 0 10px; color: var(--pink); font-family: 'Playfair Display', serif; font-style: italic; font-size: 26px; }
.contact-success p { margin: 0; color: var(--grey); line-height: 1.6; }

.submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--pink);
  border: none;
  border-radius: 30px;
  color: var(--black);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 6px;
}
.submit-btn:hover {
  opacity: 0.9;
}

.form-note {
  font-size: 11px;
  color: var(--grey);
  text-align: center;
  margin-top: 14px;
}

/* ---------- policies page ---------- */
.policies-page {
  overflow: hidden;
  padding-bottom: 40px;
}

.policies-banner {
  overflow: hidden;
  background: var(--pink);
  color: var(--black);
  font-family: 'Montserrat', sans-serif;
  font-size: 20vw;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.6;
  text-align: center;
  white-space: nowrap;
  box-shadow: inset 4px 0 0 var(--black); /* covers the thin pink sliver left of the P */
}

/* main.js sizes and shifts the word so the P and S touch the edges of the screen */
.policies-banner.is-fitted { text-align: left; }
.policies-banner-text { display: inline-block; }

/* Home: moving "NOVEMBER SLOTS OUT NOW" banner, same look as the policies banner.
   The track holds the words twice over and slides left by half its width,
   so it loops with no jump. Hover or tab to it to pause it. */
.slots-banner {
  display: block;
  overflow: hidden;
  background: var(--pink);
  color: var(--black);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(56px, 14vw, 110px);
  font-weight: 650;
  letter-spacing: -0.07em;
  line-height: 0.6;
  white-space: nowrap;
  text-decoration: none;
}
.slots-banner-track {
  display: inline-flex;
  animation: slots-scroll 30s linear infinite;
}
.slots-banner-track > span { padding-right: 1.1em; }   /* the space between each one */
.slots-banner:hover .slots-banner-track,
.slots-banner:focus-visible .slots-banner-track { animation-play-state: paused; }
.slots-banner:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; }
@keyframes slots-scroll { to { transform: translateX(-50%); } }
@media (min-width: 721px) {
  .slots-banner-track { animation-duration: 45s; }   /* bigger words travel further, so slow it down */
}
@media (prefers-reduced-motion: reduce) {
  .slots-banner-track { animation: none; }
  .slots-banner-pause { display: none; }   /* nothing moves, so nothing to pause */
}

/* The pause / play button, on the black strip under the banner, on the right:
   a hot pink circle with a black icon. This strip is the gap between the
   slots banner and the Express yourself banner. */
.slots-banner-wrap.is-paused .slots-banner-track { animation-play-state: paused; }
.slots-banner-pause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 6px 8px 6px auto;   /* auto on the left pushes it to the right */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e52876;
  color: var(--black);
  cursor: pointer;
}
.slots-banner-pause svg { width: 16px; height: 16px; fill: currentColor; }
.slots-banner-pause .icon-play,
.slots-banner-wrap.is-paused .slots-banner-pause .icon-pause { display: none; }
.slots-banner-wrap.is-paused .slots-banner-pause .icon-play { display: block; }
.slots-banner-pause:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.policies-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 6% 4px;
  text-align: center;
}

.policies-intro p,
.hair-prep-heading > p:last-child {
  color: var(--grey);
  font-size: 14px;
}

.policy-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 14px;
  max-width: 860px;
  margin: 0 auto;
  padding: 22px 6% 8px;
}

.policy-filters .tab {
  padding: 8px 18px;
}

.policy-layout,
.hair-prep {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 6%;
}

.policy-section {
  padding: 34px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 90px;
}

.policy-section h1,
.policy-section h2,
.hair-prep h1,
.hair-prep h2 {
  color: var(--pink-light);
  font-size: clamp(24px, 3.5vw, 34px);
  line-height: 1.15;
}

.policy-section h1,
.policy-section h2 {
  margin-bottom: 18px;
}

.policy-section ul,
.prep-section ul,
.why-prep ul {
  margin: 0;
  padding-left: 22px;
}

.policy-section li,
.prep-section li,
.why-prep li {
  margin-bottom: 12px;
  color: var(--grey);
  font-size: 14px;
  line-height: 1.75;
}

.hair-prep {
  margin-top: 54px;
  padding-top: 50px;
  padding-bottom: 50px;
  border-top: 1px solid var(--pink);
  background: linear-gradient(180deg, rgba(232, 85, 143, 0.08), transparent 38%);
  scroll-margin-top: 90px;
}

.hair-prep-heading {
  max-width: 650px;
  margin-bottom: 38px;
}

.policy-kicker {
  margin-bottom: 8px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hair-prep-heading h1 {
  margin-bottom: 10px;
  font-size: clamp(38px, 6vw, 66px);
}

.prep-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.prep-section {
  padding: 28px;
  background: var(--black);
}

.prep-section h2 {
  margin-bottom: 16px;
  font-size: 23px;
}

.prep-section h3 {
  margin: 22px 0 10px;
  color: var(--white);
  font-size: 18px;
}

.why-prep {
  margin-top: 28px;
  padding: 28px;
  border: 1px solid var(--pink);
  background: rgba(232, 85, 143, 0.08);
}

.why-prep h2 {
  margin-bottom: 12px;
}

.why-prep p {
  color: var(--white);
  font-size: 14px;
}

.policy-thanks {
  margin: 44px 0 0;
  color: var(--pink-light);
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-style: italic;
  text-align: center;
}

/* ---------- footer ---------- */
.site-footer {
  padding: 30px 6% 40px;
  text-align: center;
  border-top: 1px solid var(--border);
  color: var(--grey);
  font-size: 12px;
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .main-nav ul {
    gap: 18px;
  }
  .about-strip {
    flex-wrap: wrap;
  }
  .contact-icons {
    margin-left: 0;
  }
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
  .prep-grid {
    grid-template-columns: 1fr;
  }
  .prep-section {
    padding: 24px 20px;
  }
}

/* ---------- member area ---------- */
.member-page {
  padding: 50px 6% 80px;
}

.member-intro {
  max-width: 520px;
  margin: 0 auto 30px;
  text-align: center;
}
.member-intro h1 {
  font-size: clamp(32px, 5vw, 46px);
}
.member-intro p:last-child {
  color: var(--grey);
  font-size: 14px;
  margin: 0;
}

.member-card {
  max-width: 460px;
  margin: 0 auto;
  padding: 30px 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--pink);
  border-radius: 20px;
}

.member-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.member-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 26px;
}
.member-tabs .tab {
  width: 100%;
}
.member-auth:has(.member-panel[data-panel="forgot"]:not([hidden])) .member-tabs {
  display: none;
}

.member-panel-title {
  font-size: 24px;
  margin-bottom: 6px;
}

.field input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--black);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
}

.field-optional {
  color: var(--grey);
  text-transform: none;
  letter-spacing: 0;
}

.password-field {
  position: relative;
}
.password-field input {
  padding-right: 70px !important;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--pink);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateY(-50%);
}

.link-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--pink);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover {
  color: var(--pink-light);
}

.member-forgot {
  display: block;
  margin: -8px 0 22px auto;
  font-size: 12px;
}

.member-switch {
  margin: 22px 0 0;
  color: var(--grey);
  font-size: 13px;
  text-align: center;
}

.member-status {
  margin: 0 0 22px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
}
.member-status.is-error {
  background: rgba(232, 85, 143, 0.12);
  border: 1px solid var(--pink);
  color: var(--pink-light);
}
.member-status.is-success {
  background: rgba(120, 200, 150, 0.1);
  border: 1px solid #5FB98A;
  color: #CFEEDC;
}
.member-status.is-info {
  background: var(--black);
  border: 1px solid var(--border);
  color: var(--grey);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.member-guest {
  margin: 26px 0 0;
  color: var(--grey);
  font-size: 13px;
  text-align: center;
}
.member-guest a {
  color: var(--pink);
  font-weight: 600;
}

/* hide members-only pages until the login check has passed */
body[data-members-only]:not(.is-member-ready) main {
  visibility: hidden;
}

/* ==========================================================
   Glowing swirl behind the page content.
   Drawn by assets/js/swirls.js (see the notes at the top of it).
   ========================================================== */

.swirl-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

/* Sparkle pages: soft pink haze rising from the bottom of the screen */
.sparkle-glow {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 85vh;
  background: radial-gradient(ellipse 100% 80% at 50% 100%, rgba(232, 85, 143, 0.5), rgba(200, 40, 120, 0.18) 50%, transparent 85%);
  pointer-events: none;
}

/* Used only if the browser cannot run the animation */
.swirl-static {
  position: fixed;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ==========================================================
   Frosted panels: a see-through dark layer behind text that
   sits directly on the glowing swirl, so the words always have
   enough contrast. Drawn as a ::before layer so pop-ups and
   lightboxes inside these sections keep working normally.
   ========================================================== */

.frost,
.hero-actions > .btn-outline,
.specialties > h2,
.cta-strip,
.portfolio-hero,
.rail-arrow-hint,
.service-hero,
.policies-intro,
.policy-section,
.hair-prep,
.member-intro,
.tabs,
.form-section,
.policy-filters,
.member-guest,
.portfolio-caption,
.site-footer {
  position: relative;
  isolation: isolate;
}

.frost::before,
.hero-actions > .btn-outline::before,
.specialties > h2::before,
.cta-strip::before,
.portfolio-hero::before,
.rail-arrow-hint::before,
.service-hero::before,
.policies-intro::before,
.policy-section::before,
.hair-prep::before,
.member-intro::before,
.tabs::before,
.form-section::before,
.policy-filters::before,
.member-guest::before,
.portfolio-caption::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--frost-radius);
  background: var(--frost-bg);
  -webkit-backdrop-filter: blur(var(--frost-blur));
  backdrop-filter: blur(var(--frost-blur));
  pointer-events: none;
}

.specialties > h2 {
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 22px;
  border: 1px solid var(--pink); /* same hot pink outline as the About LBI button */
  border-radius: var(--frost-radius);
}

.site-footer::before {
  border-radius: 0;
}

/* Keep each panel wrapped around all of its text (stops margins leaking out) */
.portfolio-hero,
.booking-hero,
.policies-intro,
.policy-section,
.hair-prep,
.member-intro,
.service-hero,
.cta-strip,
.form-section,
.member-guest {
  display: flow-root;
}

.member-intro,
.member-guest {
  padding: 14px 18px;
}

.rail-arrow-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 14px;
}

.policy-filters {
  padding: 12px;
}

.portfolio-caption {
  display: inline-block;
  padding: 2px 10px;
  --frost-radius: 999px;
}

/* ==========================================================
   Custom style request form (booking page)
   ========================================================== */
.field-label {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pink-light);
  margin-bottom: 8px;
}

.field-hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 252, 249, 0.78);
}

.custom-request-form input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--black);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
}
.custom-request-form input[type="number"]:focus { outline: none; border-color: var(--pink); }
.custom-request-form .member-status { margin-bottom: 18px; }

.cr-photo-preview[hidden] { display: none; }
.cr-photo-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  margin-top: 12px;
  border-radius: 10px;
  border: 1px solid var(--pink);
  object-fit: cover;
}

/* Duration: hour and minute wheels you swipe up or down, with a price bubble */
.time-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 0;
}

.picker-bubble {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 8px 12px;
  margin-right: 8px;
  background: var(--black);
  border: 1px solid var(--pink);
  border-radius: 12px;
  color: var(--pink-light);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}
.picker-bubble::after {           /* the little arrow pointing at the wheels */
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 12px;
  height: 12px;
  background: var(--black);
  border-top: 1px solid var(--pink);
  border-right: 1px solid var(--pink);
  transform: translateY(-50%) rotate(45deg);
}
.picker-bubble-price { font-size: 14px; font-weight: 700; color: var(--white); white-space: nowrap; }

.picker-wheels { display: flex; align-items: center; gap: 6px; }

.picker-col {
  position: relative;               /* numbers are measured from the top of their own wheel */
  height: 150px;
  width: 44px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  border-radius: 12px;
}
.picker-col::-webkit-scrollbar { display: none; }
.picker-col:focus-visible { outline: 2px solid var(--pink-light); outline-offset: 2px; }
.picker-list { padding: 60px 0; }   /* lets the first and last numbers reach the middle */

.picker-item {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 252, 249, 0.35);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, font-size 0.15s ease;
}
.picker-item.is-near { font-size: 17px; color: rgba(255, 252, 249, 0.6); }
.picker-item.is-active { font-size: 22px; font-weight: 800; color: var(--pink); }

.picker-unit { font-size: 13px; font-weight: 700; color: var(--pink-light); margin-right: 4px; }

@media (max-width: 420px) {
  .time-picker { gap: 10px; }
  .picker-bubble { padding: 8px 10px; margin-right: 6px; }
  .picker-bubble-price { font-size: 13px; }
  .picker-col { width: 40px; }
}

/* Day and time choices */
.cr-times {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink) transparent;
}
.cr-times { flex-wrap: wrap; overflow: visible; margin-top: 6px; }

.cr-chip {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--pink);
  border-radius: 14px;
  background: var(--black);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.cr-chip small { font-size: 11px; font-weight: 500; color: var(--grey); }
.cr-chip:hover { border-color: var(--pink-light); }
.cr-chip.is-selected { background: var(--pink); color: var(--black); }
.cr-chip.is-selected small { color: var(--black); }
.cr-chip:focus-visible { outline: 2px solid var(--pink-light); outline-offset: 2px; }

.cr-success { text-align: center; padding: 20px 0 4px; }
.cr-success[hidden], .custom-request-form[hidden], .cr-times[hidden], .cr-calendar[hidden], .cr-times-heading[hidden] { display: none; }

/* Custom request calendar: same look as the booking calendar on the style pages */
.cr-calendar { margin-top: 10px; padding: 16px; border: 1px solid var(--pink-light); border-radius: 18px; background: var(--card); }
.cr-cal-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cr-cal-month { margin: 0; color: var(--white); font-family: 'Playfair Display', serif; font-style: italic; font-size: 20px; font-weight: 600; }
.cr-cal-nav { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--white); font-size: 28px; line-height: 1; cursor: pointer; }
.cr-cal-nav:disabled { opacity: 0.25; cursor: default; }
.cr-cal-nav:not(:disabled):hover { color: var(--pink); }
.cr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.cr-cal-grid span, .cr-cal-grid button { min-height: 40px; padding: 5px; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--black); color: var(--grey); font: inherit; font-size: 11px; text-align: right; }
.cr-cal-grid .cr-cal-weekday { min-height: auto; color: var(--pink-light); font-size: 9px; font-weight: 600; text-align: center; }
.cr-cal-grid button.is-available { background: rgba(232, 85, 143, 0.42); color: var(--white); cursor: pointer; transition: background 0.15s ease; }
.cr-cal-grid button.is-available:hover,
.cr-cal-grid button.is-selected { background: rgba(232, 85, 143, 0.22); }
.cr-cal-grid button.is-selected { outline: 2px solid var(--pink-light); outline-offset: -2px; }
.cr-cal-grid button:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }
.cr-times-heading { margin: 16px 0 0; color: var(--pink-light); font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }

/* A more solid background, so page text never shows through the longer form */
.custom-modal-panel { background: #6e1037; }
.cr-success-title {
  margin: 0 0 10px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 30px;
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .picker-item { transition: none; }
}

/* Deposit page for an accepted custom request */
.deposit-summary { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; padding: 16px 18px; border: var(--outline-width, 2px) solid var(--pink); border-radius: 14px; }
.deposit-summary dt { color: var(--grey); font-size: 13px; }
.deposit-summary dd { margin: 0; color: var(--white); font-weight: 600; text-align: right; }
.deposit-note { margin: 0; padding-left: 12px; border-left: 3px solid var(--pink); color: var(--white); font-style: italic; }
.deposit-note[hidden] { display: none; }
.deposit-desc { margin: 0; color: var(--grey); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* The client's custom request page */
.request-card { display: grid; gap: 22px; }
.request-heading { font-size: 22px; margin: 0 0 12px; }
.deposit-summary dd.is-changed { color: var(--pink); }
.deposit-summary .was { display: block; font-size: 11px; font-weight: 500; color: var(--grey); }
#offer-box { display: grid; gap: 12px; }
#offer-box[hidden], .request-reply[hidden], .request-decline[hidden] { display: none; }
.request-thread { display: grid; gap: 10px; }
.thread-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; background: var(--black); border: 1px solid var(--border); }
.thread-msg.owner { justify-self: start; border-color: var(--pink); }
.thread-msg.client { justify-self: end; background: rgba(232, 85, 143, 0.12); border-color: rgba(232, 85, 143, 0.45); }
.thread-meta { font-size: 11px; color: var(--grey); margin-bottom: 2px; }
.thread-offer { font-weight: 600; color: var(--white); }
.thread-body { color: var(--white); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.request-reply { display: grid; gap: 4px; }
.request-decline { justify-self: center; margin-top: 10px; background: none; border: 0; color: var(--grey); text-decoration: underline; font-family: 'Montserrat', sans-serif; font-size: 12px; cursor: pointer; }
.request-decline:hover { color: var(--pink); }

/* Member dashboard: your custom style requests */
.member-card.my-requests { max-width: 640px; margin-top: 26px; display: grid; gap: 14px; }
.my-requests h2 { margin: 0; font-size: 26px; }
.my-requests-hint, .my-requests-empty, .my-request-wait { margin: 0; color: var(--grey); font-size: 13px; }
.my-requests-new { justify-self: center; }
#my-requests { display: grid; gap: 14px; }
.my-request { display: grid; gap: 12px; padding: 16px; border: var(--outline-width, 2px) solid var(--pink); border-radius: 16px; background: var(--black); }
.my-request-head { display: flex; gap: 14px; align-items: flex-start; }
.my-request-photo { flex: none; width: 72px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.my-request-title { display: grid; gap: 6px; min-width: 0; }
.my-request-desc { margin: 0; color: var(--white); font-size: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.my-request-badge { justify-self: start; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--grey); color: var(--grey); }
.my-request-badge.is-action { background: var(--pink); border-color: var(--pink); color: var(--black); }
.my-request-badge.is-booked { border-color: #6fcf97; color: #6fcf97; }
.my-request-badge.is-waiting { border-color: var(--pink-light); color: var(--pink-light); }
.my-request-details { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.my-request-details dt { color: var(--grey); }
.my-request-details dd { margin: 0; color: var(--white); }
.my-request-last { margin: 0; padding-left: 10px; border-left: 3px solid var(--pink); color: var(--grey); font-size: 13px; overflow-wrap: anywhere; }
.my-request-last span { color: var(--pink-light); font-weight: 600; }
.my-request-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.my-request-actions .btn-primary, .my-request-actions .btn-outline { padding: 10px 20px; font-size: 11px; }
@media (max-width: 480px) { .my-request-details { grid-template-columns: 1fr; gap: 2px; } .my-request-details dd { margin-bottom: 6px; } }

/* ---------- YMB London braiding gel ---------- */
.gel-note { margin-top: 10px !important; }
.gel-link { color: var(--pink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gel-link:hover, .gel-link:focus-visible { color: var(--pink-light); }

.gel-page { max-width: 640px; margin: 0 auto; padding: 30px 6% 70px; text-align: center; overflow-x: clip; }
.gel-showcase { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; margin: 10px 0 30px; }
.gel-keys { position: relative; z-index: 2; text-align: left; }
.gel-keys h2 { margin: 0 0 10px; font-family: 'Montserrat', sans-serif; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pink); }
.gel-keys ul { list-style: none; margin: 0; padding: 0; }
/* The line under each ingredient runs on into the tub, like a label pointing at the product */
.gel-keys li { padding: 14px 0; }
.gel-keys li:not(:last-child) { border-bottom: 1px solid rgba(232, 85, 143, 0.7); margin-right: -30%; padding-right: 30%; }
.gel-keys h3 { margin: 0 0 4px; font-family: 'Montserrat', sans-serif; font-style: normal; font-size: clamp(14px, 3.8vw, 18px); font-weight: 700; color: var(--pink); }
.gel-keys p { margin: 0; color: var(--pink-light); font-size: clamp(12px, 3.2vw, 14px); line-height: 1.45; }
.gel-glow { position: relative; width: 100%; max-width: 300px; justify-self: center; isolation: isolate; }
/* Soft pink halo and light rays behind the tub, like a glowing bulb */
.gel-glow::before,
.gel-glow::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.gel-glow::before { width: 135%; height: 135%; background: radial-gradient(circle, rgba(255, 60, 170, 0.55) 0%, rgba(232, 85, 143, 0.28) 38%, rgba(232, 85, 143, 0) 70%); animation: gel-pulse 4s ease-in-out infinite; }
.gel-glow::after { width: 190%; height: 190%; background: repeating-conic-gradient(from 0deg, rgba(255, 70, 180, 0.22) 0deg 2deg, transparent 2deg 9deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); }
.gel-glow img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 6px rgba(255, 90, 190, 0.95)) drop-shadow(0 0 22px rgba(232, 85, 143, 0.8)) drop-shadow(0 0 48px rgba(255, 40, 160, 0.55)); }
@keyframes gel-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

.gel-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; }
.gel-tags li { padding: 5px 12px; border: 1px solid var(--pink); border-radius: 999px; background: var(--black); color: var(--pink-light); font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.gel-section { margin: 0 0 26px; padding: 22px 24px; background: var(--card); border-radius: 20px; text-align: left; }
.gel-section h2 { margin: 0 0 10px; font-size: 22px; color: var(--pink); }
.gel-section p { margin: 0 0 12px; color: var(--grey); font-size: 14px; line-height: 1.75; }
.gel-section p:last-child { margin-bottom: 0; }
.gel-inci { font-size: 13px !important; }
.gel-cta { display: inline-block; margin-top: 6px; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .gel-glow::before { animation: none; }
}
.gel-allergy { margin: 0 0 26px; padding: 18px 22px; background: var(--card); border: 1px solid var(--pink); border-radius: 20px; text-align: left; }
.gel-allergy h2 { margin: 0 0 6px; font-family: 'Montserrat', sans-serif; font-style: normal; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; color: var(--pink); }
.gel-allergy p { margin: 0; color: var(--white); font-size: 13.5px; line-height: 1.65; }
.gel-allergy a { color: var(--pink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Service page details: what you get, prep, aftercare, FAQs, related ---------- */
.service-lasts { margin: -12px 0 22px; color: var(--pink-light); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; }
/* Hair prep reminder straight under "Lasts..."; pulls up so the two lines sit together */
.service-hair-prep { margin: -14px auto 22px; max-width: 34ch; color: var(--pink); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.5; }
.service-features-title,
.service-info h2,
.service-prep h2,
.service-related h2 { margin: 0 0 12px; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 21px; color: var(--pink); text-align: left; }
.service-features a,
.service-info a,
.service-prep a { color: var(--pink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.service-prep { margin: 0 0 26px; padding: 18px 22px; background: var(--card); border: 1px solid var(--pink); border-radius: 20px; text-align: left; }
.service-prep h2 { font-size: 18px; margin-bottom: 6px; }
.service-prep p { margin: 0; color: var(--white); font-size: 14px; line-height: 1.65; }

.service-info { margin: 0 0 26px; padding: 22px 24px; background: var(--card); border-radius: 20px; text-align: left; }
.service-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.service-info li { position: relative; padding-left: 20px; color: var(--grey); font-size: 14px; line-height: 1.6; }
.service-info li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }

.service-faq { border-top: 1px solid var(--border); }
.service-faq:last-of-type { border-bottom: 1px solid var(--border); }
.service-faq summary { position: relative; padding: 14px 30px 14px 0; color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.45; cursor: pointer; list-style: none; }
.service-faq summary::-webkit-details-marker { display: none; }
.service-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--pink); font-size: 20px; font-weight: 400; }
.service-faq[open] summary::after { content: '\2212'; }
.service-faq summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 4px; }
.service-faq p { margin: 0 0 14px; color: var(--grey); font-size: 14px; line-height: 1.65; }

.service-related { margin: 30px 0 0; padding: 20px 24px; background: var(--card); border-radius: 20px; text-align: left; }
.service-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.service-related a { display: inline-block; padding: 8px 14px; border: 1px solid var(--pink); border-radius: 999px; background: var(--black); color: var(--pink-light); font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.service-related a:hover, .service-related a:focus-visible { background: var(--pink); color: var(--black); }

/* ---------- Policies: hair length guide ---------- */
.hair-length { margin-top: 0; }
.length-guide { margin: 0 0 24px; }
.length-guide a { display: block; border: 1px solid var(--pink); border-radius: 16px; overflow: hidden; }
.length-guide img { display: block; width: 100%; height: auto; }
.length-guide figcaption { margin-top: 8px; color: var(--grey); font-size: 12.5px; text-align: center; }
.length-notes { margin: 0; padding-left: 22px; }
.length-notes li { margin-bottom: 12px; color: var(--grey); font-size: 14px; line-height: 1.75; }
.length-notes strong { color: var(--white); }
.length-notes a { color: var(--pink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Links in the policies that take people to the contact details */
.policy-contact { color: var(--pink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.policy-contact:hover, .policy-contact:focus-visible { color: var(--pink-light); }

/* ---------- Contact page: phone and email ---------- */
.contact-details { max-width: 640px; margin: 0 auto 40px; padding: 24px 26px; background: var(--card); border: 1px solid var(--pink); border-radius: 20px; scroll-margin-top: 100px; }
.contact-details h2 { margin: 0 0 14px; font-size: clamp(22px, 3vw, 28px); color: var(--pink); }
.contact-details ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.contact-details li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.contact-label { min-width: 84px; color: var(--grey); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.contact-details a { color: var(--pink); font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact-details a:hover, .contact-details a:focus-visible { color: var(--pink-light); }
.contact-details p { margin: 0; color: var(--grey); font-size: 13.5px; line-height: 1.6; }

/* ---------- Booking form: photo and video consent ---------- */
.consent-field { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; }
.consent-field legend { padding: 0 6px; color: var(--pink-light); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.consent-note { margin: 0 0 10px; color: var(--grey); font-size: 12.5px; line-height: 1.55; }
.consent-field .consent-option { display: flex; margin: 0; text-transform: none; letter-spacing: normal; align-items: center; gap: 10px; padding: 6px 0; color: var(--white); font-size: 14px; cursor: pointer; }
.consent-field .consent-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--pink); flex: none; }
.site-footer a { color: var(--pink-light); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--pink); }
.privacy-page .policies-intro { padding-top: 40px; }
.privacy-page .policy-section h2 { margin-bottom: 14px; }

/* Contact page: when a link jumps to the About section, stop it just below the sticky
   header (about 110px tall) instead of hiding the top of the section behind it */
#about { scroll-margin-top: 124px; }

/* "Photo coming soon" image for styles without photos yet: not clickable, so no zoom cursor */
img.photo-coming-soon { height: auto; } /* let the card or gallery shape set the height, not the 900px in the HTML */
.service-gallery img.photo-coming-soon { cursor: default; }

/* ---------- Booking form: Log in or Continue as guest ---------- */
.booking-auth { margin-bottom: 8px; }
.booking-auth-tabs { margin-bottom: 12px; }
.booking-auth-tabs .tab { padding: 10px 8px; font-size: 12px; }
.booking-member-note { margin: 0 0 18px; text-align: center; }
.booking-login .submit-btn { margin-top: 4px; }
.booking-login .form-note a, .booking-member-note a { color: var(--pink); }
.booking-auth[hidden], .booking-details-panel[hidden], .booking-login[hidden], .booking-signed-in[hidden] { display: none; }
.booking-signed-in { margin-bottom: 16px; }

/* ---------- Booking form: reference photos ---------- */
.ref-upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ref-upload-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 12px 18px; border: 1px dashed var(--pink); border-radius: 12px; background: var(--black); color: var(--pink-light); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: none; cursor: pointer; }
.field .ref-upload-btn { display: inline-flex; font-size: 13px; letter-spacing: 0.5px; text-transform: none; color: var(--pink-light); margin-bottom: 0; }
.ref-upload-btn span { font-size: 20px; line-height: 1; color: var(--pink); }
.ref-upload-btn:hover { border-style: solid; }
.ref-upload-input:focus-visible + .ref-upload-btn { outline: 2px solid var(--pink-light); outline-offset: 2px; }
.ref-upload-btn[hidden], .field .ref-upload-btn[hidden] { display: none; }
.ref-previews { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ref-previews:empty { display: none; }
.ref-previews li { position: relative; }
.ref-previews img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--pink-light); border-radius: 10px; }
.ref-remove { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border: 1px solid var(--pink); border-radius: 50%; background: var(--black); color: var(--white); font-size: 16px; line-height: 1; cursor: pointer; }
.ref-remove:hover, .ref-remove:focus-visible { background: var(--pink); color: var(--black); }
.ref-upload-message[hidden] { display: none; }

/* Admin: reference photos on a booking */
.ref-thumbs { margin-top: 8px; }
.ref-thumb-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ref-thumb img { display: block; width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--pink-light); border-radius: 8px; }

/* Custom request sent: "View my request in My account" button above Done (members only) */
.cr-account-link { display: block; margin-bottom: 12px; text-align: center; text-decoration: none; }
.cr-account-link[hidden] { display: none; }
/* My account page: stop below the sticky header when linked to the requests */
#custom-requests { scroll-margin-top: 124px; }

/* ==========================================================
   Portfolio collage (portfolio.html)
   All black with neon stars (no ombre), a script "Portfolio" title, then the photos touching
   edge to edge: two side by side, then a big one. The pattern
   repeats every 11 photos: 2, big, 2, big, 2, 2, big.
   ========================================================== */
body.collage-body { background: #000; }
.collage-page { padding: 0 0 70px; }   /* see-through, so the neon stars show around the photos */
.collage-title {
  margin: 0;
  padding: clamp(46px, 9vw, 90px) 16px clamp(56px, 10vw, 110px);   /* the space under the title */
  text-align: center;
  font-family: 'Pinyon Script', 'Playfair Display', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(64px, 13vw, 120px);
  line-height: 1;
  color: var(--pink);
  text-shadow: 0 0 22px rgba(232, 85, 143, 0.35);
}
.collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;                          /* photos touch */
  max-width: 760px;
  margin: 0 auto;
  grid-auto-flow: dense;
}
.collage .portfolio-item {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  cursor: zoom-in;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  width: auto;                     /* fill the grid cell (the home page rail caps photos at 260px) */
}
.collage .portfolio-item:nth-child(11n + 3),
.collage .portfolio-item:nth-child(11n + 6),
.collage .portfolio-item:nth-child(11n + 11) {
  grid-column: span 2;
  aspect-ratio: 1 / 1;             /* the big ones */
}
.collage .portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  transform: none;
  transition: opacity 0.25s ease;
}
.collage .portfolio-item:hover img { transform: none; }
.collage .portfolio-item:hover img,
.collage .portfolio-item:focus-visible img { opacity: 0.82; }
.collage .portfolio-item:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; z-index: 1; }
.collage .portfolio-caption {      /* kept for screen readers; the lightbox shows it */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.collage-cta { text-align: center; padding: 60px 16px 0; }
.collage-cta p { margin: 0 0 16px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 24px; color: #fff; }
.collage-cta .btn-primary { display: inline-block; }
.collage-collab { display: block; margin-top: 16px; color: var(--grey); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.collage-collab:hover { color: var(--pink-light); }
body.collage-body .site-footer { background: #000; }

/* ==========================================================
   Dashboards: futuristic HUD look (member-dashboard.html).
   Same fonts, colours and buttons as the rest of the site;
   the panels get cut corners, neon pink frames, hatch marks
   and "// LABEL_" tags. admin.html has a matching set.
   ========================================================== */
body.dash {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(232, 85, 143, 0.22), transparent 55%),
    linear-gradient(rgba(232, 85, 143, 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(232, 85, 143, 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--black);
}
.dash-page { max-width: 1120px; margin: 0 auto; }

.hud-label {
  margin: 0 0 6px;
  color: var(--pink);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.dash-intro { position: relative; max-width: 620px; margin: 0 auto 34px; text-align: center; }
.dash-intro h1 { margin: 0 0 8px; font-size: clamp(32px, 5vw, 46px); }
.dash-intro p:last-child { margin: 0; color: var(--grey); font-size: 14px; }
/* Pixel sparkles either side of the greeting */
.dash-intro::before,
.dash-intro::after {
  content: "";
  position: absolute;
  top: 34px;
  width: 26px;
  height: 26px;
  background: url("../images/loyalty/pixel-star.svg") center / contain no-repeat;
  image-rendering: pixelated;
}
.dash-intro::before { left: 2%; }
.dash-intro::after { right: 2%; top: 64px; width: 18px; height: 18px; }

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas: "loyalty bookings" "details bookings" "saved bookings" "requests requests";
  grid-template-rows: auto auto 1fr auto;   /* a long bookings list stretches row 3, so Details and Saved styles stay under the card */
  gap: 26px;
  align-items: start;
}
.dash-loyalty { grid-area: loyalty; }
.dash-bookings { grid-area: bookings; }
.dash-saved { grid-area: saved; }
.dash-details { grid-area: details; }
.dash-details-list { font-size: 14px; gap: 8px 18px; }
.dash-details-list dd { margin: 0; overflow-wrap: anywhere; }
.dash-details .member-status { margin-top: 12px; }
.dash-details-edit { margin-top: 12px; }
.dash-details-form { margin-top: 14px; }
.dash-details-buttons { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.dash-grid .my-requests { grid-area: requests; max-width: none; margin: 0; }

/* A HUD panel: pink frame with cut corners. The frame is the panel's own
   background; ::before paints the dark inside 1px smaller, same shape. */
.hud-panel {
  --cut: 18px;
  position: relative;
  isolation: isolate;
  padding: 26px 26px 28px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, var(--pink), rgba(232, 85, 143, 0.35) 40%, rgba(232, 85, 143, 0.35) 60%, var(--pink));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.hud-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(232, 85, 143, 0.08), transparent 120px),
    #0F0B0D;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
/* Hatch marks in the top right corner, like the reference frames */
.hud-panel::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 22px;
  width: 64px;
  height: 7px;
  background: repeating-linear-gradient(-55deg, var(--pink) 0 2px, transparent 2px 6px);
  opacity: 0.85;
}
.hud-panel h2 { margin: 0 0 16px; font-size: 26px; }
.dash-hint, .dash-rule { margin: 12px 0 0; color: var(--grey); font-size: 12.5px; line-height: 1.6; }
.dash-rule a, .dash-empty a { color: var(--pink); }
.dash-empty { margin: 0; color: var(--grey); font-size: 13px; list-style: none; }
.dash-empty .btn-outline { margin-top: 14px; }

/* ---------- Loyalty card ---------- */
.loyalty-card {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  perspective: 1400px;
}
.loyalty-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 6px; border-radius: 18px; }
.loyalty-inner {
  position: relative;
  display: block;
  aspect-ratio: 1.586;   /* the shape of a bank card */
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.loyalty-card.is-flipped .loyalty-inner { transform: rotateY(180deg); }
.loyalty-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 252, 249, 0.12);
  background: #000;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(232, 85, 143, 0.25), 0 0 28px rgba(232, 85, 143, 0.18);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Front: black on the left, a spray of gold dust on the right */
.loyalty-front { background: url("../images/loyalty/gold-glitter.svg") center / cover no-repeat, #000; }
.loyalty-back { transform: rotateY(180deg); }

.loyalty-logo {
  position: absolute;
  top: 13%;
  left: 4%;
  width: 46%;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}
.loyalty-tag {
  position: absolute;
  right: 7%;
  bottom: 11%;
  color: var(--white);
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(12px, 3.6vw, 17px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}
.loyalty-hint {
  position: absolute;
  right: 7%;
  bottom: 4%;
  color: var(--grey);
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.loyalty-back .loyalty-hint { left: 0; right: 0; text-align: center; }

/* Back: the five star stamps */
.loyalty-thanks {
  position: absolute;
  top: 13%;
  left: 4%;
  right: 4%;
  color: var(--white);
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(11px, 3.4vw, 16px);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
}
.loyalty-stars {
  position: absolute;
  top: 35%;
  left: 6%;
  right: 6%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2%;
}
.loyalty-star { display: block; transform: rotate(var(--tilt, 0deg)); }
.loyalty-star svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Not earned yet: dark star with a soft mauve rim */
.loyalty-star path {
  fill: #1c1a1d;
  stroke: #8e7489;
  stroke-width: 4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(190, 160, 190, 0.7));
}
/* Earned: gleaming neon white */
.loyalty-star.is-stamped path {
  fill: #f6f3fa;
  stroke: #fff;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 16px rgba(220, 200, 255, 0.5));
}
/* All five: pink neon */
.loyalty-stars.is-complete .loyalty-star path {
  fill: #ff7fb3;
  stroke: #ffd1e4;
  filter: drop-shadow(0 0 3px #ff9cc5) drop-shadow(0 0 9px var(--pink)) drop-shadow(0 0 18px rgba(232, 85, 143, 0.8));
}
.loyalty-card.is-flipped .loyalty-star.is-stamped { animation: loyalty-stamp 0.5s 0.45s both; }
.loyalty-card.is-flipped .loyalty-star.is-stamped:nth-child(2) { animation-delay: 0.55s; }
.loyalty-card.is-flipped .loyalty-star.is-stamped:nth-child(3) { animation-delay: 0.65s; }
.loyalty-card.is-flipped .loyalty-star.is-stamped:nth-child(4) { animation-delay: 0.75s; }
.loyalty-card.is-flipped .loyalty-star.is-stamped:nth-child(5) { animation-delay: 0.85s; }
@keyframes loyalty-stamp {
  0% { transform: scale(1.6) rotate(var(--tilt, 0deg)); opacity: 0; }
  60% { transform: scale(0.92) rotate(var(--tilt, 0deg)); opacity: 1; }
  100% { transform: scale(1) rotate(var(--tilt, 0deg)); }
}
.loyalty-progress { margin: 18px 0 0; color: var(--pink-light); font-size: 14px; font-weight: 600; text-align: center; }

/* ---------- Bookings ---------- */
.dash-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.dash-tabs .tab { padding: 9px 20px; }
.dash-booking-list { display: grid; gap: 14px; }
.dash-booking {
  position: relative;
  padding: 16px 18px 16px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid rgba(232, 85, 143, 0.45);
  background: rgba(13, 13, 13, 0.75);
}
.dash-booking.is-upcoming { border-left-color: var(--pink); }
.dash-booking-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dash-booking-when { color: var(--pink-light); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.dash-booking-service { margin: 6px 0 10px; font-family: 'Montserrat', sans-serif; font-size: 16px; font-style: normal; font-weight: 700; }
.dash-badge { padding: 3px 10px; border: 1px solid var(--border); color: var(--grey); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.dash-badge.is-ok { border-color: var(--pink); color: var(--pink); }
.dash-badge.is-bad { border-color: #E57373; color: #F2A0A0; }
.dash-booking-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 13px; }
.dash-booking-facts dt { color: var(--grey); }
.dash-booking-facts dd { margin: 0; }
.dash-refs { margin-top: 12px; }
.dash-refs-label { display: block; margin-bottom: 6px; color: var(--grey); font-size: 12px; }
.dash-refs-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-refs-row img { display: block; width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--pink); }
.dash-booking-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.dash-booking-actions .dash-rule { flex-basis: 100%; margin: 0; }
.dash-booking-actions .btn-outline { padding: 10px 20px; }
.dash-request { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border); font-size: 13px; }
.dash-request p { margin: 0 0 6px; }
.dash-request.is-pending { border-color: var(--pink); }
.dash-request-reply { color: var(--pink-light); font-style: italic; }
.dash-request.is-cancelled { border-color: var(--pink); }
.dash-panel { margin-top: 14px; padding: 16px; border: 1px solid var(--pink); background: rgba(232, 85, 143, 0.06); font-size: 13px; }
.dash-panel > p:first-child { margin-top: 0; }
.dash-check { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 16px; line-height: 1.5; }
.dash-check input { margin-top: 3px; accent-color: var(--pink); }
.dash-panel .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.dash-picker .calendar-card { margin: 14px 0; padding: 16px; }
.dash-note-label { display: grid; gap: 6px; margin-bottom: 14px; color: var(--grey); font-size: 12px; }
.dash-note { padding: 10px 12px; border: 1px solid var(--border); background: var(--black); color: var(--white); font: inherit; font-size: 16px; resize: vertical; }
.dash-note:focus { outline: none; border-color: var(--pink); }

/* ---------- Saved styles ---------- */
.dash-saved-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dash-saved-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); background: rgba(13, 13, 13, 0.75); }
.dash-saved-name { color: var(--white); font-size: 14px; font-weight: 600; text-decoration: none; }
a.dash-saved-name:hover { color: var(--pink); }
.dash-saved-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dash-saved-actions .btn-primary { padding: 9px 16px; font-size: 11px; }
.dash-unsave { width: 34px; height: 34px; padding: 6px; border: 0; background: none; cursor: pointer; }
.dash-unsave svg { display: block; width: 100%; height: auto; }
.dash-unsave path { fill: var(--pink); stroke: var(--pink); stroke-width: 4; }
.dash-unsave:hover path { fill: transparent; }

.dash-actions { margin-top: 34px; }

@media (max-width: 860px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "loyalty" "bookings" "details" "saved" "requests"; }
}
@media (max-width: 520px) {
  .hud-panel { --cut: 12px; padding: 22px 16px 24px; }
  .dash-intro::before, .dash-intro::after { display: none; }
  .dash-saved-item { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .loyalty-inner { transition: none; }
  .loyalty-card.is-flipped .loyalty-star.is-stamped { animation: none; }
}

/* ---------- "Save for later" heart on service pages ---------- */
.save-style {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -4px auto 16px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--pink);
  border-radius: 30px;
  background: transparent;
  color: var(--pink);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.save-style svg { width: 18px; height: auto; }
.save-style path { fill: transparent; stroke: var(--pink); stroke-width: 8; transition: fill 0.2s ease; }
.save-style:hover, .save-style[aria-pressed="true"] { background: rgba(232, 85, 143, 0.14); }
.save-style[aria-pressed="true"] path { fill: var(--pink); }

/* ==========================================================
   Member perks (home page "Become a member" and the login page).
   The numbers are filled in by assets/js/member-perks.js.
   ========================================================== */
.member-perks {
  list-style: none;
  margin: 18px auto 26px;
  padding: 0;
  max-width: 320px;
  display: grid;
  gap: 10px;
  text-align: left;
}
.member-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.member-perks li[hidden] { display: none; }
.perk-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--pink); }
.member-intro .member-perks { margin-bottom: 0; }


/* Birthday treat on the member's account page */
.dash-birthday { margin: 12px 0 0; padding: 10px 12px; border: 1px dashed rgba(232, 85, 143, 0.5); font-size: 13px; line-height: 1.5; color: var(--grey); }
.dash-birthday.is-now { border-style: solid; border-color: var(--pink); color: var(--pink-light); background: rgba(232, 85, 143, 0.08); }
.dash-birthday-form { margin-top: 14px; }

/* Date of birth typed as DD/MM/YYYY: the line underneath says it back (assets/js/date-typing.js) */
.dob-readback:empty { display: none; }
.dob-readback.is-ok { color: var(--pink-light); }
.dob-readback.is-error { color: #ef6b6b; }

/* "Pay the rest online" on the member account page */
.dash-pay-rest { display: inline-block; margin-top: 12px; font-size: 12px; }
.pay-balance .pb-facts { margin-bottom: 16px; font-size: 14px; }
.pay-balance .submit-btn { margin: 4px 0 10px; }