:root {
    --bg: #fdfcfa;
    --ink: #232120;
    --soft: #6e6a66;
    --faint: #9c978f;
    --line: #e8e4de;
    --line-2: #f0ede8;
    --dark: #1c1a18;
    --green: #3e6b4c;
    --pad: 44px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: Jost, system-ui, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

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

h1,
h2,
h3 {
    font-weight: 300;
    letter-spacing: -0.012em;
    line-height: 1.1;
}

.micro {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.pad {
    padding-left: var(--pad);
    padding-right: var(--pad);
}

section {
    scroll-margin-top: 70px;
}

header {
    position: sticky;
    top: 0;
    z-index: 70;
    background: #fdfcfae6;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-2);
}

.nav {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 68px;
    padding: 0 var(--pad);
}

.mark {
    font-size: 15px;
    letter-spacing: 0.5em;
    font-weight: 400;
}

.nav nav {
    display: flex;
    gap: 30px;
    margin-left: auto;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--soft);
}

.nav nav a:hover {
    color: var(--ink);
}

.btn {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 13px 22px;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.btn:hover {
    background: var(--green);
    color: #fff;
}

.btn-wht:hover,
.shortlist .btn:hover,
.led-new .btn:hover {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

.btn-line {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 12px 21px;
}

.btn-line:hover {
    background: var(--ink);
    color: #fff;
    opacity: 1;
}

.btn-wht {
    background: #fff;
    color: var(--ink);
}

@media (max-width: 900px) {
    .nav nav {
        display: none;
    }
}

.hero {
    position: relative;
    height: 84vh;
    min-height: 560px;
    max-height: 860px;
    overflow: hidden;
}

.hero .compare {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hero-vid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: #efece8;
}

.hero .scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        rgba(15, 13, 11, 0.95) 0%,
        rgba(15, 13, 11, 0.9) 24%,
        rgba(15, 13, 11, 0.66) 44%,
        rgba(15, 13, 11, 0.24) 64%,
        rgba(15, 13, 11, 0.02) 80%,
        transparent 90%
    );
}

.hero-copy {
    position: absolute;
    left: var(--pad);
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    color: #fff;
    max-width: min(48%, 560px);
    pointer-events: none;
}

.hero-copy .row a,
.hero-copy .btn-ghost {
    pointer-events: auto;
}

.hero-badge {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffffd9;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    padding: 7px 15px;
    margin-bottom: 20px;
}

.hero-copy h1 {
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.05;
    font-weight: 300;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.hero-copy h1 em {
    font-style: italic;
    color: #8fc2a0;
}

.hero-copy p {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.55;
    max-width: 42ch;
    color: #fffffff0;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

.hero-copy .row {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
    align-items: center;
}

.hero-copy .btn-ghost {
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    background: transparent;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 12px 21px;
}

.hero-copy .btn-ghost:hover {
    background: #fff;
    color: var(--ink);
}

.hero-cred span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.hero-cred span .ico {
    width: 18px;
    height: 18px;
    stroke: #fff;
    opacity: 0.95;
}

.hero-cred {
    display: flex;
    gap: 11px 26px;
    margin-top: 26px;
    flex-wrap: wrap;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffffd1;
}

@media (max-width: 820px) {
    .hero-copy {
        max-width: none;
        right: var(--pad);
        top: auto;
        bottom: 36px;
        transform: none;
    }

    .hero .scrim {
        background: linear-gradient(
            to top,
            rgba(15, 13, 11, 0.95) 0%,
            rgba(15, 13, 11, 0.82) 42%,
            rgba(15, 13, 11, 0.32) 68%,
            transparent 100%
        );
    }
}

.trustband {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 20px var(--pad);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    text-align: center;
}

.trustband .tb-stars {
    display: inline-flex;
    gap: 3px;
}

.trustband .tb-stars .ico {
    width: 17px;
    height: 17px;
    fill: #3e6b4c;
    stroke: none;
    opacity: 1;
}

.trustband .tb-txt {
    font-size: 12.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--soft);
}

.trustband .tb-txt b {
    color: var(--ink);
    font-weight: 400;
}

.hero .credit {
    position: absolute;
    right: var(--pad);
    top: 22px;
    z-index: 6;
    color: #fff;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: #14121080;
    padding: 7px 13px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: opacity 0.3s;
}

.hero.touched .credit {
    opacity: 0;
}

.ico {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}

.strip .ico {
    width: 34px;
    height: 34px;
    margin: 0 auto 12px;
    display: block;
    color: var(--ink);
    opacity: 1;
}

.proc .ico {
    width: 40px;
    height: 40px;
    color: var(--ink);
    display: block;
    margin: 0 0 16px;
    opacity: 1;
}

.strip {
    display: flex;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.strip div {
    flex: 1;
    padding: 30px 18px;
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--soft);
}

@media (max-width: 820px) {
    .strip {
        flex-wrap: wrap;
    }

    .strip div {
        flex: 1 1 50%;
    }
}

.head {
    padding: 44px var(--pad) 0px;
}

.head h2 {
    font-size: clamp(24px, 2.5vw, 36px);
    max-width: 20ch;
    margin-top: 14px;
}

.head p {
    margin-top: 12px;
    font-size: 15px;
    color: var(--soft);
    max-width: 56ch;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 40px;
    padding: 0 var(--pad) 84px;
}

.grid figure {
    position: relative;
    overflow: hidden;
    background: #efece8;
}

.grid img {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grid figure:hover img {
    transform: scale(1.035);
}

.grid figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 18px 15px;
    color: #fff;
    font-size: 11.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    background: linear-gradient(to top, rgba(20, 18, 16, 0.66), transparent);
}

.grid .wide {
    grid-column: 1/-1;
}

.grid .wide img,
.grid .wide .compare {
    aspect-ratio: 2.55;
}

.grid .pair {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.grid .pair figure {
    background: #efece8;
}

@media (max-width: 820px) {
    .grid,
    .grid .pair {
        grid-template-columns: 1fr;
    }

    .grid .wide img,
    .grid .wide .compare {
        aspect-ratio: 1.5;
    }
}

.doors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 5px;
}

@media (max-width: 980px) {
    .doors {
        grid-template-columns: 1fr;
    }
}

.door {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s;
    overflow: hidden;
}

.door:hover {
    border-color: var(--ink);
}

.door-photo {
    position: relative;
    aspect-ratio: 1.7;
    overflow: hidden;
    background: #efece8;
}

.door-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 24%;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.door:hover .door-photo img {
    transform: scale(1.04);
}

.door-photo .tag {
    position: absolute;
    left: 16px;
    top: 14px;
    z-index: 2;
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    background: #1412108c;
    padding: 7px 13px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.door-body {
    padding: 30px 34px 34px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.door-body h3 {
    font-size: clamp(20px, 2vw, 27px);
    max-width: 20ch;
}

.door-body p {
    font-size: 14.5px;
    color: var(--soft);
    margin-top: 10px;
    max-width: 52ch;
}

.door-quote {
    margin-top: 22px;
    padding: 18px 20px;
    background: var(--bg);
    border-left: 2px solid var(--green);
}

.door-quote .q {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    font-style: italic;
}

.door-quote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--soft);
}

.door-quote cite b {
    color: var(--ink);
    font-weight: 400;
}

.door .go {
    margin-top: auto;
    padding-top: 24px;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.door .go span {
    border-bottom: 1px solid var(--ink);
    padding-bottom: 3px;
}

.what {
    padding-bottom: 84px;
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 40px;
}

@media (max-width: 900px) {
    .svc-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .svc-grid {
        grid-template-columns: 1fr;
    }
}

.svc-item {
    background: #fff;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.svc-item .ico {
    width: 26px;
    height: 26px;
    color: var(--ink);
    opacity: 1;
    stroke-width: 1.2;
}

.svc-item h3 {
    font-size: 16.5px;
    margin-top: 2px;
}

.svc-item p {
    font-size: 13.5px;
    color: var(--soft);
    line-height: 1.5;
}

.svc-intro {
    max-width: 700px;
    margin: 58px auto 0;
    text-align: center;
}

.svc-intro h3 {
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 300;
    letter-spacing: -0.012em;
    margin: 10px 0 12px;
    line-height: 1.16;
}

.svc-intro p {
    color: var(--soft);
    font-size: 15.5px;
    line-height: 1.6;
}

.svc-hero {
    max-width: 1040px;
    margin: 30px auto 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 26px 64px -32px #1412108c;
}

.svc-hero img {
    width: 100%;
    height: auto;
    display: block;
}

.pbrowse {
    max-width: 940px;
    margin: 36px auto 8px;
}

.pb-stage {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pb-arw {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
}

.pb-arw:hover {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

.pb-slider {
    position: relative;
    flex: 1 1 auto;
    aspect-ratio: 1.55;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #efece8;
    --x: 56%;
    cursor: ew-resize;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 640px) {
    .pb-slider {
        aspect-ratio: 1.25;
    }

    .pb-arw {
        width: 40px;
        height: 40px;
    }
}

.pb-slider img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.pb-before {
    clip-path: inset(0 calc(100% - var(--x)) 0 0);
}

.pb-lbl {
    position: absolute;
    top: 14px;
    z-index: 3;
    background: #1412109e;
    color: #fff;
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 6px 12px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    pointer-events: none;
}

.pb-lbl-b {
    left: 14px;
}

.pb-lbl-a {
    right: 14px;
}

.pb-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--x);
    width: 2px;
    background: #fff;
    z-index: 4;
    transform: translate(-1px);
    box-shadow: 0 0 0 1px #0000001f;
    pointer-events: none;
}

.pb-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 12px #00000047;
    display: grid;
    place-items: center;
}

.pb-grip:before {
    content: "\2039  \203a";
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--ink);
}

.pb-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-top: 16px;
    padding: 0 60px;
}

@media (max-width: 640px) {
    .pb-bar {
        padding: 0;
    }
}

.pb-meta b {
    font-size: 15.5px;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.pb-meta span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 4px;
}

.pb-count {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--faint);
    white-space: nowrap;
}

.pb-count b {
    color: var(--ink);
    font-weight: 500;
}

.pb-desc {
    max-width: 64ch;
    margin: 22px auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--soft);
    padding: 0 24px;
}

.pb-thumbs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 0 60px;
}

@media (max-width: 640px) {
    .pb-thumbs {
        padding: 0;
    }
}

.pb-thumbs button {
    width: 84px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--line);
    background: #efece8;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.6;
    transition:
        opacity 0.18s,
        border-color 0.18s;
    position: relative;
}

.pb-thumbs button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pb-thumbs button:hover {
    opacity: 0.9;
}

.pb-thumbs button.on {
    opacity: 1;
    border-color: var(--green);
    box-shadow: inset 0 0 0 1px var(--green);
}

@media (max-width: 640px) {
    .pb-thumbs button {
        width: 60px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-arw {
        transition: none;
    }
}

.reel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.reel-head .head {
    max-width: none;
    flex: 1;
}

.reel-head .head h2 {
    max-width: 34ch;
}

.reel-nav {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    padding-right: var(--pad);
}

.reel-nav button {
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    font-size: 17px;
    color: var(--ink);
    transition:
        background 0.2s,
        color 0.2s;
}

.reel-nav button:hover {
    background: var(--ink);
    color: #fff;
}

.reel {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 40px var(--pad) 12px;
    cursor: grab;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.reel::-webkit-scrollbar {
    display: none;
}

.reel.dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.reel-card {
    position: relative;
    flex: 0 0 min(72%, 880px);
    aspect-ratio: 1.5;
    overflow: hidden;
    scroll-snap-align: center;
    background: #efece8;
}

.reel-card img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reel-card .after {
    opacity: 1;
    transition: opacity 0.38s ease;
}

.reel-card:hover .after,
.reel-card.peek .after {
    opacity: 0;
}

.reel-card .chip {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    background: #1a1816b8;
    padding: 6px 11px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.reel-card .chip s {
    text-decoration: none;
    color: #b8b2a9;
}

.reel-card .cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 44px 16px 14px;
    color: #fff;
    background: linear-gradient(to top, rgba(20, 18, 16, 0.68), transparent);
    pointer-events: none;
    font-size: 12px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.reel-card .cap .outcome {
    color: #cfe3d3;
    font-size: 11.5px;
    white-space: nowrap;
}

.reel-card .sold {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    background: #3e6b4c;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 6px 20px -6px #14281a99;
}

.reel-card .sold:before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z'/%3E%3C/svg%3E")
        center/12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z'/%3E%3C/svg%3E")
        center/12px no-repeat;
}

.reel-card.flat {
    background: var(--dark);
    color: #edeae5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 34px;
    flex-basis: min(46%, 540px);
}

.reel-card.flat .micro {
    color: #9b958c;
}

.reel-card.flat h3 {
    font-size: clamp(22px, 2.3vw, 34px);
    font-weight: 300;
    color: #fff;
    margin-top: 10px;
    max-width: 14ch;
}

.reel-card.flat p {
    font-size: 13.5px;
    color: #9b958c;
    margin-top: 8px;
    max-width: 34ch;
}

.reel-card.flat .btn {
    margin-top: 20px;
}

.reel-hint {
    padding: 14px var(--pad) 0;
    font-size: 12px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
}

.jobs-sec {
    padding-top: 84px;
}

.jobs {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 26px var(--pad) 40px;
    scrollbar-width: none;
}

.jobs::-webkit-scrollbar {
    display: none;
}

.job-card {
    flex: 0 0 min(84vw, 420px);
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--line);
}

.jc-img {
    position: relative;
    aspect-ratio: 1.45;
    overflow: hidden;
    background: #efece8;
}

.jc-img img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jc-before {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.job-card:hover .jc-before,
.job-card.peek .jc-before {
    opacity: 1;
}

.jc-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: var(--green);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.04em;
    font-weight: 500;
    padding: 5px 12px;
}

.jc-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: #1412108c;
    padding: 5px 10px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: opacity 0.3s;
}

.job-card:hover .jc-hint,
.job-card.peek .jc-hint {
    opacity: 0;
}

.jc-body {
    padding: 18px 20px 20px;
}

.jc-cust {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
}

.jc-body h3 {
    font-size: 19px;
    margin-top: 6px;
}

.jc-svcs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

.jc-svcs span {
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--soft);
    border: 1px solid var(--line);
    padding: 5px 11px;
}

@media (max-width: 820px) {
    .reel-card {
        flex-basis: 86%;
    }

    .reel-card.flat {
        flex-basis: 74%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reel {
        scroll-behavior: auto;
    }

    .reel-card .after {
        transition: none;
    }
}

.look {
    border-top: 1px solid var(--line);
    background: #fff;
}

.look .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.book-zone {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 44px var(--pad) 10px;
}

.book-nav {
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    font-size: 17px;
    color: var(--ink);
    flex: 0 0 auto;
    transition:
        background 0.2s,
        color 0.2s,
        opacity 0.2s;
}

.book-nav:hover {
    background: var(--ink);
    color: #fff;
}

.book-nav[disabled] {
    opacity: 0.25;
    pointer-events: none;
}

.book {
    position: relative;
    flex: 1;
    max-width: 1040px;
    aspect-ratio: 3;
    margin: 0 auto;
    perspective: 2600px;
}

.book .base {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    border: 1px solid var(--line);
    background: #fbfaf8;
}

.book .base.l {
    left: 0;
    border-right: 0;
}

.book .base.r {
    right: 0;
    border-left: 0;
}

.book .base .pad-in {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
}

.book .base h3 {
    font-size: clamp(18px, 1.9vw, 26px);
    font-weight: 300;
    max-width: 16ch;
}

.book .base p {
    font-size: 13.5px;
    color: var(--soft);
    margin-top: 8px;
    max-width: 30ch;
}

.book .base .btn {
    margin-top: 18px;
    align-self: flex-start;
}

.leaf {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 0.85s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.leaf.flipped {
    transform: rotateY(-180deg);
}

.face {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.face.back {
    transform: rotateY(180deg);
}

.face img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.face .plate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 34px 16px 13px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    color: #fff;
    background: linear-gradient(to top, rgba(20, 18, 16, 0.72), transparent);
}

.face .plate b {
    font-weight: 400;
    font-size: 16px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.face .plate span {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffffd1;
    text-align: right;
}

.face:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26px;
    pointer-events: none;
}

.face.front:after {
    left: 0;
    background: linear-gradient(to right, rgba(26, 24, 22, 0.08), transparent);
}

.face.back:after {
    right: 0;
    background: linear-gradient(to left, rgba(26, 24, 22, 0.08), transparent);
}

.book .look-add {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fdfcfaeb;
    color: var(--ink);
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 9px 13px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition:
        background 0.2s,
        color 0.2s;
}

.book .look-add:hover {
    background: #fff;
}

.book .look-add .ico {
    width: 14px;
    height: 14px;
    opacity: 1;
}

.face.is-added .look-add {
    background: var(--dark);
    color: #fff;
}

.face.is-added:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid var(--dark);
    z-index: 2;
    pointer-events: none;
}

.book-count {
    padding: 14px var(--pad) 0;
    font-size: 12px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
}

@media (max-width: 700px) {
    .book-zone {
        gap: 8px;
        padding: 34px 12px 6px;
    }

    .book {
        aspect-ratio: 1.5;
    }

    .face .plate b {
        font-size: 13px;
    }

    .face .plate span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .leaf {
        transition: none;
    }
}

.look-note {
    padding: 0 var(--pad) 84px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--soft);
}

.look-note .picked b {
    color: var(--ink);
    font-weight: 400;
}

.shortlist {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    transform: translateY(110%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    background: var(--dark);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px var(--pad);
    box-shadow: 0 -18px 40px -24px #00000080;
}

.shortlist.show {
    transform: translateY(0);
}

.shortlist .n {
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #cfc9c1;
}

.shortlist .n b {
    color: #fff;
    font-weight: 400;
}

.shortlist .chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    flex: 1;
    overflow: hidden;
    max-height: 30px;
}

.shortlist .chip {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d8d3cc;
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 5px 10px;
    white-space: nowrap;
}

.shortlist .btn {
    background: #fff;
    color: var(--ink);
    flex: 0 0 auto;
}

@media (max-width: 700px) {
    .shortlist .chips {
        display: none;
    }
}

.ledger {
    border-top: 1px solid var(--line);
    background: #fff;
}

.led-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    align-items: stretch;
    margin-top: 40px;
    border: 1px solid var(--line);
}

