:root {
    --bg: #f5f0e8;
    --bg-soft: #f9f5ef;
    --sand: #e8dcc7;
    --sage: #8ca28d;
    --sage-dark: #53685a;
    --pine: #25453f;
    --seafoam: #7fb1b2;
    --seafoam-ink: #20383b;
    --ink: #2f2a26;
    --clay: #a97155;
    --white: #fffdf9;
    --shadow: 0 20px 45px rgba(37, 69, 63, 0.12);
    --radius: 24px;
    --radius-small: 18px;
    --container: 1180px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Manrope", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(140, 162, 141, 0.24), transparent 28%),
        linear-gradient(180deg, #f8f3eb 0%, #f1ebe4 33rem, #7882a5 33rem, #7882a5 100%);
}

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

img {
    max-width: 100%;
}

.site-shell {
    min-height: 100vh;
}

.container {
    width: min(calc(100% - 2rem), var(--container));
    margin: 0 auto;
}

.narrow {
    width: min(calc(100% - 2rem), 840px);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(249, 245, 239, 0.88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(47, 42, 38, 0.08);
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
    line-height: 1;
}

.brand-mark,
h1,
h2,
h3,
.footer-title {
    font-family: "Cormorant Garamond", serif;
}

.brand-mark {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.brand-tag,
.eyebrow,
.card-label {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
}

.brand-tag {
    display: block;
    color: rgba(47, 42, 38, 0.7);
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.site-nav a {
    font-size: 0.96rem;
}

.site-nav a.active {
    color: var(--pine);
}

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(37, 69, 63, 0.16);
    border-radius: 999px;
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.3rem;
}

.nav-toggle span:not(.sr-only) {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--pine);
}

.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;
}

.hero,
.page-hero {
    padding: 6rem 0 4rem;
}

.hero {
    position: relative;
    overflow: clip;
    min-height: 46rem;
    display: flex;
    align-items: center;
}

.hero-ethereal {
    background:
        radial-gradient(circle at 72% 42%, rgba(206, 227, 255, 0.6), transparent 18%),
        radial-gradient(circle at 82% 22%, rgba(224, 194, 255, 0.34), transparent 22%),
        radial-gradient(circle at 68% 72%, rgba(164, 227, 223, 0.28), transparent 22%),
        linear-gradient(90deg, rgba(248, 244, 238, 0.96) 0%, rgba(248, 244, 238, 0.84) 28%, rgba(197, 213, 239, 0.42) 58%, rgba(81, 92, 141, 0.42) 100%);
}

.hero-ethereal::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(248, 244, 238, 0.22) 0%, rgba(248, 244, 238, 0.1) 28%, rgba(14, 24, 52, 0) 48%, rgba(14, 24, 52, 0.28) 100%),
        radial-gradient(circle at 64% 30%, rgba(255, 251, 233, 0.28), transparent 14%),
        radial-gradient(circle at 74% 22%, rgba(202, 103, 255, 0.16), transparent 22%),
        radial-gradient(circle at 80% 58%, rgba(78, 214, 197, 0.12), transparent 24%),
        radial-gradient(circle at 52% 50%, rgba(255, 255, 255, 0.12), transparent 24%);
    opacity: 1;
    pointer-events: none;
}

.hero-ethereal::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 22%, transparent 78%, rgba(135, 157, 211, 0.08)),
        radial-gradient(circle at 66% 48%, rgba(255, 251, 245, 0.18), transparent 18%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.hero-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: url("../images/whispering-waters-hero-bg-wide.webp") center center / cover no-repeat;
}

.aura,
.stardust,
.cosmic-orbit,
.cosmic-moon {
    position: absolute;
    display: block;
}

.aura,
.stardust {
    filter: blur(10px);
    opacity: 0.75;
}

.aura {
    border-radius: 50%;
    mix-blend-mode: screen;
}

.aura-one {
    top: 6%;
    left: 40%;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle, rgba(255, 239, 205, 0.24) 0%, rgba(255, 239, 205, 0) 66%);
    animation: driftOne 18s ease-in-out infinite alternate;
}

