/* ===========================================================================
   Home — long-scroll landing
   =========================================================================== */

.section {
    padding-block: var(--space-3xl);
}

.section__head {
    max-width: 46rem;
    margin-bottom: var(--space-2xl);
}

.section__head .eyebrow { margin-bottom: var(--space-md); }

.section__head--center {
    margin-inline: auto;
    text-align: center;
}

.section__title {
    font-size: var(--fs-3xl);
    font-weight: 400;
    line-height: 1.02;
}

.section__title em {
    font-style: italic;
    color: var(--color-primary);
}

.lead {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- HERO ----------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    color: var(--cream);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    background-image: url("/static/images/hero-embrace.jpg");
    background-size: cover;
    background-position: center 35%;
    transform: scale(1.05);
    animation: heroZoom 18s var(--ease) forwards;
}

@keyframes heroZoom {
    to { transform: scale(1); }
}

/* Filmic scrim — warm at the edges, dark at the foot for legibility */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, oklch(from var(--olive) calc(l - 0.1) c h / 0.82) 0%,
            oklch(from var(--olive) l c h / 0.18) 48%, transparent 78%),
        linear-gradient(to bottom, oklch(from var(--olive) calc(l - 0.1) c h / 0.5) 0%,
            transparent 22%),
        radial-gradient(120% 80% at 70% 20%, transparent 35%,
            oklch(from var(--olive) calc(l - 0.12) c h / 0.5) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 0 var(--space-lg) clamp(3rem, 8vh, 6rem);
}

.hero__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: oklch(from var(--cream) l c h / 0.85);
    margin-bottom: var(--space-lg);
    opacity: 0;
    animation: rise 0.9s var(--ease) 0.2s forwards;
}

.hero__title {
    font-size: var(--fs-4xl);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    max-width: 14ch;
    color: var(--cream);
    text-shadow: 0 1px 28px oklch(from var(--olive) calc(l - 0.06) c h / 0.55);
    opacity: 0;
    animation: rise 1s var(--ease) 0.35s forwards;
}

.hero__title .line-2 {
    display: block;
    color: oklch(from var(--cream) l c h / 0.82);
}

.hero__tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.4rem, 3.2vw, 2.2rem);
    margin-top: var(--space-md);
    color: var(--sage);
    opacity: 0;
    animation: rise 1s var(--ease) 0.55s forwards;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    opacity: 0;
    animation: rise 1s var(--ease) 0.75s forwards;
}

.hero__loc {
    font-size: var(--fs-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: oklch(from var(--cream) l c h / 0.8);
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: var(--space-lg);
    transform: translateX(-50%);
    z-index: 2;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: oklch(from var(--cream) l c h / 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.hero__scroll::after {
    content: "";
    width: 1px;
    height: 38px;
    background: linear-gradient(var(--cream), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ABOUT ---------------------------------------------------------------- */
.about {
    background-color: var(--bg-primary);
}

.about__grid {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
}

.about__grid > *,
.services__layout > * { min-width: 0; }

.about__portrait {
    position: relative;
}

.about__portrait img {
    width: 100%;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.about__portrait figcaption {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    background-color: oklch(from var(--cream) l c h / 0.92);
    color: var(--olive);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-sm);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius);
}

.about__body p {
    color: var(--text-secondary);
    font-size: var(--fs-lg);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.about__body p.drop::first-letter {
    font-family: var(--font-display);
    font-size: 3.6rem;
    float: left;
    line-height: 0.78;
    padding: 0.1em 0.12em 0 0;
    color: var(--color-primary);
}

.about__sign {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-xl);
    color: var(--text-primary);
    margin-top: var(--space-lg);
}

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xl);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--hairline);
}

.stat__num {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    color: var(--color-primary);
}

.stat__label {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- SERVICES ------------------------------------------------------------- */
.services {
    background-color: var(--bg-sage);
    color: var(--olive);
}

.services .section__title,
.services .lead { color: var(--olive); }

.services .lead { color: oklch(from var(--olive) calc(l + 0.12) c h); }

.price-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid oklch(from var(--olive) l c h / 0.22);
}

.price-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-md) var(--space-lg);
    align-items: baseline;
    padding-block: var(--space-xl);
    border-bottom: 1px solid oklch(from var(--olive) l c h / 0.22);
    transition: padding-inline 0.35s var(--ease);
}