.led {
    padding: 38px 32px;
    border-right: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.led:last-child {
    border-right: 0;
}

.strike {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.strike line {
    stroke: #c0553f;
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
    opacity: 0.5;
}

.led-old > *:not(.strike),
.led-ai > *:not(.strike) {
    position: relative;
    z-index: 1;
}

.led .lbl {
    font-size: 11.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 18px;
}

.led .amt {
    font-size: 46px;
    font-weight: 300;
    letter-spacing: -0.03em;
    margin: 0 0 3px;
    line-height: 1;
}

.led .per {
    font-size: 12.5px;
    color: var(--faint);
    letter-spacing: 0.05em;
}

.led ul {
    list-style: none;
    margin-top: 26px;
    display: grid;
    gap: 0;
}

.led li {
    display: flex;
    gap: 13px;
    font-size: 14.5px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-2);
}

.led li:last-child {
    border-bottom: 0;
}

.led li .ico {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    opacity: 1;
}

.led-old {
    background: #fbfaf8;
}

.led-old .lbl,
.led-old .amt {
    color: var(--faint);
}

.led-old .amt s {
    text-decoration-thickness: 1px;
    text-decoration-color: #c9b4ad;
}

.led-old li {
    color: var(--faint);
}

.led-old li .ico {
    color: #b08579;
}

.led-ai {
    background: #fbfaf8;
}

.led-ai .lbl {
    color: var(--faint);
}

.led-ai .amt {
    color: var(--soft);
}

.led-ai .per,
.led-ai li {
    color: var(--faint);
}

.led-ai li .ico {
    color: #c08a3e;
}

.led-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: #fff;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.led-vs span {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.led-new {
    background: var(--dark);
    color: #f2efea;
}

.led-new .lbl {
    color: #9b958c;
}

.led-new .amt {
    color: #fff;
}

.led-new .per {
    color: #9b958c;
}

.led-new li {
    color: #d8d3cc;
    border-bottom-color: #ffffff17;
}

.led-new li .ico {
    color: #8fb89a;
}

.led-new .btn {
    margin-top: 28px;
    width: 100%;
    text-align: center;
}

.led-note {
    padding: 26px 40px 40px;
    font-size: 13.5px;
    color: var(--faint);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.led-note span {
    max-width: 66ch;
}

@media (max-width: 820px) {
    .led-grid {
        grid-template-columns: 1fr;
    }

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

.craft {
    background: var(--dark);
    color: #edeae5;
}

.craft .head h2 {
    color: #fff;
}

.craft .head p {
    color: #9b958c;
}

.craft .head .micro {
    color: #807a72;
}

.craft-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 40px var(--pad) 84px;
}

.craft-grid figure {
    position: relative;
    overflow: hidden;
    background: #262320;
}

.craft-grid img {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
}

.craft-grid .lbl {
    padding: 16px 2px 0;
    font-size: 14px;
    color: #9b958c;
    max-width: 46ch;
}

.craft-grid .lbl b {
    display: block;
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 7px;
}

@media (max-width: 760px) {
    .craft-grid {
        grid-template-columns: 1fr;
    }
}

.led-head {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 44px;
    align-items: end;
}

.led-head .agent {
    margin: 0;
    position: relative;
}

.led-head .agent img {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
    object-position: 50% 22%;
}

.led-head .agent blockquote {
    margin-top: 16px;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--ink);
}

.led-head .agent .q-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 9px;
}

.led-head .agent .q-stars .ico {
    width: 14px;
    height: 14px;
    fill: #3e6b4c;
    stroke: none;
    opacity: 1;
}

.led-head .agent cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--faint);
}

.led-head .agent figcaption {
    margin-top: 10px;
    font-size: 11.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
}

@media (max-width: 820px) {
    .led-head {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.sold {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
}

.sold img {
    width: 100%;
    aspect-ratio: 2.9;
    object-fit: cover;
    display: block;
}

.sold .veil {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, #141210c7, #14121047 55%, #1412101f);
}

.sold .txt {
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    bottom: 34px;
    color: #fff;
}

.sold .txt h2 {
    font-size: clamp(26px, 3vw, 44px);
    font-weight: 300;
    letter-spacing: -0.015em;
}

.sold .txt p {
    margin-top: 8px;
    font-size: 14px;
    color: #ffffffd9;
    max-width: 52ch;
}

.sold .txt .micro {
    color: #ffffffbf;
}

@media (max-width: 820px) {
    .sold img {
        aspect-ratio: 1.6;
    }
}

.proc {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.1fr;
    gap: 0;
    padding: 40px var(--pad) 84px;
}

.proc figure {
    margin: 0;
    padding-left: 26px;
}

.proc figure img {
    width: 100%;
    aspect-ratio: 1.15;
    object-fit: cover;
}

.proc figure figcaption {
    margin-top: 10px;
    font-size: 11.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
}

@media (max-width: 820px) {
    .proc figure {
        padding: 24px 0 0;
        margin-top: 24px;
        border-top: 1px solid var(--line);
    }
}

.proc div {
    padding: 26px 26px 0;
    border-left: 1px solid var(--line);
}

.proc div:first-child {
    padding-left: 0;
    border-left: 0;
}

.proc h3 {
    font-size: 19px;
    margin: 10px 0 8px;
}

.proc p {
    font-size: 14.5px;
    color: var(--soft);
}

@media (max-width: 820px) {
    .proc {
        grid-template-columns: 1fr;
    }

    .proc div {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 24px 0 0;
        margin-top: 24px;
    }

    .proc div:first-child {
        border-top: 0;
        margin-top: 0;
    }
}

.press {
    border-top: 1px solid var(--line);
    background: #fff;
}

.press-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 32px var(--pad) 26px;
    max-width: 1180px;
    margin: 0 auto;
}

.pc {
    display: block;
    background: #fbfaf8;
    border: 1px solid var(--line-2);
    transition: border-color 0.2s;
}

.pc:hover {
    border-color: var(--ink);
}

.pc figure {
    overflow: hidden;
    background: #efece8;
}

.pc img {
    width: 100%;
    aspect-ratio: 2.4;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pc:hover img {
    transform: scale(1.04);
}

.pc .body {
    padding: 16px 16px 18px;
}

.pc .out {
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--faint);
}

.pc .t {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.34;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc .by {
    margin-top: 10px;
    font-size: 12px;
    color: var(--faint);
}

@media (max-width: 1000px) {
    .press-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .press-grid {
        grid-template-columns: 1fr;
    }
}

.press-more {
    padding: 0 var(--pad) 84px;
    font-size: 12.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
}

.revs {
    padding: 0 0 84px;
}

.revs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 40px var(--pad) 0;
}

@media (max-width: 860px) {
    .revs-grid {
        grid-template-columns: 1fr;
    }
}

.rev {
    border: 1px solid var(--line);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rev-stars {
    display: flex;
    gap: 3px;
}

.rev-stars .ico {
    width: 15px;
    height: 15px;
    fill: #3e6b4c;
    stroke: none;
    opacity: 1;
}

.rev p {
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
    flex: 1;
}

.rev cite {
    font-style: normal;
    font-size: 14px;
    color: var(--ink);
    border-top: 1px solid var(--line-2);
    padding-top: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.rev-ph {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #efece8;
}

.rev cite .who {
    display: block;
}

.rev cite .who span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 4px;
}

.quote {
    border-top: 1px solid var(--line);
    padding: 90px var(--pad);
    text-align: center;
}

.quote-top {
    border-top: 0;
    border-bottom: 1px solid var(--line);
    padding: 52px var(--pad);
}

.quote-top.quote p {
    font-size: clamp(23px, 2.6vw, 34px);
    max-width: 30ch;
    line-height: 1.25;
    margin: 0 auto;
}

.quote-top.quote cite {
    margin-top: 16px;
}

.quote-top.quote .rating {
    margin-top: 22px;
}

.whyus {
    border-top: 1px solid var(--line);
    background: var(--bg);
}

.who-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 76px var(--pad);
}

.who-lead {
    max-width: 640px;
}

.who-lead h2 {
    font-size: clamp(26px, 3vw, 40px);
    margin-top: 12px;
    max-width: 22ch;
}

.who-lead p {
    margin-top: 16px;
    font-size: 16px;
    color: var(--soft);
    line-height: 1.6;
    max-width: 60ch;
}

.who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 44px;
}

@media (max-width: 820px) {
    .who-grid {
        grid-template-columns: 1fr;
    }
}

.who-card {
    background: #fff;
    border: 1px solid var(--line);
    padding: 28px 26px;
}

.who-card .ico {
    width: 30px;
    height: 30px;
    color: var(--green);
    opacity: 1;
    stroke-width: 1.2;
    margin-bottom: 14px;
    display: block;
}

.who-card h3 {
    font-size: 19px;
}

.who-card p {
    margin-top: 9px;
    font-size: 14px;
    color: var(--soft);
    line-height: 1.55;
}

.value {
    background: var(--dark);
    color: #edeae5;
}

.value-in {
    max-width: 940px;
    margin: 0 auto;
    padding: 70px var(--pad);
    text-align: center;
}

.value .micro {
    color: #807a72;
}

.value h2 {
    color: #fff;
    font-size: clamp(26px, 3vw, 40px);
    margin-top: 12px;
}

.value-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 32px;
    text-align: left;
}

@media (max-width: 640px) {
    .value-rows {
        grid-template-columns: 1fr;
    }
}

.vrow {
    padding: 26px;
    border: 1px solid #34302b;
}

.vrow .vlbl {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9b958c;
}

.vrow .vamt {
    display: block;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 300;
    letter-spacing: -0.02em;
    margin: 9px 0 5px;
    line-height: 1;
}

.vrow.old .vamt {
    color: #9b958c;
}

.vrow.old .vamt s {
    text-decoration-color: #b0553f;
    text-decoration-thickness: 1px;
}

.vrow.new {
    background: #26231f;
    border-color: var(--green);
}

.vrow.new .vamt {
    color: #fff;
}

.vrow .vper {
    font-size: 12.5px;
    color: #9b958c;
}

.vrow.new .vper {
    color: #cfe3d3;
}

.value-note {
    max-width: 62ch;
    margin: 28px auto 0;
    font-size: 15.5px;
    color: #c9c3bb;
    line-height: 1.6;
}

.value .btn-wht {
    margin-top: 26px;
}

.quote p {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 300;
    letter-spacing: -0.015em;
    max-width: 20ch;
    margin: 0 auto;
}

.quote cite {
    display: block;
    margin-top: 22px;
    font-style: normal;
    font-size: 11.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--faint);
}

.rating {
    margin-top: 34px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    border-top: 1px solid var(--line);
    padding-top: 26px;
}

.rating .stars {
    display: inline-flex;
    gap: 2px;
}

.rating .stars .ico {
    width: 16px;
    height: 16px;
    fill: #e3a21a;
    stroke: #e3a21a;
    stroke-width: 0.6;
    opacity: 1;
}

.rating-txt {
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--soft);
}

.rating-txt b {
    font-weight: 400;
    color: var(--ink);
}

.comply {
    border-top: 1px solid var(--line);
    background: #fff;
}

.comply-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 40px var(--pad) 0;
}

.tile {
    border: 1px solid var(--line);
    padding: 26px 22px;
    background: #fbfaf8;
}

.tile .ico {
    width: 24px;
    height: 24px;
    color: var(--ink);
    opacity: 0.9;
    display: block;
    margin-bottom: 16px;
}

.tile b {
    display: block;
    font-weight: 400;
    font-size: 15.5px;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.3;
}

.tile p {
    font-size: 13.5px;
    color: var(--soft);
    line-height: 1.55;
}

@media (max-width: 1000px) {
    .comply-tiles {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .comply-tiles {
        grid-template-columns: 1fr;
    }
}

.rail {
    margin: 56px var(--pad) 84px;
    position: relative;
}

.rail .rail-label {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 26px;
}

.rail-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
}

.rail-track:before {
    content: "";
    position: absolute;
    left: 7px;
    right: 22%;
    top: 5px;
    height: 1px;
    background: var(--line);
}

.rail-stop {
    position: relative;
    padding-right: 24px;
}

.rail-stop:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--ink);
}

.rail-stop:last-child:before {
    background: var(--ink);
}

.rail-stop .when {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 24px 0 6px;
}

.rail-stop b {
    display: block;
    font-weight: 400;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 4px;
}

.rail-stop p {
    font-size: 13px;
    color: var(--soft);
    line-height: 1.5;
    max-width: 24ch;
}

