:root {
    --salt: #fff9f1;
    --sand: #f4e7d7;
    --stone: #ddc8af;
    --stone-dark: #b99a78;
    --sage: #c39a6b;
    --sage-dark: #8d6239;
    --charcoal: #2f241c;
    --text: #58483c;
    --muted: #806f60;
    --white:#fff;
    --whatsapp:#25d366;
    --heading-font:"Cormorant Garamond",
Georgia,
serif;
    --body-font:"Manrope",
Arial,
sans-serif;
    --container:1440px;
    --radius:22px;
    --radius-large:36px;
    --shadow:0 25px 70px rgba(48,42,36,
.12);
    --transition:.35s ease
}
 
*,
*:before,
*:after {
    box-sizing:border-box !important;
}

html {
    width:100%;
    min-width:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
    scroll-behavior:smooth;
    scroll-padding-top:100px;
    background:var(--salt);
}

body {
    width:100%;
    min-width:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
    font-family:var(--body-font);
    font-size:16px;
    line-height:1.75;
    color:var(--text);
    background:var(--salt);
    -webkit-font-smoothing:antialiased
}

body.menu-open {
    overflow:hidden
}

img {
    display:block;
    width:100%;
    height:auto
}

a {
    color:inherit;
    text-decoration:none
}

button,
input,
textarea,
select {
    font:inherit
}

button {
    color:inherit
}

ul {
    margin:0;
    padding:0;
    list-style:none
}

h1,
h2,
h3,
h4,
p,
blockquote {
    margin-top:0
}

h1,
h2,
h3,
h4 {
    font-family:var(--heading-font);
    font-weight:500;
    line-height:1;
    color:var(--charcoal)
}

p:last-child {
    margin-bottom:0
}

::selection {
    color:#fff;
    background:var(--sage-dark)
}

.container {
    width:min(calc(100% - 48px),
var(--container));
    margin-inline:auto
}

.section {
    position:relative;
    padding:130px 0
}

.section-heading {
    max-width:760px;
    margin-bottom:64px
}

.section-heading.centred {
    margin-inline:auto;
    text-align:center
}

.section-heading.centred .section-tag {
    display:inline-flex;
    width:auto;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
}

.section-heading h2 {
    margin-bottom:24px;
    font-size:clamp(3rem,5vw,5.4rem);
    letter-spacing:-.045em
}

.section-heading p {
    max-width:650px;
    margin-inline:auto;
    font-size:1.05rem;
    color:var(--muted)
}

.section-tag,
.eyebrow {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
    font-size:.73rem;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--sage-dark);
    max-width:100%;
}

.section-tag:before,
.eyebrow:before {
    content:"";
    width:34px;
    min-width:34px;
    height:1px;
    background:currentColor;
}

@media (max-width: 768px) {
    .section-tag,
    .eyebrow {
        display:grid;
        width:100%;
        max-width:100%;
        min-width:0;
        grid-template-columns:34px minmax(0,1fr);
        align-items:center;
        gap:12px;
        line-height:1.6;
        letter-spacing:.14em;
        overflow-wrap:anywhere;
    }

    .section-tag:before,
    .eyebrow:before {
        width:34px;
        min-width:0;
    }
}

.button {
    display:inline-flex;
    min-height:54px;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:14px 28px;
    border:1px solid var(--charcoal);
    border-radius:999px;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff;
    background:var(--charcoal);
    transition:all var(--transition)
}

.button:hover {
    transform:translateY(-3px);
    color:var(--charcoal);
    background:#fff;
    box-shadow:0 12px 30px rgba(48,42,36,
.08)
}

.button-outline {
    min-height:46px;
    padding:11px 22px;
    color:#fff;
    border-color:rgba(255,255,255,
.45);
    background:rgba(255,255,255,
.08);
    backdrop-filter:blur(10px)
}

.button-secondary {
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:.83rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff;
    transition:all var(--transition)
}

.button-secondary:hover {
    opacity:.72;
    transform:translateX(4px)
}

.button-secondary.dark {
    color:var(--charcoal)
}

.button-full {
    width:100%
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding-bottom:5px;
    border-bottom:1px solid var(--stone-dark);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase
}

.noise {
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: 22px 0;
    background: rgba(255, 249, 241, 0.97);
    box-shadow: 0 10px 35px rgba(83, 53, 28, 0.10);
    backdrop-filter: blur(20px);
    transition: padding var(--transition), box-shadow var(--transition);
}

#header.scrolled {
    padding: 13px 0;
}

#header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
}

.logo img {
    width: auto;
    max-width: 175px;
    height: 58px;
    object-fit: contain;
}

#header nav ul {
    display: flex;
    align-items: center;
    gap: 34px;
}

#header nav a {
    position: relative;
    padding: 10px 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--charcoal);
}

#header nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition);
}

#header nav a:hover::after,
#header nav a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.button-outline {
    color: var(--charcoal);
    border-color: rgba(41, 39, 36, 0.25);
    background: transparent;
    backdrop-filter: none;
}

.button-outline:hover {
    color: var(--white);
    border-color: var(--charcoal);
    background: var(--charcoal);
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mobile-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(41, 39, 36, 0.18);
    border-radius: 50%;
    color: var(--charcoal);
    background: transparent;
    cursor: pointer;
}

.hero {
    position:relative;
    display:flex;
    min-height:100svh;
    align-items:center;
    overflow:hidden;
    color:#fff;
    background:var(--charcoal)
}

