.dwd-pcs {
    --dwd-pcs-top-offset: 0px;
    --dwd-frame-scale: .72;
    position: relative;
    width: 100%;
    max-width: none !important;
    min-height: 320px;
    margin: 0 !important;
    padding: 0 !important;
    background: #E7DDCA;
}

.dwd-pcs *,
.dwd-pcs *::before,
.dwd-pcs *::after,
.dwd-pcs__stage *,
.dwd-pcs__stage *::before,
.dwd-pcs__stage *::after { box-sizing: border-box; }

.dwd-pcs__stage {
    position: absolute;
    z-index: 40;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 320px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: #E7DDCA;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.dwd-pcs__backdrop,
.dwd-pcs__frame,
.dwd-pcs__color,
.dwd-pcs__visual { position: absolute; }

.dwd-pcs__backdrop,
.dwd-pcs__color,
.dwd-pcs__visual { inset: 0; width: 100%; height: 100%; }
.dwd-pcs__backdrop { pointer-events: none; will-change: transform, background-color; }
.dwd-pcs__backdrop--base { z-index: 0; background: #E7DDCA; }
.dwd-pcs__backdrop--next { z-index: 1; background: #D7C2A8; transform: translate3d(0, 100%, 0); }

.dwd-pcs__frame { z-index: 2; inset: 0; overflow: hidden; background: #A7B39A; }
.dwd-pcs__color { pointer-events: none; will-change: transform, background-color; }
.dwd-pcs__color--base { z-index: 0; background: #A7B39A; }
.dwd-pcs__color--next { z-index: 1; background: #657D89; transform: translate3d(0, 100%, 0); }
.dwd-pcs__visual { z-index: 2; pointer-events: none; }

.dwd-pcs__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    will-change: opacity;
    user-select: none;
    -webkit-user-drag: none;
}

.dwd-pcs[data-mode="interior"] .dwd-pcs__image--interior,
.dwd-pcs__stage[data-mode="interior"] .dwd-pcs__image--interior,
.dwd-pcs[data-mode="combined"] .dwd-pcs__image--interior,
.dwd-pcs__stage[data-mode="combined"] .dwd-pcs__image--interior,
.dwd-pcs[data-mode="exterior"] .dwd-pcs__image--exterior,
.dwd-pcs__stage[data-mode="exterior"] .dwd-pcs__image--exterior { opacity: 1; }

.dwd-pcs__loading {
    position: absolute;
    z-index: 30;
    left: 50%;
    top: 50%;
    padding: .62rem .8rem;
    transform: translate(-50%, -50%);
    background: rgba(242, 238, 230, .94);
    color: #1B1C18;
    font-size: .75rem;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: 0;
    animation: dwd-pcs-loading-in 1ms 500ms forwards;
    transition: opacity 150ms linear;
}

@keyframes dwd-pcs-loading-in { to { opacity: 1; } }
.dwd-pcs.is-ready .dwd-pcs__loading,
.dwd-pcs__stage.is-ready .dwd-pcs__loading { animation: none; opacity: 0; pointer-events: none; }

.dwd-pcs__label {
    position: absolute;
    z-index: 6;
    top: clamp(1rem, 4vh, 2.5rem);
    left: clamp(1rem, 4vw, 3.75rem);
    display: grid;
    gap: .18rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    color: #171A17;
    text-shadow: 0 1px 9px rgba(246,243,235,.9), 0 0 2px rgba(246,243,235,.9);
    pointer-events: none;
}

.dwd-pcs__scene-name,
.dwd-pcs__color-code {
    display: block;
    font-size: .75rem;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dwd-pcs__color-name {
    display: block;
    max-width: 100%;
    margin: .1rem 0 0;
    padding: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: clamp(2rem, 5vw, 5.2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.035em;
}

.dwd-pcs__hint {
    position: absolute;
    z-index: 7;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: clamp(1rem, 3vh, 2rem);
    color: rgba(20,20,20,.78);
    font-size: .75rem;
    line-height: 1.2;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .9;
    transition: opacity 180ms ease;
    pointer-events: none;
}

.dwd-pcs.is-started .dwd-pcs__hint,
.dwd-pcs__stage.is-started .dwd-pcs__hint { opacity: 0; }

.dwd-pcs__debug {
    position: absolute;
    z-index: 40;
    top: .75rem;
    right: .75rem;
    display: none;
    min-width: 220px;
    padding: .55rem .7rem;
    background: rgba(0,0,0,.84);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre;
}

.dwd-pcs[data-debug="1"] .dwd-pcs__debug,
.dwd-pcs__stage[data-debug="1"] .dwd-pcs__debug,
.dwd-pcs.is-query-debug .dwd-pcs__debug,
.dwd-pcs__stage.is-query-debug .dwd-pcs__debug { display: block; }

.dwd-pcs__error {
    position: absolute;
    z-index: 35;
    left: 1rem;
    bottom: 1rem;
    display: none;
    max-width: min(560px, calc(100% - 2rem));
    padding: .6rem .75rem;
    background: rgba(23, 28, 24, .88);
    color: #fff;
    font-size: .82rem;
}
.dwd-pcs.has-error .dwd-pcs__error,
.dwd-pcs__stage.has-error .dwd-pcs__error { display: block; }

/* Full painting-site hero */
.dwd-pcs--site .dwd-pcs__brandbar {
    position: absolute;
    z-index: 22;
    top: 0;
    left: 0;
    right: 0;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    padding: .58rem clamp(.9rem, 2.8vw, 3rem);
    background: #171C18;
    color: #F2EEE6;
}

.dwd-pcs--site .dwd-pcs__brand-lockup { display: flex; align-items: baseline; gap: .75rem; min-width: 0; }
.dwd-pcs--site .dwd-pcs__brand,
.dwd-pcs--site .dwd-pcs__site-nav a,
.dwd-pcs--site .dwd-pcs__brand-actions a { color: inherit; text-decoration: none; }

.dwd-pcs--site .dwd-pcs__brand {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: clamp(1.05rem, 1.45vw, 1.35rem);
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.dwd-pcs--site .dwd-pcs__portfolio-tag {
    color: #AAB2AB;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dwd-pcs--site .dwd-pcs__site-nav,
.dwd-pcs--site .dwd-pcs__brand-actions { display: flex; align-items: center; gap: 1.35rem; font-size: .82rem; letter-spacing: .025em; }
.dwd-pcs--site .dwd-pcs__site-nav,
.dwd-pcs--site .dwd-pcs__phone { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 180ms linear, transform 180ms ease; }
.dwd-pcs__stage.is-started .dwd-pcs__site-nav,
.dwd-pcs__stage.is-started .dwd-pcs__phone { opacity: 1; transform: none; pointer-events: auto; }
.dwd-pcs--site .dwd-pcs__site-nav a,
.dwd-pcs--site .dwd-pcs__phone { border-bottom: 1px solid transparent; }
.dwd-pcs--site .dwd-pcs__site-nav a:hover,
.dwd-pcs--site .dwd-pcs__site-nav a:focus-visible,
.dwd-pcs--site .dwd-pcs__phone:hover,
.dwd-pcs--site .dwd-pcs__phone:focus-visible { border-bottom-color: currentColor; }

.dwd-pcs--site .dwd-pcs__estimate-link {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: .7rem 1rem;
    border: 1px solid #6E8791;
    background: #6E8791;
    color: #fff !important;
    font-weight: 700;
}
.dwd-pcs--site .dwd-pcs__estimate-link:hover,
.dwd-pcs--site .dwd-pcs__estimate-link:focus-visible { border-color: #F0ECE3; background: #F0ECE3; color: #171C18 !important; }
.dwd-pcs--site a:focus-visible { outline: 2px solid #F5F1E8; outline-offset: 3px; }

.dwd-pcs--site .dwd-pcs__frame {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(var(--dwd-frame-scale));
    transform-origin: 100% 100%;
    will-change: transform;
}

.dwd-pcs--site .dwd-pcs__intro {
    position: absolute;
    z-index: 18;
    top: clamp(82px, 10.5vh, 112px);
    left: clamp(1.2rem, 3vw, 3.4rem);
    width: min(30vw, 500px);
    color: #172019;
    will-change: opacity, transform;
}

.dwd-pcs--site .dwd-pcs__intro-kicker {
    display: block;
    margin-bottom: .55rem;
    color: #4E5953;
    font-size: .75rem;
    line-height: 1.2;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.dwd-pcs--site .dwd-pcs__intro h1 {
    max-width: 9.4ch;
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: clamp(3.15rem, 5.35vw, 6.1rem);
    font-weight: 400;
    line-height: .91;
    letter-spacing: -.045em;
}
.dwd-pcs--site .dwd-pcs__intro h1 span { display: block; }
.dwd-pcs--site .dwd-pcs__hint { top: 74px; right: clamp(1rem, 3vw, 2.5rem); bottom: auto; color: #171A17; font-size: .75rem; }

.dwd-pcs__label--panel {
    left: 50%;
    top: 32.5%;
    right: auto;
    bottom: auto;
    width: 18%;
    max-width: 18%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #20231F !important;
    text-shadow: none;
    opacity: 0;
}
.dwd-pcs__label--panel .dwd-pcs__scene-name { color: #5D625C; font-size: clamp(.6rem, .58vw, .68rem); }
.dwd-pcs__label--panel .dwd-pcs__color-name {
    margin-top: .24rem;
    font-size: clamp(.95rem, 1.45vw, 1.5rem);
    line-height: 1.02;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.dwd-pcs--site .dwd-pcs__color-code { display: none; }

.dwd-pcs__foreground { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
.dwd-pcs__swatch-rail {
    position: absolute;
    top: 0;
    right: clamp(1rem, 3vw, 3.5rem);
    width: clamp(96px, 8.5vw, 132px);
    display: grid;
    grid-template-columns: 1fr;
    padding: .56rem;
    border-top: 3px solid #202722;
    background: #E9E3D7;
    color: #1C201B;
    box-shadow: 0 12px 30px rgba(28,34,29,.09);
    opacity: 0;
    will-change: transform, opacity;
}
.dwd-pcs__swatch-rail-kicker { display: none; }
.dwd-pcs__swatch-rail i { display: block; height: clamp(52px, 7vh, 78px); border-top: 1px solid rgba(23,26,23,.18); background: var(--swatch); }
.dwd-pcs__swatch-rail small { display: block; margin-top: .5rem; color: #59605A; font-size: .68rem; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; }

/* Embedded exterior study */
.dwd-pcs--embedded .dwd-pcs__stage,
.dwd-pcs__stage.dwd-pcs--embedded { background: #D9C7A8; }
.dwd-pcs--embedded .dwd-pcs__hint,
.dwd-pcs__stage.dwd-pcs--embedded .dwd-pcs__hint { display: none; }

.dwd-pcs__study-composition {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    width: min(82vw, 138vh);
    display: grid;
    grid-template-rows: auto auto auto;
    gap: .7rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.dwd-pcs--embedded .dwd-pcs__study-composition .dwd-pcs__frame,
.dwd-pcs__stage.dwd-pcs--embedded .dwd-pcs__study-composition .dwd-pcs__frame { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.dwd-pcs--embedded .dwd-pcs__image--exterior,
.dwd-pcs__stage.dwd-pcs--embedded .dwd-pcs__image--exterior { filter: brightness(.91) saturate(1.02); }

.dwd-pcs__project-caption { position: relative; z-index: 6; width: auto; margin: 0; color: #171C18; }
.dwd-pcs__project-caption span,
.dwd-pcs__project-caption small { display: block; }
.dwd-pcs__project-caption span { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: clamp(1.18rem, 1.7vw, 1.75rem); font-weight: 400; line-height: 1; }
.dwd-pcs__project-caption small { margin-top: .22rem; color: #4C554E; font-size: .75rem; line-height: 1.35; }
.dwd-pcs__label--study { position: relative; inset: auto; justify-self: end; width: max-content; max-width: 60%; text-align: right; text-shadow: none; }
.dwd-pcs__label--study .dwd-pcs__scene-name { font-size: .68rem; }
.dwd-pcs__label--study .dwd-pcs__color-name { font-size: clamp(1.2rem, 2vw, 2rem); white-space: normal; }
.dwd-pcs--embedded .dwd-pcs__color-code,
.dwd-pcs__stage.dwd-pcs--embedded .dwd-pcs__color-code { display: none; }

@media (max-width: 900px) {
    .dwd-pcs--site .dwd-pcs__portfolio-tag,
    .dwd-pcs--site .dwd-pcs__site-nav,
    .dwd-pcs--site .dwd-pcs__phone { display: none; }
    .dwd-pcs--site .dwd-pcs__brandbar { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 767px) {
    .dwd-pcs__frame {
        inset: auto;
        left: .5rem;
        right: .5rem;
        top: 50%;
        width: auto;
        height: auto;
        aspect-ratio: 4 / 3;
        transform: translateY(-50%);
        outline: 1px solid rgba(255,255,255,.32);
    }
    .dwd-pcs__image { object-position: center center; }
    .dwd-pcs__label { top: max(1rem, env(safe-area-inset-top)); left: 1rem; max-width: calc(100% - 2rem); }
    .dwd-pcs__color-name { font-size: clamp(2rem, 10vw, 3.25rem); }
    .dwd-pcs__hint { right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); }
    .dwd-pcs__debug { top: max(.5rem, env(safe-area-inset-top)); right: .5rem; transform: scale(.82); transform-origin: top right; }

    .dwd-pcs--site .dwd-pcs__brandbar { min-height: 58px; gap: .55rem; padding: max(.45rem, env(safe-area-inset-top)) .75rem .45rem; }
    .dwd-pcs--site .dwd-pcs__brand { display: inline-flex; min-height: 44px; align-items: center; font-size: clamp(.92rem, 4.1vw, 1.02rem); }
    .dwd-pcs--site .dwd-pcs__brand-actions { gap: 0; }
    .dwd-pcs--site .dwd-pcs__estimate-link { min-height: 44px; padding: .65rem .78rem; font-size: .78rem; white-space: nowrap; }
    .dwd-pcs--site .dwd-pcs__intro { top: max(70px, calc(env(safe-area-inset-top) + 66px)); left: 1rem; width: calc(100% - 2rem); }
    .dwd-pcs--site .dwd-pcs__intro-kicker { margin-bottom: .38rem; font-size: .72rem; letter-spacing: .055em; }
    .dwd-pcs--site .dwd-pcs__intro h1 { max-width: 100%; font-size: clamp(2rem, 9.5vw, 2.55rem); line-height: .94; letter-spacing: -.035em; }
    .dwd-pcs--site .dwd-pcs__intro h1 span { max-width: 14ch; }
    .dwd-pcs--site .dwd-pcs__frame {
        inset: var(--dwd-mobile-frame-top, max(228px, 30vh)) .7rem 0;
        width: auto;
        height: auto;
        aspect-ratio: auto;
        transform: none;
        outline: 0;
    }
    .dwd-pcs--site .dwd-pcs__image { object-position: 50% 53%; }
    .dwd-pcs--site .dwd-pcs__hint { top: auto; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); color: #fff; font-size: .7rem; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
    .dwd-pcs__label--panel { left: 50%; top: 31%; width: 32%; max-width: 32%; transform: translate(-50%, -50%); }
    .dwd-pcs__label--panel .dwd-pcs__scene-name { font-size: .6rem; }
    .dwd-pcs__label--panel .dwd-pcs__color-name { margin-top: .12rem; font-size: clamp(.82rem, 3.5vw, 1rem); }
    .dwd-pcs__swatch-rail { right: .55rem; width: 82px; padding: .42rem; }
    .dwd-pcs__swatch-rail i { height: 48px; }
    .dwd-pcs__swatch-rail small { font-size: .64rem; }

    .dwd-pcs__study-composition { inset: 1rem .7rem; width: auto; height: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .55rem; transform: none; }
    .dwd-pcs--embedded .dwd-pcs__study-composition .dwd-pcs__frame,
    .dwd-pcs__stage.dwd-pcs--embedded .dwd-pcs__study-composition .dwd-pcs__frame {
        inset: auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
        transform: none;
    }
    .dwd-pcs--embedded .dwd-pcs__image--exterior,
    .dwd-pcs__stage.dwd-pcs--embedded .dwd-pcs__image--exterior { object-position: 50% 50%; }
    .dwd-pcs__project-caption span { font-size: 1.1rem; }
    .dwd-pcs__project-caption small { max-width: 34ch; font-size: .72rem; }
    .dwd-pcs__label--study { inset: auto !important; max-width: 80%; transform: none; }
    .dwd-pcs__label--study .dwd-pcs__color-name { font-size: clamp(1.15rem, 5.5vw, 1.45rem); }
}

/* Compact landscape phones use a true two-column hero instead of a squeezed desktop crop. */
@media (min-width: 768px) and (max-height: 600px) {
    .dwd-pcs--site .dwd-pcs__brandbar { min-height: 52px; padding: .35rem 1.4rem; }
    .dwd-pcs--site .dwd-pcs__brand { display: inline-flex; min-height: 44px; align-items: center; font-size: 1rem; }
    .dwd-pcs--site .dwd-pcs__estimate-link { min-height: 44px; padding: .55rem .85rem; }
    .dwd-pcs--site .dwd-pcs__intro { top: 72px; left: 1.5rem; width: 33%; }
    .dwd-pcs--site .dwd-pcs__intro-kicker { font-size: .68rem; }
    .dwd-pcs--site .dwd-pcs__intro h1 { max-width: 11ch; font-size: clamp(2.25rem, 5vw, 3rem); line-height: .91; }
    .dwd-pcs--site .dwd-pcs__frame { inset: 52px 0 0 38%; width: auto; height: auto; transform: none; }
    .dwd-pcs--site .dwd-pcs__hint { top: auto; right: 1rem; bottom: .75rem; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.85); }
    .dwd-pcs__label--panel { width: 28%; max-width: 28%; }

    .dwd-pcs__study-composition { inset: .8rem 1.2rem; width: auto; height: auto; grid-template-columns: minmax(120px, .6fr) minmax(0, 1.8fr) minmax(110px, .6fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: 1rem; transform: none; }
    .dwd-pcs--embedded .dwd-pcs__study-composition .dwd-pcs__frame,
    .dwd-pcs__stage.dwd-pcs--embedded .dwd-pcs__study-composition .dwd-pcs__frame {
        inset: auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
        transform: none;
    }
    .dwd-pcs__project-caption span { font-size: 1.1rem; }
    .dwd-pcs__project-caption small { font-size: .7rem; }
    .dwd-pcs__label--study { max-width: 100%; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
    .dwd-pcs__hint,
    .dwd-pcs__foreground { display: none; }
    .dwd-pcs__backdrop,
    .dwd-pcs__color,
    .dwd-pcs__image,
    .dwd-pcs--site .dwd-pcs__intro { transition: none !important; }
}