.aura-two {
    top: -2%;
    right: 4%;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, rgba(206, 100, 255, 0.22) 0%, rgba(206, 100, 255, 0) 68%);
    animation: driftTwo 22s ease-in-out infinite alternate;
}

.aura-three {
    bottom: -8%;
    left: 52%;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(133, 208, 225, 0.18) 0%, rgba(133, 208, 225, 0) 66%);
    animation: pulseBloom 16s ease-in-out infinite;
}

.aura-four {
    bottom: 10%;
    right: 28%;
    width: 14rem;
    height: 14rem;
    background: radial-gradient(circle, rgba(255, 206, 128, 0.2) 0%, rgba(255, 206, 128, 0) 70%);
    animation: driftThree 20s ease-in-out infinite alternate;
}

.cosmic-orbit {
    border: 1px solid rgba(233, 239, 255, 0.16);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(140, 190, 255, 0.08);
}

.orbit-one {
    top: 4%;
    right: 10%;
    width: 22rem;
    height: 22rem;
    transform: rotate(-18deg);
    animation: orbitFloat 28s linear infinite;
}

.orbit-two {
    bottom: -16%;
    left: 52%;
    width: 22rem;
    height: 22rem;
    border-color: rgba(201, 220, 255, 0.1);
    transform: rotate(22deg);
    animation: orbitFloatReverse 34s linear infinite;
}

.cosmic-moon {
    top: 14%;
    right: 24%;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 251, 240, 0.95), rgba(215, 232, 255, 0.88) 42%, rgba(139, 164, 215, 0.36) 72%, rgba(139, 164, 215, 0) 74%);
    box-shadow:
        0 0 24px rgba(202, 226, 255, 0.45),
        0 0 60px rgba(153, 173, 255, 0.16);
    filter: blur(0.2px);
    animation: moonPulse 12s ease-in-out infinite;
}

.stardust {
    inset: auto;
    border-radius: 999px;
}

.stardust-one,
.stardust-two {
    width: 52vw;
    height: 52vw;
    max-width: 40rem;
    max-height: 40rem;
    min-width: 18rem;
    min-height: 18rem;
    opacity: 0.35;
}

.stardust-one {
    top: -4%;
    right: 2%;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.95) 0 1px, transparent 2px),
        radial-gradient(circle at 52% 32%, rgba(255, 248, 232, 0.85) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 56%, rgba(180, 234, 255, 0.8) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 30% 72%, rgba(248, 223, 211, 0.85) 0 1px, transparent 2px),
        radial-gradient(circle at 64% 80%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px);
    animation: shimmer 14s linear infinite;
}

.stardust-two {
    bottom: -8%;
    left: 42%;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px),
        radial-gradient(circle at 42% 58%, rgba(150, 240, 228, 0.8) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 42%, rgba(232, 216, 255, 0.82) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 58% 80%, rgba(255, 245, 230, 0.8) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 74%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px);
    animation: shimmerReverse 18s linear infinite;
}

.stardust-three {
    top: 12%;
    left: 50%;
    width: 24rem;
    height: 24rem;
    opacity: 0.2;
    background:
        radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.95) 0 1px, transparent 2px),
        radial-gradient(circle at 34% 54%, rgba(214, 229, 255, 0.82) 0 1px, transparent 2px),
        radial-gradient(circle at 58% 14%, rgba(255, 230, 191, 0.8) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 84% 46%, rgba(220, 189, 255, 0.9) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px);
    animation: shimmer 20s linear infinite;
}

.hero-grid {
    position: relative;
    z-index: 1;
}

.hero-copy {
    color: #2d3345;
    text-shadow: 0 10px 28px rgba(255, 255, 255, 0.42);
    max-width: 42rem;
}

.hero-copy h1 {
    font-size: clamp(2.6rem, 4.6vw, 4.55rem);
    max-width: 16ch;
}

.hero-copy .eyebrow {
    color: #61759d;
}

.hero-copy .lead {
    color: rgba(51, 60, 81, 0.86);
}

.sanctuary-note {
    max-width: 30rem;
    justify-self: end;
    align-self: start !important;
    margin-top: 13rem !important;
    position: static;
}

