/* Rock House Gardens — heritage estate care, Hout Bay
   Palette: deep heritage green / mid sage / warm gold / cream / charcoal
   Type:    Cormorant Garamond (display serif) + Inter (body sans)
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --green-deep:   #1F3D2B;
    --green-sage:   #4A6B52;
    --gold:         #B8924A;
    --gold-soft:    #D9B97A;
    --cream:        #FBF8F3;
    --cream-warm:   #F3EDE2;
    --charcoal:     #1A1A1C;
    --charcoal-mute:#5A5A5C;
    --rule:         rgba(26, 26, 28, 0.12);
    --rule-soft:    rgba(26, 26, 28, 0.06);

    --bg:           var(--cream);
    --surface:      #ffffff;
    --text:         var(--charcoal);
    --text-muted:   var(--charcoal-mute);
    --primary:      var(--green-deep);
    --accent:       var(--gold);

    --serif:        'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    --radius-sm:    2px;
    --radius:       4px;

    --container:    1180px;
    --container-narrow: 760px;

    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  6rem;
    --space-2xl: 9rem;

    --shadow-sm:  0 1px 2px rgba(26,26,28,0.05);
    --shadow:     0 4px 24px rgba(26,26,28,0.08);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============ Typography ============ */

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--primary);
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.18;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 500; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
h4 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 1rem 0; max-width: 68ch; }

p.lead {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    line-height: 1.55;
    color: var(--charcoal);
    font-weight: 400;
}

a {
    color: var(--green-deep);
    text-decoration-color: var(--gold);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

a:hover { color: var(--gold); }

ul, ol { padding-left: 1.25rem; margin: 0 0 1rem 0; }
li { margin-bottom: 0.4rem; }

hr.rule {
    border: 0;
    height: 1px;
    background: var(--rule);
    margin: var(--space-lg) 0;
}

.gold-mark {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--gold);
    vertical-align: middle;
    margin: 0 0.6rem;
}

/* ============ Accessibility primitives ============ */

.skip-link {
    position: absolute;
    top: -100px; left: 16px; z-index: 9999;
    background: var(--primary); color: var(--cream);
    padding: 0.75rem 1.25rem; border-radius: 0 0 6px 6px;
    text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============ Layout ============ */

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.container.narrow { max-width: var(--container-narrow); }

section { padding: var(--space-xl) 0; }
section.tight { padding: var(--space-lg) 0; }

.eyebrow {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
    margin-bottom: 1rem;
    display: block;
}

/* ============ Header / Nav ============ */

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(251, 248, 243, 0.96);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--rule-soft);
}

.nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem;
    max-width: var(--container);
    margin: 0 auto;
}

.brand {
    display: flex; align-items: center; gap: 0.75rem;
    text-decoration: none; color: var(--primary);
}
.brand img { height: 44px; width: auto; }
.brand-name {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.nav-list {
    display: flex; align-items: center; gap: 1.6rem;
    list-style: none; padding: 0; margin: 0;
}
.nav-list a {
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--charcoal);
    text-decoration: none;
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-list a:hover, .nav-list a[aria-current="page"] {
    color: var(--primary);
    border-bottom-color: var(--gold);
}

.nav-toggle {
    display: none;
    background: none; border: 1px solid var(--rule);
    width: 42px; height: 42px; border-radius: var(--radius-sm);
    cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    display: block; width: 18px; height: 1.5px; background: var(--charcoal);
    position: relative; transition: transform 0.25s ease;
}
.nav-toggle span::before { content: ''; position: absolute; top: -6px; }
.nav-toggle span::after  { content: ''; position: absolute; top: 6px; }

@media (max-width: 880px) {
    .nav-toggle { display: inline-flex; }
    .nav-list {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0;
        background: var(--cream);
        border-bottom: 1px solid var(--rule);
        padding: 1rem 1.5rem 1.5rem;
        display: none;
    }
    .nav-list.open { display: flex; }
    .nav-list a { padding: 0.85rem 0; border-bottom: 1px solid var(--rule-soft); width: 100%; }
}

/* ============ Buttons ============ */

.btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.95rem 1.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    line-height: 1;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
    background: var(--primary); color: var(--cream); border-color: var(--primary);
}
.btn-primary:hover { background: var(--green-sage); border-color: var(--green-sage); color: var(--cream); }