@media (max-width: 820px) {
    .rail-track {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .rail-track:before {
        left: 5px;
        right: auto;
        top: 7px;
        bottom: 7px;
        width: 1px;
        height: auto;
    }

    .rail-stop {
        padding-left: 28px;
        padding-right: 0;
    }

    .rail-stop .when {
        margin-top: 0;
    }
}

.faq {
    border-top: 1px solid var(--line);
    padding: 0 var(--pad) 84px;
}

.faq .in {
    max-width: 860px;
    margin: 40px 0 0;
}

details {
    border-bottom: 1px solid var(--line);
}

summary {
    padding: 20px 0;
    cursor: pointer;
    font-size: 16.5px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

summary::-webkit-details-marker {
    display: none;
}

summary:after {
    content: "+";
    font-size: 19px;
    color: var(--faint);
    transition: transform 0.2s;
    flex: 0 0 auto;
}

details[open] summary:after {
    transform: rotate(45deg);
}

details p {
    padding: 0 0 22px;
    font-size: 14.5px;
    color: var(--soft);
    max-width: 70ch;
}

.end {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
}

.end img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.end .scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #14121080;
}

.end .in {
    position: relative;
    z-index: 3;
    padding: 120px var(--pad);
    text-align: center;
    color: #fff;
}

.end h2 {
    font-size: clamp(28px, 3.4vw, 46px);
    font-weight: 300;
}

.end p {
    margin-top: 14px;
    font-size: 15.5px;
    color: #ffffffd6;
}

.end .row {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.end small {
    display: block;
    margin-top: 18px;
    font-size: 12.5px;
    color: #ffffff9e;
}

footer {
    background: var(--dark);
    color: #6f6a63;
    padding: 34px var(--pad) 26px;
    font-size: 12.5px;
}

footer a {
    color: #a8a29a;
}

.foot-cities {
    padding-bottom: 22px;
    border-bottom: 1px solid #2e2b28;
    margin-bottom: 20px;
}

.foot-cities .micro {
    color: #6f6a63;
    display: block;
    margin-bottom: 12px;
}

.foot-cities nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.foot-cities nav a {
    font-size: 12.5px;
    text-decoration: none;
}

.foot-cities nav a:hover {
    color: #fff;
}

.foot-base {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.compare {
    position: relative;
    overflow: hidden;
    cursor: ew-resize;
    -webkit-user-select: none;
    user-select: none;
    background: #efece8;
}

.compare img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.compare .clip {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    clip-path: inset(0 50% 0 0);
    will-change: clip-path;
}

.compare .h {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #ffffffeb;
    z-index: 3;
    pointer-events: none;
}

.compare .h:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fffffff2;
    box-shadow: 0 3px 18px #00000052;
}

.compare .h:before {
    content: "\2039\203a";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: 1px;
}

.compare .tag {
    position: absolute;
    top: 14px;
    z-index: 3;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffffe6;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.compare .tag.l {
    left: 16px;
}

.compare .tag.r {
    right: 16px;
}

#baLaunch,
.ba-panel,
.ba-panel * {
    box-sizing: border-box;
}

.ba-launch {
    position: fixed;
    right: 22px;
    bottom: 50px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ink, #232120);
    color: #fff;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.02em;
    padding: 12px 18px 12px 15px;
    border-radius: 99px;
    cursor: pointer;
    box-shadow: 0 12px 32px -12px #1412108c;
    transition:
        transform 0.18s,
        box-shadow 0.18s;
}

.ba-launch:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -14px #14121099;
}

.ba-launch svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ba-launch .ba-dot {
    position: absolute;
    top: 10px;
    left: 31px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7fbf94;
    box-shadow: 0 0 0 2px var(--ink, #232120);
}

.ba-panel {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 201;
    width: 372px;
    max-width: calc(100vw - 28px);
    height: 562px;
    max-height: calc(100vh - 44px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 32px 80px -24px #14121080;
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: inherit;
    animation: baIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ba-panel.open {
    display: flex;
}

@keyframes baIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ba-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px;
    border-bottom: 1px solid #ede9e3;
    background: #fbfaf8;
}

.ba-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--green, #3e6b4c);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    letter-spacing: 0.05em;
    flex: none;
}

.ba-ht b {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink, #232120);
    display: block;
    line-height: 1.2;
}

.ba-ht span {
    font-size: 11.5px;
    color: #3e6b4c;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ba-ht span:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3e6b4c;
}

.ba-x {
    margin-left: auto;
    background: 0;
    border: 0;
    color: #9c978f;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

.ba-x:hover {
    color: var(--ink, #232120);
}

.ba-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ba-msg {
    max-width: 85%;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 10px 13px;
    border-radius: 13px;
}

.ba-msg.them {
    background: #f2f0ec;
    color: var(--ink, #232120);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.ba-msg.me {
    background: var(--ink, #232120);
    color: #fff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.ba-msg b {
    font-weight: 600;
}

.ba-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-self: flex-start;
    max-width: 94%;
}

.ba-act {
    font-family: inherit;
    font-size: 12px;
    color: var(--green, #3e6b4c);
    background: #edf4ee;
    border: 1px solid #cfe0d3;
    padding: 7px 12px;
    border-radius: 99px;
    cursor: pointer;
    text-decoration: none;
    transition: 0.14s;
}

.ba-act:hover {
    background: var(--green, #3e6b4c);
    color: #fff;
    border-color: var(--green, #3e6b4c);
}

.ba-act.primary {
    background: var(--ink, #232120);
    color: #fff;
    border-color: var(--ink, #232120);
}

.ba-typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 12px 14px;
    background: #f2f0ec;
    border-radius: 13px 13px 13px 4px;
}

.ba-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b7b1a8;
    animation: baBlink 1.2s infinite;
}

.ba-typing i:nth-child(2) {
    animation-delay: 0.2s;
}

.ba-typing i:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes baBlink {
    0%,
    60%,
    to {
        opacity: 0.3;
    }

    30% {
        opacity: 1;
    }
}

.ba-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    padding: 0 16px 10px;
}

.ba-chip {
    font-family: inherit;
    font-size: 12px;
    color: var(--soft, #6e6a66);
    background: #fff;
    border: 1px solid #e8e4de;
    padding: 8px 12px;
    border-radius: 99px;
    cursor: pointer;
    transition: 0.14s;
}

.ba-chip:hover {
    border-color: var(--ink, #232120);
    color: var(--ink, #232120);
}

.ba-foot {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #ede9e3;
}

.ba-foot input {
    flex: 1;
    border: 1px solid #e8e4de;
    border-radius: 99px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink, #232120);
}

.ba-foot input:focus {
    outline: 0;
    border-color: var(--green, #3e6b4c);
}

.ba-send {
    background: var(--green, #3e6b4c);
    border: 0;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    flex: none;
    display: grid;
    place-items: center;
}

.ba-send svg {
    width: 17px;
    height: 17px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ba-note {
    font-size: 10px;
    color: #b7b1a8;
    text-align: center;
    padding: 0 16px 9px;
}

.fs-back {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    background: #14121094;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s;
}

.fs-back.on {
    opacity: 1;
    visibility: visible;
}

.fs-modal {
    width: 100%;
    max-width: 760px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    box-shadow: 0 40px 90px -30px #14121099;
    transform: translateY(14px) scale(0.985);
    transition: transform 0.3s ease;
}

.fs-back.on .fs-modal {
    transform: none;
}

.fs-vis {
    position: relative;
    background: #111;
    min-height: 320px;
}

.fs-vis img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fs-vis .fs-after {
    opacity: 0;
    transition: opacity 1.1s ease;
}

.fs-vis.show-after .fs-after {
    opacity: 1;
}

.fs-tag {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    background: #141210b8;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 99px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.fs-body {
    padding: 34px 32px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.fs-x {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--faint);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 99px;
}

.fs-x:hover {
    background: var(--line-2);
    color: var(--ink);
}

.fs-eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 600;
    margin-bottom: 10px;
}

.fs-body h3 {
    font-size: 25px;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--ink);
}

.fs-body h3 em {
    font-style: normal;
    color: var(--green);
}

.fs-body p.sub {
    font-size: 14px;
    color: var(--soft);
    margin: 10px 0 18px;
    line-height: 1.55;
}

.fs-field {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 14.5px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    margin-bottom: 10px;
    color: var(--ink);
}

.fs-field:focus {
    outline: none;
    border-color: var(--green);
}

.fs-file {
    font-size: 12.5px;
    color: var(--soft);
    border: 1px dashed var(--line);
    border-radius: 9px;
    padding: 11px 14px;
    margin-bottom: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-file:hover {
    border-color: var(--green);
    color: var(--ink);
}

.fs-file input {
    display: none;
}

.fs-sub {
    width: 100%;
    background: var(--ink);
    color: #fff;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 15px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.2s;
}

.fs-sub:hover {
    background: var(--green);
}

.fs-fine {
    font-size: 11.5px;
    color: var(--faint);
    text-align: center;
    margin-top: 11px;
    line-height: 1.5;
}

.fs-ok {
    text-align: center;
    margin: auto 0;
    padding: 10px 0;
}

.fs-ok .chk {
    width: 52px;
    height: 52px;
    border-radius: 99px;
    background: #edf4ee;
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 16px;
}

.fs-ok h3 {
    font-size: 23px;
}

.fs-ok p {
    font-size: 14px;
    color: var(--soft);
    margin: 10px 0 20px;
    line-height: 1.55;
}

.fs-ok .go {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 26px;
    border-radius: 9px;
    text-decoration: none;
}

.fs-ok .go:hover {
    background: var(--green);
}

@media (max-width: 640px) {
    .fs-modal {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .fs-vis {
        min-height: 190px;
    }

    .fs-body {
        padding: 26px 22px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fs-vis .fs-after {
        opacity: 1;
    }

    .fs-back,
    .fs-modal {
        transition: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    a.btn,
    button.btn,
    .sub,
    .fs-sub,
    .go,
    .pri {
        position: relative;
        overflow: hidden;
    }

    a.btn:after,
    button.btn:after,
    .sub:after,
    .fs-sub:after,
    .go:after,
    .pri:after {
        content: "";
        position: absolute;
        top: -60%;
        left: -80%;
        width: 48%;
        height: 220%;
        background: linear-gradient(100deg, #fff0, #fff6, #fff0);
        transform: skew(-18deg);
        pointer-events: none;
        animation: bvShine 5.5s ease-in-out infinite;
    }

    .btn-ghost:after,
    .btn-line:after {
        display: none !important;
    }

    .btn-wht:after,
    .pri:after {
        background: linear-gradient(100deg, #3e6b4c00, #3e6b4c38, #3e6b4c00);
    }

    @keyframes bvShine {
        0%,
        15% {
            left: -80%;
        }

        55%,
        to {
            left: 150%;
        }
    }
}

.bv-r {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bv-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .bv-r {
        opacity: 1 !important;
        transform: none !important;
    }
}

.shop-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px var(--pad) 96px;
}

.shop-wrap h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 18px;
}

.shop-narrow {
    max-width: 640px;
}

.rte {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--soft);
}

.rte h2,
.rte h3 {
    color: var(--ink);
    font-weight: 500;
    margin: 26px 0 10px;
}

.rte p {
    margin: 0 0 14px;
}

.rte a {
    color: var(--green);
}

.prod-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 860px) {
    .prod-grid {
        grid-template-columns: 1fr;
    }
}

.prod-media img {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--line);
}

.prod-price {
    font-size: 24px;
    color: var(--ink);
    margin: 10px 0 22px;
}

.prod-form label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 16px 0 6px;
}

.prod-form select,
.prod-form input[type="number"] {
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 12px 14px;
    width: 100%;
    background: #fff;
}

.prod-buy {
    margin-top: 24px;
    width: 100%;
    background: var(--ink);
    color: #fff;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.2s;
}

.prod-buy:hover {
    background: var(--green);
}

.prod-buy[disabled] {
    background: var(--faint);
    cursor: not-allowed;
}

.coll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.coll-card {
    display: block;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition:
        transform 0.18s,
        box-shadow 0.18s;
}

.coll-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -18px #14121040;
}

.coll-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

.coll-card .cc-body {
    padding: 14px 16px 16px;
}

.coll-card .cc-title {
    font-size: 15px;
}

.coll-card .cc-price {
    font-size: 13.5px;
    color: var(--soft);
    margin-top: 4px;
}

.cart-line {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.cart-line img {
    width: 84px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.cart-line .cl-title {
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
}

.cart-line .cl-meta {
    font-size: 12.5px;
    color: var(--faint);
    margin-top: 3px;
}

.cart-line input {
    width: 64px;
    font-family: inherit;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
}

.cart-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
    margin-top: 24px;
}

.cart-foot .total {
    font-size: 20px;
    color: var(--ink);
}

.form-card {
    max-width: 440px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 32px;
    background: #fff;
}

.form-card input {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 14.5px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    margin-bottom: 12px;
    color: var(--ink);
}

.form-card input:focus {
    outline: none;
    border-color: var(--green);
}

.form-card .errors {
    font-size: 13px;
    color: #a33;
    margin-bottom: 12px;
}

.pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 40px;
    font-size: 14px;
}

.pagination a,
.pagination span {
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink);
}

.pagination .current {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.svc-page .crumb {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 16px var(--pad) 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--faint);
}

.svc-page .crumb a {
    color: var(--soft);
}

.svc-page .crumb a:hover {
    color: var(--ink);
}

.svc-page .svc-hero-in {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    align-items: stretch;
    max-width: var(--shell, 1200px);
    margin: 0 auto;
}

@media (max-width: 900px) {
    .svc-page .svc-hero-in {
        grid-template-columns: 1fr;
    }
}

.svc-page .copy {
    padding: 48px var(--pad) 56px;
}

.svc-page .copy h1 {
    font-size: clamp(30px, 3.8vw, 48px);
    max-width: 16ch;
    margin-top: 12px;
    font-weight: 300;
    letter-spacing: -0.012em;
    line-height: 1.1;
}

.svc-page .copy h1 em {
    font-style: normal;
    color: var(--green);
}

.svc-page .copy > p.lede {
    color: var(--soft);
    margin-top: 16px;
    font-size: 16.5px;
    max-width: 48ch;
}

.svc-page .cred {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--soft);
}

.svc-page .cred svg {
    width: 15px;
    height: 15px;
    fill: var(--green);
}

.svc-page .cred b {
    color: var(--ink);
    font-weight: 400;
}

.svc-page .shot {
    position: relative;
    background: #efece8;
    min-height: 380px;
}

.svc-page .shot img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-page .shot .lbl {
    position: absolute;
    left: 16px;
    bottom: 16px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: #14121099;
    padding: 6px 12px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.svc-page .strip {
    display: flex;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.svc-page .strip div {
    flex: 1;
    padding: 20px 16px;
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--soft);
    border-right: 1px solid var(--line);
}

.svc-page .strip div:last-child {
    border-right: 0;
}

.svc-page .strip b {
    color: var(--ink);
    font-weight: 400;
}

@media (max-width: 760px) {
    .svc-page .strip {
        flex-wrap: wrap;
    }

    .svc-page .strip div {
        flex: 1 1 50%;
    }
}

.buybox {
    margin-top: 26px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 24px 24px 22px;
    max-width: 520px;
}

.buybox .bb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.buybox label {
    display: block;
    font-size: 11.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 6px;
}

.buybox select,
.buybox input[type="text"] {
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 11px 12px;
    width: 100%;
    background: #fff;
}

.buybox select:focus,
.buybox input:focus {
    outline: none;
    border-color: var(--green);
}

.qty-step {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
}

.qty-step button {
    width: 44px;
    background: #fbfaf8;
    border: 0;
    font-family: inherit;
    font-size: 19px;
    color: var(--ink);
    cursor: pointer;
}

.qty-step button:hover {
    background: var(--ink);
    color: #fff;
}

.qty-step input {
    width: 64px;
    border: 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    padding: 10px 0;
}

.qty-step input:focus {
    outline: none;
}

.bb-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 16px 0 2px;
}

.bb-price .now {
    font-size: 30px;
    font-weight: 300;
    color: var(--ink);
}

.bb-price .was {
    font-size: 16px;
    color: var(--faint);
    text-decoration: line-through;
}

.bb-price .per {
    font-size: 13px;
    color: var(--soft);
}

.bb-save {
    font-size: 12.5px;
    color: var(--green);
    min-height: 18px;
}

.bb-nudge {
    font-size: 12.5px;
    color: var(--soft);
    margin-top: 3px;
    min-height: 18px;
}

.bb-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 12px;
}

.bb-tier {
    border: 1px solid var(--line);
    padding: 8px 6px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--soft);
    cursor: pointer;
    transition: 0.15s;
}

.bb-tier b {
    display: block;
    font-size: 13px;
    color: var(--ink);
    font-weight: 400;
}

.bb-tier:hover {
    border-color: var(--ink);
}

.bb-tier.on {
    border-color: var(--green);
    background: #edf4ee;
}

.bb-tier.on b {
    color: var(--green);
}

.buybox .prod-buy {
    margin-top: 18px;
}

.bb-fine {
    font-size: 11.5px;
    color: var(--faint);
    text-align: center;
    margin-top: 10px;
}

.svc-page .sec {
    padding: 64px 0;
}

.svc-page {
    --shell: 1200px;
}

.svc-page .sec-in {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 var(--pad);
}

.svc-page .head2 {
    max-width: 760px;
}

.svc-page .head2 h2 {
    font-size: clamp(25px, 2.9vw, 38px);
    margin-top: 10px;
    font-weight: 300;
    letter-spacing: -0.012em;
    line-height: 1.1;
}

.svc-page .head2 p {
    margin-top: 14px;
    font-size: 16px;
    color: var(--soft);
}

.svc-page .def {
    max-width: 820px;
}

.svc-page .def .rte p {
    font-size: 16px;
    color: var(--soft);
    line-height: 1.65;
}

.svc-page .def .rte p:first-child {
    font-size: 18px;
    color: var(--ink);
}

.svc-page .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 40px;
}

@media (max-width: 820px) {
    .svc-page .steps {
        grid-template-columns: 1fr;
    }
}

.svc-page .step {
    padding: 24px 26px 0;
    border-left: 1px solid var(--line);
}

.svc-page .step:first-child {
    border-left: 0;
    padding-left: 0;
}

.svc-page .step .n {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--green);
}

.svc-page .step h3 {
    font-size: 18px;
    margin: 8px 0 6px;
    font-weight: 300;
}

.svc-page .step p {
    font-size: 14px;
    color: var(--soft);
}

@media (max-width: 820px) {
    .svc-page .step {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 22px 0 0;
        margin-top: 20px;
    }

    .svc-page .step:first-child {
        border-top: 0;
        margin-top: 0;
    }
}

.svc-page .proof {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.svc-page .ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 36px;
}

@media (max-width: 700px) {
    .svc-page .ba {
        grid-template-columns: 1fr;
    }
}

.svc-page .ba figure {
    position: relative;
    margin: 0;
    background: #efece8;
}

.svc-page .ba img {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
    display: block;
}

.svc-page .ba figcaption {
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: #1412109e;
    padding: 5px 11px;
}

.svc-page .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 5px;
}

@media (max-width: 700px) {
    .svc-page .stats {
        grid-template-columns: 1fr;
    }
}

.svc-page .stat {
    background: #fff;
    border: 1px solid var(--line);
    padding: 26px 24px;
}

.svc-page .stat b {
    font-size: 30px;
    font-weight: 400;
    color: var(--green);
    display: block;
}

.svc-page .stat span {
    font-size: 13.5px;
    color: var(--soft);
}

.svc-page .stat cite {
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    display: block;
    margin-top: 8px;
}

.svc-page .incl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-top: 36px;
}

@media (max-width: 700px) {
    .svc-page .incl {
        grid-template-columns: 1fr;
    }
}

.svc-page .incl-card {
    background: #fff;
    border: 1px solid var(--line);
    padding: 26px;
}

.svc-page .incl-card h3 {
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 8px;
}

.svc-page .incl-card p {
    font-size: 14px;
    color: var(--soft);
}

.svc-page .related-row {
    display: flex;
    gap: 8px 26px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.svc-page .related-row a {
    font-size: 14px;
    color: var(--soft);
    border-bottom: 1px solid var(--line);
    padding-bottom: 2px;
    text-decoration: none;
}

.svc-page .related-row a:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.svc-page .sfaq {
    max-width: 820px;
}

.svc-page .sfaq details {
    border-bottom: 1px solid var(--line);
}

.svc-page .sfaq summary {
    padding: 22px 0;
    cursor: pointer;
    font-size: 17px;
    font-weight: 400;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.svc-page .sfaq summary::-webkit-details-marker {
    display: none;
}

.svc-page .sfaq summary:after {
    content: "+";
    font-size: 20px;
    color: var(--green);
    transition: transform 0.2s;
}

.svc-page .sfaq details[open] summary:after {
    transform: rotate(45deg);
}

.svc-page .sfaq details p {
    padding: 0 0 22px;
    color: var(--soft);
    font-size: 15px;
    max-width: 70ch;
}

.nav-burger {
    display: none;
    margin-left: 6px;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.nav-burger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition:
        transform 0.22s,
        opacity 0.18s;
}

.nav-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.nav-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav {
    display: none;
    flex-direction: column;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding: 10px var(--pad) 22px;
}

.mobile-nav a {
    padding: 14px 2px;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-2);
}

.mobile-nav a:last-child {
    border-bottom: 0;
}

.mobile-nav .btn {
    margin-top: 14px;
    text-align: center;
    color: #fff;
    border-bottom: 0;
}

@media (max-width: 900px) {
    .nav-burger {
        display: flex;
    }

    .nav .btn {
        margin-left: auto;
    }

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

img {
    height: auto;
}

.fs-back {
    overflow: auto;
}

.fs-modal {
    max-height: calc(100vh - 48px);
    overflow: auto;
}

@media (max-width: 760px) {
    .fs-modal {
        grid-template-columns: 1fr;
        max-width: 440px;
    }

    .fs-vis {
        min-height: 0;
        height: 180px;
    }

    .fs-body {
        padding: 24px 22px 22px;
    }

    .fs-body h3 {
        font-size: 22px;
        padding-right: 26px;
    }

    .fs-eyebrow {
        padding-right: 30px;
    }

    .fs-fine {
        font-size: 10.5px;
    }
}

@media (max-width: 640px) {
    .pb-bar {
        display: block;
    }

    .pb-meta b {
        display: inline;
        margin-right: 8px;
    }

    .pb-meta span {
        display: block;
        font-size: 11px;
        letter-spacing: 0.08em;
        margin-top: 2px;
    }

    .pb-count {
        display: block;
        margin-top: 8px;
        font-size: 11px;
    }
}

.svc-page .cred .stars5 {
    display: inline-flex;
    gap: 2px;
    flex: none;
}

.svc-page .cred .stars5 svg {
    width: 14px;
    height: 14px;
    fill: var(--green);
    stroke: none;
    display: block;
}

@media (max-width: 640px) {
    .svc-page .copy {
        padding-top: 36px;
    }

    .buybox {
        padding: 18px 16px 16px;
    }
}

@media (max-width: 640px) {
    .sold {
        display: grid;
    }

    .sold img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: auto;
    }

    .sold .txt {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        padding: 110px var(--pad) 34px;
    }
}

.nav .btn {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .nav {
        gap: 18px;
    }

    .nav .btn {
        font-size: 11px;
        padding: 11px 14px;
        letter-spacing: 0.1em;
    }
}

.bb-total {
    flex: 1;
    text-align: right;
}

.bb-total .bb-price {
    justify-content: flex-end;
    margin: 0;
}

.bb-total .per {
    font-size: 12.5px;
    color: var(--soft);
}

@media (max-width: 540px) {
    .buybox .bb-qtyrow {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bb-total {
        text-align: left;
        width: 100%;
    }

    .bb-total .bb-price {
        justify-content: flex-start;
    }

    .bb-tiers {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .svc-page .shot {
        min-height: 0;
    }

    .svc-page .shot img {
        position: static;
        width: 100%;
        height: auto;
        max-height: 460px;
        object-fit: cover;
    }
}

.feat-svc {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    border: 1px solid var(--line);
    background: #fff;
    margin: 30px 0 10px;
    text-decoration: none;
    color: var(--ink);
}

.feat-svc .fs-img {
    position: relative;
    background: #efece8;
    min-height: 320px;
}

.feat-svc .fs-img img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feat-svc .fs-body {
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.feat-svc .fs-body h2 {
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 300;
    letter-spacing: -0.012em;
}

.feat-svc .fs-price {
    font-size: 15px;
    color: var(--soft);
}

.feat-svc .fs-price b {
    font-size: 22px;
    color: var(--ink);
    font-weight: 400;
}

.feat-svc .fs-desc {
    font-size: 14.5px;
    color: var(--soft);
    line-height: 1.6;
    max-width: 52ch;
}

.feat-svc .btn {
    margin-top: auto;
}

@media (max-width: 820px) {
    .feat-svc {
        grid-template-columns: 1fr;
    }

    .feat-svc .fs-img {
        min-height: 0;
    }

    .feat-svc .fs-img img {
        position: static;
        height: auto;
        max-height: 380px;
    }

    .feat-svc .fs-body {
        padding: 24px 22px 26px;
    }
}

.other-svcs {
    margin-top: 44px;
}

.mkt {
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
}

.mkt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid var(--line);
    padding: 8px 10px;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    color: var(--ink);
}

.mkt-btn:hover {
    border-color: var(--ink);
}

.mkt-btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.mkt-cur {
    font-size: 12px;
    letter-spacing: 0.1em;
}

.mkt-caret {
    transition: transform 0.18s;
}

.mkt-btn[aria-expanded="true"] .mkt-caret {
    transform: rotate(180deg);
}

.flag {
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #0000001a;
}

.flag-code {
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 3px 4px;
    background: var(--line-2);
    border-radius: 2px;
    box-shadow: none;
    line-height: 1;
}

.mkt-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 90;
    margin: 0;
    padding: 6px;
    list-style: none;
    min-width: 212px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px #0000001a;
}

.mkt-list[hidden] {
    display: none;
}

.mkt-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: 0;
    padding: 9px 10px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--ink);
}

.mkt-opt:hover {
    background: var(--line-2);
}

.mkt-opt.on {
    font-weight: 500;
}

.mkt-name {
    flex: 1;
    font-size: 13px;
}

.mkt-opt .mkt-cur {
    color: var(--soft);
}

@media (max-width: 560px) {
    .mkt-btn .mkt-cur {
        display: none;
    }
}

@media (max-width: 760px) {
    .nav {
        gap: 14px;
        min-width: 0;
        padding: 0 25px;
    }

    .nav > .btn {
        display: none;
    }

    .nav-burger {
        margin-left: auto;
    }

    .mark {
        flex: none;
    }
}

@media (min-width: 761px) and (max-width: 900px) {
    .nav .btn {
        font-size: 11px;
        padding: 11px 14px;
        letter-spacing: 0.1em;
    }
}

.hero-badge {
    color: #fff;
    border-color: #ffffff75;
    background: #ffffff0f;
}

@media (max-width: 820px) {
    .hero {
        height: auto;
        min-height: 0;
        max-height: none;
        display: block;
        background: #0f0d0b;
    }

    .hero-vid {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: 42vh;
        min-height: 230px;
        max-height: 360px;
        object-fit: cover;
        z-index: 1;
    }

    .hero .scrim {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        height: 42vh;
        min-height: 230px;
        max-height: 360px;
        background: linear-gradient(
            to top,
            rgba(15, 13, 11, 1) 0%,
            rgba(15, 13, 11, 0.5) 34%,
            rgba(15, 13, 11, 0.12) 66%,
            transparent 100%
        );
    }

    .hero-copy {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        max-width: none;
        padding: 20px var(--pad) 34px;
        pointer-events: auto;
        margin-top: -1px;
    }

    .hero-badge {
        margin-bottom: 15px;
        font-size: 11.5px;
        letter-spacing: 0.11em;
        padding: 8px 15px;
        border-color: #ffffff85;
    }

    .hero-copy h1 {
        font-size: clamp(28px, 7.4vw, 38px);
        line-height: 1.12;
        text-shadow: none;
    }

    .hero-copy p {
        margin-top: 14px;
        font-size: 15.5px;
        line-height: 1.62;
        max-width: 62ch;
        color: #ffffffe0;
        text-shadow: none;
    }

    .hero-copy .row {
        margin-top: 24px;
    }

    .hero-cred {
        margin-top: 22px;
        gap: 9px 18px;
        font-size: 11px;
    }
}

/*# sourceMappingURL=/cdn/shop/t/67/assets/demo.css.map?v=55477405924789515171787175406 */

/* Villa features — premium sticky editorial showcase */
.vf-showcase {
    position: relative;
    height: 330vh;
    color: var(--ink);
}

.vf-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.vf-shell {
    width: min(calc(100% - 48px), 1500px);
    margin: 0 auto;
    padding: 52px clamp(28px, 4vw, 62px) 48px;
    backdrop-filter: blur(7px);
}

.vf-intro {
    max-width: 840px;
    margin: 0 auto 38px;
    text-align: center;
}

.vf-intro .micro,
.vf-mobile-head .micro {
    margin-bottom: 7px;
}

.vf-kicker {
    display: block;
    color: #8b8379;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.vf-intro h2 {
    margin-top: 10px;
    font-size: clamp(42px, 4.2vw, 64px);
    line-height: 0.98;
    font-weight: 300;
    letter-spacing: -0.03em;
    font-size: clamp(26px, 3vw, 40px);
    margin-top: 12px;
    max-width: 22ch;
}

.vf-main {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(440px, 0.97fr);
    gap: clamp(42px, 5.5vw, 88px);
    align-items: stretch;
}

.vf-media-stage {
    position: relative;
    height: min(59vh, 610px);
    min-height: 500px;
    overflow: hidden;
    background: #e8e3da;
    box-shadow: 0 18px 48px rgba(34, 29, 24, 0.12);
}

.vf-media {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.045);
    filter: saturate(0.92) contrast(0.98);
    transition:
        opacity 0.72s cubic-bezier(0.2, 0.75, 0.25, 1),
        transform 1.25s cubic-bezier(0.2, 0.75, 0.25, 1),
        filter 1s ease,
        visibility 0.72s;
}

.vf-media.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    filter: saturate(1) contrast(1);
}

.vf-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vf-media::after {
    content: "";
    position: absolute;
    inset: 54% 0 0;
    background: linear-gradient(
        to top,
        rgba(17, 15, 13, 0.48),
        rgba(17, 15, 13, 0)
    );
    pointer-events: none;
}

.vf-media figcaption {
    position: absolute;
    z-index: 2;
    left: 28px;
    bottom: 26px;
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 13px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

.vf-media figcaption span {
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.74;
}

.vf-media figcaption b {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.01em;
}

.vf-progress {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
}

.vf-progress span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(31, 28, 24, 0.2);
    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.vf-progress span.is-active {
    transform: scale(1.18);
    background: #6f685f;
}

.vf-image-index {
    position: absolute;
    z-index: 3;
    right: 20px;
    top: 20px;
    min-width: 92px;
    height: 31px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 99px;
    background: rgba(248, 246, 241, 0.86);
    color: #514b44;
    backdrop-filter: blur(8px);
    font-size: 9px;
    letter-spacing: 0.12em;
}

.vf-image-index i {
    width: 22px;
    height: 1px;
    background: rgba(81, 75, 68, 0.3);
}

.vf-image-index b {
    font-weight: 400;
}

.vf-copy-stage {
    position: relative;
    min-height: min(59vh, 610px);
}

.vf-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition:
        opacity 0.5s ease,
        transform 0.62s cubic-bezier(0.2, 0.75, 0.25, 1),
        visibility 0.5s;
}

.vf-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.vf-panel-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 0.7fr);
    gap: 28px;
    align-items: start;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(31, 28, 24, 0.11);
}