.hero-image,
.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(47, 28, 17, 0.78) 0%,
            rgba(75, 42, 21, 0.52) 43%,
            rgba(122, 68, 29, 0.16) 76%,
            rgba(173, 96, 38, 0.06) 100%
        ),
        linear-gradient(
            0deg,
            rgba(66, 35, 18, 0.30),
            transparent 48%
        );
}

.hero-image img {
    height:100%;
    object-fit:cover;
    transform:scale(1.03)
}

.hero-overlay {
    background:linear-gradient(90deg,
rgba(23,21,19,
.77),
rgba(23,21,19,
.5) 43%,
rgba(23,21,19,
.12) 76%),
linear-gradient(0deg,
rgba(18,16,15,
.32),
transparent 45%)
}

.hero-content {
    position:relative;
    z-index:2;
    padding-top:120px
}

.hero .eyebrow {
    color:rgba(255,255,255,
.76)
}

.hero h1 {
    max-width:900px;
    margin-bottom:28px;
    font-size:clamp(4rem,8vw,8.5rem);
    letter-spacing:-.055em;
    color:#fff

}

.hero h1 span {
    font-style:italic;
    font-weight:300;
    color:#e3d6c1
}

.hero-content>p {
    max-width:650px;
    margin-bottom:38px;
    font-size:clamp(1rem,1.4vw,1.15rem);
    color:rgba(255,255,255,
.8)
}

.hero-buttons {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:28px
}

.hero .button {
    color:var(--charcoal);
    border-color:#fff;
    background:#fff
}

.scroll-indicator {
    position:absolute;
    right:50%;
    bottom:30px;
    z-index:2;
    width:28px;
    height:46px;
    border:1px solid rgba(255,255,255,
.42);
    border-radius:20px;
    transform:translateX(50%)
}

.scroll-indicator span {
    position:absolute;
    top:9px;
    left:50%;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#fff;
    transform:translateX(-50%);
    animation:scroll-dot 1.8s infinite
}

@keyframes scroll-dot {
    0% {
    opacity:0;
    transform:translate(-50%,0)
}

30% {
    opacity:1
}

100% {
    opacity:0;
    transform:translate(-50%,19px)
}

}

.intro {
    padding:150px 0
}

.split {
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    align-items:center;
    gap:clamp(60px,9vw,140px)
}

.intro .content {
    max-width:570px
}

.intro h2 {
    margin-bottom:30px;
    font-size:clamp(3.5rem,6vw,6.5rem);
    letter-spacing:-.05em
}

.intro p {
    margin-bottom:22px;
    color:var(--muted)
}

.intro .image {
    position:relative;
    min-height:650px
}

.intro .image:before {
    content:"";
    position:absolute;
    top:-28px;
    right:-28px;
    width:58%;
    height:42%;
    border-radius:var(--radius);
    background:var(--sand)
}

.intro .image img {
    position:relative;
    z-index:1;
    height:100%;
    min-height:650px;
    border-radius:var(--radius-large);
    object-fit:cover;
    box-shadow:var(--shadow)
}

.benefits {
    overflow:hidden;
    background:var(--sand)
}

.benefits-grid {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:24px
}

.benefit-card {
    position:relative;
    grid-column:span 4;
    overflow:hidden;
    border-radius:var(--radius);
    background:#fff;
    box-shadow:0 16px 45px rgba(63,54,45,
.06);
    transition:all var(--transition)
}

.benefit-card:hover {
    transform:translateY(-8px);
    box-shadow:var(--shadow)
}

.benefit-card:nth-child(4) {
    grid-column:3/span 4
}

.benefit-card:nth-child(5) {
    grid-column:7/span 4
}

.benefit-image {
    height:275px;
    overflow:hidden
}

.benefit-image img {
    height:100%;
    object-fit:cover;
    transition:transform .8s
}

.benefit-card:hover img {
    transform:scale(1.06)
}

.benefit-icon {
    position:absolute;
    top:246px;
    right:25px;
    display:grid;
    width:58px;
    height:58px;
    place-items:center;
    border:6px solid #fff;
    border-radius:50%;
    color:var(--sage-dark);
    background:var(--sand)
}

.benefit-content {
    padding:34px 30px 36px
}

.benefit-content h3 {
    margin-bottom:15px;
    font-size:2rem
}

.benefit-content p {
    font-size:.94rem;
    color:var(--muted)
}

.experience {
    background:var(--charcoal)
}

.experience-grid {
    display:grid;
    min-height:850px;
    grid-template-columns:1.08fr .92fr
}

.experience-image {
    position:relative;
    overflow:hidden
}

.experience-image img {
    height:100%;
    object-fit:cover
}

.experience-content {
    display:flex;
    align-items:center;
    padding:100px clamp(50px,8vw,130px)
}

.experience-inner {
    max-width:610px
}

.experience .section-tag {
    color:#c8baa7
}

.experience h2 {
    margin-bottom:28px;
    font-size:clamp(3.8rem,6vw,6.8rem);
    letter-spacing:-.055em;
    color:#fff
}

.experience p {
    margin-bottom:22px;
    color:rgba(255,255,255,
.68)
}

.experience-details {
    display:grid;
    gap:20px;
    margin:42px 0
}

.experience-detail {
    display:grid;
    grid-template-columns:48px 1fr;
    align-items:center;
    gap:18px
}

.experience-detail>i {
    display:grid;
    width:48px;
    height:48px;
    place-items:center;
    border:1px solid rgba(255,255,255,
.18);
    border-radius:50%;
    color:#d2c4b2
}

