:root {
    --spark-interactive-accent: #d94f3d;
    --spark-interactive-ink: #171714;
    --spark-interactive-paper: #f2f0eb;
    --spark-interactive-available: #b9e537;
    --spark-interactive-reserved: #f0b44d;
    --spark-interactive-unavailable: #a6a6a1;
}

.spark-interactive,
.spark-unit-detail {
    box-sizing: border-box;
    width: 100%;
    color: var(--spark-interactive-ink);
    font-family: inherit;
}

body.home .spark-interactive,
body.home .spark-units {
    position: relative;
    left: 50%;
    width: min(1500px, calc(100vw - 48px));
    max-width: none;
    transform: translateX(-50%);
}

.spark-interactive *,
.spark-interactive *::before,
.spark-interactive *::after,
.spark-unit-detail *,
.spark-unit-detail *::before,
.spark-unit-detail *::after {
    box-sizing: inherit;
}

.spark-interactive__header,
.spark-unit-detail > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 22px;
}

.spark-interactive h2,
.spark-unit-detail h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 70px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;
}

.spark-interactive__eyebrow {
    margin: 0 0 10px;
    color: #6c6a65;
    font-size: 13px;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.spark-project-select {
    display: grid;
    gap: 5px;
    min-width: 180px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.spark-project-select select {
    min-height: 42px;
    border: 1px solid #1b1b18;
    border-radius: 0;
    background: #fff;
    padding: 8px 34px 8px 12px;
    color: inherit;
    font: inherit;
    text-transform: none;
}

.spark-view-switch {
    display: inline-flex;
    border: 1px solid #1b1b18;
}

.spark-view-switch button {
    min-height: 42px;
    padding: 9px 18px;
    border: 0;
    border-right: 1px solid #1b1b18;
    background: #fff;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.spark-view-switch button:last-child { border-right: 0; }
.spark-view-switch button.is-active { background: #171714; color: #fff; }

.spark-interactive__stage {
    position: relative;
    min-height: clamp(430px, 64vw, 760px);
    overflow: hidden;
    background: #d9d8d3;
}

.spark-interactive__stage > img,
.spark-interactive__stage > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.spark-interactive__stage > img {
    object-fit: cover;
    transition: transform 500ms ease;
}

.spark-interactive.is-alt-view .spark-interactive__stage > img { transform: scaleX(-1); }

.spark-interactive__stage > svg { z-index: 2; }

.spark-floor-hotspot polygon,
.spark-unit-hotspot polygon {
    fill: var(--spark-interactive-available);
    fill-opacity: .24;
    stroke: rgba(255,255,255,.9);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    transition: fill-opacity 180ms ease, stroke-width 180ms ease;
}

.spark-floor-hotspot:hover polygon,
.spark-floor-hotspot:focus polygon,
.spark-unit-hotspot:hover polygon,
.spark-unit-hotspot:focus polygon {
    fill-opacity: .68;
    stroke-width: 4;
    outline: none;
}

.spark-status-reserved polygon { fill: var(--spark-interactive-reserved); }
.spark-status-unavailable polygon,
.spark-status-sold polygon { fill: var(--spark-interactive-unavailable); cursor: not-allowed; }

.spark-interactive__tooltip {
    position: absolute;
    z-index: 4;
    max-width: 250px;
    padding: 10px 14px;
    background: #171714;
    color: #fff;
    font-size: 13px;
    pointer-events: none;
}

.spark-interactive__legend {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,.9);
    font-size: 11px;
}

.spark-interactive__legend span {
    width: 10px;
    height: 10px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--spark-interactive-available);
}
.spark-interactive__legend span:first-child { margin-left: 0; }
.spark-interactive__legend .is-reserved { background: var(--spark-interactive-reserved); }
.spark-interactive__legend .is-unavailable { background: var(--spark-interactive-unavailable); }

.spark-floor-panel {
    padding: clamp(18px, 4vw, 46px);
    background: var(--spark-interactive-paper);
}

.spark-floor-panel > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.spark-floor-panel header p,
.spark-floor-panel header h3 { margin: 0; }
.spark-floor-panel header p { color: #77736d; font-size: 13px; }
.spark-floor-panel header h3 { font-size: clamp(30px, 4vw, 54px); font-weight: 400; }

.spark-back-button {
    padding: 0 0 5px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.spark-floor-plan {
    position: relative;
    min-height: clamp(360px, 55vw, 680px);
    overflow: hidden;
    background: #fff;
}

.spark-floor-plan > img,
.spark-floor-plan > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.spark-floor-units {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 1px;
    background: #b9b6af;
}

.spark-floor-unit-card {
    display: grid;
    gap: 5px;
    padding: 18px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.spark-floor-unit-card:hover,
.spark-floor-unit-card.is-highlighted { background: #e9f6c5; }

.spark-unit-detail {
    max-width: 1380px;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 70px);
}

.spark-unit-detail__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 46px;
    color: #77736d;
    font-size: 13px;
}

.spark-unit-detail__status {
    padding: 9px 13px;
    background: var(--spark-interactive-available);
    font-size: 13px;
}
.spark-unit-detail__status.spark-status-reserved { background: var(--spark-interactive-reserved); }
.spark-unit-detail__status.spark-status-sold { background: var(--spark-interactive-unavailable); }

.spark-unit-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);
    gap: clamp(28px, 6vw, 90px);
    align-items: start;
}

.spark-unit-detail__plan {
    min-height: 500px;
    background: var(--spark-interactive-paper);
}
.spark-unit-detail__plan img,
.spark-unit-detail__plan svg { display: block; width: 100%; height: 100%; object-fit: contain; }

.spark-unit-detail dl { margin: 0; border-top: 1px solid #aaa69e; }
.spark-unit-detail dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid #aaa69e; }
.spark-unit-detail dt, .spark-unit-detail dd { margin: 0; }
.spark-unit-detail dd { text-align: right; }

.spark-unit-detail__actions { display: grid; gap: 10px; margin-top: 26px; }
.spark-button {
    display: block;
    padding: 15px 20px;
    border: 1px solid #171714;
    background: #171714;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
.spark-button--secondary { background: #fff; color: #171714; }
.spark-button.is-disabled { border-color: #aaa69e; background: #e7e5df; color: #77736d; cursor: not-allowed; }

body.home .wp-block-post-title { display: none; }

.spark-unit-detail-link { margin-right: 12px; white-space: nowrap; }

@media (max-width: 767px) {
    body.home .spark-interactive,
    body.home .spark-units { width: calc(100vw - 24px); }
    .spark-interactive__header,
    .spark-unit-detail > header,
    .spark-floor-panel > header { align-items: flex-start; flex-direction: column; }
    .spark-view-switch { width: 100%; }
    .spark-view-switch button { flex: 1; }
    .spark-interactive__stage { min-height: 440px; }
    .spark-interactive__legend { left: 10px; right: 10px; bottom: 10px; flex-wrap: wrap; }
    .spark-floor-units { grid-template-columns: 1fr; }
    .spark-unit-detail__grid { grid-template-columns: 1fr; }
    .spark-unit-detail__plan { min-height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
    .spark-interactive *, .spark-unit-detail * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}