/* Colors & typography */
:root {
    --bg-gradient: linear-gradient(135deg, #fdfbf7 0%, #f3e8d6 50%, #e6d4c2 100%);
    --text-main: #4a3b32;
    --accent-1: #9ec8b9; /* soft sage */
    --accent-2: #f7c6b5; /* blush */
    --accent-3: #e0d4c8; /* warm cream */
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg-gradient);
    color: var(--text-main);
}

a { color: var(--text-main); }

/* Header */
header {
    text-align: center;
    background: rgba(255, 255, 255, .25); /* semi-transparent white */
    backdrop-filter: blur(4px);
}

header h1 {
    margin-bottom: .5rem;
}

.headerfooter {
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 640px;
    margin-inline: auto;
}

/* Main content box */
.container {
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 640px;
    margin-inline: auto;
    background: #fff8f0;       /* warm cream, matches palette */
    border-radius: .75rem;     /* rounded corners */
    box-shadow: rgba(74, 59, 50, .1) 0 6px 24px; /* soft lift */
}

/* Reusable rounded card, e.g. the contact info box */
.card {
    background: #fff;
    padding: 2rem;
    max-width: 420px;
    margin: 0 auto;
    border-radius: 1rem; /* a real "card" radius, not a pill/button radius */
    box-shadow: 0 6px 24px rgba(74, 59, 50, .08);
    text-align: center;
}
.card a { text-decoration: none; }
.card .name { font-size: 1.1rem; margin-bottom: .75rem; }
.card .phone { margin-bottom: 2rem; font-size: 1.25rem; }

/* Left-aligned text block nested inside an otherwise-centered .container,
   used for readable paragraphs/lists on About and Services pages */
.text-block {
    text-align: left;
    max-width: 480px;
    margin-inline: auto;
    margin-top: .75rem;
}

/* Headings & body text */
h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.1; margin-bottom: .75rem; }
h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin-top: 2.5rem;
    margin-bottom: .75rem;
}

p.subtitle { font-size: clamp(1rem, 2vw, 1.25rem); opacity: .8; margin-bottom: 2.5rem; }
p.lead { font-size: 1.25rem; margin-bottom: 2rem; }
p.quote { margin-top: 2rem; font-style: italic; opacity: .8; }

/* Paragraph styles */
p { margin-bottom: 1rem; }
p.intro {
    font-size: 1.25rem;
    line-height: 1.6;
}

ul {
    list-style-type: disc;
    padding-left: 1.5em;
    text-align: left;
    margin-top: .75rem;
}
li { margin-bottom: .35rem; font-size: clamp(1rem, 2vw, 1.05rem); }

/* Plain (no bullet) list variant, e.g. About page services list */
ul.plain {
    list-style-type: none;
    padding-left: 0;
}
ul.plain li { margin-bottom: .75rem; }

/* Decorative organic shapes (color/animation only — position & stacking
   live in structure.css) */
.shape {
    border-radius: 40% 60% / 70% 30%;
    animation: float 8s ease-in-out infinite alternate;
}
.shape-1 { top: -5%; left: -5%; width: 22rem; height: 22rem; background: var(--accent-1); opacity: .4; }
.shape-2 { bottom: -8%; right: -6%; width: 18rem; height: 18rem; background: var(--accent-2); opacity: .35; animation-delay: 2s; border-radius: 50% 40% / 30% 70%; }
.shape-3 { top: -6%; right: -4%; width: 12rem; height: 12rem; background: var(--accent-3); opacity: .5; animation-delay: 4s; border-radius: 60% / 50% 70% / 40%; }

@keyframes float {
    from { transform: rotate(0deg) scale(1); }
    to   { transform: rotate(8deg) scale(1.05); }
}

/* Newsletter form (not currently used on any page, kept ready for future use) */
.form-wrapper {
    background: #fff;
    padding: 1rem;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(74, 59, 50, .08);
    display: flex;
    gap: .75rem;
}
input[type="email"] {
    flex: 1;
    padding: .8rem 1.25rem;
    border-radius: 999px;
    border: none;
    font-size: 1rem;
}
button {
    background: var(--text-main);
    color: #fff;
    border: none;
    padding: .8rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
}
button:hover { opacity: .9; }

/* Navigation links styled as rounded buttons */
nav a {
    display: inline-block;
    padding: .75rem 1.25rem;
    background: var(--text-main);
    color: #fff !important; /* override the general "a" color rule above */
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
}
nav a:hover { opacity: .85; }

/* Footer */
footer {
    text-align: center;
    margin-top: 2rem;
    padding: 0 1.5rem 2rem;
    font-size: .875rem;
    opacity: .65;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    nav a { padding: .6rem 1rem; }
    .form-wrapper { flex-direction: column; }
    input, button { width: 100%; }
}