.btn-ghost {
    background: transparent; color: var(--primary); border-color: var(--primary);
}
.btn-ghost:hover { background: var(--primary); color: var(--cream); }

.btn-gold {
    background: var(--gold); color: var(--charcoal); border-color: var(--gold);
}
.btn-gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }

/* ============ Bud-to-daisy button decoration ============
   Each .btn gets a closed flower bud injected by JS at its left edge.
   On hover/click the bud cross-fades into a fully-formed daisy SVG.
   No fan rotation — the open daisy's petals are at fixed radial positions
   inside the SVG; the bud just shrinks/fades while the daisy grows/fades in. */

.btn { padding-left: 3.6em; position: relative; }
.btn .bud {
    position: absolute;
    left: 0.85em;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    pointer-events: none;
    overflow: visible;
}
.btn .bud .bud-closed-wrap,
.btn .bud .bud-open-wrap {
    position: absolute;
    inset: 0;
    transform-origin: center;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn .bud .bud-closed-wrap svg,
.btn .bud .bud-open-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Closed bud — visible at rest */
.btn .bud .bud-closed-wrap { opacity: 1; transform: scale(1); }
/* Open daisy — hidden at rest */
.btn .bud .bud-open-wrap { opacity: 0; transform: scale(0.45); }

/* Bud — coloured body with darker shaded side for depth, sage sepals at base */
.btn .bud .bud-body  { fill: var(--bud-body, #E89B8E); opacity: 1; }
.btn .bud .bud-shade { fill: var(--bud-shade, #C97A6E); opacity: 0.55; }
.btn .bud .bud-highlight { stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.5; fill: none; stroke-linecap: round; }
.btn .bud .sepal      { fill: var(--green-sage); opacity: 0.85; }
.btn .bud .sepal-leaf { fill: var(--green-deep); opacity: 0.7; }

/* Open daisy — coloured petals with subtle warm outline, gold disc + green eye */
.btn .bud .bud-open-wrap .petal {
    fill: var(--petal-color, #FFE5DC);
    stroke: rgba(120, 80, 40, 0.22);
    stroke-width: 0.25;
    opacity: 1;
}
.btn .bud .bud-open-wrap .bud-center  { fill: var(--gold); }
.btn .bud .bud-open-wrap .bud-center-dot { fill: var(--green-deep); }

/* Hover / active / persistent bloom */
.btn:hover .bud .bud-closed-wrap,
.btn:active .bud .bud-closed-wrap,
.btn.bloomed .bud .bud-closed-wrap {
    opacity: 0;
    transform: scale(0.55);
}
.btn:hover .bud .bud-open-wrap,
.btn:active .bud .bud-open-wrap,
.btn.bloomed .bud .bud-open-wrap {
    opacity: 1;
    transform: scale(1);
}
.btn:active .bud .bud-open-wrap { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
    .btn .bud .bud-closed-wrap,
    .btn .bud .bud-open-wrap { transition: none; }
}

/* ============ Hero ============ */

.hero {
    padding: var(--space-2xl) 0 var(--space-xl);
    background: var(--cream);
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
    overflow: hidden;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}
.hero-copy h1 {
    margin-bottom: 1.5rem;
}
.hero-copy .lead { margin-bottom: 2rem; max-width: 36ch; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-figure {
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, var(--cream-warm) 0%, var(--cream) 100%);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--charcoal-mute);
    font-family: var(--serif);
    font-style: italic;
    text-align: center;
    padding: 2rem;
    overflow: hidden;
    position: relative;
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 880px) {
    .hero { padding: var(--space-xl) 0 var(--space-lg); }
    .hero-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
    .hero-figure { aspect-ratio: 4 / 3; }
}

/* ============ Cards ============ */

.card-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    padding: 2.25rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex; flex-direction: column;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--rule);
}
.card h3 { margin-bottom: 0.75rem; }
.card p { color: var(--charcoal-mute); font-size: 0.97rem; }
.card .price-hint {
    display: block;
    margin-top: 1rem;
    font-family: var(--serif);
    font-style: italic;
    color: var(--green-sage);
    font-size: 1rem;
}
.card .card-link {
    margin-top: auto;
    padding-top: 1.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.card .card-link::after { content: '→'; transition: transform 0.2s ease; }
.card .card-link:hover::after { transform: translateX(4px); }

/* ============ Sections — Why us / Areas / Testimonials / CTA ============ */

.section-head {
    text-align: center;
    margin-bottom: var(--space-lg);
}
.section-head .eyebrow { display: inline-block; }
.section-head h2 { margin-bottom: 0.75rem; }
.section-head p { margin: 0 auto; color: var(--charcoal-mute); }

.values {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.value h4 {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 0.6rem;
}
.value p { color: var(--charcoal-mute); }
.value .gold-mark { display: block; margin: 0 0 1rem 0; width: 28px; height: 2px; }

.dark-section {
    background: var(--primary);
    color: var(--cream);
}
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4 { color: var(--cream); }
.dark-section p { color: rgba(251, 248, 243, 0.85); }
.dark-section .eyebrow { color: var(--gold-soft); }
.dark-section a { color: var(--gold-soft); }

.testimonial {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    padding: 2.25rem;
}
.testimonial blockquote {
    font-family: var(--serif);
    font-size: 1.18rem;
    font-style: italic;
    color: var(--charcoal);
    margin-bottom: 1rem;
    line-height: 1.55;
}
.testimonial cite {
    font-style: normal;
    font-size: 0.88rem;
    color: var(--charcoal-mute);
    letter-spacing: 0.04em;
}

.placeholder-note {
    background: var(--cream-warm);
    border: 1px dashed var(--gold);
    border-radius: var(--radius);
    padding: 1.5rem;
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--charcoal-mute);
}
.placeholder-note strong { color: var(--green-deep); }

/* ============ Team grid ============ */
.team-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 2rem;
}
.team-card {
    text-align: center;
}
.team-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.25rem;
    background: var(--cream-warm);
    border: 1px solid var(--rule-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 200px;
}
.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.team-photo.placeholder {
    font-family: var(--serif);
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--green-deep);
    background: linear-gradient(135deg, var(--cream-warm) 0%, var(--cream) 100%);
}
.team-card h4 {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--green-deep);
    margin: 0 0 0.25rem 0;
}
.team-card .team-role {
    font-family: var(--sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}
.team-card p {
    font-size: 0.92rem;
    color: var(--charcoal-mute);
    max-width: none;
    margin: 0;
}

/* ============ Areas list ============ */

.areas-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.area-link {
    display: block;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    text-decoration: none;
    color: var(--primary);
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 500;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.area-link small {
    display: block;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--charcoal-mute);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    margin-top: 0.4rem;
}
.area-link:hover { border-color: var(--gold); transform: translateY(-2px); color: var(--primary); }

/* ============ FAQ ============ */

.faq-list {
    max-width: 760px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--rule-soft);
    padding: 0;
}
.faq-item details {
    padding: 1.5rem 0;
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--primary);
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-family: var(--sans);
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--gold);
    line-height: 1; flex-shrink: 0;
    transition: transform 0.2s ease;
}
.faq-item details[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer {
    margin-top: 1rem;
    color: var(--charcoal-mute);
    font-size: 1rem;
    max-width: 70ch;
}
.faq-item .faq-answer p { margin-bottom: 0.5rem; }

/* ============ Gallery ============ */

.gallery-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.gallery-item {
    aspect-ratio: 4 / 3;
    background: var(--cream-warm);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--charcoal-mute);
    font-family: var(--serif);
    font-style: italic;
    text-align: center;
    padding: 1rem;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ Forms ============ */

.contact-form {
    display: grid; gap: 1.25rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--charcoal);
}
.field input,
.field select,
.field textarea {
    font-family: var(--sans);
    font-size: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--charcoal);
    transition: border-color 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--gold);
    outline: none;
}
.field textarea { min-height: 140px; resize: vertical; }
.honey { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============ Click-to-Talk (browser TTS) ============
   Floating speaker button at bottom-left. Click to enable, then click any
   paragraph / heading to hear it read aloud. Adapted from the StitcherNX
   WebsiteBuilder Click-to-Talk feature, retuned for the heritage brand. */

/* Flower floating action buttons — used by WhatsApp, Click-to-Talk, Chat */
.flower-fab {
    position: fixed;
    z-index: 9500;
    width: 68px;
    height: 68px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 5px 12px rgba(26, 26, 28, 0.22));
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.flower-fab:hover { transform: scale(1.08) rotate(8deg); }
.flower-fab:active { transform: scale(0.97); }
.flower-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 50%; }
.flower-fab svg.fab-flower { width: 100%; height: 100%; display: block; overflow: visible; }
.flower-fab svg.fab-flower .petal { stroke: rgba(60, 30, 10, 0.18); stroke-width: 0.6; }
.flower-fab .fab-icon-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.flower-fab .fab-icon-wrap svg { width: 24px; height: 24px; display: block; }

