@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');


/* =========================================================
   COLOUR SYSTEM
========================================================= */

:root {

    --obsidian: #11110f;
    --charcoal: #24231f;

    --ivory: #f3f0e8;
    --paper: #e7e2d8;

    --stone: #aaa49a;
    --muted: #747067;

    --bronze: #9a7654;

    --border: #d4cfc4;

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    background: var(--ivory);
    color: var(--obsidian);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    line-height: 1.5;

    overflow-x: hidden;

}


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


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


/* =========================================================
   DEMO NOTICE
========================================================= */

.demo-notice {

    width: 100%;

    padding: 9px 15px;

    text-align: center;

    background: #e4dfd5;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.08);

    color: #514d45;

    font-family: monospace;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.13em;

}


.demo-dot {

    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 8px;

    background: var(--bronze);

    border-radius: 50%;

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 100;

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0
        clamp(20px, 5vw, 70px);

    background:
        rgba(243, 240, 232, 0.92);

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        var(--border);

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 11px;

}


.brand-mark {

    width: 41px;

    height: 41px;

    display: grid;

    place-items: center;

    border:
        1px solid
        var(--obsidian);

    font-family: monospace;

    font-size: 11px;

    font-weight: 700;

}


.brand-text {

    display: flex;

    flex-direction: column;

}


.brand-name {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.18em;

}


.brand-sub {

    margin-top: 1px;

    color: var(--muted);

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 0.13em;

}


/* =========================================================
   NAVIGATION
========================================================= */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 28px;

    font-size: 13px;

}


.desktop-nav a {

    color: var(--muted);

    transition:
        color 180ms ease;

}


.desktop-nav a:hover,
.desktop-nav .active {

    color: var(--obsidian);

}


.nav-book {

    padding:
        11px
        17px;

    color: #fff !important;

    background: var(--obsidian);

    border-radius: 999px;

}


.menu-button {

    display: none;

    width: 42px;
    height: 42px;

    border: 0;

    background: transparent;

    cursor: pointer;

}


.menu-button span {

    display: block;

    width: 24px;

    height: 1px;

    margin: 6px auto;

    background: var(--obsidian);

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    min-height:
        calc(92vh - 82px);

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    color: #fff;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(154,118,84,.25),
            transparent 26%
        ),

        linear-gradient(
            135deg,
            #121210 0%,
            #25231f 50%,
            #151513 100%
        );

}


.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.025) 50%,
            transparent 100%
        );

}


.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .16;

    background-image:

        repeating-linear-gradient(
            112deg,
            transparent 0 70px,
            rgba(255,255,255,.08) 72px 73px
        );

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(0,0,0,.32)
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    padding:
        clamp(50px, 9vw, 120px);

}


.eyebrow {

    margin-bottom: 18px;

    color: var(--muted);

    font-family: monospace;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .17em;

}


.eyebrow.light {

    color: #a9a39a;

}


.hero h1 {

    max-width: 850px;

    margin-bottom: 30px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            56px,
            8.5vw,
            122px
        );

    font-weight: 600;

    line-height: .88;

    letter-spacing: -.065em;

}


.hero h1 span {

    display: block;

    color: #cfc9bd;

    font-family: Georgia, serif;

    font-weight: 400;

}


.hero-description {

    max-width: 560px;

    color: #bcb6ab;

    font-size: 18px;

}


.hero-actions {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 35px;

}


.primary-button,
.dark-button {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding:
        15px
        20px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;

    transition:
        transform 200ms ease,
        box-shadow 200ms ease;

}


.primary-button {

    color: var(--obsidian);

    background: var(--ivory);

}


.primary-button:hover,
.dark-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 30px
        rgba(0,0,0,.18);

}


.secondary-link {

    color: #bcb7ae;

    font-size: 13px;

    font-weight: 600;

}


.secondary-link span {

    margin-left: 8px;

}


.hero-rating {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 38px;

    color: #aaa59d;

    font-size: 12px;

}


.stars {

    color: var(--bronze);

    letter-spacing: .15em;

}


.hero-rating strong {

    color: #fff;

}


.hero-info {

    position: absolute;

    right: 7vw;

    bottom: 9vh;

    z-index: 5;

    min-width: 190px;

    padding: 20px;

    display: grid;

    gap: 7px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid
        rgba(255,255,255,.13);

    backdrop-filter: blur(18px);

}


