:root {
    --pink: #FF84C3;
    --pink-deep: #C2367E;
    --plum: #3E1734;
    --teal: #8EC3CF;
    --teal-deep: #2E6E7C;
    --ink: #2F2A2E;
    --muted: #5E575C;
    --paper: #FFFFFF;
    --cream: #F7F3EF;
    --serif: "Marcellus", Georgia, "Times New Roman", serif;
    --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
    background-color: #7FA7B4;
    padding: 0 16px;
    -webkit-font-smoothing: antialiased;
}

/* Fixed castle photo behind everything, softened like the reference mockup. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(40, 52, 60, .38), rgba(40, 52, 60, .38)),
        url("/images/bg-castle.webp") center / cover no-repeat;
}

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

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.25; margin: 0 0 .6em; }

p { margin: 0 0 1.1em; }

a { color: var(--pink-deep); }

/* ---------- Header / footer ---------- */

.site-title {
    text-align: center;
    padding: 56px 0 40px;
}

.site-title a {
    color: #fff;
    text-decoration: none;
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(.85rem, 2.4vw, 1.15rem);
    letter-spacing: .35em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

.site-footer {
    text-align: center;
    color: #fff;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 32px 0 48px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.site-footer p { margin: 0; }

/* ---------- Card ---------- */

.card {
    max-width: 1040px;
    margin: 0 auto;
    background: var(--paper);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    overflow: hidden;
}

section { padding: clamp(40px, 7vw, 88px) clamp(20px, 6vw, 80px); }

.eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--pink-deep);
    margin-bottom: .8em;
}

h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--plum); }

.btn {
    display: inline-block;
    margin-top: .6em;
    padding: .75em 2.2em;
    border-radius: 999px;
    background: var(--pink-deep);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, transform .2s;
}

.btn:hover, .btn:focus-visible { background: var(--plum); transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.btn-lg { font-size: .85rem; padding: 1em 2.6em; }

.photo-badge {
    position: absolute;
    top: -22px;
    right: -22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.photo-badge svg { width: 28px; height: 28px; fill: var(--teal); }

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

.hero { padding: 0; }

.hero-photo { position: relative; }

.hero-photo img {
    width: 100%;
    aspect-ratio: 1040 / 340;
    object-fit: cover;
    object-position: center 42%;
}

.hero-vertical {
    position: absolute;
    top: 16px;
    left: 12px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.hero-band {
    position: relative;
    background: var(--pink);
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    min-height: 170px;
    padding: 28px clamp(20px, 6vw, 80px) 32px;
}

.headshot {
    position: absolute;
    left: clamp(20px, 6vw, 70px);
    bottom: 30px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 6px solid #fff;
    box-shadow: 0 0 0 4px var(--pink-deep), 0 12px 30px rgba(0, 0, 0, .2);
    object-fit: cover;
}

.hero-text {
    grid-column: 2;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 3px rgba(62, 23, 52, .45);
}

.hero-text h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .3em; }

.tagline { margin: 0 auto; max-width: 30em; font-size: 1.05rem; font-weight: 500; text-wrap: balance; }

.nowrap { white-space: nowrap; }

/* ---------- Bio ---------- */

.bio {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: start;
}

.bio-text { font-size: .95rem; color: var(--muted); }

.bio-text blockquote {
    margin: 1.6em 0;
    padding: .2em 0 .2em 1.2em;
    border-left: 3px solid var(--pink);
    font-family: var(--serif);
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--plum);
}

.bio-photo { position: sticky; top: 32px; margin: 0; }

.bio-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- Destination banner ---------- */

.destinations {
    background: var(--teal);
    overflow: hidden;
    padding: 11px 0;
    white-space: nowrap;
}

.destinations-track { display: flex; width: max-content; animation: scroll 40s linear infinite; }

.destinations ul { display: flex; margin: 0; padding: 0; list-style: none; }

.destinations li {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--plum);
}

.destinations li::after { content: "\2726"; margin: 0 1.6em; color: #fff; }

@keyframes scroll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .destinations-track { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------- How I work ---------- */

.how { background: var(--cream); }

.how-intro {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: center;
    margin-bottom: clamp(40px, 6vw, 72px);
}

.how-intro h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }

.how-intro p { color: var(--muted); font-size: .95rem; }

.how-intro .emphasis { color: var(--ink); font-weight: 600; }

.how-photo { position: relative; margin: 0; }

.how-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.steps-heading { text-align: center; font-size: 1.4rem; color: var(--plum); margin-bottom: 1.6em; }

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.steps li {
    counter-increment: step;
    position: relative;
    background: #fff;
    padding: 56px 28px 24px;
    border-top: 4px solid var(--pink);
}

.steps li::before {
    content: counter(step);
    position: absolute;
    top: 16px;
    left: 28px;
    font-family: var(--serif);
    font-size: 1.6rem;
    color: var(--pink-deep);
}

.steps h4 { font-size: 1.15rem; color: var(--plum); }

.steps p { margin: 0; font-size: .88rem; color: var(--muted); }

/* ---------- Trip request ---------- */

.request {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: center;
}

.request-text p:not(.eyebrow) { color: var(--muted); }

.request-photo { margin: 0; }

.request-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Responsive ---------- */

@media (max-width: 820px) {
    .hero-band {
        grid-template-columns: 1fr;
        padding-top: 120px;
        text-align: center;
    }

    .headshot {
        left: 50%;
        bottom: auto;
        top: -100px;
        transform: translateX(-50%);
        width: 190px;
        height: 190px;
    }

    .hero-text { grid-column: 1; }

    .hero-photo img { aspect-ratio: 16 / 9; }

    .bio, .how-intro, .request { grid-template-columns: 1fr; }

    .bio-photo { position: relative; top: 0; max-width: 420px; }

    .how-photo, .request-photo { max-width: 420px; }

    .request-photo { order: -1; }

    .photo-badge { right: -12px; }
}