body[data-theme-key="wastrahome-portfolio"] {
    --whp-ink: #1f2527;
    --whp-paper: #e9e0d3;
    --whp-paper-soft: #f4efe6;
    --whp-muted: #627173;
    --whp-line: rgba(31, 37, 39, 0.18);
    --whp-accent: #a6815e;
    --whp-forest: #304549;
    --whp-shadow: rgba(13, 18, 20, 0.18);
    background: var(--whp-paper-soft);
    color: var(--whp-ink);
}

body[data-theme-key="wastrahome-portfolio"] #navbar {
    position: absolute;
    inset: 0 0 auto;
    z-index: 30;
    background: linear-gradient(180deg, rgba(18, 25, 27, 0.34), rgba(18, 25, 27, 0));
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

body[data-theme-key="wastrahome-portfolio"] #navbar.scrolled {
    position: fixed;
    background: rgba(233, 224, 211, 0.92);
    border-color: rgba(31, 37, 39, 0.08);
    box-shadow: 0 16px 40px rgba(19, 24, 26, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Keep the Wastra Home mark as the visual anchor above both service choices. */
body[data-theme-key="wastrahome-portfolio"]:not(.page-desain-villa):not(.page-desain-kos) #navbar .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

/* The selector homepage needs one quiet brand anchor, without navigation controls. */
body[data-theme-key="wastrahome-portfolio"]:not(.page-desain-villa):not(.page-desain-kos) #navbar > :not(.nav-logo) {
    display: none !important;
}

body[data-theme-key="wastrahome-portfolio"]:not(.page-desain-villa):not(.page-desain-kos) .whp-hero-topline,
body[data-theme-key="wastrahome-portfolio"]:not(.page-desain-villa):not(.page-desain-kos) #wa-footer,
body[data-theme-key="wastrahome-portfolio"]:not(.page-desain-villa):not(.page-desain-kos) .whp-hero-scroll,
body[data-theme-key="wastrahome-portfolio"]:not(.page-desain-villa):not(.page-desain-kos) .whp-hero-foot {
    display: none;
}

body[data-theme-key="wastrahome-portfolio"] #navbar .nav-logo,
body[data-theme-key="wastrahome-portfolio"] #navbar .nav-links a,
body[data-theme-key="wastrahome-portfolio"] #navbar .nav-menu-btn {
    color: #fff;
}

body[data-theme-key="wastrahome-portfolio"] #navbar.scrolled .nav-logo,
body[data-theme-key="wastrahome-portfolio"] #navbar.scrolled .nav-links a,
body[data-theme-key="wastrahome-portfolio"] #navbar.scrolled .nav-menu-btn {
    color: var(--whp-ink);
}

body[data-theme-key="wastrahome-portfolio"] #navbar .nav-cta {
    border: 1px solid rgba(255, 255, 255, 0.44);
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body[data-theme-key="wastrahome-portfolio"] #navbar.scrolled .nav-cta {
    border-color: rgba(31, 37, 39, 0.14);
    background: var(--whp-ink) !important;
    color: #f9f6f0 !important;
}

body[data-theme-key="wastrahome-portfolio"] #navbar .nav-cta:hover {
    background: #fff !important;
    color: var(--whp-ink) !important;
}

body[data-theme-key="wastrahome-portfolio"] #navbar.scrolled .nav-cta:hover {
    background: var(--whp-forest) !important;
    color: #fff !important;
}

body[data-theme-key="wastrahome-portfolio"] .nav-links li:has(> a[href="#produk"]),
body[data-theme-key="wastrahome-portfolio"] .mobile-menu a[href="#produk"] {
    display: none;
}

.whp-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.94), rgba(233, 224, 211, 0.96)),
        #e9e0d3;
    color: var(--whp-ink);
}