.experience-detail strong,
.experience-detail span {
    display:block
}

.experience-detail strong {
    color:#fff
}

.experience-detail span {
    font-size:.82rem;
    color:rgba(255,255,255,
.5)
}

.experience .button {
    color:var(--charcoal);
    border-color:#fff;
    background:#fff
}

.journey-grid {
    display:grid;
    max-width:1180px;
    margin-inline:auto;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:36px
}

.journey-step {
    min-width:0;
    padding:0;
    text-align:center
}

.journey .section-heading {
    margin-bottom:48px
}

.journey-step p {
    max-width:210px;
    margin-inline:auto
}

.journey-number {
    margin-bottom:18px;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.16em;
    color:var(--stone-dark)
}

.journey-icon {
    display:grid;
    width:76px;
    height:76px;
    place-items:center;
    margin:0 auto 26px;
    border:1px solid var(--stone);
    border-radius:50%;
    color:var(--sage-dark);
    transition:all var(--transition)
}

.journey-step:hover .journey-icon {
    color:#fff;
    background:var(--sage-dark);
    transform:translateY(-5px)
}

.journey-step h3 {
    margin-bottom:13px;
    font-size:1.8rem
}

.journey-step p {
    font-size:.88rem;
    color:var(--muted)
}

.testimonials {
    background:var(--sand)
}

.testimonials-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.testimonial-card {
    display:flex;
    min-height:360px;
    flex-direction:column;
    padding:42px 36px;
    border:1px solid rgba(185,170,152,
.28);
    border-radius:var(--radius);
    background:rgba(255,255,255,
.55);
    transition:all var(--transition)
}

.testimonial-card:hover {
    transform:translateY(-7px);
    background:#fff;
    box-shadow:var(--shadow)
}

.testimonial-card.featured {
    color:#fff;
    border-color:var(--charcoal);
    background:var(--charcoal)
}

.quote-mark {
    height:70px;
    font-family:var(--heading-font);
    font-size:6rem;
    line-height:1;
    color:var(--stone-dark)
}

.testimonial-card blockquote {
    flex:1;
    font-family:var(--heading-font);
    font-size:1.7rem;
    line-height:1.35;
    color:var(--charcoal)
}

.testimonial-card.featured blockquote {
    color:#fff
}

.testimonial-author strong,
.testimonial-author span {
    display:block
}

.testimonial-author strong {
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:uppercase
}

.testimonial-author span {
    font-size:.77rem;
    color:var(--muted)
}

.pricing-grid {
    display:grid;
    max-width:940px;
    margin-inline:auto;
    grid-template-columns:repeat(2,1fr);
    gap:28px
}

.pricing-card {
    position:relative;
    padding:46px;
    border:1px solid var(--stone);
    border-radius:var(--radius-large);
    background:#fff
}

.pricing-card-featured {
    color:#fff;
    border-color:var(--charcoal);
    background:var(--charcoal);
    box-shadow:var(--shadow)
}

.pricing-badge {
    position:absolute;
    top:20px;
    right:22px;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,
.17);
    border-radius:999px;
    font-size:.63rem;
    font-weight:800;
    letter-spacing:.16em;
    color:#d6c8b5
}

.pricing-label {
    display:block;
    margin-bottom:15px;
    font-size:.67rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--sage-dark)
}

.pricing-header h3 {
    margin-bottom:15px;
    font-size:2.8rem
}

.pricing-card-featured h3 {
    color:#fff
}

.pricing-header p {
    min-height:58px;
    color:var(--muted)
}

.pricing-card-featured p {
    color:rgba(255,255,255,
.58)
}

.pricing-list {
    margin:35px 0;
    border-top:1px solid var(--stone)
}

.pricing-row {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:17px 0;
    border-bottom:1px solid var(--stone);
    font-size:.9rem
}

.pricing-card-featured .pricing-list,
.pricing-card-featured .pricing-row {
    border-color:rgba(255,255,255,
.14)
}

.pricing-card-featured .pricing-row span {
    color:rgba(255,255,255,
.56)
}

.pricing-card-featured .pricing-row strong {
    color:#fff
}

.pricing-card-featured .button {
    color:var(--charcoal);
    border-color:#fff;
    background:#fff
}

.pricing-note {
    text-align:center;
    margin-top:30px;
    font-size:.82rem;
    color:var(--muted)
}

.faq {
    background:var(--sand)
}

.faq-layout {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:clamp(60px,8vw,120px)
}

.faq-intro {
    position:sticky;
    top:140px;
    align-self:start
}

.faq-intro h2 {
    margin-bottom:24px;
    font-size:clamp(3.2rem,5vw,5.5rem);
    letter-spacing:-.05em
}

.faq-intro>p {
    color:var(--muted)
}

.faq-image {
    height:330px;
    margin-top:40px;
    overflow:hidden;
    border-radius:var(--radius)
}

.faq-image img {
    height:100%;
    object-fit:cover
}

.accordion {
    border-top:1px solid var(--stone-dark)
}

.accordion-item {
    border-bottom:1px solid var(--stone-dark)
}

.accordion-button {
    display:grid;
    width:100%;
    grid-template-columns:1fr 34px;
    align-items:center;
    gap:30px;
    padding:27px 0;
    border:0;
    text-align:left;
    background:transparent;
    cursor:pointer
}

.accordion-button span {
    font-family:var(--heading-font);
    font-size:1.65rem
}