.vf-panel-head > span,
.vf-mobile-copy > span {
    display: block;
    margin-bottom: 8px;
    color: #999187;
    font-size: 9px;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.vf-panel-head h3 {
    font-size: clamp(29px, 2.35vw, 39px);
    line-height: 1.02;
    font-weight: 300;
    letter-spacing: -0.025em;
}

.vf-panel-head > p {
    margin-top: 13px;
    max-width: 500px;
    color: var(--soft);
    line-height: 1.62;
}

.vf-mini-visual {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1.45/1;
    background: #e5dfd5;
    box-shadow: 0 10px 28px rgba(38, 32, 27, 0.1);
}

.vf-mini-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.vf-panel.is-active .vf-mini-visual img {
    transform: scale(1.025);
}

.vf-feature-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.vf-feature {
    min-height: 139px;
    padding: 20px 22px 20px 0;
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border-bottom: 1px solid rgba(31, 28, 24, 0.09);
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.44s ease,
        background 0.3s ease,
        transform 0.48s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.vf-panel.is-active .vf-feature {
    opacity: 1;
    transform: translateY(0);
}

.vf-panel.is-active .vf-feature:nth-child(1) {
    transition-delay: 0.07s;
}
.vf-panel.is-active .vf-feature:nth-child(2) {
    transition-delay: 0.12s;
}
.vf-panel.is-active .vf-feature:nth-child(3) {
    transition-delay: 0.17s;
}
.vf-panel.is-active .vf-feature:nth-child(4) {
    transition-delay: 0.22s;
}

.vf-feature:nth-child(odd) {
    padding-right: 25px;
    border-right: 1px solid rgba(31, 28, 24, 0.09);
}

.vf-feature:nth-child(even) {
    padding-left: 25px;
}

.vf-panel.is-active .vf-feature:hover {
    background: rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
}

.vf-icon {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: #6f685f;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
}

.vf-feature h4 {
    font-size: 19px;
    line-height: 1.28;
    font-weight: 300;
    letter-spacing: -0.012em;
}

.vf-feature p {
    margin-top: 6px;
    color: var(--soft);
    font-size: 14px;
    line-height: 1.55;
}

.vf-mobile-list {
    display: none;
}

/* =========================================================
   VILLA FEATURES — TABLET ONLY
   Desktop-style layout, compact vertical fit
   Desktop + mobile untouched
   ========================================================= */

/* =========================================================
   VILLA FEATURES — TABLET ONLY
   Desktop + mobile untouched
   ========================================================= */

@media (min-width: 821px) and (max-width: 1180px) {
    .vf-showcase {
        height: 210vh;
    }

    .vf-sticky {
        position: sticky;
        top: 0;

        width: 100%;

        height: 100vh;
        height: 100svh;

        min-height: 0;

        display: flex;
        align-items: center;

        overflow: hidden;
    }

    .vf-shell {
        width: min(calc(100% - 32px), 1420px);

        height: auto;

        margin: 0 auto;

        padding: 18px 34px 18px;

        overflow: hidden;
    }

    /* heading */

    .vf-intro {
        margin-bottom: 14px;
    }

    .vf-intro > p:last-child {
        margin-top: 6px;

        font-size: 13px;
        line-height: 1.4;
    }

    /* same desktop side-by-side layout */

    .vf-main {
        display: grid;

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(340px, 0.95fr);

        gap: 30px;

        align-items: stretch;
    }

    /*
     * IMPORTANT
     *
     * 590px = white space jyada tha
     * 700px = image bahut tall ho gayi
     *
     * 640px = balanced iPad size
     */

    .vf-media-stage,
    .vf-copy-stage {
        height: 560px;

        min-height: 0;
        max-height: 560px;
    }

    /* right features same */

    .vf-static-grid {
        width: 100%;
        height: 100%;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(145px, 0.88fr);

        grid-template-rows: repeat(3, minmax(0, 1fr));

        column-gap: 20px;
    }

    .vf-static-grid .vf-feature,
    .vf-static-grid .vf-feature:nth-child(odd),
    .vf-static-grid .vf-feature:nth-child(even) {
        min-height: 0;

        padding-top: 10px;
        padding-bottom: 10px;
    }

    .vf-static-grid .vf-feature:nth-child(odd) {
        padding-right: 14px;
    }

    .vf-static-grid .vf-feature:nth-child(even) {
        padding-left: 14px;
    }

    .vf-feature h4 {
        font-size: clamp(15px, 1.7vw, 18px);
    }

    .vf-feature p {
        margin-top: 4px;

        font-size: clamp(11px, 1.15vw, 13px);

        line-height: 1.42;
    }

    .vf-icon {
        width: 20px;
        height: 20px;
    }
}
/* =========================================================
   VILLA FEATURES — TALL TABLET PORTRAIT
   No empty top/bottom viewport space
   Desktop + mobile untouched
   ========================================================= */

@media (min-width: 821px) and (max-width: 1100px) and (min-height: 1000px) {
    /*
     * Full 210vh scroll canvas tablet portrait
     * me nahi chahiye.
     */
    .vf-showcase {
        height: auto;
        padding: 24px 0;
    }

    /*
     * MAIN FIX:
     * 100svh remove.
     *
     * Ab 1366px ka empty viewport reserve
     * nahi hoga.
     */
    .vf-sticky {
        position: relative;
        top: auto;

        width: 100%;

        height: auto;
        min-height: 0;

        display: block;

        overflow: visible;
    }

    /*
     * Same existing tablet width.
     */
    .vf-shell {
        width: min(calc(100% - 32px), 1420px);

        height: auto;

        margin: 0 auto;

        padding: 18px 34px 18px;

        transform: none;

        overflow: hidden;
    }

    .vf-intro {
        margin-bottom: 14px;
    }

    /*
     * Exactly current visual height.
     * Isko bada nahi kar rahe.
     */
    .vf-media-stage,
    .vf-copy-stage {
        height: 560px;

        min-height: 0;
        max-height: 560px;
    }
}
/* =========================================================
   VILLA FEATURES — MOBILE DESKTOP-LIKE EXPLORE
   Image top + features bottom
   ========================================================= */

@media (max-width: 820px) {
    .vf-showcase {
        position: relative;

        height: 300vh;
        height: 300svh;

        padding: 0;

    }

    .vf-sticky {
        display: block;

        position: sticky;
        top: 0;

        width: 100%;

        height: 100vh;
        height: 100svh;

        min-height: 0;

        overflow: hidden;
    }

    .vf-shell {
        width: 100%;
        height: 100%;

        margin: 0;


        display: grid;

        grid-template-rows:
            auto
            minmax(0, 1fr);
    }

    /* same heading, only responsive sizing */

    .vf-intro {
        width: 100%;
        max-width: 100%;

        margin: 0 auto 12px;

        text-align: center;
    }

    .vf-intro h3 {
        margin: 0;

        font-size: clamp(24px, 7vw, 30px);
    }

    .vf-intro > p:last-child {
        max-width: 480px;

        margin: 7px auto 0;

        font-size: 12px;
        line-height: 1.45;
    }

    /* LEFT becomes TOP
       RIGHT becomes BOTTOM */

    .vf-main {
        min-height: 0;

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            minmax(190px, 0.82fr)
            minmax(0, 1.18fr);

        gap: 12px;
    }

    .vf-media-stage,
    .vf-copy-stage {
        width: 100%;

        height: auto;
        min-height: 0;

        max-height: none;
    }

    /* ---------------------------------------
       IMAGE — SAME BOTTOM TO TOP EFFECT
       --------------------------------------- */

    .vf-media {
        opacity: 1;
        visibility: visible;

        transform: translateY(100%);

        filter: none;

        transition: transform 0.9s cubic-bezier(0.22, 0.75, 0.22, 1);

        will-change: transform;
    }

    .vf-media.is-before {
        z-index: 1;

        transform: translateY(-100%);
    }

    .vf-media.is-active {
        z-index: 2;

        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    .vf-media.is-after {
        z-index: 3;

        transform: translateY(100%);
    }

    .vf-media-stage {
        border-radius: 10px;
    }

    .vf-media figcaption {
        left: 14px;
        bottom: 13px;

        gap: 8px;
    }

    .vf-media figcaption b {
        font-size: 13px;
    }

    .vf-progress {
        bottom: 12px;

        padding: 5px 7px;
    }

    .vf-progress span {
        width: 8px;
        height: 8px;
    }

    /* ---------------------------------------
       STATIC RIGHT CONTENT BELOW IMAGE
       --------------------------------------- */

    .vf-copy-static {
        position: relative;
    }

    .vf-panel-static {
        position: relative;

        inset: auto;

        width: 100%;
        height: 100%;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .vf-static-grid {
        width: 100%;
        height: 100%;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-rows: repeat(3, minmax(0, 1fr));

        column-gap: 14px;
    }

    /* keep same desktop arrangement */

    .vf-static-f1 {
        grid-column: 1;
        grid-row: 1;
    }

    .vf-static-visual {
        grid-column: 2;
        grid-row: 1;

        width: 100%;

        margin: 0;

        align-self: center;

        aspect-ratio: 1.45 / 1;
    }

    .vf-static-f2 {
        grid-column: 1;
        grid-row: 2;
    }

    .vf-static-f4 {
        grid-column: 2;
        grid-row: 2;
    }

    .vf-static-f3 {
        grid-column: 1;
        grid-row: 3;
    }

    .vf-static-f5 {
        grid-column: 2;
        grid-row: 3;
    }

    .vf-static-grid .vf-feature,
    .vf-static-grid .vf-feature:nth-child(odd),
    .vf-static-grid .vf-feature:nth-child(even) {
        min-height: 0;

        padding: 8px 6px 8px 0;

        border-right: 0;

        opacity: 1;

        transform: none;

        grid-template-columns:
            20px
            minmax(0, 1fr);

        gap: 7px;

        align-content: center;
    }

    .vf-static-grid .vf-feature:nth-child(even) {
        padding-left: 4px;
    }

    .vf-icon {
        width: 18px;
        height: 18px;
    }

    .vf-feature h4 {
        font-size: clamp(13px, 3.8vw, 15px);

        line-height: 1.2;
    }

    .vf-feature p {
        margin-top: 3px;

        font-size: clamp(10.5px, 2.8vw, 12px);

        line-height: 1.35;
    }

    /* old mobile cards no longer required */

    .vf-mobile-list {
        display: none;
    }
}
@media (max-width: 430px) {
    .vf-shell {
        padding-left: 16px;
        padding-right: 16px;
    }

    .vf-main {
        gap: 10px;

        grid-template-rows:
            minmax(180px, 0.78fr)
            minmax(0, 1.22fr);
    }

    .vf-intro {
        margin-bottom: 9px;
    }

    .vf-intro > p:last-child {
        font-size: 11.5px;
    }

    .vf-feature p {
        font-size: 10.5px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .vf-media,
    .vf-panel,
    .vf-progress span,
    .vf-mini-visual img,
    .vf-feature {
        transition: none;
    }
}
/* Villa features — viewport fit fix only */
@media (min-width: 821px) and (max-height: 820px) {
    .vf-sticky {
        height: 100vh;
        height: 100svh;
        min-height: 0;
    }

    .vf-shell {
        padding-top: clamp(22px, 4vh, 34px);
        padding-bottom: clamp(20px, 3.5vh, 30px);
    }

    .vf-intro {
        margin-bottom: clamp(16px, 2.5vh, 24px);
    }

    .vf-media-stage,
    .vf-copy-stage {
        height: calc(100svh - 190px);
        min-height: 390px;
        max-height: 500px;
    }

    .vf-panel-top {
        padding-bottom: 14px;
    }

    .vf-feature {
        min-height: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media (min-width: 821px) and (max-height: 680px) {
    .vf-shell {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .vf-intro {
        margin-bottom: 20px;
    }

    .vf-media-stage,
    .vf-copy-stage {
        height: calc(100svh - 165px);
        min-height: 360px;
    }

    .vf-panel-head > p {
        margin-top: 8px;
        line-height: 1.45;
    }

    .vf-feature {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .vf-feature p {
        margin-top: 4px;
        line-height: 1.4;
    }
}
/* =====================================================
   VILLA FEATURES
   Left image vertical scroll + static right features
   ===================================================== */

@media (min-width: 821px) {
    /* ---------------------------------
       LEFT IMAGE — BOTTOM TO TOP SLIDE
       --------------------------------- */

    .vf-media {
        opacity: 1;
        visibility: visible;

        transform: translateY(100%);
        filter: none;

        transition: transform 0.9s cubic-bezier(0.22, 0.75, 0.22, 1);

        will-change: transform;
    }

    /* Previous images stay above */
    .vf-media.is-before {
        transform: translateY(-100%);
        z-index: 1;
    }

    /* Current image */
    .vf-media.is-active {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
        filter: none;

        z-index: 2;
    }

    /* Next image waits below */
    .vf-media.is-after {
        transform: translateY(100%);
        z-index: 3;
    }

    /* ---------------------------------
       RIGHT SIDE — NEVER CHANGES
       --------------------------------- */

    .vf-copy-static {
        position: relative;
    }

    .vf-panel-static {
        position: relative;
        inset: auto;

        width: 100%;
        height: 100%;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    /* ---------------------------------
       REFERENCE STYLE 5-FEATURE LAYOUT
       --------------------------------- */

    .vf-static-grid {
        width: 100%;
        height: 100%;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(170px, 0.92fr);

        grid-template-rows: repeat(3, minmax(0, 1fr));

        column-gap: clamp(22px, 3vw, 42px);

        align-items: stretch;
    }

    .vf-static-grid .vf-feature {
        min-height: 0;

        padding: 18px 0;

        border-right: 0;

        opacity: 1;
        transform: none;

        align-content: center;
    }

    /* left column */

    .vf-static-f1 {
        grid-column: 1;
        grid-row: 1;
    }

    .vf-static-f2 {
        grid-column: 1;
        grid-row: 2;
    }

    .vf-static-f3 {
        grid-column: 1;
        grid-row: 3;
    }

    /* right column */

    .vf-static-visual {
        grid-column: 2;
        grid-row: 1;

        align-self: center;

        width: 100%;

        margin: 0;

        aspect-ratio: 1.45 / 1;
    }

    .vf-static-f4 {
        grid-column: 2;
        grid-row: 2;
    }

    .vf-static-f5 {
        grid-column: 2;
        grid-row: 3;
    }

    /* Existing odd/even rules override */

    .vf-static-grid .vf-feature:nth-child(odd),
    .vf-static-grid .vf-feature:nth-child(even) {
        padding-left: 0;
        padding-right: 0;

        border-right: 0;
    }

    /* subtle column separation */

    .vf-static-f4,
    .vf-static-f5 {
        padding-left: 4px;
    }
}
/* =========================================================
   SPACES SHOWCASE — CLEAN FINAL
   Big image crossfade
   Center image slides bottom -> top
   Outer center card stays fixed
   ========================================================= */

.ss-showcase {
    position: relative;
    height: 300vh;
    background: transparent;
    color: var(--ink);
}

.ss-sticky {
    position: sticky;
    top: 0;
    margin-top: 50px;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

.ss-shell {
    width: min(calc(100% - 48px), 1500px);
    height: 100%;
    margin: 0 auto;
    padding: clamp(20px, 3.2vh, 34px) clamp(28px, 4vw, 62px)
        clamp(12px, 2vh, 20px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

/* Heading */
.ss-intro {
    width: 100%;
    max-width: none;
    margin: 0 0 clamp(12px, 2vh, 20px);
    text-align: left;
}

.ss-intro h3 {
    margin: 0;
}

.ss-intro > p:last-child {
    max-width: 720px;
    margin-top: 7px;
}

/* Main stage */
.ss-stage {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.ss-scene {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background: #ece8e2;
}

/* =========================================================
   LARGE IMAGE — CROSSFADE
   ========================================================= */

.ss-media {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.012);
    transition:
        opacity 0.72s ease,
        transform 1.05s ease,
        visibility 0.72s;
    will-change: opacity, transform;
}

.ss-media.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.ss-media.is-before,
.ss-media.is-after {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.012);
}

.ss-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   FIXED CENTER CARD
   Only the image inside the card changes
   ========================================================= */

.ss-focus-card {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 50%;
    width: clamp(270px, 28vw, 390px);
    padding: 10px 10px 11px;
    transform: translate(-50%, -50%);
    background: rgba(251, 250, 247, 0.97);
    border: 1px solid rgba(30, 27, 23, 0.1);
    border-radius: 9px;
    box-shadow: 0 15px 38px rgba(20, 18, 15, 0.17);
    overflow: hidden;
    pointer-events: none;
}

.ss-focus-window {
    position: relative;
    width: 100%;
    aspect-ratio: 1.52 / 1;
    overflow: hidden;
    background: #e9e6e0;
}

.ss-focus-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(105%);
    transition: transform 0.82s cubic-bezier(0.22, 0.75, 0.22, 1);
    will-change: transform;
}

.ss-focus-image.is-active {
    z-index: 2;
    transform: translateY(0);
}

.ss-focus-image.is-before {
    z-index: 1;
    transform: translateY(-105%);
}

.ss-focus-image.is-after {
    z-index: 3;
    transform: translateY(105%);
}

/* Title stays below the center image */
.ss-focus-caption {
    min-height: 0;
    margin: 0;
    padding: 8px 2px 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition:
        opacity 0.25s ease,
        transform 0.3s ease;
}

.ss-focus-caption.is-changing {
    opacity: 0;
    transform: translateY(4px);
}

/* =========================================================
   BOTTOM DETAILS — COMPACT
   ========================================================= */

/* =========================================================
   BOTTOM DETAILS — PREMIUM COMPACT
   ========================================================= */

.ss-meta-bar {
    min-height: 0;

    margin: 7px 0 0;
    padding: 11px 14px;

    display: grid;
    grid-template-columns: minmax(170px, 1fr) auto;

    align-items: center;
    gap: 24px;

    background: rgba(255, 255, 255, 0.58);

    border: 1px solid rgba(31, 28, 24, 0.08);
    border-radius: 12px;

    box-shadow: 0 8px 24px rgba(37, 31, 25, 0.045);
}

/* LEFT TITLE */

.ss-meta-left {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}

.ss-meta-count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 24px;

    padding: 0 8px;

    border-radius: 99px;

    background: rgba(31, 28, 24, 0.055);

    color: #888178;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 0.08em;

    white-space: nowrap;
}

.ss-meta-title {
    margin: 0;

    color: var(--ink);

    font-size: clamp(14px, 1.2vw, 18px);

    line-height: 1.2;

    font-weight: 300;

    letter-spacing: -0.012em;
}

/* RIGHT DETAILS */

.ss-meta-points {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: nowrap;

    gap: 0;
}

.ss-meta-item {
    position: relative;

    min-width: 125px;

    margin: 0;

    padding: 0 18px;

    display: grid;

    grid-template-columns: 28px auto;

    align-items: center;

    gap: 9px;

    color: #625d57;

    white-space: nowrap;
}

.ss-meta-item:first-child {
    padding-left: 0;
}

.ss-meta-item:last-child {
    padding-right: 0;
}

/* thin separators */

.ss-meta-item + .ss-meta-item {
    border-left: 1px solid rgba(31, 28, 24, 0.09);
}

/* icon circle */

.ss-meta-icon {
    width: 28px;
    height: 28px;

    padding: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: rgba(111, 104, 95, 0.075);

    fill: none;

    stroke: #6f685f;

    stroke-width: 1.15;

    opacity: 0.9;
}

/* tiny heading */

.ss-meta-item small {
    display: block;

    margin-bottom: 2px;

    color: #999187;

    font-size: 10px;

    line-height: 1.15;

    font-weight: 400;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

/* main value */

.ss-meta-item strong {
    display: block;

    color: #4f4a44;

    font-size: 14px;

    line-height: 1.25;

    font-weight: 400;

    letter-spacing: 0.005em;

    white-space: nowrap;
}
@media (max-width: 1180px) and (min-width: 821px) {
    .ss-sticky {
        margin-top: 0;
    }

    .ss-shell {
        width: min(calc(100% - 32px), 1420px);

        padding: 24px 34px 18px;
    }

    .ss-intro {
        margin-bottom: 14px;
    }
}
/* =========================================================
   SPACES SHOWCASE — TABLET RESPONSIVE SIZE
   Desktop untouched
   ========================================================= */

@media (min-width: 821px) and (max-width: 1180px) {
    .ss-showcase {
        height: auto;
    }

    .ss-sticky {
        position: relative;
        top: auto;

        margin-top: 0;

        width: 100%;

        height: auto;
        min-height: 0;

        display: block;

        overflow: visible;
    }

    .ss-shell {
        width: min(calc(100% - 32px), 1420px);

        /*
         * IMPORTANT:
         * Full viewport height nahi.
         */
        height: auto;

        margin: 0 auto;

        padding: 22px 34px 18px;

        grid-template-rows:
            auto
            auto;
    }

    .ss-intro {
        margin-bottom: 14px;
    }

    .ss-stage {
        width: 100%;

        min-height: 0;

        display: grid;

        grid-template-rows:
            auto
            auto;
    }

    /*
     * MAIN IMAGE HEIGHT
     *
     * 1024px iPad par approx 490px
     * rahegi instead of huge full-screen image.
     */
    .ss-scene {
        width: 100%;

        height: clamp(390px, 48vw, 520px);

        min-height: 0;

        overflow: hidden;
    }

    /*
     * Center card bhi tablet ke proportion me.
     */
    .ss-focus-card {
        width: clamp(240px, 30vw, 330px);
    }

    .ss-meta-bar {
        margin-top: 7px;
    }
}
/* Villa Features — tall tablet fit */

/* Short desktop/laptop screens */
@media (min-width: 821px) and (max-height: 820px) {
    .ss-shell {
        padding-top: 18px;
        padding-bottom: 14px;
    }

    .ss-intro {
        margin-bottom: 14px;
    }

    .ss-intro > p:last-child {
        font-size: 15.5px;
        line-height: 1.45;
    }

    .ss-meta-bar {
        padding-top: 7px;
    }

    .ss-focus-card {
        width: clamp(235px, 25vw, 330px);
    }
}

@media (min-width: 821px) and (max-height: 680px) {
    .ss-shell {
        padding-top: 12px;
        padding-bottom: 10px;
    }

    .ss-intro {
        margin-bottom: 9px;
    }

    .ss-intro > p:last-child {
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .ss-meta-bar {
        padding-top: 6px;
    }

    .ss-focus-card {
        width: clamp(210px, 22vw, 285px);
    }

    .ss-meta-points {
        gap: 14px;
    }
}

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

.ss-mobile-list {
    display: none;
}

/* =========================================================
   SPACES SHOWCASE — MOBILE DESKTOP-LIKE EXPLORE
   Image top + details bottom
   ========================================================= */

@media (max-width: 820px) {
    .ss-showcase {
        position: relative;

        height: auto;

        padding: 0;
    }

    .ss-sticky {
        display: block;

        position: relative;
        top: auto;

        margin-top: 0;

        width: 100%;

        height: auto;
        min-height: 0;

        overflow: visible;
    }
    .ss-shell {
        width: 100%;

        /*
     * MAIN FIX
     */
        height: auto;
        max-height: 100svh;

        margin: 0;

        padding: 14px clamp(18px, 5vw, 26px) 12px;

        display: grid;

        grid-template-rows:
            auto
            auto;
    }
    .ss-intro {
        width: 100%;

        margin: 0 0 11px;

        text-align: left;
    }

    .ss-intro h3 {
        margin: 0;

        font-size: clamp(24px, 7vw, 30px);
    }

    .ss-intro > p:last-child {
        max-width: 480px;

        margin-top: 6px;

        font-size: 12px;
        line-height: 1.45;
    }

    /* IMAGE ABOVE,
       DESCRIPTION BELOW */
    .ss-stage {
        width: 100%;

        min-height: 0;

        display: grid;

        grid-template-rows:
            auto
            auto;
    }

    .ss-scene {
        width: 100%;

        /*
     * Phone width ke according responsive.
     *
     * 390px phone ≈ 242px image
     * 430px phone ≈ 267px image
     */
        height: clamp(220px, 62vw, 340px);

        min-height: 0;

        border-radius: 10px;

        overflow: hidden;
    }
    /* BIG IMAGE crossfade same */

    .ss-media {
        transform: scale(1.012);
    }

    .ss-media.is-active {
        transform: scale(1);
    }

    /* CENTER CARD */

    .ss-focus-card {
        width: clamp(130px, 36vw, 195px);

        padding: 8px 8px 9px;

        border-radius: 8px;
    }
    .ss-focus-caption {
        padding-top: 7px;

        font-size: 12px;
    }

    /* ---------------------------------------
       DETAILS BELOW IMAGE
       --------------------------------------- */

    .ss-meta-bar {
        margin: 7px 0 0;

        padding: 9px 10px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 8px;

        border-radius: 10px;
    }

    .ss-meta-left {
        width: 100%;
    }

    .ss-meta-title {
        font-size: 14px;
    }

    .ss-meta-points {
        width: 100%;

        display: flex;

        align-items: stretch;

        justify-content: stretch;

        gap: 0;
    }

    .ss-meta-item {
        flex: 1 1 0;

        min-width: 0;

        padding: 0 8px;

        grid-template-columns:
            23px
            minmax(0, 1fr);

        gap: 6px;
    }

    .ss-meta-item:first-child {
        padding-left: 0;
    }

    .ss-meta-item:last-child {
        padding-right: 0;
    }

    .ss-meta-icon {
        width: 23px;
        height: 23px;

        padding: 5px;
    }

    .ss-meta-item small {
        font-size: 7px;
    }

    .ss-meta-item strong {
        max-width: 100%;

        overflow: hidden;

        font-size: 10px;

        text-overflow: ellipsis;
    }

    /* old separate mobile cards off */

    .ss-mobile-list {
        display: none;
    }
}
@media (max-width: 430px) {
    .ss-shell {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ss-intro {
        margin-bottom: 9px;
    }

    .ss-focus-card {
        width: clamp(118px, 34vw, 170px);
    }

    .ss-meta-bar {
        padding: 8px 9px;
    }

    .ss-meta-item {
        padding-left: 5px;
        padding-right: 5px;
    }
    .ss-scene {
        height: clamp(205px, 61vw, 255px);
    }
    .ss-meta-icon {
        width: 21px;
        height: 21px;
    }

    .ss-meta-item strong {
        font-size: 9px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ss-media,
    .ss-focus-image,
    .ss-focus-caption {
        transition: none;
    }
}
/* =========================================================
   DOUBLE DOOR — SCROLL IMAGE REVEAL
   ========================================================= */

.dr-showcase {
    position: relative;

    height: 190vh;

    background: var(--bg);

    color: var(--ink);
}

/* sticky because animation scroll ke saath chalegi */

.dr-sticky {
    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;
    height: 100svh;

    display: flex;

    align-items: center;

    overflow: hidden;
}

.dr-shell {
    width: min(calc(100% - 48px), 1500px);

    margin: 0 auto;

    padding: 28px clamp(28px, 4vw, 62px) 24px;
}

/* heading */

.dr-intro {
    margin: 0 auto 24px;

    text-align: center;
}

.dr-intro h3 {
    margin-top: 8px;

    font-size: clamp(28px, 3vw, 44px);

    font-weight: 300;
}

.dr-intro > p:last-child {
    max-width: 620px;

    margin: 8px auto 0;

    color: var(--soft);

    font-size: 14px;
}

/* ========================================
   ACTUAL IMAGE
   ======================================== */
/* =========================================================
   PREMIUM DOUBLE DOOR
   ========================================================= */

.dr-stage {
    --door-progress: 0;

    position: relative;

    width: 100%;

    height: min(62vh, 690px);
    min-height: 460px;

    overflow: hidden;

    background: #e9e5df;

    /*
     * Thoda deep perspective =
     * elegant / architectural opening
     */
    perspective: 2200px;
    perspective-origin: 50% 48%;

    isolation: isolate;
}

/* =========================================================
   INNER / SECOND IMAGE
   ========================================================= */

.dr-inner-image {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Start me slight zoom,
     * open hone par naturally settle.
     */
    transform: scale(calc(1.055 - var(--door-progress) * 0.055));

    filter: brightness(calc(0.88 + var(--door-progress) * 0.12))
        saturate(calc(0.94 + var(--door-progress) * 0.06));

    will-change: transform, filter;
}

/* =========================================================
   BOTH DOOR HALVES
   ========================================================= */

.dr-door {
    position: absolute;

    top: 0;
    bottom: 0;

    z-index: 4;

    width: 50%;

    overflow: hidden;

    transform-style: preserve-3d;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform;

    /*
     * Premium subtle frame
     */
    background: #fff;
}

/* Same image ko perfectly 2 halves me show kare */

.dr-door img {
    position: absolute;

    top: 0;

    width: 200%;
    max-width: none;

    height: 100%;

    object-fit: cover;

    pointer-events: none;

    user-select: none;

    backface-visibility: hidden;
}

/* =========================================================
   LEFT DOOR
   ========================================================= */

.dr-door-left {
    left: 0;

    transform-origin: left center;

    transform: translateX(calc(-2.5% * var(--door-progress)))
        rotateY(calc(-76deg * var(--door-progress)));

    box-shadow: calc(18px * var(--door-progress)) 0
        calc(38px * var(--door-progress)) rgba(20, 18, 15, 0.2);
}

.dr-door-left img {
    left: 0;
}

/* =========================================================
   RIGHT DOOR
   ========================================================= */

.dr-door-right {
    right: 0;

    transform-origin: right center;

    transform: translateX(calc(2.5% * var(--door-progress)))
        rotateY(calc(76deg * var(--door-progress)));

    box-shadow: calc(-18px * var(--door-progress)) 0
        calc(38px * var(--door-progress)) rgba(20, 18, 15, 0.2);
}

.dr-door-right img {
    right: 0;
}
/* =========================================================
   WHITE INNER DOOR EDGES
   Jahan se doors open hote hain
   ========================================================= */

.dr-door::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    z-index: 10;

    width: 5px;

    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.98),
        rgba(255, 255, 255, 0.78)
    );

    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);

    pointer-events: none;
}

/* LEFT door ka INNER edge */

.dr-door-left::after {
    right: 0;

    transform: translateX(1px);
}

/* RIGHT door ka INNER edge */

.dr-door-right::after {
    left: 0;

    transform: translateX(-1px);
}
/* center line when doors closed */

.dr-door-line {
    position: absolute;

    z-index: 8;

    left: 50%;
    top: 0;

    width: 2px;
    height: 100%;

    transform: translateX(-50%);

    background: rgba(255, 255, 255, 0.94);

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);

    opacity: calc(1 - var(--door-progress) * 1.8);

    pointer-events: none;
}
.dr-stage::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        inset 0 0 55px rgba(15, 12, 10, 0.12);

    opacity: calc(0.9 - var(--door-progress) * 0.35);
}
/* subtle depth */

.dr-stage::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background: radial-gradient(
        circle at center,
        transparent 45%,
        rgba(20, 18, 15, 0.09) 100%
    );

    opacity: calc(1 - var(--door-progress) * 0.7);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 821px) and (max-width: 1180px) {
    .dr-showcase {
        height: 175vh;
    }

    .dr-shell {
        width: min(calc(100% - 32px), 1420px);

        padding: 20px 34px 18px;
    }

    .dr-intro {
        margin-bottom: 18px;
    }

    .dr-stage {
        height: clamp(420px, 50vw, 560px);

        min-height: 0;

        perspective: 1500px;
    }
}

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

@media (max-width: 820px) {
    .dr-showcase {
        height: 165vh;
    }

    .dr-sticky {
        height: 100svh;

        align-items: center;
    }

    .dr-shell {
        width: 100%;

        padding: 16px clamp(16px, 5vw, 24px);
    }

    .dr-intro {
        margin-bottom: 14px;
    }

    .dr-intro h3 {
        font-size: clamp(25px, 7vw, 31px);
    }

    .dr-intro > p:last-child {
        font-size: 12px;

        line-height: 1.45;
    }

    .dr-stage {
        height: clamp(270px, 70vw, 390px);

        min-height: 0;

        perspective: 1000px;
    }
}

@media (max-width: 430px) {
    .dr-showcase {
        height: 155vh;
    }

    .dr-stage {
        height: clamp(240px, 68vw, 310px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dr-showcase {
        height: auto;
    }

    .dr-sticky {
        position: relative;

        height: auto;
    }

    .dr-stage {
        --door-progress: 1;
    }
}

/* =========================================================
   HOUZEZ — EXPLORE OUR PROPERTIES
   ========================================================= */

.hzp-section {
    position: relative;

    width: 100%;

    padding: 88px 0 96px;


    color: #222;
}

.hzp-container {
    width: min(calc(100% - 48px), 1270px);

    margin: 0 auto;
}

/* =========================================================
   SECTION TITLE
   ========================================================= */

.hzp-heading {
    width: 100%;

    margin-bottom: 42px;

    text-align: center;
}

.hzp-heading h2 {
    margin: 0;

    color: #222;

    font-family: Jost, system-ui, sans-serif;

    font-size: clamp(27px, 2.45vw, 34px);

    line-height: 1.2;

    font-weight: 300;

    letter-spacing: -0.015em;
}

.hzp-heading p {
    max-width: 620px;

    margin: 10px auto 0;

    color: #777;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 300;
}

/* =========================================================
   GRID
   ========================================================= */

.hzp-grid {
    display: grid;

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

    gap: 30px;
}

/* =========================================================
   PROPERTY TYPE CARD
   ========================================================= */

.hzp-card {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1.28 / 1;

    overflow: hidden;

    background: #ddd;

    color: #fff;

    isolation: isolate;

    text-decoration: none;

    cursor: pointer;

    transform: translateZ(0);

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.025);
}

/* =========================================================
   IMAGE
   ========================================================= */

.hzp-card > img {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    transform: scale(1.001);

    transition: transform 700ms cubic-bezier(0.2, 0.65, 0.25, 1);

    will-change: transform;
}

/* =========================================================
   HOUZEZ DARK OVERLAY
   ========================================================= */

.hzp-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(15, 18, 20, 0.08) 0%,

        rgba(15, 18, 20, 0.08) 30%,

        rgba(15, 18, 20, 0.38) 72%,

        rgba(15, 18, 20, 0.68) 100%
    );

    transition: background 450ms ease;
}

/* subtle overall shade */

.hzp-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background: #000;

    opacity: 0.2;

    pointer-events: none;

    transition: opacity 400ms ease;
}

/* =========================================================
   TOP TEXT
   ========================================================= */

.hzp-top {
    position: absolute;

    z-index: 4;

    left: 24px;
    right: 24px;

    top: 22px;

    color: #fff;

    transform: translateY(0);

    transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hzp-count {
    display: block;

    margin-bottom: 2px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 13px;

    line-height: 1.4;

    font-weight: 300;

    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.hzp-top h3 {
    margin: 0;

    max-width: 90%;

    color: #fff;

    font-size: clamp(20px, 1.75vw, 25px);

    line-height: 1.15;

    font-weight: 300;

    letter-spacing: -0.012em;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   MORE DETAILS
   ========================================================= */

.hzp-bottom {
    position: absolute;

    z-index: 4;

    left: 24px;
    right: 22px;

    bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #fff;

    font-size: 12px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.hzp-bottom > span:first-child {
    position: relative;

    padding-bottom: 4px;

    transform: translateX(0);

    transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* tiny underline */

.hzp-bottom > span:first-child::after {
    content: none;
}
/* =========================================================
   ROUND ARROW
   ========================================================= */

.hzp-arrow {
    position: relative;

    display: block;

    width: 13px;
    height: 14px;

    flex: 0 0 13px;

    border: 0;
    border-radius: 0;

    background: transparent !important;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    transition: transform 0.28s ease;
}

/* old blade SVG hide */

.hzp-arrow svg {
    display: none !important;
}

/* old chevron remove */

.hzp-arrow::before,
.hzp-arrow::after {
    content: none !important;
}

/* SAME SOUTH FLORIDA HOLLOW ARROW */

.hzp-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M2.5 2.2L17.2 11L2.5 19.8Z' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;

    background-position: center !important;

    background-size: 12px 14px !important;
}
/* =========================================================
   EXACT PREMIUM HOVER FEEL
   ========================================================= */

/* =========================================================
   HOUZEZ — ORIGINAL-LIKE CARD HOVER
   ========================================================= */

@media (hover: hover) {
    /*
     * Houzez feel:
     * only image smoothly zooms,
     * overlay slightly stronger.
     *
     * Card/text jump nahi karega.
     */
    .hzp-card:hover > img {
        transform: scale(1.095);
    }

    .hzp-card:hover .hzp-shade {
        background: linear-gradient(
            180deg,
            rgba(10, 12, 14, 0.13) 0%,
            rgba(10, 12, 14, 0.15) 35%,
            rgba(10, 12, 14, 0.43) 72%,
            rgba(10, 12, 14, 0.72) 100%
        );
    }

    /*
     * Existing extra black layer ko
     * very subtle rakho.
     */
    .hzp-card:hover::before {
        opacity: 0.04;
    }

    /*
     * Text Houzez ki tarah apni
     * position par hi rahega.
     */
    .hzp-card:hover .hzp-top {
        transform: none;
    }

    .hzp-card:hover .hzp-bottom > span:first-child {
        transform: none;
    }

    /*
     * Custom underline animation remove.
     */
    .hzp-card:hover .hzp-bottom > span:first-child::after {
        transform: scaleX(0);
    }

    /*
     * Minimal arrow movement only.
     */
    .hzp-card:hover .hzp-arrow {
        transform: none;
    }
}
/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 821px) and (max-width: 1100px) {
    .hzp-section {
        padding: 70px 0 76px;
    }

    .hzp-container {
        width: calc(100% - 40px);
    }

    .hzp-heading {
        margin-bottom: 34px;
    }

    .hzp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .hzp-card {
        aspect-ratio: 1.42 / 1;
    }

    .hzp-top {
        left: 22px;
        top: 20px;

        right: 22px;
    }

    .hzp-bottom {
        left: 22px;
        right: 20px;

        bottom: 18px;
    }
}

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

@media (max-width: 820px) {
    .hzp-section {
        padding: 58px 0 64px;
    }

    .hzp-container {
        width: calc(100% - 32px);
    }

    .hzp-heading {
        margin-bottom: 28px;
    }

    .hzp-heading h2 {
        font-size: clamp(26px, 7.2vw, 31px);
    }

    .hzp-heading p {
        max-width: 330px;

        margin-top: 8px;

        font-size: 12.5px;

        line-height: 1.5;
    }

    .hzp-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .hzp-card {
        aspect-ratio: 1.45 / 1;
    }

    .hzp-top {
        left: 20px;
        right: 20px;

        top: 18px;
    }

    .hzp-count {
        font-size: 12px;
    }

    .hzp-top h3 {
        font-size: clamp(20px, 5.5vw, 24px);
    }

    .hzp-bottom {
        left: 20px;
        right: 18px;

        bottom: 17px;

        font-size: 11.5px;
    }

    .hzp-arrow {
        width: 32px;
        height: 32px;
    }
}

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

@media (max-width: 430px) {
    .hzp-container {
        width: calc(100% - 26px);
    }

    .hzp-card {
        aspect-ratio: 1.32 / 1;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .hzp-card > img,
    .hzp-top,
    .hzp-bottom > span,
    .hzp-arrow {
        transition: none;
    }
}
/* =========================================================
   EXPLORE OUR PROPERTIES
   DEMO01 — SEQUENTIAL CARD REVEAL
   ========================================================= */


/* INITIAL */

.hzp-section.hzp-reveal-ready .hzp-card {
    opacity: 0;

    /* LEFT side se start */
    transform: translate3d(-32px, 0, 0);

    transition:
        opacity .58s ease,
        transform .68s cubic-bezier(.22,.61,.36,1);

    will-change:
        opacity,
        transform;
}


/* REVEALED */

.hzp-section.hzp-reveal-ready
.hzp-card.hzp-card-in {

    opacity: 1;

    transform:
        translate3d(0,0,0);
}


/*
 * Reveal ke liye koi extra
 * white/black layer nahi.
 */

.hzp-section.hzp-reveal-ready
.hzp-card::after {

    content: none !important;
}


/* MOBILE */

@media (max-width: 820px) {

    .hzp-section.hzp-reveal-ready
    .hzp-card {
        transform: translate3d(-24px, 0, 0);
    }

    .hzp-section.hzp-reveal-ready
    .hzp-card.hzp-card-in {
        transform: translate3d(0, 0, 0);
    }



    .hzp-section.hzp-reveal-ready
    .hzp-card.hzp-card-in {

        transform:
            translate3d(0,0,0);
    }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .hzp-section.hzp-reveal-ready
    .hzp-card {

        opacity: 1;

        transform: none;

        transition: none;
    }
}
/* =========================================================
   HOUZEZ DEMO 49 — NEIGHBORHOOD ACCORDION
   ========================================================= */

.hn-section {
    position: relative;

    width: 100%;

    padding: 60px 0 50px;

    color: #202020;
}

.hn-wrap {
    width: min(calc(100% - 48px), 1420px);

    margin: 0 auto;
}

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

.hn-head {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 42px;
}

.hn-head-copy {
    max-width: 760px;
}

.hn-kicker {
    display: block;

    margin-bottom: 13px;

    color: #777;

    font-size: 15px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.hn-head h2 {
    margin: 0;
    color: #202020;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.16;
    font-weight: 300;
    letter-spacing: -0.012em;
}

.hn-head p {
    max-width: 650px;

    margin-top: 18px;

    color: #777;

    font-size: 14px;

    line-height: 1.65;

    font-weight: 300;
}

/* browse link */

.hn-all-link {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    flex: 0 0 auto;

    margin-bottom: 5px;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(25, 25, 25, 0.35);

    color: #222;

    font-size: 12px;

    line-height: 1;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        border-color 0.3s ease,
        gap 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hn-all-link:hover {
    gap: 25px;

    border-color: #222;
}

.hn-all-arrow {
    font-size: 19px;

    line-height: 0.7;
}

/* =========================================================
   MAIN ACCORDION
   ========================================================= */

.hn-accordion {
    display: flex;

    width: 100%;

    height: clamp(480px, 47vw, 550px);

    gap: 8px;

    overflow: hidden;
}

/* =========================================================
   PANEL
   ========================================================= */

.hn-panel {
    position: relative;

    flex: 0.72 1 0;

    min-width: 0;

    height: 100%;

    overflow: hidden;

    color: #fff;

    background: #ddd;

    cursor: pointer;

    isolation: isolate;

    transform: translateZ(0);

    transition:
        flex-grow 0.82s cubic-bezier(0.22, 0.72, 0.22, 1),
        flex-basis 0.82s cubic-bezier(0.22, 0.72, 0.22, 1);

    will-change: flex-grow, flex-basis;
}

/*
 * ACTIVE panel wide.
 *
 * Baaki images completely hide nahi hongi —
 * Houzez ki tarah side strips visible rahengi.
 */

.hn-panel.is-active {
    flex-grow: 4.15;
}

/* =========================================================
   IMAGES
   ========================================================= */

.hn-panel > img {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center;

    transform: scale(1.035);

    transition:
        transform 1.05s cubic-bezier(0.22, 0.72, 0.22, 1),
        filter 0.65s ease;

    will-change: transform;

    pointer-events: none;
}

.hn-panel:not(.is-active) > img {
    /*
     * Narrow panel me crop naturally
     * premium feel deta hai.
     */
    transform: scale(1.09);

    filter: saturate(0.86) brightness(0.82);
}

.hn-panel.is-active > img {
    transform: scale(1);

    filter: saturate(1) brightness(1);
}

/* =========================================================
   OVERLAY
   ========================================================= */

.hn-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.04) 0%,

        rgba(10, 10, 10, 0.06) 35%,

        rgba(10, 10, 10, 0.28) 65%,

        rgba(10, 10, 10, 0.72) 100%
    );

    transition: background 0.65s ease;
}

.hn-panel:not(.is-active) .hn-overlay {
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.15) 0%,

        rgba(10, 10, 10, 0.2) 55%,

        rgba(10, 10, 10, 0.66) 100%
    );
}

/* =========================================================
   PANEL CONTENT
   ========================================================= */

.hn-panel-copy {
    position: absolute;

    z-index: 3;

    left: 30px;
    right: 30px;

    bottom: 29px;

    min-width: 320px;

    color: #fff;

    transform: translate3d(0, 8px, 0);

    opacity: 0;

    transition:
        opacity 0.42s ease 0.16s,
        transform 0.56s cubic-bezier(0.22, 0.72, 0.22, 1) 0.12s;

    pointer-events: none;
}

/*
 * Sirf expanded panel ka full text.
 */

.hn-panel.is-active .hn-panel-copy {
    opacity: 1;

    transform: translate3d(0, 0, 0);
}

.hn-count {
    display: block;

    margin-bottom: 7px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 12px;

    line-height: 1.2;

    font-weight: 300;

    letter-spacing: 0.02em;
}

.hn-panel h3 {
    margin: 0;

    color: #fff;

    font-size: clamp(25px, 2.6vw, 38px);

    line-height: 1.05;

    font-weight: 300;

    letter-spacing: -0.025em;

    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

.hn-view {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 19px;

    color: #fff;

    font-size: 10.5px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.hn-view i {
    display: inline-block;

    font-style: normal;

    font-size: 19px;

    line-height: 0.6;

    transition: transform 0.35s cubic-bezier(0.22, 0.72, 0.22, 1);
}

.hn-panel.is-active:hover .hn-view i {
    transform: translateX(5px);
}

/* =========================================================
   VERY IMPORTANT —
   COLLAPSED PANEL STILL SHOWS IMAGE + SMALL INDEX
   ========================================================= */

.hn-panel.is-active::after {
    opacity: 0;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 821px) and (max-width: 1180px) {
    .hn-section {
        padding: 74px 0 80px;
    }

    .hn-wrap {
        width: calc(100% - 36px);
    }

    .hn-head {
        margin-bottom: 32px;

        gap: 28px;
    }

    .hn-head h2 {
        font-size: clamp(32px, 4.7vw, 46px);
    }

    .hn-accordion {
        height: clamp(440px, 56vw, 560px);

        gap: 6px;
    }

    .hn-panel {
        flex-grow: 0.62;
    }

    .hn-panel.is-active {
        flex-grow: 3.7;
    }

    .hn-panel-copy {
        left: 24px;
        right: 24px;

        bottom: 24px;

        min-width: 280px;
    }
}

/* =========================================================
   MOBILE
   SAME ACCORDION — TAP TO OPEN
   Other images remain partially visible
   ========================================================= */

@media (max-width: 820px) {
    .hn-section {
        padding: 62px 0 68px;
    }

    .hn-wrap {
        width: calc(100% - 28px);
    }

    .hn-head {
        display: block;

        margin-bottom: 27px;
    }

    .hn-kicker {
        margin-bottom: 11px;

        font-size: 10px;
    }

    .hn-head h2 {
        max-width: 390px;

        font-size: clamp(29px, 6vw, 38px);

        line-height: 1.06;
    }

    .hn-head p {
        max-width: 380px;

        margin-top: 13px;

        font-size: 12.5px;

        line-height: 1.55;
    }

    .hn-all-link {
        margin-top: 20px;

        margin-bottom: 0;

        font-size: 10.5px;
    }

    .hn-accordion {
        height: clamp(390px, 112vw, 500px);

        gap: 4px;

        /*
         * Important:
         * horizontal accordion mobile par
         * bhi same interaction rakhe.
         */
        overflow: hidden;
    }

    .hn-panel {
        flex-grow: 0.44;
    }

    .hn-panel.is-active {
        flex-grow: 4.8;
    }

    .hn-panel-copy {
        left: 19px;
        right: 18px;

        bottom: 20px;

        min-width: 220px;
    }

    .hn-count {
        font-size: 10.5px;
    }

    .hn-panel h3 {
        font-size: clamp(24px, 7vw, 31px);
    }

    .hn-view {
        margin-top: 14px;

        font-size: 9px;
    }
}

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

@media (max-width: 430px) {
    .hn-wrap {
        width: calc(100% - 22px);
    }

    .hn-accordion {
        height: clamp(360px, 115vw, 455px);
    }

    .hn-panel {
        flex-grow: 0.34;
    }

    .hn-panel.is-active {
        flex-grow: 5.2;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .hn-panel,
    .hn-panel > img,
    .hn-panel-copy {
        transition: none;
    }
}

/* =========================================================
   NEIGHBORHOOD ACCORDION — MOBILE VERTICAL
   Active image opens UPWARD
   Desktop + tablet untouched
   ========================================================= */

@media (max-width: 820px) {
    .hn-accordion {
        /*
         * Horizontal → vertical
         */
        display: flex;
        flex-direction: column;

        width: 100%;

        height: clamp(560px, 155vw, 690px);

        gap: 5px;

        overflow: hidden;
    }

    /*
     * CLOSED PANEL
     *
     * Har inactive image ek slim strip rahegi.
     */
    .hn-panel {
        position: relative;

        width: 100%;

        min-width: 0;

        flex: 0 0 clamp(58px, 15vw, 72px);

        height: auto;

        min-height: 0;

        overflow: hidden;

        transition:
            flex-basis 0.78s cubic-bezier(0.22, 0.72, 0.22, 1),
            flex-grow 0.78s cubic-bezier(0.22, 0.72, 0.22, 1);

        will-change: flex-basis, flex-grow;
    }

    /*
     * ACTIVE PANEL
     *
     * Remaining available height le lega.
     *
     * Agar lower panel tap hua,
     * uska bottom apni jagah rehkar
     * TOP boundary upar move hogi.
     */
    .hn-panel.is-active {
        flex: 1 1 auto;
    }

    /* image */

    .hn-panel > img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        transform: scale(1.06);

        transition:
            transform 0.9s cubic-bezier(0.22, 0.72, 0.22, 1),
            filter 0.55s ease;
    }

    .hn-panel.is-active > img {
        transform: scale(1);

        filter: brightness(1) saturate(1);
    }

    .hn-panel:not(.is-active) > img {
        transform: scale(1.04);

        filter: brightness(0.76) saturate(0.82);
    }

    /*
     * Active content image ke bottom me
     */

    .hn-panel-copy {
        left: 20px;
        right: 20px;

        bottom: 21px;

        min-width: 0;

        opacity: 0;

        transform: translate3d(0, 12px, 0);

        transition:
            opacity 0.32s ease 0.25s,
            transform 0.48s cubic-bezier(0.22, 0.72, 0.22, 1) 0.2s;
    }

    .hn-panel.is-active .hn-panel-copy {
        opacity: 1;

        transform: translate3d(0, 0, 0);
    }

    /*
     * Collapsed strips par title visible.
     *
     * Full copy hide rahegi,
     * sirf neighborhood name show hoga.
     */

    .hn-panel:not(.is-active) .hn-panel-copy {
        display: flex;

        align-items: center;

        left: 18px;
        right: 18px;

        top: 0;
        bottom: 0;

        min-width: 0;

        opacity: 1;

        transform: none;

        pointer-events: none;
    }

    .hn-panel:not(.is-active) .hn-count,
    .hn-panel:not(.is-active) .hn-view {
        display: none;
    }

    .hn-panel:not(.is-active) .hn-panel-copy h3 {
        margin: 0;

        font-size: 16px;

        line-height: 1;

        white-space: nowrap;

        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
    }

    /*
     * Active title
     */

    .hn-panel.is-active .hn-panel-copy h3 {
        font-size: clamp(25px, 7vw, 32px);
    }

    /*
     * Closed strip ka overlay darker,
     * active image brighter.
     */

    .hn-panel:not(.is-active) .hn-overlay {
        background: linear-gradient(
            90deg,
            rgba(10, 10, 10, 0.54) 0%,
            rgba(10, 10, 10, 0.24) 60%,
            rgba(10, 10, 10, 0.18) 100%
        );
    }

    .hn-panel.is-active .hn-overlay {
        background: linear-gradient(
            180deg,
            rgba(10, 10, 10, 0.02) 0%,
            rgba(10, 10, 10, 0.06) 42%,
            rgba(10, 10, 10, 0.67) 100%
        );
    }
}

/* =========================================================
   SOUTH FLORIDA COMMUNITIES
   HOUZEZ DEMO 25 STYLE
   ========================================================= */

.sfl-section {
    position: relative;

    width: 100%;

    padding: 92px 0 100px;


    color: #202020;
}

.sfl-wrap {
    width: min(calc(100% - 48px), 1420px);

    margin: 0 auto;
}

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

.sfl-head {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 38px;
}

.sfl-head h2 {
    margin: 0;

    color: #222;

    font-size: clamp(27px, 2.5vw, 36px);

    line-height: 1.15;

    font-weight: 300;

    letter-spacing: -0.018em;
}

.sfl-all {
    position: relative;

    display: inline-block;

    flex: 0 0 auto;

    padding-bottom: 4px;

    color: #333;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 400;
}

.sfl-all::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 0;

    height: 1px;

    background: #333;

    transform-origin: right center;

    transition: transform 0.32s ease;
}

.sfl-all:hover::after {
    transform: scaleX(0.45);
}

/* =========================================================
   GRID
   5 + 5 LIKE DEMO 25
   ========================================================= */

.sfl-grid {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 5px;
}

/* =========================================================
   CARD
   ========================================================= */

.sfl-card {
    position: relative;

    display: block;

    width: 100%;

    height: clamp(275px, 25vw, 365px);

    overflow: hidden;

    background: #dadada;

    color: #fff;

    isolation: isolate;
}

/* IMAGE */

.sfl-card > img {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    transform: scale(1.001);

    transition: transform 0.72s cubic-bezier(0.2, 0.72, 0.22, 1);

    will-change: transform;
}

/* =========================================================
   DARK GRADIENT
   ========================================================= */

.sfl-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    opacity: 0.3;
    background-color: rgb(0, 0, 0);

    transition: background 0.45s ease;
}

/* =========================================================
   TEXT
   ========================================================= */

.sfl-copy {
    position: absolute;

    z-index: 3;

    left: 22px;
    right: 22px;

    bottom: 20px;

    color: #fff;

    transform: translate3d(0, 0, 0);

    transition: transform 0.45s cubic-bezier(0.22, 0.72, 0.22, 1);
}

.sfl-copy h3 {
    margin: 0;

    color: #fff;

    font-size: clamp(17px, 1.45vw, 22px);

    line-height: 1.15;

    font-weight: 300;

    letter-spacing: -0.012em;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
}

/* EXPLORE */

.sfl-explore {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 9px;

    color: rgba(255, 255, 255, 0.92);

    font-size: 11px;

    line-height: 1;

    font-weight: 400;

    opacity: 0.92;

    transition:
        gap 0.35s cubic-bezier(0.22, 0.72, 0.22, 1),
        opacity 0.3s ease;
}

.sfl-explore i {
    font-style: normal;

    font-size: 16px;

    line-height: 0.7;
}

/* =========================================================
   DESKTOP HOVER — DEMO 25 STYLE
   ========================================================= */

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 821px) and (max-width: 1180px) {
    .sfl-section {
        padding: 72px 0 78px;
    }

    .sfl-wrap {
        width: calc(100% - 36px);
    }

    .sfl-head {
        margin-bottom: 30px;
    }

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

        gap: 5px;
    }

    .sfl-card {
        height: clamp(260px, 34vw, 345px);
    }
}

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

@media (max-width: 820px) {
    .sfl-section {
        padding: 58px 0 64px;
    }

    .sfl-wrap {
        width: calc(100% - 28px);
    }

    .sfl-head {
        display: block;

        margin-bottom: 26px;
    }

    .sfl-head h2 {
        max-width: 330px;

        font-size: clamp(27px, 7.4vw, 33px);

        line-height: 1.12;
    }

    .sfl-all {
        margin-top: 15px;

        font-size: 11px;
    }

    /*
     * Demo-style clean 2-column mobile.
     */

    .sfl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 4px;
    }

    .sfl-card {
        height: clamp(220px, 58vw, 285px);
    }

    .sfl-copy {
        left: 15px;
        right: 15px;

        bottom: 15px;
    }

    .sfl-copy h3 {
        font-size: clamp(16px, 4.6vw, 19px);
    }

    .sfl-explore {
        margin-top: 6px;

        font-size: 10px;

        gap: 7px;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {
    .sfl-wrap {
        width: calc(100% - 20px);
    }

    .sfl-card {
        height: clamp(205px, 61vw, 250px);
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .sfl-card > img,
    .sfl-copy,
    .sfl-explore {
        transition: none;
    }
}
/* =========================================================
   SOUTH FLORIDA
   LEFT → RIGHT SEQUENTIAL REVEAL
   ========================================================= */


/* INITIAL */

.sfl-section.sfl-reveal-ready
.sfl-card {

    opacity: 0;

    transform:
        translate3d(-32px, 0, 0);

    transition:
        opacity .58s ease,
        transform .68s
        cubic-bezier(.22,.61,.36,1);

    will-change:
        opacity,
        transform;
}


/* CARD SHOW */

.sfl-section.sfl-reveal-ready
.sfl-card.sfl-card-in {

    opacity: 1;

    transform:
        translate3d(0, 0, 0);
}


/* =========================================
   MOBILE
   same direction, slightly less movement
   ========================================= */

@media (max-width: 820px) {

    .sfl-section.sfl-reveal-ready
    .sfl-card {

        transform:
            translate3d(-24px, 0, 0);
    }


    .sfl-section.sfl-reveal-ready
    .sfl-card.sfl-card-in {

        transform:
            translate3d(0, 0, 0);
    }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .sfl-section.sfl-reveal-ready
    .sfl-card {

        opacity: 1;

        transform: none;

        transition: none;
    }
}
/* =========================================================
   SOUTH FLORIDA COMMUNITIES
   EXACT RESPONSIVE LAYOUT OVERRIDE
   Desktop = screenshot 1
   Tablet  = screenshot 2
   Mobile  = one by one
   ========================================================= */

/* -------------------------
   COMMON
   ------------------------- */

.sfl-grid {
    display: grid;
}

.sfl-card {
    height: 100%;
    min-height: 0;
}

/* =========================================================
   DESKTOP
   Screenshot 1 jaisa
   6 columns
   Miami + Fort Lauderdale tall
   बाकी stacked
   ========================================================= */

@media (min-width: 1181px) {
    .sfl-wrap {
        width: min(calc(100% - 48px), 1580px);
    }

    .sfl-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: clamp(210px, 16vw, 255px);
        gap: 12px;
    }

    .sfl-card:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .sfl-card:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .sfl-card:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .sfl-card:nth-child(4) {
        grid-column: 3;
        grid-row: 1;
    }

    .sfl-card:nth-child(5) {
        grid-column: 3;
        grid-row: 2;
    }

    .sfl-card:nth-child(6) {
        grid-column: 4;
        grid-row: 1 / span 2;
    }

    .sfl-card:nth-child(7) {
        grid-column: 5;
        grid-row: 1;
    }

    .sfl-card:nth-child(8) {
        grid-column: 5;
        grid-row: 2;
    }

    .sfl-card:nth-child(9) {
        grid-column: 6;
        grid-row: 1;
    }

    .sfl-card:nth-child(10) {
        grid-column: 6;
        grid-row: 2;
    }
}

/* =========================================================
   TABLET
   Screenshot 2 jaisa
   3 columns
   first + sixth tall
   ========================================================= */

@media (min-width: 821px) and (max-width: 1180px) {
    .sfl-wrap {
        width: calc(100% - 36px);
    }

    .sfl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: clamp(145px, 18vw, 190px);
        gap: 6px;
    }

    .sfl-card:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .sfl-card:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .sfl-card:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .sfl-card:nth-child(4) {
        grid-column: 3;
        grid-row: 1;
    }

    .sfl-card:nth-child(5) {
        grid-column: 3;
        grid-row: 2;
    }

    .sfl-card:nth-child(6) {
        grid-column: 1;
        grid-row: 3 / span 2;
    }

    .sfl-card:nth-child(7) {
        grid-column: 2;
        grid-row: 3;
    }

    .sfl-card:nth-child(8) {
        grid-column: 2;
        grid-row: 4;
    }

    .sfl-card:nth-child(9) {
        grid-column: 3;
        grid-row: 3;
    }

    .sfl-card:nth-child(10) {
        grid-column: 3;
        grid-row: 4;
    }

    .sfl-copy {
        left: 16px;
        right: 16px;
        bottom: 15px;
    }

    .sfl-copy h3 {
        font-size: clamp(15px, 2vw, 20px);
    }

    .sfl-explore {
        margin-top: 6px;
        font-size: 10px;
        gap: 7px;
    }
}

/* =========================================================
   MOBILE
   one by one
   ek ke niche ek
   ========================================================= */

@media (max-width: 820px) {
    .sfl-wrap {
        width: calc(100% - 28px);
    }

    .sfl-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: unset;
        gap: 10px;
    }

    .sfl-card {
        grid-column: auto !important;
        grid-row: auto !important;
        height: clamp(220px, 62vw, 290px);
    }

    .sfl-copy {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .sfl-copy h3 {
        font-size: clamp(17px, 5vw, 21px);
    }

    .sfl-explore {
        margin-top: 7px;
        font-size: 10.5px;
        gap: 8px;
    }
}

/* =========================================================
   SMALL MOBILE
   थोड़ा compact
   ========================================================= */

@media (max-width: 430px) {
    .sfl-wrap {
        width: calc(100% - 20px);
    }

    .sfl-card {
        height: clamp(205px, 66vw, 255px);
    }
}

/* =========================================================
   SOUTH FLORIDA CARD TEXT POSITION
   Houzez Demo 25 exact-style placement
   ========================================================= */

.sfl-copy {
    position: absolute;

    inset: 0;

    z-index: 3;

    left: 0;
    right: 0;
    bottom: 0;

    transform: none !important;

    pointer-events: none;
}

/* COMMUNITY NAME — LEFT TOP */

.sfl-copy h3 {
    position: absolute;
    top: 18px;
    left: 20px;
    right: 20px;
    margin: 0;
    color: #fff;
    font-size: clamp(16px, 1.1vw, 20px);
    font-weight: 300;
}

/* =========================================================
   BOTTOM ROW
   EXPLORE LEFT + ARROW RIGHT
   ========================================================= */

.sfl-explore {
    position: absolute;

    left: 20px;
    right: 18px;
    bottom: 18px;

    margin: 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    width: auto;

    gap: 0;

    color: #fff;

    font-size: 11px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: 0.02em;

    text-transform: uppercase;

    opacity: 1;
}

/* =========================================================
   RIGHT BOTTOM ARROW
   white outline / transparent inside
   ========================================================= */

.sfl-explore i {
    position: relative;

    display: block;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin: 0;

    font-size: 0;

    line-height: 0;

    transition: transform 0.32s cubic-bezier(0.22, 0.72, 0.22, 1);
}

/* outer white triangle */

.sfl-explore i::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 13px;
    height: 15px;

    transform: translate(-50%, -50%);

    background: #fff;

    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* inner cut-out = transparent look */

.sfl-explore i::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 48%;

    width: 9px;
    height: 11px;

    transform: translate(-50%, -50%);

    background: rgba(0, 0, 0, 0.22);

    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* =========================================================
   HOVER
   Text stays fixed
   Only arrow gives tiny movement
   ========================================================= */

@media (hover: hover) {
    .sfl-card:hover .sfl-copy {
        transform: none !important;
    }

    .sfl-card:hover .sfl-explore {
        gap: 0;
    }

    .sfl-card:hover .sfl-explore i {
        transform: translateX(3px);
    }
}

/* =========================================================
   SOUTH FLORIDA — DEMO25 FINAL CARD EFFECT
   Arrow + hover only
   Layout untouched
   ========================================================= */

/* ---------------------------------------------------------
   TEXT POSITIONS FIXED
   --------------------------------------------------------- */

.sfl-copy,
.sfl-card:hover .sfl-copy {
    transform: none !important;
}

.sfl-copy h3 {
    transform: none !important;
}

.sfl-explore,
.sfl-card:hover .sfl-explore {
    gap: 0 !important;

    opacity: 1;

    transform: none !important;
}

/* =========================================================
   DEMO25 HOLLOW TRIANGLE ARROW
   No shaft
   No fill
   Only white outline
   ========================================================= */

.sfl-explore i {
    position: absolute;

    right: 0;
    bottom: 50%;

    width: 13px;
    height: 14px;

    margin: 0;

    transform: translateY(50%);

    font-size: 0 !important;
    line-height: 0;

    background: transparent !important;

    border: 0 !important;

    transition: transform 0.28s ease;

    pointer-events: none;
}

/*
 * Remove ALL previous custom arrow parts
 */

.sfl-explore i::before,
.sfl-explore i::after {
    content: none !important;
}

/*
 * Exact hollow triangular outline.
 * Inside remains completely transparent.
 */

.sfl-explore i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M2.5 2.2L17.2 11L2.5 19.8Z' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;

    background-position: center !important;

    background-size: 12px 14px !important;
}

/* =========================================================
   DEMO25 IMAGE HOVER
   ---------------------------------------------------------
   No title movement
   No Explore movement
   No fake dark animation
   No arrow sliding across card
   Just smooth image zoom/crop
   ========================================================= */

.sfl-card > img {
    transform: scale(1.001);

    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    will-change: transform;
}

/*
 * Keep normal overlay stable.
 */

.sfl-overlay {
    transition: opacity 0.35s ease;

    opac ity: 1;
}

/* ---------------------------------------------------------
   DESKTOP / POINTER HOVER
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .sfl-card:hover > img {
        /*
         * Demo25 jaisa subtle zoom.
         * Previous 1.075 aggressive tha.
         */
        transform: scale(1.045);
    }

    /*
     * Existing hover darkening ko remove.
     * Overlay same rahe.
     */

    .sfl-card:hover .sfl-overlay {
        background: linear-gradient(
            180deg,
            rgba(15, 15, 15, 0.03) 0%,
            rgba(15, 15, 15, 0.08) 38%,
            rgba(15, 15, 15, 0.32) 68%,
            rgba(15, 15, 15, 0.74) 100%
        );
    }

    /*
     * Title bilkul fixed.
     */

    .sfl-card:hover .sfl-copy {
        transform: none !important;
    }

    /*
     * EXPLORE bilkul fixed.
     */

    .sfl-card:hover .sfl-explore {
        gap: 0 !important;
        opacity: 1;
    }

    /*
     * Arrow bhi basically fixed.
     * Sirf microscopic premium response.
     */

    .sfl-card:hover .sfl-explore i {
        transform: translateY(50%);
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 821px) and (max-width: 1180px) {
    .sfl-explore i {
        width: 15px;
        height: 15px;

        background-size: 13px 15px !important;
    }
}

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

@media (max-width: 820px) {
    .sfl-explore i {
        width: 16px;
        height: 16px;

        background-size: 14px 16px !important;
    }

    /*
     * Touch devices par fake hover state nahi.
     */

    .sfl-card > img {
        transform: scale(1.001);
    }
}
/* =========================================================
   DEMO25 STYLE — WHITE IMAGE SHADE ON HOVER
   BOTH SECTIONS
   ========================================================= */

/* ---------------------------------------------------------
   1. EXPLORE OUR PROPERTIES
   Remove old zoom / dark hover
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .hzp-card:hover > img {
        transform: scale(1.001) !important;
    }

    /*
     * Original dark gradient same rahe.
     * Hover par dark nahi hoga.
     */
    .hzp-card:hover .hzp-shade {
        background: linear-gradient(
            180deg,
            rgba(15, 18, 20, 0.08) 0%,
            rgba(15, 18, 20, 0.08) 30%,
            rgba(15, 18, 20, 0.38) 72%,
            rgba(15, 18, 20, 0.68) 100%
        ) !important;
    }

    /*
     * WHITE SHADE
     */

    /*
     * Existing black hover layer disable
     */
    .hzp-card:hover::before {
        opacity: 0 !important;
    }
}

/* ---------------------------------------------------------
   2. SOUTH FLORIDA
   Same exact white shade
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .sfl-card:hover > img {
        transform: scale(1.001) !important;
    }

    /*
     * Current dark overlay ko hover pe
     * change nahi karna.
     */
    .sfl-card:hover .sfl-overlay {
        background: linear-gradient(
            180deg,
            rgba(15, 15, 15, 0.03) 0%,
            rgba(15, 15, 15, 0.08) 38%,
            rgba(15, 15, 15, 0.32) 68%,
            rgba(15, 15, 15, 0.74) 100%
        ) !important;
    }

    /*
     * SAME WHITE SHADE
     */
}
/* =========================================================
   DEMO25 HOVER
   Dark shade fades away -> image becomes clear
   NO white film
   NO zoom
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
    /* =====================================
       EXPLORE OUR PROPERTIES
       ===================================== */

    .hzp-card > img {
        transform: scale(1.001) !important;
    }

    .hzp-shade {
        transition: background 0.42s ease;
    }

    .hzp-card:hover .hzp-shade {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,

            rgba(0, 0, 0, 0.015) 32%,

            rgba(0, 0, 0, 0.08) 67%,

            rgba(0, 0, 0, 0.34) 100%
        ) !important;
    }

    /* extra black layer completely remove on hover */

    .hzp-card:hover::before {
        opacity: 0 !important;
    }

    /* =====================================
       SOUTH FLORIDA
       ===================================== */

    .sfl-card > img {
        transform: scale(1.001) !important;
    }

    .sfl-overlay {
        transition: background 0.42s ease;
    }

    .sfl-card:hover .sfl-overlay {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,

            rgba(0, 0, 0, 0.015) 32%,

            rgba(0, 0, 0, 0.07) 67%,

            rgba(0, 0, 0, 0.32) 100%
        ) !important;
    }

    /* text/icon bilkul move nahi honge */

    .hzp-card:hover .hzp-top,
    .hzp-card:hover .hzp-bottom,
    .hzp-card:hover .hzp-arrow,
    .sfl-card:hover .sfl-copy,
    .sfl-card:hover .sfl-explore,
    .sfl-card:hover .sfl-explore i {
        transform: none !important;
    }
}
/* =========================================================
   HOME — ABOUT US / PALMEA STYLE
   ========================================================= */

