@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Pinyon+Script&family=Playfair+Display:wght@600;700&display=swap");

:root {
  --pink-50: #fff0f7;
  --pink-100: #ffd7ea;
  --pink-200: #ffbddf;
  --pink-500: #e84a93;
  --pink-700: #b63270;
  --text: #2c1730;
  --card: #ffffff;
  --bg: #fff8fc;
  --border: #f2cae0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Montserrat", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image: url("/img/background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

.container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 240, 247, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.nav-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  line-height: 1;
  text-decoration: none;
}

.brand-mark {
  display: block;
  height: 2.15rem;
  width: auto;
}

.brand-wordmark {
  display: block;
  height: 2.6rem;
  width: auto;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.site-nav a[aria-current="page"] {
  color: var(--pink-700);
}

.hero {
  position: relative;
  background: transparent;
  border-bottom: 3px solid rgba(242, 202, 224, 0.92);
  padding: 2rem 0 1.5rem;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255,217,234,0.62), rgba(255,238,246,0.42));
  z-index: 0;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(184,50,112,0.06), rgba(255,255,255,0.06));
  z-index: 0;
  pointer-events: none;
}

.hero h1 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.2;
}

.eyebrow {
  display: inline-block;
  font-weight: 700;
  color: var(--pink-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-actions {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.btn {
  display: inline-block;
  border: 1px solid var(--pink-500);
  background: var(--pink-500);
  color: #fff;
  text-decoration: none;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-weight: 700;
}

.btn:hover {
  background: var(--pink-700);
}

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

.btn-small {
  padding: 0.45rem 0.8rem;
}

.section {
  padding: 2.3rem 0;
}

.services-page .section,
.index-page .section {
  background: transparent;
}
.alt-bg {
  background: var(--pink-50);
}

.section-intro {
  margin-top: 0;
}

/* Center title + intro on the services page */
.services-page .container h1,
.services-page .container .section-intro {
  text-align: center;
}

.card {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.65);
  border: 3px solid rgba(242, 202, 224, 0.85);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(232, 74, 147, 0.06) inset;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: visible;
}

.card::before {
  /* soft decorative glow / 3D rim */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  z-index: -1;
  background: linear-gradient(135deg, rgba(232,74,147,0.06), rgba(184,50,112,0.04));
  filter: blur(6px);
  pointer-events: none;
}

.card::after {
  /* subtle beveled inner highlight to suggest a gentle 3D bevel */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 10px 14px rgba(255, 255, 255, 0.48),
    inset 0 -10px 14px rgba(0, 0, 0, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
  /* a faint linear overlay to emphasize the beveled edge */
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.02));
}

info-grid,
feature-grid,
footer-grid,
contact-grid {
  display: grid;
  gap: 1.5rem;
}

info-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Services: one stacked card per row; each card contains a .service-row */
.service-grid, .info-grid, .contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Row inside each service card: image + content */
.service-row, .info-row, .contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.service-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.service-content h2 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 2.4rem;
  line-height: 1.05;
}

.service-section .price-list li {
  padding: 0.55rem 0;
}

.services-page .service-grid .card h2 {
  font-family: "Pinyon Script", "Brush Script MT", cursive;
}

.contact-grid {
  grid-template-columns: 1fr;
}

.price-list {
  list-style: none;
  padding-left: 0;
}

.price-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0;
  position: relative;
}
.price-list li::after {
  /* thin two-tone separator that reads on light and darker backgrounds */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(0,0,0,0.12) 50%, rgba(255,255,255,0.45) 100%);
  pointer-events: none;
}

/* Invisible plus to equalize width where a visible "+" is not shown */
.invis-plus {
  visibility: hidden;
}

.link {
  color: var(--pink-700);
  font-weight: 600;
}

.accordion details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 0.7rem;
  padding: 0.7rem 0.9rem;
}

.accordion summary {
  cursor: pointer;
  font-weight: 700;
}

.map-wrap iframe {
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(255, 134, 183, 0.12);
}

.site-footer {
  background: #35172f;
  color: #fff;
  padding: 2rem 0;
}

.footer-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.site-footer a {
  color: #ffd9ec;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.social-links a {
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 720px) {
  .nav-wrap {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-wordmark {
    height: 2.2rem;
  }

  .map-embed {
    width: 275px;
  }
}

/* Styles for service descriptions and notes (subtle, italic, readable) */
.price-list li.has-desc {
  display: block;
  padding: 0.55rem 0;
  position: relative;
}

.price-list li.has-desc .price-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}

.service-description {
  margin: 0.35rem 0 0 0;
  font-style: italic;
  color: #6b6b6b;
  font-size: 0.95rem;
  line-height: 1.4;
}

.service-notes {
  margin-top: 1.25rem;
  font-style: italic;
  color: #6b6b6b;
  font-size: 0.95rem;
}

.service-notes p {
  margin: 0.25rem 0;
}

/* Reserve space on the right so descriptions don't flow underneath prices */
.price-row strong {
  display: inline-block;
  min-width: 6.5rem;
  text-align: right;
}

.service-description {
  margin-right: 7rem;
}

@media (max-width: 899px) {
  .price-row strong {
    min-width: 0;
    text-align: right;
  }

  .service-description {
    margin-right: 0;
  }
}

@media (min-width: 900px) {
  /* On wide screens place image left and content right */
  .service-row {
    grid-template-columns: 360px 1fr;
    gap: 2rem;
    align-items: center;
  }

  .service-media {
    max-width: 360px;
  }
}

@media (min-width: 1200px) {
  /* slightly larger headings on very wide screens */
  .service-content h2 {
    font-size: 2.4rem;
  }
}

/* Narrow screens: cap service images so they don't become too tall */
@media (max-width: 899px) {
  .service-media {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .service-media img {
    max-height: 200px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }
}

/* === Service cards: no images for now ===
   The service images are commented out in services.html, so the empty
   image column would otherwise push each card's content to the right.
   This block collapses that column and centers the content instead.
   TO RESTORE the image-on-left layout: delete this entire block and
   un-comment the <img> tags in services.html. */
.service-row {
  grid-template-columns: 1fr;
}

.service-media {
  display: none;
}

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

.service-content .price-list {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}