.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    position: relative;
    overflow: hidden;
    /* Creates a stacking context so the watermark's z-index:-1 means "behind this main
       element's content". Without this the watermark joins the ROOT stacking context,
       where negative z-index paints behind the body's own cream background — i.e. fully
       invisible, which is exactly what silently happened before this was added. */
    z-index: 0;
}

/* Faint full-page owl — a bark-brown "engraving" derived from the master artwork, with
   its own alpha fade baked in, sized large to stay legible at very low opacity.
   z-index:-1 keeps it behind the section content instead of on top, since a positioned
   element with no z-index would otherwise paint above the page's static-flow content
   regardless of DOM order. */
.watermark-owl {
    position: absolute;
    top: 6vh;
    right: -4vw;
    width: min(38vw, 460px);
    height: auto;
    opacity: 0.09;
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 720px) {
    .watermark-owl {
        display: none;
    }
}

/* ---------- Header / Nav ---------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem clamp(1.25rem, 4vw, 3rem);
    background: var(--color-cream);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(74, 53, 36, 0.08);
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.owl-mark {
    width: 42px;
    height: auto;
}

.brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-brown);
    letter-spacing: 0.04em;
}

.brand-subtitle {
    font-family: var(--font-body);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-sage-dark);
}

.main-nav {
    position: relative;
}

.nav-toggle-checkbox {
    display: none;
}

.nav-toggle-label {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.4rem;
}

.nav-toggle-label span {
    width: 24px;
    height: 2px;
    background: var(--color-brown);
    display: block;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.8rem);
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.nav-list a {
    color: var(--color-brown);
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
}

.nav-list a:hover,
.nav-list a.active {
    color: var(--color-sage-dark);
    border-bottom-color: var(--color-gold);
}

.nav-list a.nav-cta {
    background: var(--color-sage-dark);
    color: var(--color-white);
    padding: 0.55em 1.3em;
    border-radius: 999px;
    border-bottom: none;
}

.nav-list a.nav-cta:hover {
    background: var(--color-gold);
    color: var(--color-brown);
}

@media (max-width: 860px) {
    .nav-toggle-label {
        display: flex;
    }

    .nav-list {
        position: absolute;
        right: 0;
        top: calc(100% + 0.75rem);
        flex-direction: column;
        align-items: flex-start;
        background: var(--color-white);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
        padding: 1rem 1.4rem;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--transition-organic), opacity var(--transition-organic);
    }

    .nav-toggle-checkbox:checked ~ .nav-list {
        max-height: 24rem;
        opacity: 1;
    }
}

/* Administration is only in the menu while an admin is signed in. From the public
   breakpoint up to 999px that extra item wraps "About Christine" and the appointment
   button, so keep the same collapsed menu until the row has room. */
@media (max-width: 999px) {
    .main-nav:has(a[href="/admin/messages"]) .nav-toggle-label {
        display: flex;
    }

    .main-nav:has(a[href="/admin/messages"]) .nav-list {
        position: absolute;
        right: 0;
        top: calc(100% + 0.75rem);
        flex-direction: column;
        align-items: flex-start;
        background: var(--color-white);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
        padding: 1rem 1.4rem;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--transition-organic), opacity var(--transition-organic);
    }

    .main-nav:has(a[href="/admin/messages"]) .nav-toggle-checkbox:checked ~ .nav-list {
        max-height: 24rem;
        opacity: 1;
    }
}

/* ---------- Hero / Parallax ---------- */

.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 10vw, 7rem) clamp(1.25rem, 5vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72vh;
    text-align: center;
    background: radial-gradient(circle at 50% 20%, var(--color-parchment), var(--color-cream) 70%);
}

.parallax-layer {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

.parallax-layer--back {
    top: -3rem;
    left: -2rem;
    width: min(38vw, 420px);
    opacity: 0.8;
}

.parallax-layer--front {
    top: -1rem;
    right: -2rem;
    width: min(34vw, 380px);
}

.parallax-layer img {
    width: 100%;
    height: auto;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 46rem;
}

.hero-content .owl-mark--hero {
    width: 108px;
    height: auto;
    margin-bottom: 1.25rem;
}

/* The master owl-in-oak brand artwork, presented as the hero's framed centerpiece. */
.hero-poster {
    width: min(600px, 92vw);
    height: auto;
    display: block;
    margin: 0 auto 1.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(184, 146, 63, 0.35);
    box-shadow: 0 18px 50px rgba(74, 53, 36, 0.16);
}

/* Screen-reader-only text (e.g. the hero h1 whose words the poster artwork already paints). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.hero-tagline {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    color: var(--color-sage-dark);
    margin-bottom: 2rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* ---------- Sections ---------- */

.section {
    padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4rem);
    max-width: 72rem;
    margin: 0 auto;
    width: 100%;
}

.section-header {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 2.5rem;
}

/* ---------- Pillar cards ---------- */