.accordion-button i {
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border:1px solid var(--stone-dark);
    border-radius:50%;
    font-size:.75rem;
    transition:all var(--transition)
}

.accordion-item.active .accordion-button i {
    color:#fff;
    background:var(--sage-dark);
    transform:rotate(45deg)
}

.accordion-content {
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .4s,
opacity .4s
}

.accordion-content>div {
    overflow:hidden
}

.accordion-content p {
    padding:0 58px 28px 0;
    color:var(--muted)
}

.accordion-item.active .accordion-content {
    grid-template-rows:1fr;
    opacity:1
}

.booking {
    position:relative;
    min-height:780px;
    overflow:hidden
}

.booking-background,
.booking-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(58, 34, 20, 0.72),
            rgba(170, 92, 39, 0.18)
        );
}

.booking-background img {
    height:100%;
    object-fit:cover
}

.booking-overlay {
    background:linear-gradient(90deg,
rgba(27,25,22,
.74),
rgba(27,25,22,
.22))
}

.booking .container {
    position:relative;
    z-index:1;
    display:flex;
    min-height:780px;
    align-items:center
}

.booking-panel {
    display:grid;
    width:100%;
    grid-template-columns:1.15fr .85fr;
    gap:60px;
    padding:clamp(42px,6vw,78px);
    border:1px solid rgba(255,255,255,
.23);
    border-radius:var(--radius-large);
    background: rgba(255, 249, 241, 0.91);
    box-shadow:var(--shadow);
    backdrop-filter:blur(20px)
}

.booking-copy h2 {
    margin-bottom:24px;
    font-size:clamp(3.5rem,5vw,6.3rem);
    letter-spacing:-.055em
}

.booking-copy>p {
    color:var(--muted)
}

.booking-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:25px;
    margin-top:35px
}

.contact-card {
    display:grid;
    align-content:center;
    padding:34px;
    border-radius:var(--radius);
    color:#fff;
    background:var(--charcoal)
}

.contact-item {
    display:grid;
    grid-template-columns:46px 1fr;
    gap:17px;
    padding:20px 0;
    border-bottom:1px solid rgba(255,255,255,
.1)
}

.contact-item:last-child {
    border:0
}

.contact-icon {
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
    border:1px solid rgba(255,255,255,
.16);
    border-radius:50%;
    color:#d2c3ae
}

.contact-item span {
    display:block;
    font-size:.67rem;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:rgba(255,255,255,
.45)
}

.contact-item p,
.contact-item a {
    margin:0;
    font-size:.9rem;
    color:rgba(255,255,255,
.82)
}

.location {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    background: var(--sand);
}

.map,
.map iframe {
    width: 100%;
    min-height: 720px;
}

.map iframe {
    display: block;
    height: 720px;
    border: 0;
    filter: sepia(0.22) saturate(0.92) contrast(0.96) brightness(1.03);
}

.location-card {
    position: absolute;
    top: 20%;
    left: max(24px, calc((100vw - var(--container)) / 2));
    width: min(470px, calc(100% - 48px));
    padding: 48px;
    border-radius: var(--radius);
    background: rgba(255, 249, 241, 0.96);
    box-shadow:
        0 30px 70px rgba(91, 55, 27, 0.16),
        0 0 80px rgba(255, 221, 174, 0.12);
    backdrop-filter: blur(14px);
    transform: translateY(-50%);
}

.location-card h2 {
    margin-bottom: 24px;
    font-size: 3.4rem;
    letter-spacing: -0.045em;
}

.location-card p {
    margin-bottom: 24px;
    color: var(--muted);
}

.footer {
    padding:90px 0 30px;
    color:rgba(255,255,255,
.68);
    background: #2b211a
}

.footer-grid {
    display:grid;
    grid-template-columns:1.45fr .7fr 1fr 1fr;
    gap:60px;
    padding-bottom:65px
}

.footer-logo img {
    width:auto;
    max-width:190px;
    height:72px;
    object-fit:contain
}

.footer-brand p {
    max-width:350px;
    margin:25px 0
}

.social-links {
    display:flex;
    gap:10px
}

.social-links a {
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    border:1px solid rgba(255,255,255,
.16);
    border-radius:50%;
    color:#fff
}

.footer-column h3 {
    margin-bottom:24px;
    font-family:var(--body-font);
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:#fff
}

.footer-column li {
    margin-bottom:12px
}

.footer-contact li {
    display:grid;
    grid-template-columns:20px 1fr;
    gap:10px
}

.listed-link {
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:7px;
    padding-bottom:4px;
    border-bottom:1px solid rgba(255,255,255,
.2);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase
}

.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding-top:30px;
    border-top:1px solid rgba(255,255,255,
.1);
    font-size:.74rem
}

.footer-bottom p {
    margin:0
}

.footer-legal {
    display:flex;
    flex-wrap:wrap;
    gap:24px
}

.floating-actions {
    position:fixed;
    right:20px;
    bottom:28px;
    z-index:900;
    display:grid;
    gap:10px
}

.floating-whatsapp,
.back-to-top {
    display:grid;
    width:50px;
    height:50px;
    place-items:center;
    border:0;
    border-radius:50%;
    color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,
.2);
    cursor:pointer;
    transition:all var(--transition)
}

.floating-whatsapp {
    font-size:1.35rem;
    background:var(--whatsapp)
}

.back-to-top {
    background:var(--charcoal);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px)
}

.back-to-top.visible {
    opacity:1;
    visibility:visible;
    transform:none
}