.ctt-btn { bottom: 24px; left: 24px; }
.ctt-btn.active svg.fab-flower { animation: ctt-spin 8s linear infinite; }
.ctt-btn.speaking svg.fab-flower { animation: ctt-spin 2s linear infinite; }
.ctt-btn.speaking { animation: ctt-pulse 1.5s ease-in-out infinite; border-radius: 50%; }
@keyframes ctt-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes ctt-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 146, 74, 0.5); }
    50%      { box-shadow: 0 0 0 14px rgba(184, 146, 74, 0); }
}

.ctt-toast {
    position: fixed;
    bottom: 84px;
    left: 24px;
    z-index: 9500;
    background: var(--charcoal);
    color: var(--cream);
    padding: 10px 16px;
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 0.85rem;
    border-left: 3px solid var(--gold);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    max-width: 280px;
}
.ctt-toast.visible { opacity: 1; transform: translateY(0); }

.ctt-reading {
    outline: 2px solid var(--gold) !important;
    outline-offset: 3px;
    background: rgba(184, 146, 74, 0.06) !important;
    transition: outline 0.2s ease, background 0.2s ease;
}
.ctt-hover {
    outline: 1px dashed rgba(184, 146, 74, 0.45) !important;
    outline-offset: 2px;
    cursor: pointer !important;
}
.ctt-sentence-highlight {
    background: rgba(184, 146, 74, 0.18) !important;
    border-radius: 2px;
    transition: background 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ctt-btn.speaking { animation: none; }
}