.sanctuary-note p:last-child {
    margin-bottom: 0;
}

.hero-grid,
.split-layout,
.booking-layout,
.footer-grid {
    display: grid;
    gap: 2rem;
}

.hero-grid,
.split-layout,
.booking-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

h1 {
    margin: 0.5rem 0 1rem;
    font-size: clamp(3rem, 4vw, 5.4rem);
    line-height: 0.95;
    font-weight: 600;
}

h2 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    font-weight: 600;
}

h3 {
    margin: 0 0 0.75rem;
    font-size: 1.8rem;
    line-height: 1;
}

p {
    line-height: 1.7;
}

.lead {
    font-size: 1.1rem;
    max-width: 60ch;
}

.eyebrow,
.card-label {
    color: var(--sage-dark);
    font-weight: 700;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.button,
.button-secondary,
button,
input,
select,
textarea {
    font: inherit;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 1.5rem;
    border-radius: 999px;
    background: var(--seafoam);
    color: var(--seafoam-ink);
    border: 1px solid transparent;
    transition: transform 0.2s ease, background 0.2s ease;
    font-weight: 700;
}

.button:hover,
button:hover {
    transform: translateY(-1px);
}

.button-small {
    min-height: 44px;
    padding: 0 1rem;
}

.button-secondary {
    background: transparent;
    color: var(--seafoam-ink);
    border: 1px solid rgba(127, 177, 178, 0.55);
}

.hero-card,
.service-card,
.soft-panel,
.info-card,
.form-card,
.quote-panel {
    background: rgba(255, 253, 249, 0.76);
    border: 1px solid rgba(37, 69, 63, 0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero-card,
.soft-panel,
.quote-panel {
    padding: 2rem;
}

.hero-card {
    color: rgba(44, 52, 72, 0.94);
    background: linear-gradient(180deg, rgba(255, 251, 247, 0.74), rgba(250, 244, 237, 0.54));
    border: 1px solid rgba(255, 255, 255, 0.46);
    box-shadow: 0 24px 60px rgba(114, 131, 170, 0.18);
    backdrop-filter: blur(16px);
}

.hero-card .card-label {
    color: #7f719f;
}

.hero-card li {
    color: rgba(52, 60, 82, 0.88);
}

.hero-copy .button {
    background: var(--seafoam);
    color: var(--seafoam-ink);
    box-shadow: 0 18px 42px rgba(72, 121, 122, 0.24);
}

.hero-copy .button.button-secondary {
    color: #f6ead3;
    border-color: rgba(246, 234, 211, 0.44);
    background: rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(8px);
}

.home-intro {
    padding-top: 4rem;
}

.invitation-wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}

.invitation-copy {
    max-width: 46rem;
}

.home-intro .invitation-copy .eyebrow,
.cosmic-pathways .pathways-heading .eyebrow {
    color: #ead9bc;
}

.home-intro .invitation-copy h2,
.cosmic-pathways .pathways-heading h2 {
    color: #f6ead3;
}

.home-intro .invitation-copy p,
.cosmic-pathways .pathways-heading p {
    color: rgba(246, 234, 211, 0.88);
}

.invitation-glow {
    position: relative;
    min-height: 30rem;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.glow-ring,
.glow-core {
    position: relative;
    z-index: 1;
}

.glow-ring {
    position: absolute;
    width: min(31rem, 86vw);
    aspect-ratio: 1.15 / 1;
    border-radius: 50%;
    border: 1px solid rgba(228, 218, 192, 0.3);
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 247, 234, 0.04), rgba(255, 247, 234, 0) 64%);
    transform: rotate(-14deg);
}

.glow-ring::before,
.glow-ring::after {
    content: "";
    position: absolute;
    inset: 1.3rem;
    border-radius: 50%;
    pointer-events: none;
}

.glow-ring::before {
    border: 1px solid rgba(160, 186, 219, 0.26);
    transform: rotate(17deg) scale(0.9, 1.03);
}

.glow-ring::after {
    inset: auto auto 2.4rem 2.1rem;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 251, 243, 0.96), rgba(194, 214, 243, 0.88) 45%, rgba(194, 214, 243, 0) 72%);
    box-shadow:
        0 0 24px rgba(218, 229, 255, 0.28),
        0 0 44px rgba(145, 165, 218, 0.12);
}