.mobile-menu {
    position:fixed;
    top:0;
    right:0;
    z-index:1200;
    width:min(420px,88vw);
    max-width:100vw;
    height:100svh;
    padding:24px;
    background:var(--salt);
    box-shadow:-20px 0 60px rgba(0,0,0,.16);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none;
    transition:opacity .3s ease, visibility .3s ease
}

.mobile-menu.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto
}

.mobile-menu-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:22px;
    border-bottom:1px solid var(--stone)
}

.mobile-menu-header img {
    width:auto;
    max-width:160px;
    height:58px;
    object-fit:contain
}

.mobile-menu-close {
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
    border:1px solid var(--stone);
    border-radius:50%;
    background:transparent
}

.mobile-navigation {
    display:grid;
    padding-top:24px
}

.mobile-navigation>a:not(.button) {
    padding:18px 2px;
    border-bottom:1px solid var(--stone);
    font-family:var(--heading-font);
    font-size:2rem
}

.mobile-navigation .button {
    margin-top:30px
}

.mobile-menu-backdrop {
    position:fixed;
    inset:0;
    z-index:1100;
    background:rgba(20,18,16,
.58);
    backdrop-filter:blur(4px);

    opacity:0;
    visibility:hidden;
    transition:all var(--transition)
}

.mobile-menu-backdrop.visible {
    opacity:1;
    visibility:visible
}

.reveal {
    opacity:0;
    transform:translateY(35px);
    transition:opacity .75s,
transform .75s
}

.reveal.in-view {
    opacity:1;
    transform:none
}

@media(max-width:1100px) {
    #header nav,
.header-buttons .button-outline {
    display:none
}

.mobile-toggle {
    display:grid;
    place-items:center
}

.benefit-card,
.benefit-card:nth-child(4),
.benefit-card:nth-child(5) {
    grid-column:span 6
}

.journey-grid {
    grid-template-columns:repeat(3,1fr)
}

.experience-grid {
    grid-template-columns:1fr
}

.experience-image {
    min-height:650px
}

.footer-grid {
    grid-template-columns:1.4fr 1fr 1fr
}

.footer-grid>:last-child {
    grid-column:2/span 2
}

}

@media(max-width:900px) {
    .section {
    padding:100px 0
}

.split,
.faq-layout,
.booking-panel {
    grid-template-columns:1fr
}

.faq-intro {
    position:relative;
    top:auto
}

.testimonials-grid {
    grid-template-columns:1fr
}

.pricing-grid {
    max-width:620px;
    grid-template-columns:1fr
}

.footer-grid {
    grid-template-columns:repeat(2,1fr)
}

.footer-grid>:last-child {
    grid-column:auto
}

}

@media(max-width:720px) {
    .container {
        width:min(calc(100% - 34px), var(--container));
        max-width:100%;
    }

    .hero,
    .hero-content,
    .split,
    .intro,
    .intro .image,
    .benefits,
    .benefits-grid,
    .experience,
    .experience-grid,
    .journey-grid,
    .pricing-grid,
    .faq,
    .faq-layout,
    .booking,
    .booking-panel,
    .conditions,
    .conditions-intro,
    .conditions-groups,
    .footer,
    .footer-grid {
        min-width:0;
        max-width:100%;
    }

    .intro .image:before {
        right:0;
        max-width:100%;
    }

#header {
    padding:14px 0
}

.logo img {
    max-width:145px;
    height:50px
}

.hero {
    min-height:820px
}

.hero-content {
    align-self:flex-end;
    padding:150px 0 110px
}

.hero h1 {
    font-size:clamp(3.7rem,18vw,5.7rem)
}

.hero-buttons,
.booking-actions {
    align-items:flex-start;
    flex-direction:column
}

.scroll-indicator {
    display:none
}

.intro {
    padding:100px 0
}

.intro .image,
.intro .image img {
    min-height:430px
}

.benefits-grid {
    grid-template-columns:1fr
}

.benefit-card,
.benefit-card:nth-child(4),
.benefit-card:nth-child(5) {
    grid-column:auto
}

.experience-image {
    min-height:480px
}

.experience-content {
    padding:80px 25px
}

.journey-grid {
    grid-template-columns:1fr;
    gap:45px
}

.pricing-card {
    padding:35px 25px
}

.booking,
.booking .container {
    min-height:auto
}

.booking {
    padding:80px 0
}

.booking-panel {
    padding:30px 22px
}

.location {
    display: flex;
    min-height: auto;
    flex-direction: column;
    overflow: visible;
}

.map,
.map iframe {
    min-height: 480px;
}

.map iframe {
    height: 480px;
}

.location-card {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 34px);
    margin: 24px auto 70px;
    padding: 35px 25px;
    transform: none;
}

.footer-grid {
    grid-template-columns:1fr
}

.footer-bottom {
    align-items:flex-start;

    flex-direction:column
}

}

@media(prefers-reduced-motion:reduce) {
    html {
    scroll-behavior:auto
}

*,
*:before,
*:after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
}

.reveal {
    opacity:1;
    transform:none
}

}

/* =========================================================
   WARM IMAGE TREATMENT
========================================================= */