.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.75rem;
}

.pillar-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.75rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(90, 107, 69, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform var(--transition-organic), box-shadow var(--transition-organic);
}

.pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(74, 53, 36, 0.18);
}

.pillar-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 1.1rem;
    color: var(--color-sage-dark);
}

.pillar-card h3 {
    margin-bottom: 0.5rem;
}

.pillar-card .btn-secondary {
    margin-top: 1.4rem;
}

/* ---------- Service detail blocks ---------- */

.service-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.25rem 0;
    border-bottom: 1px solid rgba(90, 107, 69, 0.15);
}

.service-block:last-child {
    border-bottom: none;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.pricing-table th, .pricing-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(90, 107, 69, 0.15);
}

.pricing-table th {
    font-family: var(--font-heading);
    color: var(--color-sage-dark);
    font-weight: 600;
}

.addons-intro {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.addons-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.35rem 1.5rem;
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.95rem;
}

.badge {
    display: inline-block;
    background: var(--color-parchment);
    color: var(--color-brown-soft);
    border-radius: 999px;
    padding: 0.3em 0.9em;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ---------- Product / catalog cards ---------- */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.75rem;
}

.product-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(90, 107, 69, 0.12);
    display: flex;
    flex-direction: column;
}

.product-media {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--color-parchment), var(--color-sage) 140%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-media img {
    width: 46%;
    opacity: 0.9;
}

.product-body {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-price {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 1.2rem;
    margin: 0.3rem 0 0.8rem;
}

.product-body .btn-secondary {
    margin-top: auto;
}

/* ---------- Forms ---------- */

.form-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    max-width: 40rem;
    margin: 0 auto;
}

.form-row {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-row label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-brown);
}

.form-row input,
.form-row select,
.form-row textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.7em 0.85em;
    border: 1px solid rgba(74, 53, 36, 0.25);
    border-radius: var(--radius-md);
    background: var(--color-cream);
    color: var(--color-brown);
    /* selects and date inputs otherwise size to their longest option/placeholder and
       overflow the form card on narrow screens */
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: 2px solid var(--color-sage);
    outline-offset: 1px;
}

.form-success {
    background: var(--color-parchment);
    border-left: 4px solid var(--color-sage-dark);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.form-success-owl {
    width: 56px;
    height: auto;
    display: block;
    margin: 0 auto 0.75rem;
}

.form-error {
    color: var(--color-clay);
    font-weight: 700;
    margin: 0 0 1rem;
}

.form-status {
    color: var(--color-sage-dark);
    font-style: italic;
    margin: 0 0 1rem;
}

.form-hint {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--color-brown-soft);
}

.form-card fieldset {
    border: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.form-card legend {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-brown);
    padding: 0;
    margin-bottom: 0.4rem;
}

.radio-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.radio-row label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 400;
    cursor: pointer;
    padding: 0.35rem 0;
}

.radio-row input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--color-sage-dark);
}

.service-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.service-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(74, 53, 36, 0.2);
    border-radius: var(--radius-md);
    background: var(--color-cream);
    cursor: pointer;
    transition: border-color var(--transition-organic), background var(--transition-organic);
}

.service-check:has(input:checked) {
    border-color: var(--color-sage-dark);
    background: var(--color-parchment);
}

.service-check input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--color-sage-dark);
    flex-shrink: 0;
}

.service-check span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.service-check strong {
    color: var(--color-brown);
}

.service-check small {
    color: var(--color-brown-soft);
    font-size: 0.85rem;
}

/* Empty states (no products in a category, etc.) */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
}

.empty-state img {
    width: 68px;
    height: auto;
    margin-bottom: 0.75rem;
}

.empty-state p {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-brown-soft);
}

/* Small ornament under page headings. */
.header-sprig {
    width: 170px;
    max-width: 60vw;
    height: auto;
    display: block;
    margin: 0.9rem auto 0.3rem;
}

/* ---------- Footer ---------- */

.site-footer {
    margin-top: auto;
    background: var(--color-parchment);
    padding-top: 1rem;
}

.footer-content {
    text-align: center;
    padding: 1.5rem 1.5rem 2.5rem;
}

.footer-owl {
    width: 48px;
    height: auto;
    margin-bottom: 0.75rem;
}

.not-found-owl {
    width: 200px;
    height: auto;
    margin: 0 auto 1.25rem;
    display: block;
}

.brand-emblem {
    display: block;
    width: min(340px, 80vw);
    height: auto;
    margin: 0 auto 2rem;
}

.footer-tagline {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--color-sage-dark);
    margin-bottom: 0.25rem;
}

.footer-credentials {
    font-size: 0.9rem;
    color: var(--color-brown-soft);
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.footer-copy {
    font-size: 0.78rem;
    color: var(--color-brown-soft);
    opacity: 0.75;
}

.not-found {
    text-align: center;
    padding: 6rem 1.5rem;
}