.glow-core {
    width: min(23rem, 68vw);
    min-height: 20.5rem;
    padding: 4.2rem 3.35rem 3.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 48% 52% 49% 51% / 51% 47% 53% 49%;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 252, 244, 0.99) 0%, rgba(248, 241, 228, 0.97) 44%, rgba(237, 228, 214, 0.9) 72%, rgba(237, 228, 214, 0.55) 90%, rgba(237, 228, 214, 0.12) 100%);
    box-shadow:
        0 30px 60px rgba(40, 42, 70, 0.12),
        0 0 22px rgba(244, 235, 219, 0.18),
        inset 0 0 0 1px rgba(255, 253, 246, 0.28);
}

.glow-core::before,
.glow-core::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.glow-core::before {
    display: none;
}

.glow-core::after {
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.28), transparent 22%),
        radial-gradient(circle at 22% 72%, rgba(255, 247, 231, 0.16), transparent 18%),
        radial-gradient(circle at 78% 76%, rgba(127, 177, 178, 0.08), transparent 20%);
    opacity: 0.95;
}

.glow-core .card-label {
    color: #516d6f;
    margin-bottom: 1rem;
}

.soft-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.soft-list li {
    position: relative;
    padding: 0.2rem 0;
    font-size: 1.08rem;
    line-height: 1.5;
}

.soft-list li::before {
    content: none;
}

.pricing-block {
    margin: 1.35rem 0 1rem;
    padding: 1rem 1.1rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.38);
    border: 1px solid rgba(127, 177, 178, 0.24);
}

.pricing-label {
    margin: 0 0 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.76rem;
    font-weight: 700;
    color: #61759d;
}

.pricing-list {
    margin: 0;
    padding-left: 1.15rem;
}

.pricing-list li {
    margin-bottom: 0.65rem;
}

.pricing-list li:last-child {
    margin-bottom: 0;
}

.pricing-list-spacious {
    margin: 0 0 1.5rem;
}

.cosmic-pathways {
    position: relative;
    overflow: hidden;
}

.cosmic-pathways::before {
    content: "";
    position: absolute;
    inset: 8% 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(87, 105, 149, 0.18), transparent);
}

.pathways-heading {
    margin-bottom: 2.5rem;
}

.pathway-stream {
    display: grid;
    gap: 1.5rem;
}

.pathway-card {
    position: relative;
    width: min(100%, 44rem);
    padding: 2rem 2.1rem;
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.9), rgba(247, 241, 234, 0.84));
    border: 1px solid rgba(83, 104, 90, 0.08);
    box-shadow: 0 24px 55px rgba(37, 69, 63, 0.1);
}

.pathway-card::after {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(130, 121, 209, 0.95), rgba(130, 121, 209, 0.15));
    box-shadow: 0 0 18px rgba(130, 121, 209, 0.4);
    transform: translateY(-50%);
}

.pathway-card h3 {
    margin-left: 1.2rem;
}

.pathway-card p,
.pathway-card .text-link {
    margin-left: 1.2rem;
}

.pathway-card-1 {
    justify-self: start;
}

.pathway-card-2 {
    justify-self: center;
}

.pathway-card-3 {
    justify-self: end;
}

.sanctuary-section {
    padding-top: 4.5rem;
}

.sanctuary-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 2.5rem;
    align-items: start;
}

.sanctuary-panel {
    padding: 2.4rem;
    border-radius: 36px;
    background:
        linear-gradient(180deg, rgba(14, 22, 48, 0.95), rgba(36, 29, 58, 0.88)),
        radial-gradient(circle at top left, rgba(114, 166, 255, 0.18), transparent 24%);
    color: rgba(244, 246, 255, 0.95);
    box-shadow: 0 28px 70px rgba(14, 22, 48, 0.22);
}

.sanctuary-panel .eyebrow {
    color: rgba(176, 214, 255, 0.88);
}

.sanctuary-panel p {
    color: rgba(231, 235, 245, 0.88);
}