.home-about {
    overflow: hidden;
    padding: 96px var(--pad);
    background: var(--bg);
}

.home-about__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 7vw, 96px);
    align-items: center;
}

.home-about__content {
    max-width: 535px;
}

.home-about__content h2 {
    margin-top: 14px;
    color: var(--ink);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.home-about__content h2 + p {
    margin-top: 25px;
}

.home-about__content p:not(.micro) {
    max-width: 56ch;
    color: var(--soft);
    font-size: 15px;
    line-height: 1.72;
}

.home-about__content p + p {
    margin-top: 14px;
}

.home-about__bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 32px;
}

.home-about__stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 46px;
    padding-left: 14px;
    border-left: 1px solid var(--green);
}

.home-about__stat strong {
    color: var(--ink);
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
}

.home-about__stat span {
    max-width: 155px;
    color: var(--soft);
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-about__button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    white-space: nowrap;
}

.home-about__button span {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.home-about__button:hover span {
    transform: translateX(4px);
}

.home-about__media {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr 0.92fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    min-height: 480px;
}

.home-about__image {
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: #efece8;
}

.home-about__image--main {
    grid-column: 1;
    grid-row: 1 / 3;
}

.home-about__image--wide {
    grid-column: 2 / 4;
    grid-row: 1;
}

.home-about__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease;
}