.hero-info p {

    color: #99948b;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: .14em;

}


.hero-info strong {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 22px;

}


.hero-info span {

    color: #aaa59d;

    font-size: 12px;

}


.hero-info a {

    margin-top: 10px;

    color: #d0cbc2;

    font-size: 11px;

}


.hero-corner {

    position: absolute;

    right: 50px;

    top: 45px;

    z-index: 5;

    color: #88837a;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: .1em;

}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.section {

    max-width: 1280px;

    margin: 0 auto;

    padding:
        clamp(85px, 10vw, 155px)
        clamp(20px, 6vw, 90px);

}


.section-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 45px;

}


.section-label span {

    color: var(--bronze);

    font-family: monospace;

    font-size: 10px;

}


.section-label p {

    margin: 0;

    color: var(--muted);

    font-family: monospace;

    font-size: 10px;

    letter-spacing: .16em;

}


.intro-layout {

    display: grid;

    grid-template-columns:
        1.25fr
        .75fr;

    gap: 10vw;

    align-items: end;

}


.intro-layout h2 {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            47px,
            6vw,
            82px
        );

    line-height: .94;

    letter-spacing: -.06em;

}


.intro-layout h2 em {

    display: block;

    margin-top: 4px;

    font-family: Georgia, serif;

    font-weight: 400;

}


.intro-copy {

    max-width: 450px;

}


.intro-copy p {

    margin-bottom: 22px;

    color: var(--muted);

    font-size: 16px;

}


/* =========================================================
   SERVICES
========================================================= */

.services-preview {

    color: #f4f1e9;

    background: var(--obsidian);

}


.service-section {

    max-width: 1280px;

}


.section-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 55px;

}


.section-heading h2 {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            46px,
            5.8vw,
            75px
        );

    line-height: .93;

    letter-spacing: -.055em;

}


.section-heading h2 em {

    font-family: Georgia, serif;

    font-weight: 400;

}


.section-link {

    padding-bottom: 8px;

    color: #aaa59b;

    font-size: 12px;

}


.service-list {

    border-top:
        1px solid
        rgba(255,255,255,.13);

}


.service-item {

    display: grid;

    grid-template-columns:
        70px
        1fr
        60px;

    align-items: center;

    gap: 20px;

    padding:
        34px
        5px;

    border-bottom:
        1px solid
        rgba(255,255,255,.13);

    transition:
        padding 220ms ease,
        background 220ms ease;

}


.service-item:hover {

    padding-left: 18px;

    padding-right: 18px;

    background:
        rgba(255,255,255,.035);

}


.service-number {

    color: #766f64;

    font-family: monospace;

    font-size: 10px;

}


.service-main h3 {

    margin-bottom: 5px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 31px;

}


.service-main p {

    color: #918c83;

    font-size: 13px;

}


.service-arrow {

    color: var(--bronze);

    font-size: 20px;

    text-align: right;

}


/* =========================================================
   PHILOSOPHY
========================================================= */

.philosophy-grid {

    display: grid;

    grid-template-columns:
        1.25fr
        .75fr;

    gap: 10vw;

}


.philosophy-grid h2 {

    max-width: 750px;

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            48px,
            6vw,
            84px
        );

    line-height: .93;

    letter-spacing: -.06em;

}


.philosophy-grid h2 em {

    display: block;

    font-family: Georgia, serif;

    font-weight: 400;

}


.philosophy-side {

    max-width: 420px;

    padding-top: 15px;

}


.line {

    width: 100%;

    height: 1px;

    margin-bottom: 25px;

    background: var(--border);

}


.philosophy-side p {

    color: var(--muted);

    font-size: 16px;

}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    max-width: 1180px;

    margin:
        0
        auto
        80px;

    padding:
        clamp(75px, 9vw, 120px)
        25px;

    text-align: center;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #e8e2d7,
            #dbd4c7
        );

}


.final-cta h2 {

    margin-bottom: 35px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            55px,
            7vw,
            103px
        );

    line-height: .9;

    letter-spacing: -.065em;

}


.final-cta h2 em {

    display: block;

    font-family: Georgia, serif;

    font-weight: 400;

}