.sanctuary-panel .button-secondary {
    color: var(--seafoam-ink);
    border-color: rgba(127, 177, 178, 0.5);
    background: var(--seafoam);
}

.promise-list {
    display: grid;
    gap: 1rem;
}

.promise-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 28px;
    background: rgba(255, 253, 249, 0.72);
    border: 1px solid rgba(83, 104, 90, 0.08);
    box-shadow: 0 20px 48px rgba(37, 69, 63, 0.08);
}

.promise-item h3 {
    font-size: 1.45rem;
    margin-bottom: 0.35rem;
}

.promise-item p {
    margin: 0;
}

.promise-mark {
    width: 0.9rem;
    height: 0.9rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 149, 255, 0.95), rgba(114, 166, 255, 0.72));
    box-shadow: 0 0 20px rgba(151, 131, 242, 0.34);
}

.home-closing {
    padding-top: 4rem;
}

.home-closing-card {
    max-width: 60rem;
    text-align: center;
    padding: 3rem;
    border-radius: 40px;
    background:
        linear-gradient(180deg, rgba(255, 253, 249, 0.82), rgba(247, 241, 234, 0.86)),
        radial-gradient(circle at top, rgba(202, 190, 255, 0.12), transparent 36%);
    border: 1px solid rgba(83, 104, 90, 0.08);
    box-shadow: 0 26px 60px rgba(37, 69, 63, 0.1);
}

.page-hero-inner {
    position: relative;
    overflow: clip;
    min-height: 46rem;
    display: flex;
    align-items: center;
    padding: 6rem 0 4rem;
    background:
        radial-gradient(circle at 72% 42%, rgba(206, 227, 255, 0.6), transparent 18%),
        radial-gradient(circle at 82% 22%, rgba(224, 194, 255, 0.34), transparent 22%),
        radial-gradient(circle at 68% 72%, rgba(164, 227, 223, 0.28), transparent 22%),
        linear-gradient(90deg, rgba(248, 244, 238, 0.96) 0%, rgba(248, 244, 238, 0.84) 28%, rgba(197, 213, 239, 0.42) 58%, rgba(81, 92, 141, 0.42) 100%);
    border-bottom: 1px solid rgba(129, 140, 175, 0.12);
}

.page-hero-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../images/whispering-waters-hero-bg-wide.webp") 50% center / cover no-repeat;
    pointer-events: none;
}

.page-hero-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(248, 244, 238, 0.22) 0%, rgba(248, 244, 238, 0.1) 28%, rgba(14, 24, 52, 0) 48%, rgba(14, 24, 52, 0.28) 100%),
        radial-gradient(circle at 64% 30%, rgba(255, 251, 233, 0.28), transparent 14%),
        radial-gradient(circle at 74% 22%, rgba(202, 103, 255, 0.16), transparent 22%),
        radial-gradient(circle at 80% 58%, rgba(78, 214, 197, 0.12), transparent 24%),
        radial-gradient(circle at 52% 50%, rgba(255, 255, 255, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 22%, transparent 78%, rgba(135, 157, 211, 0.08)),
        radial-gradient(circle at 66% 48%, rgba(255, 251, 245, 0.18), transparent 18%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.page-hero-inner .narrow {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 2rem), var(--container));
    padding: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
}

.page-hero-inner > .narrow > .eyebrow {
    color: #61759d;
}

.page-hero-inner > .narrow > h1 {
    max-width: 20ch;
    color: #2d3345;
}

.page-hero-inner > .narrow > .lead {
    max-width: 35rem;
    color: rgba(51, 60, 81, 0.86);
}

.page-hero-inner ~ .section .eyebrow,
.page-hero-inner + .section .eyebrow {
    color: #ead9bc;
}

.page-hero-inner ~ .section .story-panel h2,
.page-hero-inner + .section .story-panel h2,
.page-hero-inner ~ .section .section-heading-soft h2,
.page-hero-inner + .section .section-heading-soft h2 {
    color: #f6ead3;
}

.page-hero-inner ~ .section .story-panel p,
.page-hero-inner + .section .story-panel p,
.page-hero-inner ~ .section .section-heading-soft p,
.page-hero-inner + .section .section-heading-soft p {
    color: rgba(246, 234, 211, 0.88);
}