/* ============ Floating WhatsApp button ============ */

.whatsapp-float { bottom: 24px; right: 24px; text-decoration: none; }
.whatsapp-float .fab-icon-wrap svg { width: 26px; height: 26px; }

/* ============ Chat widget ============
   Floating chat bubble + slide-out panel. Sits stacked above the WhatsApp
   button on the right edge. Brand-aligned heritage palette. */

.chat-widget {
    position: fixed;
    bottom: 104px;
    right: 24px;
    z-index: 9500;
    font-family: var(--sans);
    width: 68px;
    height: 68px;
}
.chat-bubble.flower-fab {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}
.chat-bubble .fab-icon-wrap svg { width: 22px; height: 22px; fill: currentColor; }

.chat-panel {
    display: none;
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 340px;
    max-width: calc(100vw - 48px);
    max-height: 460px;
    background: var(--cream);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(26, 26, 28, 0.22);
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--rule-soft);
}
.chat-panel.open { display: flex; }
.chat-header {
    background: var(--green-deep);
    color: var(--cream);
    padding: 0.85rem 1rem;
    font-weight: 500;
    font-family: var(--serif);
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--gold);
}
.chat-header button {
    background: none;
    border: 0;
    color: var(--cream);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}
.chat-header button:hover { color: var(--gold-soft); }
.chat-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    min-height: 220px;
    background: var(--cream);
}
.chat-msg {
    background: var(--cream-warm);
    color: var(--charcoal);
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    margin-bottom: 0.55rem;
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: 85%;
    word-wrap: break-word;
}
.chat-msg.bot {
    background: var(--green-deep);
    color: var(--cream);
    margin-right: auto;
}
.chat-msg.user {
    background: var(--gold);
    color: var(--charcoal);
    margin-left: auto;
}
.chat-input {
    display: flex;
    border-top: 1px solid var(--rule-soft);
    background: var(--surface);
}
.chat-input input {
    flex: 1;
    border: 0;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    font-family: var(--sans);
    color: var(--charcoal);
    background: transparent;
    outline: none;
}
.chat-input input::placeholder { color: var(--charcoal-mute); }
.chat-input button {
    background: var(--green-deep);
    color: var(--cream);
    border: 0;
    padding: 0 1.2rem;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 0.2s ease;
}
.chat-input button:hover { background: var(--green-sage); }