.home-about__image:hover img {
    transform: scale(1.045);
    filter: brightness(0.94);
}

/* Tablet */
@media (max-width: 980px) {
    .home-about {
        padding: 30px clamp(18px, 5vw, 26px) 12px;
    }
.head {
    padding: 50px var(--pad) 0;
}
    .home-about__inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .home-about__content {
        max-width: 650px;
    }

    .home-about__media {
        min-height: 430px;
    }
}

/* Mobile */
@media (max-width: 640px) {
   
    .home-about__inner {
        gap: 38px;
    }

    .home-about__content h2 {
        font-size: clamp(34px, 10vw, 45px);
        line-height: 1.05;
    }

    .home-about__content p:not(.micro) {
        font-size: 14.5px;
        line-height: 1.65;
    }

    .home-about__bottom {
        align-items: flex-start;
        gap: 22px;
        margin-top: 28px;
    }

    .home-about__media {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 220px 145px 145px;
        min-height: 0;
        gap: 11px;
    }

    .home-about__image--main {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .home-about__image--wide {
        grid-column: 1;
        grid-row: 2;
    }

    .home-about__image:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .home-about__image:nth-child(4) {
        grid-column: 1 / 3;
        grid-row: 3;
    }
}

@media (max-width: 430px) {
    .home-about {
        padding-right: 18px;
        padding-left: 18px;
    }

    .home-about__media {
        grid-template-rows: 195px 125px 125px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-about__image img,
    .home-about__button span {
        transition: none;
    }
}

/* =========================================================
   GLOBAL ALIGNMENT + CONSISTENT SECTION RHYTHM
   ========================================================= */

:root {
    --section-space: 76px;
}

/* Header mobile padding is 25px */
@media (max-width: 760px) {
    :root {
        --pad: 25px;
        --section-space: 56px;
    }
}

/* All normal content areas use the same horizontal gutter as header */
#MainContent .head,
#MainContent .jobs,
#MainContent .grid,
#MainContent .reel,
#MainContent .reel-hint,
#MainContent .look-note,
#MainContent .book-zone,
#MainContent .book-count,
#MainContent .craft-grid,
#MainContent .press-grid,
#MainContent .press-more,
#MainContent .revs-grid,
#MainContent .comply-tiles,
#MainContent .proc,
#MainContent .faq,
#MainContent .home-about,
#MainContent .home-solutions,
#MainContent .home-offers,
#MainContent .vf-shell,
#MainContent .ss-shell,
#MainContent .sfl-wrap {
    padding-left: var(--pad) !important;
    padding-right: var(--pad) !important;
}

/* Remove restrictive outer max-width from section shells */
#MainContent .home-about__inner,
#MainContent .who-in,
#MainContent .value-in,
#MainContent .press-grid,
#MainContent .sfl-wrap,
#MainContent .vf-shell,
#MainContent .ss-shell {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Same top spacing for section headings */
#MainContent .head {
    padding-top: 30px;
    padding-bottom: 0 !important;
}