.soft-panel-dreamy,
.soft-panel-dreamy p,
.soft-panel-dreamy li,
.info-card-dreamy,
.info-card-dreamy p,
.info-card-dreamy li,
.service-card-dreamy,
.service-card-dreamy p,
.service-card-dreamy li,
.form-card-dreamy,
.form-card-dreamy p,
.form-card-dreamy li,
.faq-item,
.faq-item p,
.faq-item li,
.quote-card,
.quote-card p,
.quote-card li,
.pricing-block,
.pricing-block p,
.pricing-block li {
    color: rgba(51, 60, 81, 0.86);
}

.section-heading-soft {
    margin-bottom: 2.6rem;
}

.section-heading-soft .eyebrow {
    color: #61759d;
}

.split-layout-soft {
    gap: 2.4rem;
    align-items: start;
}

.split-layout-about {
    align-items: center;
}

.about-image-wrap {
    display: flex;
    justify-content: center;
}

.about-image {
    width: min(100%, 30rem);
    border-radius: 34px;
    display: block;
    border: 1px solid rgba(134, 144, 176, 0.14);
    box-shadow: 0 28px 64px rgba(96, 106, 145, 0.14);
}

.story-panel {
    padding: 2.6rem 2.4rem 2.6rem 0;
    max-width: 42rem;
}

.story-panel h2,
.pathways-heading h2,
.section-heading-soft h2 {
    color: #2d3345;
}

.story-panel p,
.soft-panel-dreamy,
.info-card-dreamy,
.service-card-dreamy,
.form-card-dreamy,
.faq-item,
.quote-card {
    color: rgba(51, 60, 81, 0.86);
}

.soft-panel-dreamy .card-label,
.info-card-dreamy .card-label,
.service-card-dreamy .card-label,
.form-card-dreamy .card-label,
.faq-item summary {
    color: #61759d;
}

.story-panel-embrace {
    padding-top: 1rem;
}