.hero-image,
.intro .image,
.benefit-image,
.experience-image,
.faq-image,
.booking-background {
    background:
        linear-gradient(135deg, #f7e8d4, #d9b183 55%, #9b6840);
}

.hero-image img,
.intro .image img,
.benefit-image img,
.experience-image img,
.faq-image img,
.booking-background img {
    filter: saturate(1.08) contrast(0.96) brightness(1.03);
}

.hero h1 span {
    color: #efc58f;
}

.section-tag,
.eyebrow {
    color: var(--sage-dark);
}

.hero .eyebrow {
    color: rgba(255, 232, 205, 0.82);
}

/* =========================================================
   CORRECTED FULL-BLEED HERO
========================================================= */

.hero {
    position: relative;
    display: flex;
    min-height: 100svh;
    align-items: center;
    overflow: hidden;
    color: var(--white);
    background: var(--charcoal);
}

.hero-image,
.hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-image {
    z-index: 0;
    overflow: hidden;
    background: var(--charcoal);
}

.hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.04) contrast(0.98) brightness(0.94);
    transform: scale(1.015);
}

.hero-overlay {
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(48, 28, 16, 0.08) 0%,
            rgba(48, 28, 16, 0.12) 34%,
            rgba(45, 27, 18, 0.52) 58%,
            rgba(35, 23, 17, 0.88) 100%
        ),
        linear-gradient(
            0deg,
            rgba(35, 23, 17, 0.30) 0%,
            rgba(35, 23, 17, 0.02) 48%,
            rgba(35, 23, 17, 0.10) 100%
        );
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
    padding-top: 120px;
}

.hero-content > * {
    width: min(100%, 650px);
    margin-left: auto;
}

.hero h1 {
    max-width: 650px;
    font-size: clamp(4rem, 6.3vw, 7.4rem);
}

.hero-content > p {
    max-width: 620px;
}

.hero-buttons {
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(35, 23, 17, 0.82) 0%,
                rgba(35, 23, 17, 0.32) 62%,
                rgba(35, 23, 17, 0.08) 100%
            );
    }

    .hero-image img {
        object-position: 48% center;
    }

    .hero-content > * {
        margin-left: 0;
    }
}

@media (max-width: 720px) {
    .hero {
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .hero-content {
        width:min(calc(100% - 34px), var(--container));
        max-width:100%;
        min-width:0;
        margin-inline:auto;
    }

    .hero-content > * {
        width:100%;
        max-width:650px;
        min-width:0;
        margin-left:0;
    }

    .hero .eyebrow {
        display:grid;
        grid-template-columns:34px minmax(0,1fr);
        width:100%;
        max-width:100%;
        min-width:0;
        gap:12px;
        line-height:1.5;
        letter-spacing:.14em;
        overflow-wrap:anywhere;
    }

    .hero .eyebrow:before {
        width:34px;
        min-width:0;
    }

    .hero h1 {
        width:100%;
        max-width:100%;
        font-size:clamp(3.35rem, 16vw, 5.25rem);
        overflow-wrap:normal;

    }

    .hero-content > p,
    .hero-buttons {
        width:100%;
        max-width:100%;
        min-width:0;
    }
}

/* =========================================================
   CONDITIONS & WELLBEING
========================================================= */

.conditions {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(224, 174, 116, 0.2),
            transparent 34%
        ),
        var(--salt);
}

.conditions-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    align-items: end;
    gap: clamp(50px, 8vw, 120px);
    margin-bottom: 70px;
}

.conditions-heading {
    max-width: 800px;
}

.conditions-heading h2 {
    margin-bottom: 26px;
    font-size: clamp(3.2rem, 5vw, 5.5rem);
    letter-spacing: -0.05em;
}

.conditions-heading > p {
    max-width: 700px;
    color: var(--muted);
}

.conditions-note {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 17px;
    padding: 25px;
    border: 1px solid rgba(185, 154, 120, 0.3);
    border-radius: var(--radius);
    background: rgba(255, 253, 249, 0.68);
}

.conditions-note i {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    color: var(--sage-dark);
    background: var(--sand);
}

.conditions-note p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.75;
    color: var(--muted);
}

.conditions-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.condition-group {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: start;
    gap: 25px;
    padding: clamp(30px, 4vw, 48px);
    border: 1px solid rgba(185, 154, 120, 0.25);
    border-radius: var(--radius-large);
    background: rgba(255, 253, 249, 0.86);
    box-shadow:
        0 22px 55px rgba(111, 70, 34, 0.07),
        0 0 60px rgba(255, 220, 175, 0.08);
}

.condition-group-wide {
    grid-column: 1 / -1;
}

.condition-group-icon {
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--sage-dark);
    background: var(--sand);
}

.condition-label,
.conditions-footer-label {
    display: block;
    margin-bottom: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sage-dark);
}

.condition-group h3 {
    margin-bottom: 18px;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.05;
}

.condition-group p {
    max-width: 670px;
    margin-bottom: 26px;
    color: var(--muted);
}

.condition-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.condition-list li {
    padding: 8px 13px;
    border: 1px solid rgba(185, 154, 120, 0.32);
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text);
    background: var(--salt);
}

.wellbeing-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 30px;
}

.wellbeing-point {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: start;
    gap: 11px;
    font-size: 0.88rem;
    color: var(--text);
}

.wellbeing-point i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    font-size: 0.65rem;
    color: var(--white);
    background: var(--sage-dark);
}

.conditions-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 28px;
    padding: 30px 34px;
    border-radius: var(--radius);
    color: var(--white);
    background: var(--charcoal);
}

.conditions-footer-label {
    margin-bottom: 5px;
    color: #e3bc8d;
}

.conditions-footer p {
    margin: 0;
    color: rgba(255, 255, 255, 0.67);
}

.conditions-footer .button {
    flex-shrink: 0;
    color: var(--charcoal);
    border-color: var(--white);
    background: var(--white);
}