.whp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cg fill='none' stroke='rgba(58,73,77,0.13)' stroke-width='1'%3E%3Cpath d='M42 687c63-83 135-128 208-154 103-38 197-27 313-97 67-41 122-95 182-133 62-39 135-68 221-79 117-15 239 3 395 62'/%3E%3Cpath d='M116 758c69-56 135-86 205-100 85-18 171-10 262-48 80-34 132-87 213-118 77-29 171-38 297-23 115 13 228 47 380 97'/%3E%3Cpath d='M945 190l66 37 42 23 65-26 61 25 53 30 59-22 62 29 57 36v77l-53 24-66-21-50 19-61-23-57 24-63-25-55 18-60-26-40 18-60-26-44 16-52-30v-70l54-29 52 21 57-23 48 22z'/%3E%3Cpath d='M858 309l74 39 75-31 60 30 63-24 63 27 56 33 66-24 67 31 63 38v81l-67 29-72-25-58 24-66-28-62 24-71-28-55 23-65-28-56 20-63-32-58 20-66-36v-76l69-35 62 26 57-24 54 22z'/%3E%3Cpath d='M742 432l72 38 75-29 63 30 66-24 68 27 64 36 72-28 71 33 66 39v84l-72 31-78-28-60 25-69-29-67 25-74-29-60 25-70-30-60 21-67-34-61 23-71-38v-80l70-37 66 28 63-25 57 24z'/%3E%3Cpath d='M42 121c54-23 122-35 207-18 69 14 112 51 177 59 78 9 130-31 209-35 86-4 155 29 232 30 78 2 133-27 204-35 91-10 184 10 296 61'/%3E%3Cpath d='M32 179c74-30 145-38 219-22 80 17 119 57 191 66 74 10 124-23 208-27 89-5 149 31 226 33 69 2 123-23 189-31 110-14 214 8 348 74'/%3E%3Cpath d='M980 236l-38 18-43 16-41 19-44 16-43 17-44 16-41 18-43 18-39 19-42 16-39 17-44 17'/%3E%3Cpath d='M1022 272l-38 18-43 16-41 19-44 16-43 17-44 16-41 18-43 18-39 19-42 16-39 17-44 17'/%3E%3Cpath d='M1068 312l-39 18-43 16-41 19-44 16-43 17-44 16-41 18-43 18-39 19-42 16-39 17-44 17'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat;
    animation: whpHeroReveal 1.4s cubic-bezier(.2, .75, .25, 1) both;
}

.whp-hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 42%, rgba(70, 112, 138, 0.16) 0%, rgba(70, 112, 138, 0) 24%),
        linear-gradient(180deg, rgba(244, 239, 230, 0.06), rgba(244, 239, 230, 0.18));
}

.whp-hero-content {
    width: min(100%, 1480px);
    margin: auto;
    padding: 8rem clamp(1.25rem, 5vw, 4.5rem) 3rem;
    animation: whpContentRise .9s .22s cubic-bezier(.2, .75, .25, 1) both;
}

.whp-hero-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 4vh, 3.5rem);
}

.whp-hero-kicker {
    margin: 0;
    color: var(--whp-forest);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.whp-hero-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    color: var(--whp-forest);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
}

.whp-hero-contact {
    padding: 0 1.35rem;
    border: 1px solid rgba(48, 69, 73, .16);
    background: rgba(255, 255, 255, .45);
}

.whp-hero-contact:hover {
    background: var(--whp-forest);
    color: #fff;
}

.whp-hero-selector {
    display: grid;
    grid-template-columns: minmax(18rem, .88fr) minmax(18rem, 1.12fr);
    align-items: stretch;
    gap: clamp(1rem, 2.4vw, 2rem);
    min-height: min(68vh, 44rem);
}

.whp-choice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: clamp(2rem, 4vw, 4rem);
    overflow: hidden;
    color: var(--whp-forest);
    text-decoration: none;
}

.whp-choice::before {
    content: "";
    position: absolute;
    inset: 5% 10%;
    opacity: 0;
    clip-path: polygon(14% 17%, 25% 9%, 39% 10%, 48% 4%, 58% 10%, 72% 8%, 83% 17%, 91% 31%, 88% 42%, 98% 53%, 90% 65%, 92% 78%, 79% 88%, 65% 91%, 54% 99%, 43% 92%, 29% 94%, 17% 84%, 8% 72%, 11% 60%, 2% 50%, 10% 40%, 7% 28%);
    filter: saturate(.82) contrast(1.04);
    transform-origin: center;
    transform: scale(.9) rotate(-1.5deg);
    transition: transform .65s cubic-bezier(.2, .75, .25, 1), opacity .45s ease;
}

.whp-choice::after {
    content: "";
    position: absolute;
    inset: auto 10% 0;
    height: 1px;
    background: rgba(48, 69, 73, 0.14);
}