.soft-panel-dreamy,
.info-card-dreamy,
.service-card-dreamy,
.form-card-dreamy {
    border: 1px solid rgba(134, 144, 176, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 252, 248, 0.92), rgba(244, 237, 231, 0.8)),
        radial-gradient(circle at top right, rgba(208, 193, 255, 0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(157, 225, 221, 0.12), transparent 24%);
    box-shadow:
        0 28px 64px rgba(96, 106, 145, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.soft-panel-dreamy {
    border-radius: 36px;
    padding: 2.35rem;
}

.info-card-dreamy,
.service-card-dreamy {
    border-radius: 34px;
    color: rgba(51, 60, 81, 0.86);
    text-align: center;
}

.service-card-dreamy h2 {
    font-size: clamp(1.85rem, 3vw, 2.35rem);
    color: #20383b !important;
}

.info-card-dreamy h2,
.soft-panel-dreamy h2 {
    color: #20383b;
}

.card-grid-dreamy {
    display: block;
    column-count: 2;
    column-gap: 1.8rem;
}

.card-grid-dreamy .service-card-dreamy {
    display: inline-flex;
    width: 100%;
    margin: 0 0 1.8rem;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.form-card-dreamy {
    border-radius: 36px;
    padding: 2.25rem;
}

.form-card-dreamy h2 {
    margin-bottom: 1.2rem;
    color: #20383b;
}

.form-card-dreamy input,
.form-card-dreamy select,
.form-card-dreamy textarea {
    border-color: rgba(131, 147, 180, 0.18);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.quote-card {
    text-align: left;
}

.quote-card blockquote {
    font-size: clamp(1.45rem, 2.3vw, 2rem);
}

.faq-item {
    background:
        linear-gradient(180deg, rgba(255, 252, 248, 0.94), rgba(244, 237, 231, 0.84)),
        radial-gradient(circle at top right, rgba(208, 193, 255, 0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(157, 225, 221, 0.1), transparent 24%);
    border: 1px solid rgba(134, 144, 176, 0.12);
    box-shadow: 0 18px 44px rgba(96, 106, 145, 0.08);
    border-radius: 26px;
    padding: 1.4rem 1.5rem;
}

.faq-item summary {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.7rem;
    font-weight: 600;
}

.three-up {
    gap: 1.8rem;
}

.three-up .info-card-dreamy:nth-child(2) {
    transform: translateY(2.2rem);
}

.closing-text {
    max-width: 44rem;
    margin: 0 auto 1.5rem;
}

.closing-actions {
    justify-content: center;
}

.feature-list,
.stack-list,
.mini-list {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
}

.feature-list li,
.stack-list li,
.mini-list li {
    margin-bottom: 0.7rem;
}

.section {
    padding: 2rem 0 4.5rem;
}

.section-accent {
    padding-top: 0;
}

.section-heading {
    margin-bottom: 2rem;
}

.card-grid,
.three-up {
    display: grid;
    gap: 1.5rem;
}

.card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card,
.info-card {
    padding: 1.75rem;
}

.service-card-large {
    display: flex;
    flex-direction: column;
}

.quote-panel {
    text-align: center;
}

blockquote {
    margin: 1rem 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.15;
}

.quote-name {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.text-link {
    display: inline-block;
    margin-top: auto;
    color: #3e4678;
    font-weight: 700;
}

.faq-list {
    display: grid;
    gap: 1rem;
}

.faq-item {
    background: rgba(255, 253, 249, 0.76);
    border: 1px solid rgba(37, 69, 63, 0.08);
    border-radius: var(--radius-small);
    padding: 1.2rem 1.4rem;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 700;
}

.faq-item p {
    margin-bottom: 0;
}

.form-card {
    padding: 2rem;
}

.form-card label {
    display: block;
    margin: 1rem 0 0.45rem;
    font-weight: 700;
}

.form-card input,
.form-card select,
.form-card textarea {
    width: 100%;
    border: 1px solid rgba(37, 69, 63, 0.18);
    border-radius: 16px;
    background: var(--white);
    padding: 0.95rem 1rem;
}

.form-card button {
    margin-top: 1.4rem;
}

.footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    padding: 2rem 0;
}

.site-footer {
    margin-top: 3rem;
    background: #7fb1b2;
    color: #20383b;
}

.site-footer a {
    color: #20383b;
}

.footer-title {
    margin: 0 0 0.7rem;
    font-size: 1.6rem;
}

.footer-bottom {
    padding: 1rem 0 2rem;
    border-top: 1px solid rgba(32, 56, 59, 0.18);
}

@keyframes driftOne {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(4%, 7%, 0) scale(1.08);
    }
}

@keyframes driftTwo {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(-6%, 5%, 0) scale(1.12);
    }
}

@keyframes driftThree {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(-8%, -10%, 0) scale(1.14);
    }
}

@keyframes pulseBloom {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.46;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.72;
    }
}

@keyframes shimmer {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        opacity: 0.2;
    }
    50% {
        opacity: 0.42;
    }
    100% {
        transform: translate3d(-3%, 4%, 0) rotate(6deg) scale(1.04);
        opacity: 0.2;
    }
}

@keyframes shimmerReverse {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        opacity: 0.18;
    }
    50% {
        opacity: 0.34;
    }
    100% {
        transform: translate3d(4%, -3%, 0) rotate(-5deg) scale(1.05);
        opacity: 0.18;
    }
}

@keyframes orbitFloat {
    0% {
        transform: rotate(-18deg) translate3d(0, 0, 0);
    }
    100% {
        transform: rotate(342deg) translate3d(0, 0, 0);
    }
}

@keyframes orbitFloatReverse {
    0% {
        transform: rotate(22deg) translate3d(0, 0, 0);
    }
    100% {
        transform: rotate(-338deg) translate3d(0, 0, 0);
    }
}

@keyframes moonPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.92;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aura,
    .stardust,
    .cosmic-orbit,
    .cosmic-moon {
        animation: none;
    }
}