.dark-button {

    color: #fff;

    background: var(--obsidian);

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    padding:
        45px
        clamp(20px, 6vw, 90px);

    border-top:
        1px solid
        var(--border);

}


.footer-top {

    display: flex;

    justify-content: space-between;

    align-items: start;

    gap: 30px;

}


.footer-links {

    display: flex;

    gap: 25px;

    color: var(--muted);

    font-size: 12px;

}


.footer-links a:hover {

    color: var(--obsidian);

}


.footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 45px;

    padding-top: 16px;

    border-top:
        1px solid
        var(--border);

    color: #8b867d;

    font-family: monospace;

    font-size: 9px;

}


/* =========================================================
   ANIMATIONS
========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity 750ms ease,
        transform 750ms ease;

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


.delay-1 {

    transition-delay:
        100ms;

}


.delay-2 {

    transition-delay:
        180ms;

}


.delay-3 {

    transition-delay:
        260ms;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .desktop-nav {

        display: none;

        position: absolute;

        left: 0;
        right: 0;

        top: 82px;

        padding: 20px;

        flex-direction: column;

        align-items: stretch;

        gap: 16px;

        background: var(--ivory);

        border-bottom:
            1px solid
            var(--border);

    }


    .desktop-nav.open {

        display: flex;

    }


    .menu-button {

        display: block;

    }


    .hero-info {

        display: none;

    }


    .intro-layout,
    .philosophy-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .footer-top,
    .footer-bottom {

        flex-direction: column;

    }

}


@media (max-width: 600px) {

    .hero-content {

        padding:
            55px
            22px
            65px;

    }


    .hero h1 {

        font-size: 57px;

    }


    .hero-description {

        font-size: 16px;

    }


    .hero-actions {

        flex-direction: column;

        align-items: flex-start;

    }


    .hero-rating {

        flex-wrap: wrap;

    }


    .hero-corner {

        right: 20px;

        top: 25px;

    }


    .service-item {

        grid-template-columns:
            38px
            1fr
            30px;

        gap: 12px;

        padding:
            28px
            0;

    }


    .service-main h3 {

        font-size: 25px;

    }


    .section-heading {

        flex-direction: column;

        align-items: flex-start;

    }


    .footer-links {

        flex-wrap: wrap;

    }

}

/* =========================================================
   SERVICES PAGE
========================================================= */

.services-hero {

    position: relative;

    min-height:
        65vh;

    display: flex;

    align-items: flex-end;

    padding:
        clamp(55px, 9vw, 120px)
        clamp(20px, 6vw, 90px);

    overflow: hidden;

    color: #fff;

    background:

        radial-gradient(
            circle at 78% 24%,
            rgba(154,118,84,.22),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #11110f,
            #292722
        );

}


.services-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .12;

    background:

        repeating-linear-gradient(
            112deg,
            transparent 0 70px,
            rgba(255,255,255,.08) 72px 73px
        );

}


.services-hero-content {

    position: relative;

    z-index: 2;

}


.services-hero h1 {

    margin-bottom: 25px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            60px,
            8vw,
            115px
        );

    line-height: .88;

    letter-spacing: -.065em;

}


.services-hero h1 span {

    display: block;

    color: #cbc5ba;

    font-family: Georgia, serif;

    font-weight: 400;

}


.services-hero p:last-child {

    color: #aaa59c;

    font-size: 17px;

}


.services-hero-number {

    position: absolute;

    right: 50px;

    top: 45px;

    color: #858078;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: .1em;

}


/* INTRO */

.service-intro-grid {

    display: grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap: 10vw;

    align-items: end;

}


.service-intro-grid h2 {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            46px,
            5.8vw,
            78px
        );

    line-height: .94;

    letter-spacing: -.06em;

}


.service-intro-grid h2 em {

    display: block;

    font-family: Georgia, serif;

    font-weight: 400;

}


.service-intro-grid > p {

    max-width: 420px;

    margin: 0;

    color: var(--muted);

    font-size: 16px;

}


/* SERVICE CATALOG */

.service-catalog {

    color: #f3f0e8;

    background: var(--obsidian);

}


.service-catalog-inner {

    max-width: 1280px;

    margin: 0 auto;

    padding:
        20px
        clamp(20px, 6vw, 90px)
        80px;

}