@media (max-width: 540px) {
    .whatsapp-float { bottom: 16px; right: 16px; }
    .chat-widget { bottom: 96px; right: 16px; }
    .ctt-btn { bottom: 16px; left: 16px; }
}

.contact-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1.2fr 1fr;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info { display: grid; gap: 1.5rem; align-content: start; }
.contact-info dt {
    font-family: var(--sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    margin-bottom: 0.25rem;
    font-weight: 500;
}
.contact-info dd { font-family: var(--serif); font-size: 1.15rem; color: var(--charcoal); margin: 0 0 0.5rem 0; }
.map-embed {
    width: 100%; aspect-ratio: 4 / 3;
    border: 1px solid var(--rule); border-radius: var(--radius);
    margin-top: 1.5rem;
    background: var(--cream-warm);
    overflow: hidden;
    position: relative;
}

/* ============ CTA strip ============ */

.cta-strip {
    background: var(--primary);
    color: var(--cream);
    padding: var(--space-lg) 0;
    text-align: center;
}
.cta-strip h2 { color: var(--cream); margin-bottom: 1rem; }
.cta-strip p { color: rgba(251,248,243,0.9); max-width: 56ch; margin: 0 auto 2rem; }
.cta-strip .btn-gold { color: var(--charcoal); }

/* ============ Footer ============ */

.site-footer {
    background: var(--charcoal);
    color: var(--cream);
    padding: var(--space-lg) 0 var(--space-md);
    border-top: 4px solid var(--gold);
}
.footer-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    margin-bottom: var(--space-md);
}
@media (max-width: 880px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
    .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand h3 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--cream);
    margin-bottom: 0.5rem;
}
.footer-brand p { color: rgba(251,248,243,0.7); font-size: 0.95rem; }
.footer-brand .nap {
    margin-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(251,248,243,0.85);
}

.footer-col h4 {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold-soft);
    margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a {
    color: rgba(251,248,243,0.85);
    text-decoration: none;
    font-size: 0.93rem;
}
.footer-col a:hover { color: var(--gold-soft); }

.footer-base {
    border-top: 1px solid rgba(251,248,243,0.12);
    padding-top: 1.5rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    font-size: 0.85rem;
    color: rgba(251,248,243,0.6);
}

/* ============ Cookie banner ============ */

