:root{
  --primary: #81507f;
  --primary-strong: #6f3f6a;
  --secondary: #585258;
  --bg: #ffffff;
  --text: #2f2f2f;
  --muted: #6b6b6b;
  --section-pale: #fbf6fb;
  --section-paler: #f8f6f9;
  --radius: 12px;
  --container: 1100px;
  --gap: 1.25rem;
  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  /* Logo sizing variables (adjust --logo-height-desktop to change size) */
  --logo-height-desktop: 160px;
  --logo-height-mobile: 96px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.container{max-width:var(--container); margin:0 auto; padding:0 1rem;}

/* Header with richer gradient */
.site-header{
  background: linear-gradient(135deg, rgba(129,80,127,0.12) 0%, rgba(129,80,127,0.04) 40%, rgba(255,255,255,0) 100%);
  padding:2.5rem 0 1.25rem;
  border-bottom:1px solid rgba(88,82,88,0.06);
}
.logo-centered{ display:flex; flex-direction:column; align-items:center; gap:0.5rem; text-align:center; }
.logo-image{
  height: var(--logo-height-desktop);
  max-width: 90%;
  width: auto;
  display:block;
}
.logo-tagline{ color:var(--primary); font-family:var(--font-heading); font-size:1rem; font-weight:600; letter-spacing:0.2px; }

/* Navigation */
.main-nav{ background:transparent; padding:0.5rem 0; }
.nav-inner{ display:flex; justify-content:center; gap:1.25rem; }
.main-nav a{ color:var(--secondary); text-decoration:none; font-weight:600; padding:0.35rem 0.5rem; }
.main-nav a:hover{ color:var(--primary); }

/* Hero with richer gradient background */
.hero{
  background: linear-gradient(135deg, rgba(129,80,127,0.08) 0%, rgba(129,80,127,0.04) 30%, rgba(88,82,88,0.02) 70%, rgba(255,255,255,0) 100%);
  padding:3.25rem 0;
}
.hero-inner{ display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:start; }
.hero-copy h1{ font-family:var(--font-heading); color:var(--primary); font-size:2rem; margin:0 0 0.5rem; }
.hero-copy p{ color:var(--secondary); max-width:48ch; }

/* CTA gradient button with pull shadow (used in contact panel) */
.btn-cta{
  display:inline-block;
  background: linear-gradient(180deg, #9b5fa6 0%, #6f3f6a 100%);
  color:#fff;
  padding:0.85rem 1.25rem;
  border-radius:28px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:0.2px;
  box-shadow: 0 18px 40px rgba(111,63,106,0.18), inset 0 -2px 0 rgba(0,0,0,0.06);
  transition: transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .16s ease;
}
.btn-cta:hover{ transform: translateY(-6px); box-shadow: 0 28px 60px rgba(111,63,106,0.22), inset 0 -2px 0 rgba(0,0,0,0.06); }

/* Ghost button (if used elsewhere) */
.btn-ghost{ display:inline-block; margin-left:0.6rem; padding:0.65rem 0.95rem; border-radius:18px; text-decoration:none; color:var(--primary); border:1px solid rgba(129,80,127,0.18); font-weight:700; }

/* Hero panel */
.hero-panel{ background:#fff; border:1px solid rgba(88,82,88,0.06); padding:1rem; border-radius:12px; }
.hero-panel h2{ margin-top:0; color:var(--primary); font-family:var(--font-heading); }

/* Purple bullets */
.purple-bullets{ list-style:none; padding-left:0; margin:0.5rem 0 0 0; }
.purple-bullets li{
  position:relative;
  padding-left:1.5rem;
  margin:0.5rem 0;
  color:var(--secondary);
}
.purple-bullets li:before{
  content:"";
  position:absolute;
  left:0;
  top:0.45rem;
  width:10px;
  height:10px;
  border-radius:50%;
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  box-shadow: 0 0 0 6px rgba(129,80,127,0.06);
}

/* Sections */
.section{ padding:2rem 0; }
.section-alt{ background: linear-gradient(180deg, #fbf6fb 0%, #f3eef6 100%); }
.about-contrast{ background: linear-gradient(180deg, #fff 0%, #f7f2f7 100%); padding-top:2.5rem; }

/* Cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1rem; }
.card{ background:#fff; border:1px solid rgba(88,82,88,0.06); padding:1rem; border-radius:12px; }
.card h3{ color:var(--primary); margin-top:0; font-family:var(--font-heading); }
.card p, .card li{ color:var(--secondary); }

/* About and contact grids */
.about-grid, .contact-grid{ display:grid; grid-template-columns:1fr 360px; gap:1.25rem; align-items:start; }
.about-panel, .contact-panel{ background:#fff; border:1px solid rgba(88,82,88,0.06); padding:1rem; border-radius:12px; }
.contact-line a{ color:var(--primary); font-weight:700; text-decoration:none; }

/* Headings: stronger purple and size */
h2{
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 1.45rem;
  margin-bottom: 0.6rem;
  font-weight:700;
}
.about-contrast h2,
.contact-panel h3,
.about-panel h3 {
  color: var(--primary);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Small polish: increase contrast for small text in panels */
.hero-panel, .about-panel, .contact-panel, .card {
  background: #fff;
  border: 1px solid rgba(88,82,88,0.08);
}

/* Footer */
.site-footer{ border-top:1px solid rgba(88,82,88,0.06); padding:1rem 0; background:var(--bg); }
.footer-inner{ display:flex; justify-content:space-between; gap:1rem; align-items:center; font-size:0.95rem; color:var(--muted); }

/* Utility: center small CTA in panels */
.contact-panel .btn-cta{ display:inline-block; margin:0 auto; }

/* Responsive */
@media (max-width:900px){
  .hero-inner, .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .nav-inner{ display:flex; justify-content:center; gap:0.75rem; flex-wrap:wrap; }
  .logo-image{ height: var(--logo-height-mobile); }
  h2{ font-size:1.25rem; }
  .btn-cta{ padding:0.75rem 1rem; border-radius:22px; }
  .logo-centered{ gap:0.4rem; }
  .site-header{ padding:1.5rem 0 0.9rem; }
}