.catalog-item {

    display: grid;

    grid-template-columns:
        70px
        1fr
        60px;

    gap: 30px;

    padding:
        48px
        0;

    border-top:
        1px solid
        rgba(255,255,255,.13);

    transition:
        padding-left 240ms ease,
        background 240ms ease;

}


.catalog-item:last-child {

    border-bottom:
        1px solid
        rgba(255,255,255,.13);

}


.catalog-item:hover {

    padding-left: 18px;

    background:
        rgba(255,255,255,.025);

}


.catalog-number {

    padding-top: 7px;

    color: #706b62;

    font-family: monospace;

    font-size: 10px;

}


.catalog-content {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 40px;

}


.catalog-tag {

    margin-bottom: 13px;

    color: var(--bronze);

    font-family: monospace;

    font-size: 9px;

    letter-spacing: .14em;

}


.catalog-content h2 {

    margin-bottom: 10px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            38px,
            5vw,
            68px
        );

    line-height: .95;

    letter-spacing: -.055em;

}


.catalog-description {

    max-width: 560px;

    color: #938e85;

    font-size: 14px;

}


.catalog-meta {

    display: flex;

    align-items: center;

    gap: 13px;

    color: #777169;

    font-family: monospace;

    font-size: 9px;

    white-space: nowrap;

}


.catalog-meta strong {

    color: #f3f0e8;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 27px;

}


.catalog-arrow {

    align-self: center;

    color: var(--bronze);

    font-size: 22px;

    transition:
        transform 200ms ease;

}


.catalog-item:hover .catalog-arrow {

    transform:
        translate(4px, -4px);

}


/* EXPERIENCE STRIP */

.experience-strip {

    background: #e5dfd4;

}


.experience-inner {

    max-width: 1280px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

}


.experience-block {

    padding:
        50px
        clamp(20px, 5vw, 60px);

    border-right:
        1px solid
        rgba(0,0,0,.12);

}


.experience-block:last-child {

    border-right: 0;

}


.experience-block span {

    display: block;

    margin-bottom: 35px;

    color: var(--bronze);

    font-family: monospace;

    font-size: 10px;

}


.experience-block strong {

    display: block;

    margin-bottom: 7px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 24px;

    letter-spacing: .04em;

}


.experience-block p {

    margin: 0;

    color: var(--muted);

    font-size: 13px;

}


/* SERVICES MOBILE */

@media (max-width: 800px) {

    .service-intro-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .catalog-item {

        grid-template-columns:
            35px
            1fr
            30px;

        gap: 12px;

    }


    .catalog-content {

        display: block;

    }


    .catalog-meta {

        margin-top: 25px;

    }


    .experience-inner {

        grid-template-columns: 1fr;

    }


    .experience-block {

        border-right: 0;

        border-bottom:
            1px solid
            rgba(0,0,0,.12);

    }


    .experience-block:last-child {

        border-bottom: 0;

    }

}


@media (max-width: 600px) {

    .services-hero h1 {

        font-size: 57px;

    }


    .services-hero-number {

        top: 25px;

        right: 20px;

    }


    .catalog-item {

        padding: 38px 0;

    }


    .catalog-content h2 {

        font-size: 42px;

    }

}

/* =========================================================
   GALLERY PAGE
========================================================= */

.gallery-hero {

    position: relative;

    min-height: 67vh;

    display: flex;

    align-items: flex-end;

    padding:
        clamp(55px, 9vw, 120px)
        clamp(20px, 6vw, 90px);

    overflow: hidden;

    color: #fff;

    background:

        radial-gradient(
            circle at 75% 25%,
            rgba(154,118,84,.25),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #11110f,
            #292722
        );

}


.gallery-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .12;

    background:

        repeating-linear-gradient(
            110deg,
            transparent 0 75px,
            rgba(255,255,255,.08) 77px 78px
        );

}


.gallery-hero-content {

    position: relative;

    z-index: 2;

}


.gallery-hero h1 {

    margin-bottom: 25px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            60px,
            8vw,
            115px
        );

    line-height: .88;

    letter-spacing: -.065em;

}


.gallery-hero h1 span {

    display: block;

    color: #cbc5ba;

    font-family: Georgia, serif;

    font-weight: 400;

}


.gallery-hero-content > p:last-child {

    max-width: 560px;

    color: #aaa59c;

    font-size: 17px;

}