/* Same vertical rhythm */
#MainContent .quote,
#MainContent .quote-top,
#MainContent .home-about,
#MainContent .home-solutions,
#MainContent .home-offers,
#MainContent .whyus .who-in,
#MainContent .value-in {
    padding-top: var(--section-space) !important;
    padding-bottom: var(--section-space) !important;
}

#MainContent #work .jobs {
    padding-top: 30px;
    padding-bottom: var(--section-space) !important;
}

#MainContent .what,
#MainContent .revs,
#MainContent .comply,
#MainContent .faq,
#MainContent .sfl-section {
    padding-bottom: var(--section-space) !important;
}

#MainContent .grid,
#MainContent .craft-grid,
#MainContent .proc,
#MainContent .look-note,
#MainContent .press-more {
    padding-bottom: var(--section-space) !important;
}

/* =========================================================
   REAL LISTINGS — DESKTOP GRID, MOBILE HORIZONTAL SCROLL
   ========================================================= */

/* Desktop: no horizontal scroll */
@media (min-width: 821px) {
    #MainContent #work .jobs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        overflow-x: hidden;
        overflow-y: visible;
        scroll-snap-type: none;
        cursor: default;
    }

    #MainContent #work .job-card {
        width: auto;
        min-width: 0;
        flex: none;
        scroll-snap-align: none;
    }
}