@media (max-width: 980px) {
    .card-grid,
    .three-up,
    .hero-grid,
    .split-layout,
    .booking-layout,
    .footer-grid,
    .invitation-wrap,
    .sanctuary-layout {
        grid-template-columns: 1fr;
    }

    .site-nav {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 1rem;
        left: 1rem;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        border-radius: 24px;
        background: rgba(255, 253, 249, 0.98);
        box-shadow: var(--shadow);
    }

    .site-nav.open {
        display: flex;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .aura-one,
    .aura-two,
    .aura-three {
        width: 24rem;
        height: 24rem;
    }

    .aura-four {
        width: 12rem;
        height: 12rem;
    }

    .cosmic-moon {
        right: 8%;
        width: 5.5rem;
        height: 5.5rem;
    }

    .sanctuary-note {
        justify-self: start;
        margin-top: 0 !important;
    }

    .pathway-card,
    .pathway-card-1,
    .pathway-card-2,
    .pathway-card-3 {
        justify-self: stretch;
        width: 100%;
    }

    .invitation-glow {
        min-height: 22rem;
    }

    .hero-aurora {
        background-image: url("../images/whispering-waters-hero-bg.webp");
        background-position: 38% center;
    }

    .page-hero-inner .narrow {
        width: min(calc(100% - 2rem), 840px);
    }

    .page-hero-inner::before {
        background-image: url("../images/whispering-waters-hero-bg.webp");
        background-position: 38% center;
    }

    .three-up .info-card-dreamy:nth-child(2),
    .card-grid-dreamy .service-card-dreamy:nth-child(even) {
        transform: none;
    }

    .card-grid-dreamy {
        column-count: 1;
    }
}

@media (max-width: 640px) {
    .hero,
    .page-hero {
        padding: 0 0 3rem;
    }

    .button-row {
        flex-direction: column;
    }

    .hero {
        min-height: auto;
        display: block;
    }

    .hero-ethereal {
        background:
            linear-gradient(180deg, #d4deef 0%, #90a2cb 15rem, #f8f3eb 15rem, #f8f3eb 100%);
    }

    .hero-ethereal::before {
        opacity: 1;
        inset: 0 0 auto;
        height: 15rem;
    }

    .hero-ethereal::after {
        inset: 0 0 auto;
        height: 15rem;
    }

    .hero-aurora {
        inset: 0 0 auto;
        height: 15rem;
        background-image: url("../images/whispering-waters-hero-bg.webp");
        background-position: 42% center;
    }

    .hero-grid {
        display: block;
        padding-top: 17rem;
    }

    .hero-copy {
        max-width: none;
        text-shadow: none;
    }

    .hero-copy h1 {
        font-size: clamp(2.6rem, 4.6vw, 4.55rem);
        max-width: none;
        line-height: 1.2;
    }

    .stardust-one,
    .stardust-two {
        width: 22rem;
        height: 22rem;
    }

    .stardust-three,
    .orbit-two {
        display: none;
    }

    .glow-core {
        width: min(18rem, 78vw);
        min-height: 17rem;
        padding: 3.1rem 2rem 2.6rem;
    }

    .glow-ring {
        width: min(23rem, 92vw);
    }

    .glow-ring::after {
        width: 3.6rem;
        height: 3.6rem;
        left: 1.2rem;
        bottom: 1.7rem;
    }

    .soft-list li {
        font-size: 1rem;
    }

    .page-hero-inner {
        min-height: auto;
        display: block;
        padding: 0 0 3.2rem;
        background:
            linear-gradient(180deg, #d4deef 0%, #90a2cb 15rem, #f8f3eb 15rem, #f8f3eb 100%);
    }

    .page-hero-inner .narrow {
        width: min(calc(100% - 2rem), 100%);
        padding-top: 17rem;
    }

    .page-hero-inner > .narrow > h1 {
        font-size: clamp(2.6rem, 4.6vw, 4.55rem);
        line-height: 1.2;
    }

    .page-hero-inner::after {
        inset: 0 0 auto;
        height: 15rem;
    }

    .page-hero-inner::before {
        inset: 0 0 auto;
        height: 15rem;
        background-image: url("../images/whispering-waters-hero-bg.webp");
        background-position: 42% center;
    }

    .pathway-card {
        padding: 1.6rem;
    }

    .home-closing-card {
        padding: 2.2rem 1.4rem;
    }
}