@media (max-width: 900px) {
    .conditions-intro {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 35px;
    }

    .conditions-groups {
        grid-template-columns: 1fr;
    }

    .condition-group-wide {
        grid-column: auto;
    }

    .wellbeing-points {
        grid-template-columns: 1fr;
    }

    .conditions-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .condition-group {
        grid-template-columns: 1fr;
        padding: 30px 23px;
    }

    .condition-group-icon {
        width: 52px;
        height: 52px;
    }

    .condition-list {
        gap: 7px;
    }

    .condition-list li {
        padding: 7px 11px;
        font-size: 0.7rem;
    }

    .conditions-footer {
        padding: 27px 23px;
    }

    .conditions-footer .button {
        width: 100%;
    }
}



.site-logo-main {
    display: block;
    width: 100%;
    max-width: 290px !important;
    height: auto;
    object-fit: contain;
}

.site-logo-footer {
    display: block;
    width: 100%;
    max-width: 310px !important;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

@media (max-width: 720px) {
    .site-logo-main {
        max-width: 155px;
    }

    .site-logo-footer {
        max-width: 180px;
    }
}

/* =========================================================
   PRIVACY & DISCLAIMER MODAL
   ========================================================= */

.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.legal-modal.active {
    opacity: 1;
    visibility: visible;
}

.legal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 16, 0.72);
    backdrop-filter: blur(6px);
}

.legal-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    background: #f6f3ee;
    padding: 50px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
}

.legal-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
}

.legal-modal-content h2 {
    margin-bottom: 35px;
}

.legal-modal-content h3 {
    margin-top: 30px;
    margin-bottom: 12px;
}

.legal-modal-content p {
    margin-bottom: 16px;
    line-height: 1.75;
}

.legal-modal-content a {
    color: inherit;
    text-decoration: underline;
}

body.legal-modal-open {
    overflow: hidden;
}
 
@media (max-width: 600px) {
    .legal-modal {
        padding: 15px;
    }

    .legal-modal-dialog {
        padding: 45px 25px 30px;
        max-height: 90vh;
    }
}

.footer-legal-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.footer-legal-link:hover {
    text-decoration: underline;
}


@media(max-width:720px) {
    img,
    iframe,
    video,
    svg,
    canvas {
        max-width:100%;
    }

    .button,
    .button-secondary,
    .text-link,
    .contact-item,
    .accordion-button,
    .conditions-note,
    .condition-group,
    .wellbeing-point {
        min-width:0;
    }

    .button-secondary {
        white-space:normal;
    }

    .floating-actions {
        right:17px;
    }
}

/* =========================================================
   MOBILE VIEWPORT / OVERFLOW
   Single final source of truth for mobile sizing.
========================================================= */

@media (max-width:720px) {

    html,
    body {
        width:100vw !important;
        min-width:100vw !important;
        max-width:100vw !important;
        margin:0 !important;
        padding:0 !important;
        overflow-x:hidden !important;
        
    }

    body {
        position:relative;
    }

    #header,
    main,
    footer,
    section,
    .hero,
    .intro,
    .benefits,
    .conditions,
    .experience,
    .journey,
    .testimonials,
    .pricing,
    .faq,
    .booking,
    .location {
        width:100vw !important;
        min-width:100vw !important;
        max-width:100vw !important;
        margin-left:0 !important;
        margin-right:0 !important;
        overflow-x:hidden;
    }

    .container,
    .hero-content {
        width:calc(100vw - 34px) !important;
        max-width:calc(100vw - 34px) !important;
        min-width:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .hero-image,
    .hero-overlay,
    .booking-background,
    .booking-overlay {
        left:0 !important;
        right:0 !important;
        width:auto !important;
        max-width:none !important;
    }

    .hero-content > *,
    .split > *,
    .benefits-grid > *,
    .experience-grid > *,
    .journey-grid > *,
    .pricing-grid > *,
    .faq-layout > *,
    .booking-panel > *,
    .conditions-intro > *,
    .conditions-groups > *,
    .footer-grid > * {
        min-width:0;
        max-width:100%;
    }

    img,
    iframe,
    video,
    svg,
    canvas {
        max-width:100%;
    }

    .hero .eyebrow {
        display:grid;
        width:100%;
        max-width:100%;
        min-width:0;
        grid-template-columns:34px minmax(0,1fr);
        gap:12px;
        margin-left:0;
        line-height:1.5;
        letter-spacing:.14em;
        overflow-wrap:anywhere;
    }

    .hero .eyebrow:before {
        width:34px;
        min-width:0;
    }

    .section-heading.centred .section-tag {
        display:inline-grid;
        width:auto;
        max-width:100%;
        grid-template-columns:34px minmax(0,auto);
        margin-left:auto;
        margin-right:auto;
    }

    .intro .image:before {
        right:0;
    }

    .location-card {
        left:auto !important;
        right:auto !important;
        width:calc(100vw - 34px) !important;
        max-width:calc(100vw - 34px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .floating-actions {
        right:17px;
    }

    .mobile-menu,
    .mobile-menu-backdrop,
    .legal-modal {
        max-width:100vw;
    }

    .button-secondary {
        white-space:normal;
    }

    .skiptranslate,
    [class*="gtranslate"],
    [class*="gt_float"],
    [id*="gtranslate"] {
        max-width:100vw !important;
    }
}

/* =========================================================
   BOOKING PAGE
========================================================= */

.booking-page {
    padding-top: 90px;
}

.booking-hero {
    background: #f6f3ee;
    padding: 110px 0 80px;
    text-align: center;
}

.booking-hero-inner {
    max-width: 850px;
}

.booking-hero h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 7vw, 5.8rem);
    font-weight: 400;
    line-height: .95;
    margin: 20px 0 25px;
}

.booking-hero p {
    max-width: 650px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.8;
}

.booking-form-section {
    background: #fff;
}

.booking-form-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.booking-form-copy {
    position: sticky;
    top: 130px;
}

.booking-form-copy h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    font-weight: 400;
    line-height: 1;
    margin: 18px 0 25px;
}