.whp-choice--villa::before {
    background:
        linear-gradient(180deg, rgba(24, 36, 38, 0.12), rgba(24, 36, 38, 0.28)),
        var(--whp-villa-image) center center / cover no-repeat;
    clip-path: polygon(7% 35%, 17% 22%, 32% 18%, 42% 9%, 57% 15%, 69% 7%, 84% 16%, 95% 30%, 91% 43%, 100% 54%, 90% 65%, 88% 79%, 72% 88%, 58% 84%, 44% 94%, 29% 85%, 15% 87%, 8% 71%, 0% 57%, 9% 45%);
}

.whp-choice--kost::before {
    background:
        linear-gradient(180deg, rgba(24, 36, 38, 0.08), rgba(24, 36, 38, 0.34)),
        var(--whp-kost-image) center center / cover no-repeat;
    opacity: 1;
    transform: scale(1) rotate(1.5deg);
    clip-path: polygon(31% 2%, 50% 2%, 58% 10%, 70% 8%, 74% 21%, 86% 24%, 84% 40%, 94% 49%, 88% 61%, 90% 77%, 74% 81%, 63% 95%, 49% 89%, 37% 100%, 26% 90%, 14% 87%, 17% 70%, 7% 60%, 13% 48%, 9% 34%, 21% 28%, 21% 12%);
    animation: whpKostMaskReveal 1.2s .24s cubic-bezier(.16, 1, .3, 1);
}

.whp-choice:hover::before,
.whp-choice:focus-visible::before {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.whp-choice--villa:hover::before,
.whp-choice--villa:focus-visible::before {
    animation: whpVillaMaskReveal .88s cubic-bezier(.16, 1, .3, 1);
}

.whp-choice--kost:hover::before,
.whp-choice--kost:focus-visible::before {
    animation: whpKostMaskReveal .88s cubic-bezier(.16, 1, .3, 1);
}

.whp-hero-selector:has(.whp-choice--villa:hover) .whp-choice--kost::before,
.whp-hero-selector:has(.whp-choice--villa:focus-visible) .whp-choice--kost::before {
    opacity: 0;
    transform: scale(.9) rotate(1.5deg);
}

.whp-choice-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    transition: color .35s ease, text-shadow .35s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}

.whp-choice:hover .whp-choice-inner,
.whp-choice:focus-visible .whp-choice-inner {
    transform: translateY(-.75rem);
}

.whp-choice--kost .whp-choice-inner,
.whp-hero-selector:has(.whp-choice--villa:hover) .whp-choice--villa .whp-choice-inner,
.whp-hero-selector:has(.whp-choice--villa:focus-visible) .whp-choice--villa .whp-choice-inner {
    color: #fff;
    text-shadow: 0 2px 18px rgba(12, 21, 22, .5);
}

.whp-hero-selector:has(.whp-choice--villa:hover) .whp-choice--kost .whp-choice-inner,
.whp-hero-selector:has(.whp-choice--villa:focus-visible) .whp-choice--kost .whp-choice-inner {
    color: var(--whp-forest);
    text-shadow: none;
}

.whp-choice-label {
    font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(4.6rem, 7vw, 7rem);
    line-height: .9;
    letter-spacing: -.05em;
}

.whp-choice-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    min-height: 3rem;
    padding: 0 1.5rem;
    border: 1px solid rgba(48, 69, 73, 0.2);
    background: rgba(255, 255, 255, 0.48);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .35s ease, border-color .35s ease;
}

.whp-choice-action > span:first-child {
    position: relative;
    z-index: 1;
}