.price-row:hover {
    padding-inline: var(--space-md);
}

.price-row__name {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 400;
    line-height: 1;
}

.price-row__desc {
    grid-column: 1 / 2;
    color: oklch(from var(--olive) calc(l + 0.16) c h);
    font-size: var(--fs-base);
    max-width: 48ch;
}

.price-row__price {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    color: var(--color-primary);
    white-space: nowrap;
}

.price-row__price small {
    font-size: var(--fs-sm);
    color: oklch(from var(--olive) calc(l + 0.2) c h);
    font-family: var(--font-sans);
}

.services__note {
    margin-top: var(--space-2xl);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-xl);
}

/* --- GALLERY -------------------------------------------------------------- */
.gallery {
    background-color: var(--bg-primary);
}

.gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.gallery__item {
    overflow: hidden;
    border-radius: var(--border-radius);
    position: relative;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
    filter: saturate(0.96);
}

.gallery__item:hover img {
    transform: scale(1.04);
    filter: saturate(1.05);
}

/* --- ENQUIRE -------------------------------------------------------------- */
.enquire {
    background-color: var(--bg-dark);
    color: var(--cream);
}

.enquire .section__title { color: var(--cream); }

.enquire__grid {
    display: grid;
    gap: var(--space-2xl);
}

/* Prevent grid items from blowing out the track on narrow screens */
.enquire__grid > * { min-width: 0; }

.enquire__intro .eyebrow { color: var(--sage); }

.enquire__intro p {
    color: var(--text-on-dark-muted);
    font-size: var(--fs-lg);
    line-height: 1.7;
    margin-top: var(--space-lg);
}

.enquire__contact {
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.enquire__contact a {
    color: var(--cream);
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 4.5vw, 1.6rem);
    overflow-wrap: anywhere;
}

.enquire__contact a:hover { color: var(--sage); }

/* Form on dark panel */
.enquire .form-group label { color: var(--sage); }

.enquire .form-group input,
.enquire .form-group textarea,
.enquire .form-group select {
    background-color: oklch(from var(--olive) calc(l + 0.06) c h);
    border-color: oklch(from var(--cream) l c h / 0.18);
    color: var(--cream);
}

.enquire .form-group input::placeholder,
.enquire .form-group textarea::placeholder {
    color: oklch(from var(--cream) calc(l - 0.3) c h);
}

.enquire .form-group input:focus,
.enquire .form-group textarea:focus,
.enquire .form-group select:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px oklch(from var(--sage) l c h / 0.2);
}

.form-row {
    display: grid;
    gap: 0 var(--space-lg);
}

/* ===========================================================================
   Responsive — tablet & up
   =========================================================================== */
@media (min-width: 720px) {
    .form-row { grid-template-columns: 1fr 1fr; }

    .gallery__grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 14vw;
        gap: var(--space-md);
    }
    /* asymmetric editorial arrangement of 3 frames */
    .gallery__item:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
    .gallery__item:nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 4; }
    .gallery__item:nth-child(3) { grid-column: 1 / 4; grid-row: 3 / 6; }
    .gallery__item:nth-child(4) { grid-column: 4 / 7; grid-row: 4 / 6; }
}

@media (min-width: 920px) {
    .about__grid {
        grid-template-columns: 0.85fr 1fr;
        gap: var(--space-3xl);
    }
    .about--reverse .about__portrait { order: 2; }

    .services__layout {
        display: grid;
        grid-template-columns: 0.7fr 1.3fr;
        gap: var(--space-3xl);
        align-items: start;
    }
    .services__layout .section__head { margin-bottom: 0; position: sticky; top: var(--header-height); }

    .enquire__grid {
        grid-template-columns: 1fr 1.1fr;
        gap: var(--space-3xl);
        align-items: start;
    }
}