.booking-form-copy > p {
    line-height: 1.8;
    margin-bottom: 35px;
}

.booking-info-card {
    border-top: 1px solid rgba(0,0,0,.1);
}

.booking-info-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.booking-info-item > i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f6f3ee;
    font-size: 1rem;
}

.booking-info-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.booking-info-item strong {
    font-size: .95rem;
}

.booking-info-item span {
    font-size: .8rem;
    opacity: .65;
}


/* FORM CARD */

.booking-form-card {
    background: #f6f3ee;
    padding: 50px;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 15px 0 25px;
}

.form-section-title:first-child {
    margin-top: 0;
}

.form-section-title span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.form-section-title h3 {
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.form-grid {
    display: grid;
    gap: 20px;
}

.form-grid.two-column {
    grid-template-columns: repeat(2, 1fr);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 20px;
}

.form-field > span {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    padding: 16px 18px;
    font: inherit;
    color: #111;
    outline: none;
    border-radius: 0;
    transition: border-color .2s ease;
}

.form-field input,
.form-field select {
    height: 56px;
}

.form-field textarea {
    resize: vertical;
    min-height: 130px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #111;
}


/* SESSION TYPE */

.session-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.session-option {
    cursor: pointer;
}

.session-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.session-option-content {
    min-height: 145px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    transition: all .2s ease;
}

.session-option-content i {
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.session-option-content strong {
    font-size: 1rem;
}

.session-option-content small {
    opacity: .65;
}

.session-option input:checked + .session-option-content {
    background: #111;
    color: #fff;
    border-color: #111;
}


/* CONSENT */

.form-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 5px 0 25px;
    cursor: pointer;
}

.form-consent input {
    margin-top: 4px;
}

.form-consent span {
    font-size: .8rem;
    line-height: 1.6;
}


/* SUBMIT */

.booking-submit {
    width: 100%;
    justify-content: center;
    border: 0;
    cursor: pointer;
    font-size: .85rem;
}

.booking-submit i {
    font-size: 1.1rem;
}

.booking-form-note {
    text-align: center;
    font-size: .74rem;
    line-height: 1.5;
    margin: 15px 0 0;
    opacity: .6;
}


/* MOBILE */

@media (max-width: 900px) {

    .booking-page {
        padding-top: 70px;
    }
 
    .booking-hero {
        padding: 75px 0 60px;
    }

    .booking-form-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .booking-form-copy {
        position: static;
    }

    .booking-form-card {
        padding: 30px;
    }
}

@media (max-width: 600px) {

    .booking-form-card {
        padding: 25px 20px;
    }

    .form-grid.two-column,
    .session-selector {
        grid-template-columns: 1fr;
    }

    .session-option-content {
        min-height: auto;
    }
}

/* =========================================================
   PAYMENT METHODS
========================================================= */

.payment-intro {
    margin-bottom: 24px;
    line-height: 1.7;
}

.payment-intro p {
    margin: 0;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.payment-option {
    cursor: pointer;
}

.payment-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-option-content {
    min-height: 125px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    transition: all .2s ease;
}

.payment-option-content i {
    font-size: 1.25rem;
    margin-bottom: 7px;
}

.payment-option-content strong {
    font-size: .95rem;
}

.payment-option-content small {
    font-size: .75rem;
    opacity: .65;
}

.payment-option input:checked + .payment-option-content {
    background: #111;
    color: #fff;
    border-color: #111;
}


/* PAYMENT DETAILS */

.payment-extra {
    margin: 0 0 25px;
}

.payment-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
}

.payment-box > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    background: #f6f3ee;
    border-radius: 50%;
}

.payment-box strong {
    display: block;
    margin-bottom: 5px;
}

.payment-box p {
    margin: 0;
    font-size: .82rem;
    line-height: 1.65;
    opacity: .75;
}

.payment-box-card {
    margin-bottom: 20px;
}


/* CONFIRMATION NOTICE */

.payment-confirmation-note {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 20px;
    margin: 25px 0 35px;
    border-left: 3px solid #111;
    background: rgba(255,255,255,.65);
}

.payment-confirmation-note i {
    margin-top: 3px;
}

.payment-confirmation-note p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.65;
}


@media (max-width: 600px) {

    .payment-methods {
        grid-template-columns: 1fr;
    }

    .payment-option-content {
        min-height: auto;
    }
}

.booking-response {
    margin-top: 20px;
}

.booking-success,
.booking-error {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
}

.booking-success > i,
.booking-error > i {
    margin-top: 3px;
    font-size: 1.1rem;
}

.booking-success strong,
.booking-error strong {
    display: block;
    margin-bottom: 5px;
}

.booking-success p,
.booking-error p {
    margin: 0 0 5px;
    font-size: .82rem;
    line-height: 1.6;
}

.booking-error {
    border-left: 3px solid #a00;
}

.booking-success {
    border-left: 3px solid #111;
}