/* =========================================================
   EXPERIENCE DETAIL — CINEMATIC DARK PALETTE
========================================================= */

:root {
    --experience-forest: #05271a;
    --experience-forest-deep: #031b12;
    --experience-charcoal: #121715;
    --experience-ink: #0a0f0c;
    --experience-cream: #f5f1e7;
    --experience-sage: #bdd1c3;
    --experience-muted: #a8b6ae;
}

.experience-detail-page {
    color: var(--experience-cream);
    background: var(--experience-forest-deep);
}

.experience-detail-hero {
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.experience-detail-hero-overlay {
    background:
        linear-gradient(to top, rgba(2, 21, 13, .92), rgba(2, 21, 13, .14) 72%),
        radial-gradient(circle at center, transparent 15%, rgba(2, 18, 12, .34) 100%);
}

.experience-detail-hero h1 {
    color: var(--experience-cream);
    text-shadow: 0 8px 34px rgba(0, 12, 7, .32);
}

.experience-detail-hero p {
    color: rgba(244, 247, 243, .78);
}

.experience-detail-overview {
    background:
        radial-gradient(circle at 50% 0%, rgba(42, 96, 68, .2), transparent 45%),
        var(--experience-forest);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.experience-detail-copy .section-eyebrow {
    color: #e0e9e3;
}

.experience-detail-copy h2 {
    color: var(--experience-cream);
}

.experience-description {
    color: rgba(225, 235, 228, .68);
}

.experience-enquiry-section {
    background-color: var(--experience-charcoal);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.experience-enquiry-section::before {
    background:
        linear-gradient(90deg, rgba(4, 31, 21, .50) 0%, rgba(4, 31, 21, .28) 45%, rgba(7, 19, 13, .20) 100%),
        linear-gradient(to bottom, rgba(3, 17, 11, .03), rgba(3, 17, 11, .16));
}

.experience-enquiry-background {
    filter: saturate(1.05) brightness(1.08) contrast(1.03);
}

.experience-enquiry-intro h2,
.experience-enquiry-intro h2 span {
    color: var(--experience-cream);
}

.experience-enquiry-intro > p,
.experience-enquiry-note p {
    color: rgba(229, 237, 232, .7);
}

.experience-enquiry-note {
    border-color: rgba(255, 255, 255, .13);
}

.experience-enquiry-form {
    color: var(--experience-cream);
    color-scheme: dark;
       background:
        linear-gradient(145deg, rgba(255, 255, 255, .03), transparent 45%),
        rgba(10, 16, 13, .92);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 30px 80px rgba(0, 8, 5, .4);
}

.experience-form-top {
    border-color: rgba(255, 255, 255, .1);
}

.experience-form-top strong,
.experience-form-field label {
    color: #edf2ee;
}

.experience-form-field input,
.experience-form-field select,
.experience-form-field textarea {
    color: #f4f6f3;
    background: #18231e;
    border-color: rgba(255, 255, 255, .11);
}

.experience-form-field input::placeholder,
.experience-form-field textarea::placeholder {
    color: rgba(223, 232, 226, .42);
}

.experience-form-field input:focus,
.experience-form-field select:focus,
.experience-form-field textarea:focus {
    border-color: #78a58c;
    box-shadow: 0 0 0 3px rgba(120, 165, 140, .13);
}

.experience-form-field select option {
    color: #f4f6f3;
    background: #18231e;
}

.experience-form-footer {
    border-color: rgba(255, 255, 255, .1);
}

.experience-form-footer small {
    color: rgba(222, 231, 225, .5);
}

.experience-related-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(33, 71, 52, .16), transparent 42%),
        var(--experience-ink);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.experience-related-heading h2 {
    color: var(--experience-cream);
}

.experience-related-heading .section-eyebrow {
    color: #dce7e0;
}

.experience-related-heading > a {
    color: #f3f5f1;
    border-color: rgba(255, 255, 255, .24);
}

.experience-related-heading > a:hover {
    color: #ff969b;
    border-color: #ff969b;
}

.experience-related-card {
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .3);
}

.experience-related-card:hover {
    box-shadow: 0 28px 65px rgba(0, 0, 0, .42);
}

@media (max-width: 650px) {
    .experience-enquiry-form {
        box-shadow: 0 22px 50px rgba(0, 8, 5, .32);
    }
}