/* Base styles */
:root{
  --brand:#935b68;
  --brand-hover:#7f4f5b;
  --brand-ink:#ffffff;
  --ring: 0 0 0 3px rgba(147,91,104,.25);
  --accent:#d8a7b1;
  --dark:#2c2c2c;
  --light:#fff;
  --max-width: 960px;
  --font-main: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-heading: var(--font-main);
}

*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: var(--font-main);
  line-height:1.6;
  color:#222;
  background: var(--light);
}

.container{
  width:100%;
  max-width: var(--max-width);
  margin:0 auto;
  padding:0 1rem;
}

/* Header */
.site-header{
  background: var(--dark);
  color: var(--light);
  position: sticky;
  top:0;
  z-index:1000;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:60px;
}
.logo{
  color: var(--light);
  text-decoration:none;
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:0.5px;
}
.site-nav ul{
  list-style:none;
  display:flex;
  gap:1.5rem;
}
.site-nav a{
  color: var(--light);
  text-decoration:none;
  font-weight:500;
}
.site-nav a:hover{
  color: var(--accent);
}
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
}
.nav-toggle .bar{
  display:block;
  width:24px;
  height:2px;
  margin:5px 0;
  background:var(--light);
  transition:0.3s;
}

/* Hero */
.hero{
  padding:4rem 0 3rem;
  text-align:center;
}
.hero h1{
  font-size:2.4rem;
  margin-bottom:0.5rem;
  font-family: var(--font-heading);
}
.hero p.tagline{
  font-size:1.65rem;
  margin-bottom:1.5rem;
  color:#555;
}
.hero p.lead{
  font-size:1.3rem;
  margin-bottom:1.5rem;
  color:#555;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.75rem 1.5rem;
  background: var(--brand);
  color: var(--brand-ink);
  text-decoration:none;
  border-radius:12px;
  font-weight:600;
  transition:background 0.2s;
}
.btn:hover{ background: var(--brand-hover); transform: translateY(-1px); }

/* Sections */
section{
  margin:3rem 0;
}
section h2{
  font-size:1.6rem;
  margin-bottom:1rem;
}
section p, section li{
  margin-bottom:0.6rem;
}
ul.bullets{
  list-style:disc;
  margin-left:1.25rem;
}

/* Footer */
.site-footer{
  background:#f5f5f5;
  padding:2rem 0;
  margin-top:3rem;
  font-size:0.9rem;
  color:#666;
}

/* Responsive Navigation */
@media (max-width:768px){
  .nav-toggle{
    display:block;
  }
  .site-nav{
    position:absolute;
    top:60px;
    right:0;
    background:var(--dark);
    width:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
  }
  .site-nav.open{
    max-height:300px;
  }
  .site-nav ul{
    flex-direction:column;
    padding:1rem 0;
    gap:0;
  }
  .site-nav li{
    padding:0.75rem 1rem;
  }
  .site-nav a{
    display:block;
  }
  .hero h1{
    font-size:2rem;
  }
}

/* Typography helpers */
.lead{
  font-size:1.1rem;
  color:#2c2c2c;
}
h3 {
font-size:1.4rem;
font-weight: 700;
margin-top: 1.4em;
margin-bottom: 0.5em;
color: #222}

p {
margin-bottom: 1.5em;
line-height: 1.6;

/* Service Page Styling*/
.service-hook {
font-weight: 500;
color: #935b68;
display: block;
font-size: 1.125rem;
margin-bottom: 0.5em;
}

/* Contact Form Styles */
form {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  font-family: 'Arial', sans-serif;
}

form label {
  display:block;
  font-weight:600;
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333;
}

form input[type="text"],
form input[type="email"],
form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  transition: border 0.3s ease;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus {
  border-color: #c2185b;
  outline: none;
  box-shadow: 0 0 4px rgba(194, 24, 91, 0.2);
}

form button[type="submit"] {
  background: var(--brand);
  color: var(--brand-ink);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

form button[type="submit"]:hover, button[type="submit"].btn:hover {
  background: #835b68;
}

/* Optional: Center the section */
#contact {
  text-align: center;
  margin-top: 2rem;
}

#contact h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #222;
}

#contact p {
  max-width: 500px;
  margin: 0 auto 2rem;
  color: #555;
}


/* Improved focus states for accessibility */
.btn:focus-visible, form button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
form input[type="text"]:focus-visible,
form input[type="email"]:focus-visible,
form textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}