:root {
    --sage: #8AA884;          /* light sage - accents */
    --sage-deep: #52684C;     /* deep sage - nav, footer (white text) */
    --sage-deeper: #3F5239;
    --rose: #A86B72;          /* dusty rose / blush - accents */
    --rose-btn: #9A5A64;      /* buttons (white text reads) */
    --rose-deep: #824953;     /* button hover */
    --bg: #FAF7F2;            /* warm cream page */
    --surface: #ffffff;
    --tint: #EEF2EC;          /* light sage tint */
    --border: #E4E1D7;
    --heading: #4A5E43;       /* deep sage headings */
    --link: #8E5A63;          /* dusty rose link */
    --text: #423E3C;
    --muted: #6f6a64;
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.6;
    padding: 0;
    margin: 0;
    color: var(--text);
}
body, html { -webkit-text-size-adjust: none; }

/* Colour strip across the very top */
body::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, var(--sage), var(--rose));
}

nav, header, footer, section, article, aside, main { display: block; }

a { color: var(--link); transition: color .2s ease; }
a:visited { color: var(--link); }
a:hover { color: var(--rose); text-decoration: none; }

h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: var(--heading);
    font-weight: 600;
    margin-top: 0;
    line-height: 1.25;
}
h1 { font-size: 2.15em; margin-bottom: .5em; }
h2 { font-size: 1.55em; margin: 1.2em 0 .6em; }
h2::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin-top: .4em;
    background: var(--rose);
    border-radius: 2px;
}
h3 { font-size: 1.2em; }
article p, article li { line-height: 1.65; }

/* Hero banner */
#topimg { margin: 0 0 1.8em; }
#topimg img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(82, 104, 76, .22);
}

/* Content sections become white cards on the cream page */
article > section {
    background: var(--surface);
    border-radius: 16px;
    padding: 1.7em 1.9em;
    margin: 1.4em 0;
    box-shadow: 0 6px 22px rgba(82, 104, 76, .10);
}
article > section.intro { border-top: 4px solid var(--rose); }
article > section.testimonials,
article > section.cat-gallery {
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.clr { clear: both; }

/* Pill buttons */
.btn { padding-bottom: 1em; }
.btn a {
    display: inline-block;
    background: var(--rose-btn);
    border-radius: 30px;
    padding: .8em 1.9em;
    text-decoration: none;
    font-size: .98em;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(154, 90, 100, .30);
    transition: background .2s ease, transform .2s ease;
}
.btn a, .btn a:visited { color: #fff; }
.btn a:hover { background: var(--rose-deep); transform: translateY(-2px); color: #fff; }

/* Forms */
form { margin: 0; }
form div.set { margin-bottom: 14px; }
label { display: block; }
input, textarea {
    background: #fff;
    border: 1px solid var(--border);
    padding: .6em .7em;
    width: 100%;
    max-width: 320px;
    border-radius: 8px;
    font-size: 1em;
    color: var(--text);
    font-family: inherit;
}
textarea { height: 8em; font-family: 'Montserrat', Arial, Helvetica, sans-serif; }
input:focus, textarea:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(138, 168, 132, .30);
}
input.submit {
    background: var(--rose-btn);
    color: #fff;
    border: 0;
    cursor: pointer;
    border-radius: 30px;
    padding: .75em 1.9em;
    max-width: none;
    width: auto;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(154, 90, 100, .30);
    transition: background .2s ease;
}
input.submit:hover { background: var(--rose-deep); }

/* Gallery */
.cat-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin: 1em auto;
}
.cat-gallery div {
    border: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 16px rgba(82, 104, 76, .14);
}
.cat-gallery img { max-width: 100%; height: auto; display: block; }

/* Testimonials */
.testimonials { margin: 2.5em 0; }
.testimonials .google-rating { margin: 0 0 1.2em; color: var(--sage-deep); font-size: 1.05em; }
.testimonials .reviews { display: flex; flex-wrap: wrap; gap: 1.2em; }
.testimonials blockquote {
    flex: 1 1 280px;
    margin: 0;
    background: var(--surface);
    border: 0;
    border-top: 4px solid var(--sage);
    border-radius: 14px;
    padding: 1.2em 1.4em;
    box-shadow: 0 6px 20px rgba(82, 104, 76, .12);
}
.testimonials blockquote p { margin: 0 0 .6em; font-style: italic; line-height: 1.6; }
.testimonials .stars { color: #E0A93C; letter-spacing: 3px; font-style: normal; }
.testimonials cite { font-style: normal; font-weight: 700; color: var(--sage-deep); }

/* Form status messages */
.form-success { color: #3f7d4f; font-weight: 600; line-height: 1.6; }
.form-error { color: var(--rose-deep); font-weight: 600; }

iframe { max-width: 100%; border-radius: 12px; border: 0; }

/* Lazy-load facade for the YouTube video */
.yt-facade {
    position: relative;
    cursor: pointer;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade .yt-btn { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,.18); border: 0; cursor: pointer; }
.yt-facade .yt-play {
    position: absolute; top: 50%; left: 50%;
    width: 70px; height: 50px; transform: translate(-50%, -50%);
    background: var(--sage-deep); opacity: .92; border-radius: 14px; pointer-events: none;
}
.yt-facade .yt-play::after {
    content: ""; position: absolute; top: 50%; left: 54%;
    transform: translate(-50%, -50%);
    border: solid transparent; border-width: 12px 0 12px 20px; border-left-color: #fff;
}
.yt-facade:hover .yt-play { opacity: 1; }

/* Footer band */
footer {
    clear: both;
    background: var(--sage-deep);
    color: #EAEFE6;
    border: 0;
    border-radius: 16px;
    margin-top: 2.5em;
    padding: 1.5em 1.8em;
    text-align: center;
    font-size: .85em;
}
footer a, footer a:visited { color: #fff; text-decoration: underline; }
footer a:hover { color: #DCE7D6; }