/* Medium desktop */
@media (min-width: 1100px) {
    #MainContent #work .jobs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Large desktop */
@media (min-width: 1400px) {
    #MainContent #work .jobs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Mobile: existing horizontal swipe remains */
@media (max-width: 820px) {
    #MainContent #work .jobs {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        cursor: grab;
    }

    #MainContent #work .job-card {
        flex: 0 0 min(84vw, 420px);
        scroll-snap-align: start;
    }
}

/* Luxury rounded image corners */
#MainContent img:not(.rev-ph) {
    border-radius: 14px;
}

/* Image cards/frames ke corners bhi clip hon */
#MainContent :is(
    .grid figure,
    .door-photo,
    .svc-hero,
    .pb-slider,
    .reel-card,
    .jc-img,
    .craft-grid figure,
    .pc figure,
    .compare,
    .ss-scene,
    .ss-focus-window,
    .hzp-card,
    .hn-panel,
    .sfl-card
) {
    border-radius: 14px;
    overflow: hidden;
}

/* In dono sections ki images square rahengi */
#MainContent .sold img,
#MainContent .end img {
    border-radius: 0 !important;
}

/* Agent profile photos circular hi rahengi */
#MainContent img.rev-ph {
    border-radius: 50%;
}
/* Extra luxury image frames */
.home-about__image,
.home-about__image--wide,
.jc-img,
.vf-media,
.vf-media.is-active,
.vf-mini-visual,
.vf-static-visual {
    border-radius: 14px !important;
    overflow: hidden;
}

/* Image content bhi rounded rahe */
.vf-media img,
.vf-mini-visual img,
.vf-static-visual img {
    border-radius: 14px !important;
}
/* FAQ: heading left, questions right */
#faq {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(48px, 7vw, 110px);
    align-items: start;
    padding-top: 84px;
}

#faq > .head {
    padding: 0 !important;
    margin: 0;
}

#faq > .in {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Tablet/mobile */
@media (max-width: 900px) {
    #faq {
        display: block;
        padding-top: 58px;
    }

    #faq > .head {
        margin-bottom: 28px;
    }

    #faq > .in {
        margin: 0;
    }
}
/* FAQ full-width layout */
#faq {
    display: block !important;
    padding: 84px var(--pad) !important;
}

#faq > .head {
    width: 100%;
    max-width: none;
    padding: 0 !important;
    margin: 0 0 34px !important;
}

#faq > .head h2 {
    max-width: none !important;
}

#faq > .in {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
}

@media (max-width: 820px) {
    #faq {
        padding: 58px var(--pad) 64px !important;
    }
}
.revs-pagination {
    display: none;
}

@media (max-width: 860px) {
    .revs-grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 28px var(--pad) 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .revs-grid::-webkit-scrollbar {
        display: none;
    }

    .revs-grid .rev {
        flex: 0 0 100%;
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .revs-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 18px var(--pad) 0;
    }

    .revs-count {
        min-width: 48px;
        color: var(--faint);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-align: center;
    }

    .revs-count b {
        color: var(--ink);
        font-weight: 400;
    }

    .revs-dots {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .revs-dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 1px solid var(--faint);
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
        transition: 0.25s ease;
    }

    .revs-dot.is-active {
        width: 20px;
        border-color: var(--ink);
        border-radius: 99px;
        background: var(--ink);
    }
}
/* Real listings — tablet horizontal slider */
@media (min-width: 761px) and (max-width: 1100px) {
    #work .jobs {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        gap: 14px;
        scrollbar-width: none;
    }

    #work .jobs::-webkit-scrollbar {
        display: none;
    }

    #work .job-card {
        flex: 0 0 calc((100% - 28px) / 3) !important;
        width: auto !important;
        min-width: 0;
        scroll-snap-align: start;
    }
}

/* Luxury footer */
.site-footer {
    width: 100%;
    padding: clamp(58px, 5vw, 92px) var(--pad) 22px;
    background: #fdfcfa;
    color: var(--ink);
    border-top: 1px solid var(--line);
}

.site-footer__grid {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.6fr)
        repeat(2, minmax(140px, 0.72fr))
        minmax(220px, 1fr);
    gap: clamp(28px, 5vw, 84px);
    padding-bottom: 58px;
    border-bottom: 1px solid var(--line);
}

.site-footer__logo {
    display: inline-block;
    color: var(--ink);
    font-size: clamp(27px, 3vw, 40px);
    font-weight: 400;
    letter-spacing: 0.34em;
}

.site-footer__brand p {
    max-width: 300px;
    margin-top: 20px;
    /* color: var(--soft); */
    font-size: 15px;
    line-height: 1.65;
}

.site-footer__social {
    display: flex;
    gap: 9px;
    margin-top: 26px;
}

.site-footer__social span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    font-size: 12px;
    transition: 0.25s ease;
}

.site-footer__social span:hover {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
}

.site-footer h3 {
  margin: 3px 0 18px;
    /* color: var(--faint); */
  font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}

.site-footer__column nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.site-footer a {
    color: var(--ink);
    font-size: 15px;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--ink);
}

.site-footer__contact-link {
    display: inline-block;
    color: var(--ink) !important;
    font-size: 15px !important;
}

.site-footer__contact p {
    max-width: 230px;
    margin-top: 15px;
    font-size: 15px;
    line-height: 1.6;
}

.site-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 21px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ink);
    color: var(--ink) !important;
    font-size: 11px !important;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.site-footer__cta span {
    font-size: 16px;
    line-height: 0;
}

.site-footer__areas {
    padding: 27px 0 23px;
    border-bottom: 1px solid var(--line);
}

.site-footer__areas h3 {
    margin-bottom: 13px;
}

.site-footer__areas nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.site-footer__areas nav a {
    color: var(--soft);
    font-size: 12px;
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 21px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.site-footer__wordmark {
    margin-top: clamp(34px, 5vw, 60px);
    color: #b79a63;
    font-size: clamp(76px, 18vw, 260px);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 0.7;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

/* Tablet */
@media (max-width: 1000px) {
    .site-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 38px 28px;
    }

    .site-footer__contact {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .site-footer {
        padding: 52px 25px 18px;
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 24px;
        padding-bottom: 40px;
    }

    .site-footer__brand,
    .site-footer__contact {
        grid-column: 1 / -1;
    }

    .site-footer__brand p {
        max-width: 310px;
    }

    .site-footer__areas nav {
        gap: 8px 15px;
    }

    .site-footer__bottom {
        display: block;
        line-height: 1.8;
    }

    .site-footer__wordmark {
        margin-top: 42px;
        font-size: 21vw;
        letter-spacing: 0.05em;
    }
}
.site-footer__social {
    display: flex;
    gap: 11px;
    margin-top: 28px;
}

.site-social-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #ded8cf;
    border-radius: 50%;
    background: #f8f6f2;
    color: var(--ink);
    transition: all 0.28s ease;
}

.site-social-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.site-social-icon.is-facebook svg,
.site-social-icon.is-x svg {
    fill: currentColor;
}

.site-social-icon.is-instagram svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.site-social-icon.is-instagram .instagram-dot {
    fill: currentColor;
    stroke: none;
}

.site-social-text {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.06em;
}

.site-social-icon:hover {
    transform: translateY(-3px);
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
    box-shadow: 0 8px 18px rgba(35, 33, 32, 0.16);
}

@media (max-width: 640px) {
    .site-social-icon {
        width: 34px;
        height: 34px;
    }
}
.site-footer__contact-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.site-footer__contact-details a,
.site-footer__contact-details address {
    color: var(--soft);
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__contact-details a:first-child {
    color: var(--ink);
    font-size: 14px;
}

.site-footer__contact-details a:hover {
    color: var(--green);
}
.site-footer__contact-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.site-footer__contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--soft);
    text-decoration: none;
}

.site-footer__contact-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid #ded8cf;
    border-radius: 50%;
    background: #f8f6f2;
    color: var(--ink);
    transition: 0.25s ease;
}

.site-footer__contact-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-footer__contact-item small {
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-footer__contact-item strong {
    display: block;
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
}

.site-footer__contact-item:hover .site-footer__contact-icon {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
    transform: translateY(-2px);
}

.site-footer__contact-item:hover strong {
    color: var(--green);
}
/* Why Choose Us — compact luxury layout */
#MainContent #why-us .value-in {
    width: 100%;
    max-width: none;
    padding: 44px var(--pad) !important;
}

#MainContent #why-us h2 {
    max-width: 600px;
    margin: 8px auto 0;
    font-size: clamp(23px, 2.4vw, 32px);
    line-height: 1.1;
}

#MainContent #why-us .value-rows {
    max-width: 1040px;
    margin: 22px auto 0;
    gap: 8px;
}

#MainContent #why-us .vrow {
    padding: 17px 18px;
}

#MainContent #why-us .vrow .vamt {
    margin: 6px 0 4px;
    font-size: clamp(25px, 3vw, 36px);
}

#MainContent #why-us .vrow .vper {
    font-size: 12px;
    line-height: 1.4;
}

#MainContent #why-us .value-note {
    max-width: 58ch;
    margin: 18px auto 0;
    font-size: 13px;
    line-height: 1.5;
}

/* Desktop: all cards in one row */
@media (min-width: 980px) {
    #MainContent #why-us .value-rows {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 640px) {
    #MainContent #why-us .value-in {
        padding-top: 36px !important;
        padding-bottom: 38px !important;
    }

    #MainContent #why-us .value-rows {
        margin-top: 18px;
    }

    #MainContent #why-us .vrow {
        padding: 15px 17px;
    }
}