.gallery-page-number {

    position: absolute;

    top: 45px;

    right: 50px;

    color: #858078;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: .1em;

}


/* =========================================================
   GALLERY INTRO
========================================================= */

.gallery-intro-grid {

    display: grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap: 10vw;

    align-items: end;

}


.gallery-intro-grid h2 {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            48px,
            6vw,
            82px
        );

    line-height: .92;

    letter-spacing: -.06em;

}


.gallery-intro-grid h2 em {

    display: block;

    font-family: Georgia, serif;

    font-weight: 400;

}


.gallery-intro-grid > p {

    max-width: 420px;

    color: var(--muted);

    font-size: 16px;

}


/* =========================================================
   VISUAL GALLERY
========================================================= */

.visual-gallery {

    padding:
        0
        clamp(20px, 4vw, 60px)
        100px;

}


.gallery-grid-large {

    display: grid;

    grid-template-columns:
        1.45fr
        .75fr
        .75fr;

    grid-auto-rows:
        320px;

    gap: 14px;

    max-width: 1450px;

    margin: 0 auto;

}


.gallery-image {

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background-size: cover;

    background-position: center;

    cursor: pointer;

    transition:
        transform 500ms cubic-bezier(.2,.7,.2,1);

}


.gallery-image::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.45)
        );

    z-index: 1;

}


.gallery-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(154,118,84,.18);

    opacity: 0;

    transition:
        opacity 400ms ease;

}


.gallery-image:hover {

    transform:
        scale(1.012);

}


.gallery-image:hover::after {

    opacity: 1;

}


.image-label {

    position: absolute;

    z-index: 3;

    left: 22px;

    bottom: 20px;

    color: #f3f0e8;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: .16em;

}


/* =========================================================
   CONCEPTUAL IMAGE TREATMENT
   Temporary until real approved photos are added.
========================================================= */

.image-one {

    grid-row: span 2;

    background:

        linear-gradient(
            145deg,
            #141311 0%,
            #4a433b 48%,
            #b0a18d 100%
        );

}


.image-two {

    background:

        linear-gradient(
            135deg,
            #35312b,
            #8b8376
        );

}


.image-three {

    background:

        linear-gradient(
            135deg,
            #191816,
            #5d574f
        );

}


.image-four {

    background:

        linear-gradient(
            135deg,
            #9d9589,
            #282623
        );

}


.image-five {

    grid-column: span 2;

    background:

        linear-gradient(
            120deg,
            #292621,
            #777065,
            #181715
        );

}


.image-six {

    background:

        linear-gradient(
            145deg,
            #625c52,
            #1d1b18
        );

}


/* =========================================================
   STATEMENT
========================================================= */

.gallery-statement {

    padding-top: 80px;

    padding-bottom: 150px;

}


.statement {

    max-width: 900px;

}


.statement h2 {

    margin-bottom: 40px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            50px,
            6vw,
            85px
        );

    line-height: .92;

    letter-spacing: -.06em;

}


.statement h2 em {

    display: block;

    font-family: Georgia, serif;

    font-weight: 400;

}


.statement-copy {

    max-width: 530px;

    margin-left: auto;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.7;

}


/* =========================================================
   GALLERY MOBILE
========================================================= */

@media (max-width: 900px) {

    .gallery-intro-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .gallery-grid-large {

        grid-template-columns:
            1fr
            1fr;

        grid-auto-rows:
            300px;

    }


    .image-one {

        grid-row: span 1;

    }


    .image-five {

        grid-column: span 2;

    }


    .statement-copy {

        margin-left: 0;

    }

}


@media (max-width: 600px) {

    .gallery-hero {

        min-height: 58vh;

    }


    .gallery-hero h1 {

        font-size: 56px;

    }


    .gallery-page-number {

        top: 25px;

        right: 20px;

    }


    .gallery-grid-large {

        grid-template-columns: 1fr;

        grid-auto-rows: 320px;

    }


    .image-five {

        grid-column: span 1;

    }


    .gallery-image {

        border-radius: 17px;

    }

}

/* =========================================================
   SINGLE-PAGE CRISPY CUTS — MERGED SECTIONS
========================================================= */

/* ---------- GALLERY ---------- */

.gallery-section {
    background: var(--ivory);
}

.gallery-inner {
    padding-bottom: 120px;
}