.whp-choice-waves {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 7rem;
    height: 7rem;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.whp-choice-waves i {
    position: absolute;
    inset: 0;
    display: block;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0;
    transform: scale(.78);
}

.whp-choice:hover .whp-choice-waves i,
.whp-choice:focus-visible .whp-choice-waves i {
    animation: whpChoiceWave 1.9s linear infinite;
}

.whp-choice:hover .whp-choice-waves i:nth-child(2),
.whp-choice:focus-visible .whp-choice-waves i:nth-child(2) { animation-delay: .46s; }
.whp-choice:hover .whp-choice-waves i:nth-child(3),
.whp-choice:focus-visible .whp-choice-waves i:nth-child(3) { animation-delay: .92s; }
.whp-choice:hover .whp-choice-waves i:nth-child(4),
.whp-choice:focus-visible .whp-choice-waves i:nth-child(4) { animation-delay: 1.38s; }

.whp-choice:hover .whp-choice-action,
.whp-choice:focus-visible .whp-choice-action {
    transform: translateY(.25rem) scale(1.04);
}

.whp-choice--kost .whp-choice-action,
.whp-hero-selector:has(.whp-choice--villa:hover) .whp-choice--villa .whp-choice-action,
.whp-hero-selector:has(.whp-choice--villa:focus-visible) .whp-choice--villa .whp-choice-action {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.whp-choice--villa .whp-choice-inner {
    transform: translateY(.6rem);
}

.whp-choice-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.whp-choice-art::before {
    content: "";
    position: absolute;
    inset: 4% 9%;
    border: 1px solid rgba(255, 255, 255, .72);
    clip-path: polygon(14% 17%, 25% 9%, 39% 10%, 48% 4%, 58% 10%, 72% 8%, 83% 17%, 91% 31%, 88% 42%, 98% 53%, 90% 65%, 92% 78%, 79% 88%, 65% 91%, 54% 99%, 43% 92%, 29% 94%, 17% 84%, 8% 72%, 11% 60%, 2% 50%, 10% 40%, 7% 28%);
    opacity: 0;
    transform: scale(.72) rotate(-3deg);
}

.whp-choice:hover .whp-choice-art::before,
.whp-choice:focus-visible .whp-choice-art::before {
    animation: whpOverlayContour .9s .08s cubic-bezier(.16, 1, .3, 1);
}

.whp-choice-art::after {
    content: "";
    position: absolute;
    inset: 4% 9%;
    background:
        radial-gradient(circle at 48% 50%, rgba(255, 255, 255, .92) 0 1px, transparent 2px),
        radial-gradient(circle at 37% 41%, rgba(255, 255, 255, .72) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 67% 37%, rgba(255, 255, 255, .7) 0 1px, transparent 2px),
        radial-gradient(circle at 31% 65%, rgba(255, 255, 255, .65) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 68%, rgba(255, 255, 255, .72) 0 1.5px, transparent 2.5px),
        radial-gradient(ellipse at center, rgba(255, 255, 255, .46), transparent 48%);
    clip-path: polygon(14% 17%, 25% 9%, 39% 10%, 48% 4%, 58% 10%, 72% 8%, 83% 17%, 91% 31%, 88% 42%, 98% 53%, 90% 65%, 92% 78%, 79% 88%, 65% 91%, 54% 99%, 43% 92%, 29% 94%, 17% 84%, 8% 72%, 11% 60%, 2% 50%, 10% 40%, 7% 28%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(.18);
}

.whp-choice:hover .whp-choice-art::after,
.whp-choice:focus-visible .whp-choice-art::after {
    animation: whpOverlayBurstParticles .72s cubic-bezier(.08, .82, .2, 1);
}

.whp-choice--villa .whp-choice-art::before,
.whp-choice--villa .whp-choice-art::after {
    clip-path: polygon(7% 35%, 17% 22%, 32% 18%, 42% 9%, 57% 15%, 69% 7%, 84% 16%, 95% 30%, 91% 43%, 100% 54%, 90% 65%, 88% 79%, 72% 88%, 58% 84%, 44% 94%, 29% 85%, 15% 87%, 8% 71%, 0% 57%, 9% 45%);
}

.whp-choice--kost .whp-choice-art::before,
.whp-choice--kost .whp-choice-art::after {
    clip-path: polygon(31% 2%, 50% 2%, 58% 10%, 70% 8%, 74% 21%, 86% 24%, 84% 40%, 94% 49%, 88% 61%, 90% 77%, 74% 81%, 63% 95%, 49% 89%, 37% 100%, 26% 90%, 14% 87%, 17% 70%, 7% 60%, 13% 48%, 9% 34%, 21% 28%, 21% 12%);
}

.whp-hero-foot {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(1.4rem, 4vh, 2.8rem);
}

.whp-hero-concept {
    max-width: 33rem;
    padding: 0;
    border-top: 0;
    background: transparent;
}

.whp-hero-concept-label {
    display: inline-block;
    margin-bottom: .65rem;
    color: rgba(48, 69, 73, .72);
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.whp-hero-concept p {
    margin: 0;
    color: #4f5f62;
    line-height: 1.85;
}

.whp-hero-scroll {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: rgba(48, 69, 73, .7);
    font-size: .58rem;
    letter-spacing: .18em;
    text-decoration: none;
    text-transform: uppercase;
}

.whp-hero-scroll i {
    display: block;
    width: 3rem;
    height: 1px;
    background: currentColor;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-bg {
    padding: clamp(5rem, 8vw, 8rem) 0;
    background: var(--whp-paper);
    color: var(--whp-ink);
}

body[data-theme-key="wastrahome-portfolio"] .gallery-bg .section-wrap {
    width: min(calc(100% - 3rem), 1460px);
    max-width: none;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-head {
    display: grid;
    grid-template-columns: minmax(9rem, .65fr) minmax(18rem, 1.45fr) minmax(14rem, .9fr);
    align-items: end;
    gap: 2rem;
    text-align: left;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-head .section-tag,
body[data-theme-key="wastrahome-portfolio"] .about-bg .section-tag,
body[data-theme-key="wastrahome-portfolio"] .process-bg .section-tag {
    justify-content: flex-start;
    color: var(--whp-accent);
    letter-spacing: .16em;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-head .section-title {
    margin: 0;
    color: var(--whp-ink);
    font-size: clamp(3rem, 5.4vw, 6rem);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.04em;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-head .section-subtitle {
    margin: 0;
    color: var(--whp-muted);
    line-height: 1.9;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-more-link {
    grid-column: 3;
    justify-self: start;
    color: var(--whp-forest);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-showcase {
    display: none;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 3rem;
    gap: .95rem;
    margin-top: clamp(3rem, 6vw, 5rem);
}

body[data-theme-key="wastrahome-portfolio"] .gallery-item {
    grid-column: span 5;
    grid-row: span 10;
    min-height: 30rem;
    border: 1px solid rgba(31, 37, 39, 0.08);
    border-radius: 0;
    box-shadow: 0 18px 44px rgba(16, 19, 21, 0.06);
}

body[data-theme-key="wastrahome-portfolio"] .gallery-item:nth-child(6n + 1) {
    grid-column: span 7;
    grid-row: span 13;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-item:nth-child(6n + 2) {
    grid-column: span 5;
    grid-row: span 10;
    margin-top: 4.5rem;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-item:nth-child(6n + 3) {
    grid-column: 2 / span 4;
    grid-row: span 11;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-item:nth-child(6n + 4) {
    grid-column: 6 / span 7;
    grid-row: span 13;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-item:nth-child(6n + 5) {
    grid-column: span 7;
    grid-row: span 12;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-item:nth-child(6n + 6) {
    grid-column: span 5;
    grid-row: span 10;
    margin-top: 4rem;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-item > .gi-ph {
    min-height: 100%;
    filter: saturate(.88) contrast(1.02);
}

body[data-theme-key="wastrahome-portfolio"] .gallery-overlay {
    inset: auto 0 0;
    display: block;
    padding: 5rem 1.5rem 1.5rem;
    opacity: 1;
    background: linear-gradient(180deg, rgba(13, 18, 20, 0), rgba(13, 18, 20, .78));
}

body[data-theme-key="wastrahome-portfolio"] .gallery-overlay-meta {
    margin-bottom: .45rem;
    color: rgba(255, 255, 255, .68);
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

body[data-theme-key="wastrahome-portfolio"] .gallery-overlay-text {
    color: #fff;
    font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(1.9rem, 2.4vw, 2.9rem);
    font-weight: 400;
    line-height: .94;
}

body[data-theme-key="wastrahome-portfolio"] .about-bg,
body[data-theme-key="wastrahome-portfolio"] .process-bg {
    padding: clamp(5rem, 8vw, 8rem) 0;
    background: var(--whp-paper-soft);
}

body[data-theme-key="wastrahome-portfolio"] .about-bg .section-wrap,
body[data-theme-key="wastrahome-portfolio"] .process-bg .section-wrap {
    width: min(calc(100% - 3rem), 1280px);
    max-width: none;
}

body[data-theme-key="wastrahome-portfolio"] .about-bg .section-title,
body[data-theme-key="wastrahome-portfolio"] .process-bg .section-title {
    max-width: 12ch;
    font-size: clamp(3rem, 5vw, 5.4rem);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.04em;
}

body[data-theme-key="wastrahome-portfolio"] .about-bg .section-subtitle,
body[data-theme-key="wastrahome-portfolio"] .process-bg .section-subtitle {
    max-width: 44rem;
    color: var(--whp-muted);
    line-height: 1.9;
}

body[data-theme-key="wastrahome-portfolio"] .about-grid {
    align-items: stretch;
    gap: clamp(2rem, 5vw, 5rem);
}

body[data-theme-key="wastrahome-portfolio"] .about-img,
body[data-theme-key="wastrahome-portfolio"] .about-img-main {
    border-radius: 0;
}

body[data-theme-key="wastrahome-portfolio"] .about-img {
    position: relative;
}

body[data-theme-key="wastrahome-portfolio"] .about-img::after {
    content: "";
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    z-index: -1;
    border: 1px solid rgba(31, 37, 39, 0.14);
}

body[data-theme-key="wastrahome-portfolio"] .about-img-main {
    min-height: 40rem;
    object-fit: cover;
}

body[data-theme-key="wastrahome-portfolio"] .about-accent {
    display: none;
}

body[data-theme-key="wastrahome-portfolio"] .about-story,
body[data-theme-key="wastrahome-portfolio"] .about-copy p {
    color: #465356;
    line-height: 1.92;
}

body[data-theme-key="wastrahome-portfolio"] .about-stats {
    gap: 1rem;
}

body[data-theme-key="wastrahome-portfolio"] .about-stat {
    border: 1px solid rgba(31, 37, 39, 0.08);
    background: #f8f4ec;
}

body[data-theme-key="wastrahome-portfolio"] .process-bg {
    padding-top: 2rem;
    background:
        linear-gradient(180deg, rgba(48, 69, 73, 0.05), rgba(48, 69, 73, 0)),
        var(--whp-paper-soft);
}

body[data-theme-key="wastrahome-portfolio"] .process-steps {
    gap: 0;
    border-top: 1px solid var(--whp-line);
    border-bottom: 1px solid var(--whp-line);
}

body[data-theme-key="wastrahome-portfolio"] .process-step {
    padding: 2.4rem 1.5rem 2.8rem;
    border-right: 1px solid var(--whp-line);
    background: transparent;
}

body[data-theme-key="wastrahome-portfolio"] .process-step:last-child {
    border-right: 0;
}

body[data-theme-key="wastrahome-portfolio"] .process-step-number {
    color: var(--whp-accent);
}

body[data-theme-key="wastrahome-portfolio"] .process-step-title {
    color: var(--whp-ink);
    font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
    font-size: 2rem;
    font-weight: 500;
}

body[data-theme-key="wastrahome-portfolio"] .process-step-desc {
    color: #556265;
    line-height: 1.85;
}

body[data-theme-key="wastrahome-portfolio"] .cta-banner {
    background:
        linear-gradient(90deg, rgba(16, 22, 24, .84), rgba(16, 22, 24, .44)),
        url("https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&w=1800") center / cover;
    color: #fff;
}

body[data-theme-key="wastrahome-portfolio"] .cta-banner::before,
body[data-theme-key="wastrahome-portfolio"] .cta-banner::after {
    display: none;
}

body[data-theme-key="wastrahome-portfolio"] .cta-inner {
    min-height: 72svh;
    align-items: center;
}

body[data-theme-key="wastrahome-portfolio"] .cta-title {
    max-width: 11ch;
    color: #fff;
    font-size: clamp(3rem, 5.8vw, 6.2rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.04em;
}

body[data-theme-key="wastrahome-portfolio"] .cta-desc {
    max-width: 38rem;
    color: rgba(255, 255, 255, .74);
    line-height: 1.9;
}

body[data-theme-key="wastrahome-portfolio"] .cta-btn-primary,
body[data-theme-key="wastrahome-portfolio"] .cta-btn-secondary {
    border-radius: 0;
}

body[data-theme-key="wastrahome-portfolio"] .cta-info-card {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(20, 26, 28, .38);
    color: #fff;
    backdrop-filter: blur(12px);
}

@keyframes whpHeroReveal {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes whpContentRise {
    from { opacity: 0; transform: translateY(2rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* Villa opens horizontally like a pavilion set into a landscaped site. */
@keyframes whpVillaMaskReveal {
    0% {
        clip-path: polygon(49% 44%, 53% 42%, 56% 45%, 60% 45%, 61% 49%, 65% 51%, 62% 54%, 64% 58%, 60% 60%, 58% 64%, 54% 62%, 50% 66%, 47% 62%, 43% 63%, 40% 59%, 36% 58%, 38% 54%, 35% 50%, 40% 48%, 43% 44%);
        opacity: 0;
        transform: scale(.52) rotate(-2deg);
    }
    46% {
        clip-path: polygon(3% 37%, 15% 17%, 31% 15%, 41% 3%, 58% 12%, 71% 2%, 87% 13%, 98% 29%, 93% 43%, 100% 54%, 91% 68%, 90% 82%, 72% 94%, 57% 88%, 43% 100%, 27% 89%, 12% 92%, 4% 73%, 0% 56%, 8% 44%);
        opacity: 1;
        transform: scale(1.05) rotate(.8deg);
    }
    100% {
        clip-path: polygon(7% 35%, 17% 22%, 32% 18%, 42% 9%, 57% 15%, 69% 7%, 84% 16%, 95% 30%, 91% 43%, 100% 54%, 90% 65%, 88% 79%, 72% 88%, 58% 84%, 44% 94%, 29% 85%, 15% 87%, 8% 71%, 0% 57%, 9% 45%);
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Kost rises in stacked modules, echoing floors, corridors, and compact units. */
@keyframes whpKostMaskReveal {
    0% {
        clip-path: polygon(43% 38%, 53% 38%, 53% 43%, 59% 43%, 59% 48%, 64% 48%, 64% 55%, 61% 55%, 58% 55%, 58% 62%, 51% 62%, 51% 68%, 45% 68%, 45% 62%, 38% 62%, 38% 56%, 32% 56%, 32% 50%, 37% 50%, 37% 43%, 43% 43%, 43% 38%);
        opacity: 0;
        transform: scale(.56) translateY(10%) rotate(1deg);
    }
    48% {
        clip-path: polygon(28% 0%, 52% 0%, 60% 12%, 72% 5%, 77% 23%, 91% 25%, 86% 42%, 100% 50%, 91% 63%, 94% 79%, 76% 84%, 64% 100%, 48% 91%, 34% 100%, 23% 89%, 9% 89%, 14% 69%, 2% 61%, 12% 46%, 6% 31%, 19% 27%, 18% 10%);
        opacity: 1;
        transform: scale(1.05) translateY(-1%) rotate(-.7deg);
    }
    100% {
        clip-path: polygon(31% 2%, 50% 2%, 58% 10%, 70% 8%, 74% 21%, 86% 24%, 84% 40%, 94% 49%, 88% 61%, 90% 77%, 74% 81%, 63% 95%, 49% 89%, 37% 100%, 26% 90%, 14% 87%, 17% 70%, 7% 60%, 13% 48%, 9% 34%, 21% 28%, 21% 12%);
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0);
    }
}

@keyframes whpOverlayContour {
    0% { opacity: 0; transform: scale(.72) rotate(-3deg); }
    45% { opacity: .85; }
    100% { opacity: 0; transform: scale(1.08) rotate(1deg); }
}

@keyframes whpOverlayBurstParticles {
    0% { opacity: 0; transform: scale(.16) rotate(-10deg); }
    28% { opacity: 1; transform: scale(.72) rotate(3deg); }
    100% { opacity: 0; transform: scale(1.35) rotate(9deg); }
}

/* Four staggered rings mirror the active-control wave motion of the reference. */
@keyframes whpChoiceWave {
    0% { opacity: 0; transform: scale(.78); }
    22% { opacity: .68; transform: scale(.94); }
    68% { opacity: .24; transform: scale(1.42); }
    100% { opacity: 0; transform: scale(1.62); }
}

@media (prefers-reduced-motion: reduce) {
    .whp-choice--kost::before,
    .whp-choice:hover::before,
    .whp-choice:focus-visible::before,
    .whp-choice:hover .whp-choice-art::before,
    .whp-choice:focus-visible .whp-choice-art::before,
    .whp-choice:hover .whp-choice-art::after,
    .whp-choice:focus-visible .whp-choice-art::after,
    .whp-choice:hover .whp-choice-waves i,
    .whp-choice:focus-visible .whp-choice-waves i {
        animation: none;
    }
}

@media (max-width: 1080px) {
    .whp-hero-selector {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .whp-hero-foot {
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 900px) {
    .whp-hero-content {
        padding-bottom: 3rem;
    }

    .whp-hero-topline {
        gap: 1rem;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-head {
        grid-template-columns: 1fr;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-more-link {
        grid-column: auto;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-item,
    body[data-theme-key="wastrahome-portfolio"] .gallery-item:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
        min-height: 31rem;
        margin-top: 0;
    }

    body[data-theme-key="wastrahome-portfolio"] .process-step {
        border-right: 0;
        border-bottom: 1px solid var(--whp-line);
    }

    body[data-theme-key="wastrahome-portfolio"] .process-step:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 640px) {
    body[data-theme-key="wastrahome-portfolio"] #navbar {
        padding-inline: 1rem;
    }

    .whp-hero {
        min-height: 100svh;
    }

    .whp-hero-shade {
        background:
            radial-gradient(circle at 20% 26%, rgba(70, 112, 138, 0.14) 0%, rgba(70, 112, 138, 0) 22%),
            linear-gradient(180deg, rgba(244, 239, 230, 0.04), rgba(244, 239, 230, 0.18));
    }

    .whp-hero-content {
        padding: 7.1rem 1rem 2rem;
    }

    .whp-hero-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .whp-hero-contact {
        min-height: 2.9rem;
    }

    .whp-hero-selector {
        gap: .85rem;
    }

    .whp-choice {
        min-height: 18rem;
        padding: 1.35rem 1rem;
    }

    .whp-choice--villa::before {
        inset: 1rem 7% 1rem 9%;
    }

    .whp-choice-label {
        font-size: clamp(3rem, 14vw, 4.6rem);
    }

    .whp-choice-action {
        min-height: 2.75rem;
        min-width: 6.4rem;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-bg .section-wrap,
    body[data-theme-key="wastrahome-portfolio"] .about-bg .section-wrap,
    body[data-theme-key="wastrahome-portfolio"] .process-bg .section-wrap {
        width: min(calc(100% - 2rem), 1280px);
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-grid {
        display: none;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-showcase {
        display: grid;
        gap: .75rem;
        margin-top: 2.5rem;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-tabs {
        display: flex;
        gap: .45rem;
        overflow-x: auto;
        padding-bottom: .15rem;
        scrollbar-width: none;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-tabs::-webkit-scrollbar,
    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-rail::-webkit-scrollbar {
        display: none;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-tab {
        min-height: 2rem;
        padding: 0 .85rem;
        border: 1px solid rgba(31, 37, 39, .18);
        border-radius: 0;
        background: rgba(255, 255, 255, 0.4);
        color: var(--whp-muted);
        font-size: .58rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-tab.is-active {
        background: var(--whp-forest);
        color: #fff;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-featured,
    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-rail-item {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #2a2824;
        color: #fff;
        text-align: left;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-featured,
    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-featured .gi-ph {
        min-height: 27rem;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-featured .gallery-overlay,
    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-rail-item .gallery-overlay {
        position: absolute;
        inset: auto 0 0;
        padding: 4rem 1rem 1rem;
        background: linear-gradient(180deg, transparent, rgba(5, 5, 4, .82));
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-featured-meta {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem .8rem;
        margin-top: .45rem;
        color: rgba(255, 255, 255, .62);
        font-size: .58rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 72%;
        gap: .6rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-rail-item,
    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-rail-item .gi-ph {
        min-height: 13rem;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-rail-item {
        opacity: .72;
        scroll-snap-align: start;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-rail-item.is-active {
        opacity: 1;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-swipe-hint {
        display: flex;
        align-items: center;
        gap: .45rem;
        color: rgba(31, 37, 39, .56);
        font-size: .62rem;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-indicators {
        display: flex;
        gap: .25rem;
        margin-left: auto;
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-indicator {
        width: .35rem;
        height: .35rem;
        border-radius: 50%;
        background: rgba(31, 37, 39, .2);
    }

    body[data-theme-key="wastrahome-portfolio"] .gallery-mobile-indicator.is-active {
        background: var(--whp-accent);
    }

    body[data-theme-key="wastrahome-portfolio"] .about-img-main {
        min-height: 28rem;
    }

    body[data-theme-key="wastrahome-portfolio"] .cta-inner {
        min-height: 78svh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whp-hero::before,
    .whp-hero-content {
        animation: none;
    }
}