.cookie-banner {
    position: fixed; bottom: 1rem; left: 1rem; right: 1rem;
    max-width: 540px; margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
    z-index: 9000;
    font-size: 0.9rem;
}
.cookie-banner.hidden { display: none; }
.cookie-banner p { margin: 0; flex: 1 1 240px; color: var(--charcoal-mute); }
.cookie-banner button {
    flex-shrink: 0;
    padding: 0.55rem 1.2rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

/* ============ Reveal-on-scroll (subtle) ============ */

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============ Misc ============ */

.split-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}
@media (max-width: 880px) { .split-2 { grid-template-columns: 1fr; } }

.included-list {
    columns: 2;
    column-gap: 2rem;
    list-style: none;
    padding: 0;
}
.included-list li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.55rem;
}
.included-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.65em;
    width: 8px; height: 1px;
    background: var(--gold);
}
@media (max-width: 600px) { .included-list { columns: 1; } }

.not-included-list {
    list-style: none; padding: 0;
}
.not-included-list li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.55rem;
    color: var(--charcoal-mute);
}
.not-included-list li::before {
    content: '×';
    position: absolute;
    left: 0; color: var(--charcoal-mute);
    font-weight: 300;
}

.intl-callout {
    background: var(--cream-warm);
    border-left: 3px solid var(--gold);
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.intl-callout h4 { color: var(--green-deep); margin-bottom: 0.5rem; }
.intl-callout p { margin: 0; color: var(--charcoal); }

/* ============ Scroll-linked creeper vine ============
   A meandering vine drawn down the left edge of the page that "grows" as
   the user scrolls. Sage green stroke with leaves that pop in at each curve
   apex. Hidden on small screens and for reduced-motion users. */

.creeper-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;          /* was 130 — needs room for branches up to 90px out */
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
.creeper-track svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Spine — woody, dominant. 3:2 ratio over branches (botanical rule). */
.creeper-vine-base {
    fill: none;
    stroke: #3F5536;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.96;
}
.creeper-vine-hi { display: none; }

/* Branches — visibly thinner than spine, slightly lighter sage */
.creeper-leafstem {
    fill: none;
    stroke: #5A7A52;
    stroke-width: 2.6;
    stroke-linecap: round;
    opacity: 0.95;
    transition: stroke-dashoffset 0s;
}
.creeper-leafstem.grown {
    /* Slow steady growth (was 0.4s bouncy), no bounce — feels like a vine
       extending, not snapping into place */
    transition: stroke-dashoffset 0.85s cubic-bezier(0.45, 0, 0.55, 1);
}
/* Twigs — sub-branches off main branches, thinner still (1:2:3 hierarchy) */
.creeper-leafstem.creeper-twig {
    stroke-width: 1.7;
    opacity: 0.9;
}

/* Opacity-only transitions on the outer feature group. Asymmetric: smooth
   slow grow when .grown is added; instant snap when removed (so retract
   stays in sync with the stem). Per-element --bloom-delay variable lets
   features within a cluster stagger in one after another. */
.creeper-feature {
    opacity: 0;
    transition: opacity 0s;
}
.creeper-feature.grown {
    opacity: 1;
    transition: opacity 0.7s ease var(--bloom-delay, 0s);
}

/* Flowers BLOOM — inner g scales from 0.2 to 1 with bouncy ease when grown.
   Slower duration (0.95s) so blooms unfurl deliberately instead of popping. */
.creeper-bloom {
    transform-origin: 0 0;
    transform-box: fill-box;
    transform: scale(0.2);
    transition: transform 0s;
}
.creeper-feature.grown .creeper-bloom {
    transform: scale(1);
    transition: transform 0.95s cubic-bezier(0.34, 1.4, 0.64, 1) var(--bloom-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
    .creeper-bloom { transition: none; transform: scale(1); }
}

/* Side branches — small curving offshoots from the main vine, drawn in
   when the cluster reaches stage 1. Same dasharray "drawing" trick as the
   main spine so they look like they're growing out. */
.creeper-branch {
    fill: none;
    stroke: #8B9784;
    stroke-width: 1;
    stroke-linecap: round;
    opacity: 0.92;
}
@media (max-width: 760px) {
    .creeper-track { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .creeper-track { display: none; }
}

/* ============ Leaf swirl — ambient autumn drift ============ */

.leaf-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.leaf {
    position: absolute;
    left: 0;
    width: 38px;
    height: 38px;
    will-change: transform;
    opacity: 0;
    animation-name: leaf-drift-1, leaf-fade;
    animation-duration: 24s, 24s;
    animation-timing-function: cubic-bezier(0.42, 0.05, 0.58, 0.95), linear;
    animation-fill-mode: forwards, forwards;
}
.leaf[data-variant="2"] { animation-name: leaf-drift-2, leaf-fade; animation-duration: 28s, 28s; }
.leaf[data-variant="3"] { animation-name: leaf-drift-3, leaf-fade; animation-duration: 21s, 21s; }
.leaf[data-variant="4"] { animation-name: leaf-drift-4, leaf-fade; animation-duration: 26s, 26s; }
.leaf[data-variant="5"] { animation-name: leaf-drift-5, leaf-fade; animation-duration: 30s, 30s; }

.leaf-spin {
    width: 100%;
    height: 100%;
    animation: leaf-spin 7s linear infinite;
    transform-origin: center;
}

.leaf-spin svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(26,26,28,0.18));
}

@keyframes leaf-fade {
    0%   { opacity: 0; }
    8%   { opacity: 0.55; }
    92%  { opacity: 0.55; }
    100% { opacity: 0; }
}

/* Five trajectory variants — gentle sine/curve sweeps. Each crosses the screen
   left-to-right with vertical bobbing in different rhythms, like real leaves
   caught in shifting air currents. */
@keyframes leaf-drift-1 {
    0%   { transform: translate3d(-10vw, 0px, 0); }
    20%  { transform: translate3d(20vw, -45px, 0); }
    45%  { transform: translate3d(45vw, 30px, 0); }
    70%  { transform: translate3d(70vw, -25px, 0); }
    100% { transform: translate3d(112vw, 40px, 0); }
}
@keyframes leaf-drift-2 {
    0%   { transform: translate3d(-10vw, 0px, 0); }
    25%  { transform: translate3d(25vw, 50px, 0); }
    50%  { transform: translate3d(50vw, -35px, 0); }
    75%  { transform: translate3d(75vw, 25px, 0); }
    100% { transform: translate3d(112vw, -50px, 0); }
}
@keyframes leaf-drift-3 {
    0%   { transform: translate3d(-10vw, 0px, 0); }
    15%  { transform: translate3d(15vw, -30px, 0); }
    35%  { transform: translate3d(35vw, 40px, 0); }
    55%  { transform: translate3d(55vw, -45px, 0); }
    75%  { transform: translate3d(75vw, 35px, 0); }
    100% { transform: translate3d(112vw, -20px, 0); }
}
@keyframes leaf-drift-4 {
    0%   { transform: translate3d(-10vw, 0px, 0); }
    30%  { transform: translate3d(30vw, 35px, 0); }
    60%  { transform: translate3d(60vw, -40px, 0); }
    100% { transform: translate3d(112vw, 30px, 0); }
}
@keyframes leaf-drift-5 {
    0%   { transform: translate3d(-10vw, 0px, 0); }
    20%  { transform: translate3d(20vw, -55px, 0); }
    40%  { transform: translate3d(40vw, 20px, 0); }
    60%  { transform: translate3d(60vw, -30px, 0); }
    80%  { transform: translate3d(80vw, 45px, 0); }
    100% { transform: translate3d(112vw, -10px, 0); }
}

@keyframes leaf-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .leaf-layer { display: none; }
}