:root {
  --color-bg: #fdf7ef;
  --color-text: #6998b8;
  --color-accent: #e4cdc8;
  --color-white: #ffffff;

  --font-family: 'Inter', system-ui, -apple-system, sans-serif;

  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  --container-width: 1200px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  display: block;
}


/* Layout */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Header */
.header {
  /* Removed fixed height to accommodate larger logo */
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  /* Reduced vertical padding slightly as logo provides height */

  /* Sticky Navigation */
  position: sticky;
  top: 0;
  background-color: var(--color-bg);
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* Subtle shadow for separation */
  width: 100%;
  max-width: 100%;
  /* Spans full width, content stays in container if needed, but here we keep simple */
}

/* Ensure container wraps content properly if header is outside */
/* Check: If header is INSIDE .container, sticky works relative to it? 
   No, sticky needs to be top of viewport. 
   We will keep basic sticky but might need to adjust HTML structure slightly if .container confines it.
   For now, we'll keep it simple. */

.nav ul {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}


.nav a {
  font-weight: 500;
  font-size: 1.1rem;
}

.logo-sm {
  height: 250px;
  /* 500% larger than previous 50px */
  width: auto;
  display: block;
}


/* Hero Section */
.hero {
  padding: var(--spacing-sm) 0;
  text-align: center;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  line-height: 1.2;
}

.hero p {
  font-size: 1.1rem;
  color: var(--color-text);
  opacity: 0.8;
  max-width: 600px;
  margin-bottom: var(--spacing-md);
}

html {
  scroll-behavior: smooth;
}

/* Services Section */
#services h2 {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
}

#services > div {
  align-items: stretch;
  padding: var(--spacing-md);
  border-radius: 12px;
  background: linear-gradient(to right,
      rgba(228, 205, 200, 0.28) 0%,
      rgba(228, 205, 200, 0.28) 33.333%,
      rgba(228, 205, 200, 0.16) 33.333%,
      rgba(228, 205, 200, 0.16) 66.666%,
      rgba(228, 205, 200, 0.28) 66.666%,
      rgba(228, 205, 200, 0.28) 100%);
}

#services h3 {
  position: relative;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-top: 1.5rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

#services h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 999px;
}

#services h4 {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-text);
  margin-top: 1.5rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  background-color: var(--color-text);
  color: var(--color-white);
  border-radius: 4px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: transform 0.2s, opacity 0.2s;
}


/* Responsive Design */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    height: auto;
    gap: var(--spacing-md);
  }

  .nav ul {
    gap: var(--spacing-md);
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
    padding: 0 var(--spacing-md);
  }
}