.gallery-heading-copy {
    max-width: 320px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr;
    grid-auto-rows: 300px;
    gap: 14px;
}

.gallery-image {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    border-radius: 22px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition:
        transform .5s cubic-bezier(.2,.7,.2,1),
        filter .4s ease;
}

.gallery-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(0,0,0,.48)
        );
}

.gallery-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(154,118,84,.16);
    opacity: 0;
    transition: opacity .4s ease;
}

.gallery-image:hover {
    transform: scale(1.015);
    filter: saturate(.95);
}

.gallery-image:hover::after {
    opacity: 1;
}

.gallery-image > span {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 18px;

    color: #f5f1e8;

    font-family: monospace;
    font-size: 9px;
    letter-spacing: .16em;
}

.image-one {
    grid-row: span 2;

    background:
        linear-gradient(
            145deg,
            #12110f 0%,
            #4c453c 48%,
            #b2a28d 100%
        );
}

.image-two {
    background:
        linear-gradient(
            135deg,
            #39342e,
            #90877a
        );
}

.image-three {
    background:
        linear-gradient(
            135deg,
            #1c1a17,
            #625c53
        );
}

.image-four {
    background:
        linear-gradient(
            135deg,
            #a69c8e,
            #292622
        );
}

.image-five {
    grid-column: span 2;

    background:
        linear-gradient(
            120deg,
            #25221e,
            #786f62,
            #171613
        );
}

.image-six {
    background:
        linear-gradient(
            145deg,
            #625b50,
            #201e1a
        );
}


/* ---------- ABOUT ---------- */

.about-section {
    padding-bottom: 120px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 10vw;
    align-items: end;
}

.about-heading h2 {
    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            48px,
            6vw,
            84px
        );

    line-height: .92;
    letter-spacing: -.06em;
}

.about-heading h2 em {
    display: block;
    font-family: Georgia, serif;
    font-weight: 400;
}

.about-copy {
    max-width: 460px;
}

.about-line {
    width: 100%;
    height: 1px;
    margin-bottom: 25px;
    background: var(--border);
}

.about-copy p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 20px;
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 85px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.experience-card {
    padding: 36px 28px;
    border-right: 1px solid var(--border);
}

.experience-card:last-child {
    border-right: 0;
}

.experience-card span {
    display: block;
    margin-bottom: 35px;
    color: var(--bronze);
    font-family: monospace;
    font-size: 10px;
}

.experience-card strong {
    display: block;
    margin-bottom: 8px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 24px;
    letter-spacing: .04em;
}

.experience-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}


/* ---------- REVIEWS ---------- */

.reviews-section {
    background: var(--obsidian);
    color: var(--ivory);
}

.reviews-section .section-label p {
    color: #8f8a81;
}

.reviews-section .section-label span {
    color: var(--bronze);
}

.review-layout {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 10vw;
    align-items: center;
}

.review-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 9px;
}

.big-stars {
    width: 100%;
    margin-bottom: 12px;

    color: var(--bronze);

    font-size: 22px;
    letter-spacing: .15em;
}

.review-rating strong {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 72px;
    line-height: .8;
}

.review-rating > span:not(.big-stars) {
    color: #aaa59d;
    font-size: 14px;
}

.review-rating small {
    width: 100%;
    margin-top: 13px;

    color: #8e8a82;

    font-size: 11px;
}

.review-quote {
    max-width: 720px;
}

.quote-mark {
    margin-bottom: 8px;
    color: #716b62;
    font-family: Georgia, serif;
    font-size: 90px;
    line-height: .4;
}

.review-quote blockquote {
    margin: 0 0 22px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            38px,
            5vw,
            69px
        );

    line-height: .95;
    letter-spacing: -.055em;
}

.review-quote small {
    color: #8f8a82;
    font-size: 12px;
}


/* ---------- BOOKING ---------- */

.booking-section {
    background: #e5dfd4;
}

.booking-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 55px;
}

.booking-heading h2 {
    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            50px,
            6vw,
            84px
        );

    line-height: .92;
    letter-spacing: -.06em;
}

.booking-heading h2 em {
    display: block;
    font-family: Georgia, serif;
    font-weight: 400;
}

