:root {
    --slp-ink: #261a14;
    --slp-muted: #746258;
    --slp-brown: #4e3328;
    --slp-gold: #d89043;
    --slp-sand: #f5f1eb;
    --slp-line: rgba(53, 36, 25, .14);
}

.slp-page { overflow: hidden; background: #fff; color: var(--slp-ink); font-family: "Outfit", Inter, sans-serif; }
.slp-shell { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
.slp-preview { position: fixed; z-index: 80; left: 50%; top: 88px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(30,22,17,.93); color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.22); backdrop-filter: blur(12px); font-size: 12px; }
.slp-preview span, .slp-preview a { display: flex; align-items: center; gap: 7px; }
.slp-preview svg { width: 14px; height: 14px; }
.slp-preview a { color: #f2b76c; font-weight: 700; }

.slp-kicker { margin: 0 0 16px; color: #f2b76c; font: 700 11px/1.35 "Outfit", Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.slp-kicker--dark { color: #a05c2d; }

.slp-hero { position: relative; height: clamp(600px, 82svh, 720px); min-height: 0; display: flex; align-items: stretch; isolation: isolate; background: #201712; color: #fff; }
.slp-hero::after { content: ''; position: absolute; z-index: 1; inset: 0; background: rgba(8, 7, 6, .34); pointer-events: none; }
.slp-hero__background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.slp-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr); gap: clamp(56px, 6vw, 96px); align-items: end; padding-block: 150px 66px; }
.slp-hero__map { align-self: end; width: min(100%, 440px); margin: 0; filter: drop-shadow(0 3px 14px rgba(0,0,0,.55)); }
.slp-hero__map img { width: 100%; max-height: 470px; object-fit: contain; object-position: left bottom; }
.slp-hero__copy { align-self: end; max-width: 720px; padding: 0 0 54px; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.slp-hero__copy h1 { max-width: 720px; margin: 0; color: #fff; font: 500 clamp(40px, 3.45vw, 54px)/1.04 "Outfit", Inter, sans-serif; letter-spacing: -.028em; text-wrap: balance; }
.slp-hero__copy > p:last-child { max-width: 650px; margin: 18px 0 0; color: rgba(255,255,255,.95); font: 400 clamp(15px, 1vw, 16px)/1.56 "Outfit", Inter, sans-serif; }

.slp-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 620px; padding-block: 96px; }
.slp-overview__image { min-height: 520px; margin: 0; overflow: hidden; background: #ded8d0; }
.slp-overview__image img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; transition: transform .7s ease; }
.slp-overview:hover .slp-overview__image img { transform: scale(1.015); }
.slp-overview__copy { display: flex; flex-direction: column; justify-content: center; padding: 54px clamp(36px, 6vw, 88px); background: #fff; }
.slp-overview h2, .slp-section-head h2, .slp-cta h2 { margin: 0; color: var(--slp-ink); font: 600 clamp(38px, 4vw, 58px)/1.03 "Outfit", Inter, sans-serif; letter-spacing: -.035em; }
.slp-overview__copy > p:not(.slp-kicker) { margin: 24px 0 0; color: var(--slp-muted); font: 400 16px/1.85 "Outfit", Inter, sans-serif; }

.slp-collection { padding-block: 96px; background: #fff; }
.slp-collection--sand { background: var(--slp-sand); }
.slp-collection--related { padding-top: 86px; border-top: 1px solid var(--slp-line); }
.slp-section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 40px; }
.slp-section-head h2 { font-size: clamp(38px, 4vw, 54px); }
.slp-section-head > a { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 7px; border-bottom: 1px solid #8f5431; color: #6f4226; font: 700 10px/1 "Outfit", Inter, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.slp-section-head > a svg { width: 15px; }
.slp-card-grid, .slp-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.slp-card-grid > article { min-width: 0; }

.slp-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 46px; align-items: center; margin-block: 30px 96px; padding: 42px 46px; background: var(--slp-brown); color: #fff; }
.slp-cta h2 { max-width: 790px; color: #fff; font-size: clamp(25px, 2.7vw, 39px); line-height: 1.16; }
.slp-cta__actions { display: flex; align-items: center; gap: 10px; }
.slp-button { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; font: 700 10px/1 "Outfit", Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; cursor: pointer; white-space: nowrap; }
.slp-button:hover { transform: translateY(-2px); }
.slp-button svg { width: 15px; height: 15px; }
.slp-button--light { background: #fff; color: var(--slp-ink); }
.slp-button--line { border-color: rgba(255,255,255,.38); color: #fff; }
.slp-button--line:hover { background: rgba(255,255,255,.1); }

.slp-related-card { min-width: 0; margin: 0; background: #eee8e1; }
.slp-related-card a { position: relative; display: block; height: 360px; overflow: hidden; color: #fff; }
.slp-related-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.slp-related-card a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22,15,11,.82), transparent 60%); }
.slp-related-card span { position: absolute; z-index: 1; left: 26px; right: 24px; bottom: 24px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 18px; }
.slp-related-card small { grid-column: 1 / -1; color: #efb676; font: 700 9px/1 "Outfit", Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.slp-related-card strong { font: 600 24px/1.13 "Outfit", Inter, sans-serif; }
.slp-related-card svg { width: 18px; height: 18px; }
.slp-related-card:hover img { transform: scale(1.04); }

html.nf-light-mode body.site-interior-page section.slp-hero { background-color: #282019 !important; color: #fff !important; }
html.nf-light-mode body.site-interior-page section.slp-hero h1,
html.nf-light-mode body.site-interior-page section.slp-hero .slp-hero__copy > p:last-child { color: #fff !important; }
html.nf-light-mode body.site-interior-page section.slp-hero .slp-kicker,
html.nf-light-mode body.site-interior-page section.slp-cta .slp-kicker { color: #f2b76c !important; }
html.nf-light-mode body.site-interior-page section.slp-collection--sand { background: var(--slp-sand) !important; }
html.nf-light-mode body.site-interior-page section.slp-cta { background: var(--slp-brown) !important; color: #fff !important; }
html.nf-light-mode body.site-interior-page section.slp-cta h2,
html.nf-light-mode body.site-interior-page section.slp-cta .slp-button--line { color: #fff !important; }

@media (max-width: 980px) {
    .slp-shell { width: min(100% - 40px, 1280px); }
    .slp-hero { height: clamp(580px, 86svh, 680px); min-height: 0; }
    .slp-hero__inner { grid-template-columns: minmax(235px, .72fr) minmax(0, 1.28fr); gap: 38px; padding-block: 138px 44px; }
    .slp-hero__map { width: min(100%, 330px); }
    .slp-hero__map img { max-height: 365px; }
    .slp-hero__copy { padding-bottom: 32px; }
    .slp-hero__copy h1 { font-size: clamp(38px, 5vw, 48px); }
    .slp-overview { grid-template-columns: 1fr 1fr; padding-block: 74px; }
    .slp-overview__copy { padding: 40px; }
    .slp-card-grid, .slp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .slp-cta { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 700px) {
    .slp-shell { width: min(100% - 30px, 1280px); }
    .slp-preview { top: 72px; width: calc(100% - 30px); justify-content: space-between; }
    .slp-hero { height: clamp(580px, 100svh, 650px); min-height: 0; }
    .slp-hero__inner { grid-template-columns: 1fr; align-content: end; gap: 8px; padding-block: 112px 36px; }
    .slp-hero__map { width: min(52vw, 205px); }
    .slp-hero__map img { max-height: 215px; object-position: left bottom; }
    .slp-hero__copy { padding: 0; }
    .slp-hero__copy h1 { font-size: clamp(34px, 9.5vw, 43px); line-height: 1.03; }
    .slp-hero__copy > p:last-child { margin-top: 14px; font-size: 14px; line-height: 1.55; }
    .slp-overview { grid-template-columns: 1fr; padding-block: 64px; }
    .slp-overview__image, .slp-overview__image img { min-height: 380px; }
    .slp-overview__copy { padding: 38px 4px 0; }
    .slp-overview__copy > p:not(.slp-kicker) { font-size: 15px; line-height: 1.78; }
    .slp-collection { padding-block: 70px; }
    .slp-section-head { align-items: start; flex-direction: column; margin-bottom: 30px; }
    .slp-card-grid, .slp-related-grid { grid-template-columns: 1fr; }
    .slp-cta { width: calc(100% - 30px); gap: 24px; margin-block: 18px 72px; padding: 30px 24px; }
    .slp-cta__actions { align-items: stretch; flex-direction: column; }
    .slp-button { width: 100%; }
    .slp-related-card a { height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
    .slp-overview__image img, .slp-related-card img, .slp-button { transition: none; }
}
