/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

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

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: #faf7f2;
    color: #2c2b28;
    line-height: 1.6;
    padding: 2rem 1rem;
}

.container {
    max-width: 780px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 2rem 2rem 2.5rem;
}

/* decorative accent */
.accent-line {
    width: 70px;
    height: 4px;
    background: #c9a87b;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

h1 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1e2a2f;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.subhead {
    font-size: 1.1rem;
    color: #5c5b58;
    border-left: 3px solid #c9a87b;
    padding-left: 1rem;
    margin: 0.75rem 0 1.5rem 0;
    font-weight: 400;
}

h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 1.5rem 0 0.75rem 0;
    color: #2c4b3e;
}

p {
    margin-bottom: 1.1rem;
    font-size: 1rem;
    color: #2a2a28;
}

.highlight {
    background: #f9f3e9;
    padding: 0.2rem 0.3rem;
    border-radius: 8px;
    font-weight: 500;
}

.service-list {
    background: #fcf9f5;
    padding: 1rem 1.5rem;
    border-radius: 20px;
    margin: 1rem 0 1.2rem 0;
    border: 1px solid #f0e5d8;
}

.service-list ul {
    margin-left: 1.2rem;
}

.service-list li {
    margin: 0.5rem 0;
}

.link-card {
    background: #eef4f0;
    padding: 1.1rem 1.5rem;
    border-radius: 20px;
    margin: 1.8rem 0 0.5rem;
    text-align: center;
    border: 1px solid #dde5df;
}

.btn-link {
    display: inline-block;
    background: #2c4b3e;
    color: white;
    text-decoration: none;
    padding: 0.7rem 1.6rem;
    border-radius: 40px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: 0.2s ease;
    margin-top: 0.5rem;
}

.btn-link:hover {
    background: #1f362d;
    transform: scale(0.98);
}

.footer-note {
    margin-top: 2rem;
    padding-top: 1rem;
    font-size: 0.8rem;
    color: #9b9a96;
    text-align: center;
    border-top: 1px solid #ece3d8;
}

@media (max-width: 550px) {
    .container {
        padding: 1.5rem;
    }
    h1 {
        font-size: 1.65rem;
    }
    h2 {
        font-size: 1.3rem;
    }
}