.booking-heading p {
    max-width: 360px;
    margin: 0;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.booking-form {
    max-width: 980px;
}

.form-row {
    margin-bottom: 22px;
}

.form-row.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.booking-form label {
    display: block;
}

.booking-form label > span {
    display: block;
    margin-bottom: 9px;

    color: #6e6961;

    font-family: monospace;
    font-size: 9px;
    letter-spacing: .13em;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
    width: 100%;

    padding: 17px 16px;

    color: var(--obsidian);

    border:
        1px solid
        #c9c1b5;

    border-radius: 12px;

    outline: none;

    background:
        rgba(243,240,232,.55);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    border-color: var(--bronze);

    box-shadow:
        0 0 0 3px
        rgba(154,118,84,.09);
}

.booking-form textarea {
    min-height: 140px;
    resize: vertical;
}

.booking-submit {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-top: 8px;

    padding: 16px 22px;

    border: 0;
    border-radius: 999px;

    color: #fff;
    background: var(--obsidian);

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.booking-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(0,0,0,.14);
}

.form-note {
    margin-top: 14px;
    color: #847e74;
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .05em;
}

.booking-success {
    margin-top: 18px;
    max-width: 600px;

    padding: 15px 16px;

    border:
        1px solid
        rgba(60,55,48,.2);

    border-radius: 12px;

    color: #48433b;

    background:
        rgba(255,255,255,.28);

    font-family: monospace;
    font-size: 10px;
}


/* ---------- CONTACT ---------- */

.contact-section {
    background: var(--ivory);
}

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

.contact-card {
    min-height: 310px;

    display: flex;
    flex-direction: column;

    padding: 28px;

    border:
        1px solid
        var(--border);

    border-radius: 20px;

    background:
        rgba(255,255,255,.12);
}

.contact-label {
    margin-bottom: 45px;

    color: var(--bronze);

    font-family: monospace;
    font-size: 9px;
    letter-spacing: .15em;
}

.contact-card h3 {
    margin-bottom: 12px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            25px,
            3vw,
            37px
        );

    line-height: .95;
}

.contact-card > p:not(.contact-label) {
    margin-bottom: 0;

    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.contact-button {
    align-self: flex-start;
    margin-top: auto;

    padding: 12px 16px;

    color: #fff;
    background: var(--obsidian);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    transition:
        transform .2s ease;
}

.contact-button:hover {
    transform: translateY(-2px);
}

.contact-note {
    margin-top: 10px;
    color: #8a857c;
    font-family: monospace;
    font-size: 9px;
}


/* ---------- NAV + SMOOTH SCROLL ---------- */

html {
    scroll-padding-top: 90px;
}


/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 260px;
    }

    .image-one {
        grid-row: span 1;
    }

    .image-five {
        grid-column: span 2;
    }

    .about-grid,
    .review-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .experience-card {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .experience-card:last-child {
        border-bottom: 0;
    }

    .booking-heading {
        display: block;
    }

    .booking-heading p {
        margin-top: 25px;
    }
}


@media (max-width: 600px) {

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 310px;
    }

    .image-five {
        grid-column: span 1;
    }

    .gallery-image {
        border-radius: 17px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .form-row.two {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .review-rating strong {
        font-size: 60px;
    }

    .review-quote blockquote {
        font-size: 42px;
    }

    .experience-card {
        padding: 30px 20px;
    }
}

/* =========================================================
   GOOGLE MAP
========================================================= */

.contact-layout {

    display: grid;

    grid-template-columns:
        .7fr
        1.3fr;

    gap: 14px;

}


.map-card {

    position: relative;

    min-height: 430px;

    overflow: hidden;

    border-radius: 20px;

    border:
        1px solid
        var(--border);

    background: #d7d3ca;

}


.map-card iframe {

    width: 100%;

    height: 100%;

    min-height: 430px;

    display: block;

    border: 0;

}


.map-overlay {

    position: absolute;

    left: 18px;

    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px
        14px;

    color: #24231f;

    background:
        rgba(243,240,232,.94);

    border:
        1px solid
        rgba(0,0,0,.08);

    border-radius: 999px;

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.10);

    font-size: 11px;

    font-weight: 600;

}


.map-status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--bronze);

}


/* MAP MOBILE */

@media (max-width: 900px) {

    .contact-layout {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .map-card,
    .map-card iframe {

        min-height: 340px;

    }

}