:root {
    --paper: #ece9de;
    --paper-soft: #e3ded0;
    --ink: #111311;
    --muted: #61665f;
    --line: rgba(17, 19, 17, .14);
    --blue-deep: #08132f;
    --green: #10b981;
    --header-h: 76px;
    --side: clamp(20px, 4.2vw, 72px);
    --radius: 26px;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html {
    overflow-x: clip;
    scroll-behavior: smooth;
    background: var(--paper);
}
body.dwdp-possibilities-page {
    margin: 0;
    overflow-x: clip;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 4%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 88% 20%, rgba(133,151,143,.14), transparent 30%),
        linear-gradient(180deg, #efece3 0%, var(--paper) 38%, #e8e3d7 100%);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body.dwdp-possibilities-page.is-menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}
body.dwdp-possibilities-page a { color: inherit; text-decoration: none; }
body.dwdp-possibilities-page button,
body.dwdp-possibilities-page a { -webkit-tap-highlight-color: transparent; }
body.dwdp-possibilities-page button { font: inherit; }
body.admin-bar .dwdp-header { top: 32px; }
body.admin-bar .dwdp-menu { top: 32px; height: calc(100dvh - 32px); }

.dwdp-site { min-height: 100vh; }
.dwdp-skip {
    position: fixed;
    z-index: 9999;
    left: 18px;
    top: 12px;
    transform: translateY(-150%);
    padding: 11px 16px;
    border-radius: 999px;
    color: #fff;
    background: var(--blue-deep);
    transition: transform .2s ease;
}
.dwdp-skip:focus { transform: translateY(0); }

.dwdp-header {
    position: fixed;
    z-index: 110;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--side);
    pointer-events: none;
    background: rgba(239,236,227,.88);
    border-bottom: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease;
}
body.dwdp-has-scrolled .dwdp-header {
    background: rgba(239,236,227,.98);
    border-color: rgba(17,19,17,.10);
}
.dwdp-header > * { pointer-events: auto; }
.dwdp-brand {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: baseline;
    column-gap: 7px;
    letter-spacing: -.03em;
}
.dwdp-brand strong { grid-row: 1; grid-column: 1; font-size: 18px; font-weight: 800; }
.dwdp-brand > span { grid-row: 1; grid-column: 2; font-size: 12px; font-weight: 650; }
.dwdp-brand small {
    grid-row: 2;
    grid-column: 1 / 3;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
.dwdp-header-actions { display: flex; gap: 8px; align-items: center; }
.dwdp-pill {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .2s var(--ease), background-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .dwdp-pill:hover,
    .dwdp-contact-button:hover,
    .dwdp-index-link:hover { transform: translateY(-2px); }
}
.dwdp-pill--light { background: rgba(255,255,255,.94); border: 1px solid rgba(17,19,17,.08); }
.dwdp-pill--dark { background: var(--ink); color: #fff; }

.dwdp-menu {
    position: fixed;
    z-index: 130;
    inset: 0;
    height: 100dvh;
    display: grid;
    grid-auto-rows: max-content;
    align-content: safe center;
    justify-items: start;
    gap: clamp(6px, 1.1vh, 12px);
    padding: max(88px, calc(env(safe-area-inset-top) + 72px)) max(var(--side), env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(var(--side), env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #070a09;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0,-10px,0);
    transition: opacity .24s ease, transform .3s var(--ease), visibility .24s;
}
.dwdp-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.dwdp-menu a {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-size: clamp(30px, 5vw, 76px);
    line-height: 1.04;
    letter-spacing: -.055em;
    font-weight: 650;
    transition: opacity .18s ease, transform .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .dwdp-menu a:hover { opacity: .58; transform: translateX(8px); }
}
.dwdp-menu .dwdp-menu-secondary {
    margin-top: 10px;
    font-size: clamp(16px, 2vw, 26px);
    color: rgba(255,255,255,.72);
}
.dwdp-menu-close {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    right: max(var(--side), env(safe-area-inset-right));
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.dwdp-kicker {
    margin: 0 0 25px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.dwdp-opening {
    padding: calc(var(--header-h) + 64px) 0 clamp(90px, 13vh, 150px);
}
.dwdp-hero-copy {
    min-height: 62vh;
    padding: 6vh var(--side) 5vh;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr);
    align-content: center;
    column-gap: clamp(36px, 8vw, 140px);
}
.dwdp-hero-copy .dwdp-kicker { grid-column: 1; }
.dwdp-hero-copy h1 {
    grid-column: 1;
    margin: 0;
    max-width: 920px;
    font-size: clamp(62px, 8.6vw, 154px);
    line-height: .87;
    letter-spacing: -.075em;
    font-weight: 520;
}
.dwdp-hero-copy h1 span,
.dwdp-hero-copy h1 strong { display: block; }
.dwdp-hero-copy h1 span { font-weight: 400; color: #292c28; }
.dwdp-hero-copy h1 strong { font-weight: 760; }
.dwdp-hero-note {
    grid-column: 2;
    align-self: end;
    margin: 0 0 4vh;
    max-width: 330px;
    font-size: 12px;
    line-height: 1.7;
    color: #454a43;
}

.dwdp-mosaic-wrap {
    padding: 0 var(--side);
    display: grid;
    place-items: center;
}
.dwdp-mosaic {
    --gap: clamp(8px, 1vw, 16px);
    position: relative;
    width: min(1180px, 100%);
    min-height: min(530px, 60vh);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(160px, 1fr));
    gap: var(--gap);
}
.dwdp-tile {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 24px;
    background: #070907;
    box-shadow: 0 14px 38px rgba(9,13,11,.13);
    contain: paint;
    transition: transform .35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .dwdp-tile:hover { transform: translateY(-5px); }
}
.dwdp-tile small {
    position: absolute;
    z-index: 3;
    left: 16px;
    bottom: 13px;
    color: rgba(255,255,255,.78);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.dwdp-tile--a { grid-column: 1; grid-row: 1 / 3; }
.dwdp-tile--b { grid-column: 2; grid-row: 1 / 2; }
.dwdp-tile--c { grid-column: 3; grid-row: 2 / 3; }
.dwdp-tile--d { grid-column: 4; grid-row: 1 / 3; }
.dwdp-orb {
    position: absolute;
    width: 76%;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.dwdp-orb::before,
.dwdp-orb::after { content: ""; position: absolute; border-radius: inherit; }
.dwdp-orb--pink {
    background: radial-gradient(circle at 34% 28%, #ffbadb 0 5%, #ff5fa8 28%, #a90054 67%, #280013 100%);
    box-shadow: inset -16px -24px 38px rgba(25,0,20,.46), 0 0 38px rgba(255,51,147,.28);
}
.dwdp-orb--pink::before { inset: 8%; border: 1px solid rgba(255,255,255,.22); }
.dwdp-orb--glass {
    width: 84%;
    background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 2%, rgba(255,255,255,.24) 6%, rgba(136,232,255,.15) 28%, rgba(10,15,25,.74) 75%), linear-gradient(145deg, rgba(255,255,255,.4), transparent 45%);
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: inset 12px 8px 22px rgba(255,255,255,.16), inset -18px -24px 34px rgba(2,4,16,.58), 0 16px 36px rgba(0,0,0,.30);
}
.dwdp-orb--glass::after { width: 10%; height: 10%; top: 19%; left: 23%; background: rgba(255,255,255,.92); }
.dwdp-orb--gold {
    background: radial-gradient(circle at 35% 26%, #fff7a1 0 7%, #ffd739 32%, #f49f08 67%, #5f2400 100%);
    box-shadow: inset -20px -28px 42px rgba(76,25,0,.44), 0 0 42px rgba(255,194,32,.30);
}
.dwdp-orb--ink {
    width: 92%;
    border-radius: 43% 57% 60% 40% / 45% 40% 60% 55%;
    background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.98) 0 2%, rgba(255,255,255,.42) 5%, transparent 16%), linear-gradient(132deg, #e7eee9 0%, #232828 20%, #020303 47%, #989f9b 57%, #090a0a 75%, #d7ded8 100%);
    transform: translate(-50%,-50%) rotate(6deg) scale(.96);
}
.dwdp-mosaic-grid {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 25% 50%;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    opacity: .38;
}

.dwdp-intro {
    min-height: 110vh;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr);
    grid-template-areas:
        "title title"
        "quote portrait"
        ". copy";
    gap: clamp(64px, 9vh, 110px) clamp(30px, 7vw, 120px);
    align-items: start;
    padding: clamp(110px, 16vh, 180px) var(--side);
}
.dwdp-intro > h2 {
    grid-area: title;
    margin: 0;
    max-width: 1000px;
    font-size: clamp(58px, 8.5vw, 148px);
    line-height: .88;
    font-weight: 680;
    letter-spacing: -.07em;
}
.dwdp-intro blockquote {
    grid-area: quote;
    align-self: center;
    max-width: 430px;
    margin: 8vh 0 0 6vw;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(18px, 2vw, 31px);
    line-height: 1.55;
    font-weight: 400;
    color: #3f443d;
}
.dwdp-portrait {
    grid-area: portrait;
    position: relative;
    justify-self: end;
    width: min(440px, 100%);
    aspect-ratio: .72;
    overflow: hidden;
    border-radius: 28px;
    background: radial-gradient(circle at 80% 84%, rgba(255,65,199,.9), transparent 28%), linear-gradient(150deg, #4bf1c7 0%, #27b8a5 45%, #1d7d74 100%);
    box-shadow: 0 22px 58px rgba(18,95,82,.18);
    contain: paint;
}
.dwdp-portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.12) 50%, transparent 50.3%), linear-gradient(transparent 66%, rgba(255,255,255,.12) 66.2%, transparent 66.4%);
}
.dwdp-portrait-ring { position: absolute; width: 52%; aspect-ratio: 1; top: 8%; left: 20%; border-radius: 50%; background: #f4f4e9; }
.dwdp-portrait-head { position: absolute; width: 42%; aspect-ratio: 1; top: 13%; left: 29%; border-radius: 50%; background: #111313; box-shadow: 12px 14px 28px rgba(0,0,0,.20); }
.dwdp-portrait-body { position: absolute; width: 98%; aspect-ratio: 1.3; left: 2%; bottom: -9%; border-radius: 50% 50% 0 0; background: #101312; }
.dwdp-portrait-body::after { content: ""; position: absolute; width: 72%; height: 66%; left: 13%; bottom: 0; border-radius: 50% 50% 0 0; background: rgba(85,255,187,.28); }
.dwdp-portrait i { position: absolute; z-index: 3; top: 18px; left: 18px; min-width: 44px; height: 25px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; font-size: 9px; font-style: normal; letter-spacing: .14em; }
.dwdp-intro-copy { grid-area: copy; max-width: 440px; justify-self: end; font-size: 13px; line-height: 1.75; color: #474c45; }
.dwdp-intro-copy p { margin: 0 0 18px; }
.dwdp-intro-copy a { display: inline-flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }

.dwdp-client-possibilities {
    padding: clamp(70px, 8vh, 110px) var(--side) clamp(130px, 20vh, 230px);
}
.dwdp-client-possibilities > h2 {
    margin: 0 0 6vh;
    font-size: clamp(80px, 13vw, 220px);
    line-height: .82;
    letter-spacing: -.08em;
    font-weight: 420;
    color: #2e322e;
}
.dwdp-black-ribbon {
    position: relative;
    height: clamp(70px, 8vw, 116px);
    margin: 0 0 clamp(80px, 13vh, 150px);
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(105deg, #020303 0%, #171b1b 18%, #000 36%, #333938 54%, #060707 70%, #1a1d1d 100%);
}
.dwdp-black-ribbon span { position: absolute; width: 34%; height: 180%; top: -42%; left: 43%; border-radius: 50%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent); transform: rotate(-15deg); }
.dwdp-possibility {
    min-height: min(90vh, 900px);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
    gap: clamp(40px, 9vw, 150px);
    align-items: center;
    padding: clamp(54px, 8vh, 90px) 0;
}
.dwdp-possibility--right { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); }
.dwdp-possibility-art {
    position: relative;
    width: min(700px, 100%);
    aspect-ratio: 1.18;
    overflow: hidden;
    border-radius: 26px;
    background: radial-gradient(circle at 70% 25%, #28333d, #06090c 48%, #000 100%);
    box-shadow: 0 22px 54px rgba(0,0,0,.16);
    contain: paint;
}
.dwdp-possibility-art::before { content: ""; position: absolute; inset: -20%; background: conic-gradient(from 30deg, transparent, rgba(255,255,255,.14), transparent 20%, rgba(255,255,255,.04), transparent 48%); transform: rotate(24deg); }
.dwdp-lanyard { position: absolute; z-index: 2; width: 45%; height: 105%; left: 28%; top: -56%; border: 18px solid #0a0d0f; border-bottom-width: 32px; border-radius: 45% 45% 26% 26%; transform: rotate(-12deg); box-shadow: inset 0 0 14px rgba(255,255,255,.07), 0 14px 34px rgba(0,0,0,.52); }
.dwdp-possibility-art strong { position: absolute; z-index: 3; left: 24%; top: 47%; width: 52%; min-height: 34%; display: grid; place-items: center; padding: 20px; border-radius: 18px; background: linear-gradient(145deg,#101519,#020304); color: #eef2ef; font-size: clamp(24px,4vw,64px); letter-spacing: -.05em; box-shadow: 0 20px 38px rgba(0,0,0,.50), inset 0 0 0 1px rgba(255,255,255,.1); transform: rotate(-8deg); }
.dwdp-possibility-art i { position: absolute; width: 55%; height: 30%; right: -10%; bottom: -8%; border-radius: 50%; background: rgba(255,255,255,.10); transform: rotate(-18deg); }
.dwdp-art-shop { background: radial-gradient(circle at 62% 30%,#272030,#09080e 48%,#010102 100%); }
.dwdp-art-shop .dwdp-lanyard { transform: rotate(9deg); left: 20%; }
.dwdp-art-shop strong { transform: rotate(6deg); left: 28%; background: linear-gradient(145deg,#18101d,#030204); }
.dwdp-art-community { background: radial-gradient(circle at 38% 25%,#14382d,#07120e 48%,#010302 100%); }
.dwdp-art-community strong { background: linear-gradient(145deg,#11251d,#020403); }
.dwdp-possibility-copy { max-width: 430px; justify-self: center; }
.dwdp-possibility-copy > span { display: block; margin-bottom: 20px; font-size: 9px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dwdp-possibility-copy h3 { margin: 0 0 22px; font-size: clamp(38px,4.4vw,78px); line-height: .98; letter-spacing: -.06em; font-weight: 560; }
.dwdp-possibility-copy p { margin: 0; font-size: 13px; line-height: 1.75; color: #4e534d; }

.dwdp-statement {
    padding: clamp(110px, 18vh, 210px) var(--side);
    background: rgba(255,255,255,.24);
    border-top: 1px solid rgba(17,19,17,.07);
    border-bottom: 1px solid rgba(17,19,17,.07);
}
.dwdp-statement-stage {
    min-height: min(72vh, 760px);
    display: grid;
    place-content: center;
    text-align: center;
}
.dwdp-statement-copy { max-width: 1220px; margin: 0 auto; }
.dwdp-statement-main,
.dwdp-statement-secondary { margin: 0; }
.dwdp-statement-main {
    font-size: clamp(44px, 7.4vw, 126px);
    line-height: .93;
    letter-spacing: -.065em;
    font-weight: 650;
}
.dwdp-statement-secondary {
    margin-top: .55em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 3.8vw, 64px);
    line-height: 1.15;
    letter-spacing: -.035em;
    color: #555b54;
}
.dwdp-word { display: inline; }
.dwdp-statement-caption {
    margin: clamp(36px, 7vh, 70px) auto 0;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.dwdp-directions { padding: clamp(110px, 17vh, 200px) 0 clamp(90px, 12vh, 140px); }
.dwdp-directions-intro {
    padding: 0 var(--side) clamp(70px, 10vh, 120px);
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(250px,.75fr);
    gap: 60px;
    align-items: end;
}
.dwdp-directions-intro h2 { margin: 0; font-size: clamp(75px,12vw,210px); line-height: .82; letter-spacing: -.08em; font-weight: 540; }
.dwdp-directions-intro p { margin: 0 0 1vh; max-width: 400px; font-size: 12px; line-height: 1.7; color: #555b53; }
.dwdp-case-pin { padding: 0 var(--side); }
.dwdp-case-stage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}
.dwdp-case {
    position: relative;
    min-height: clamp(560px, 66vw, 760px);
    overflow: hidden;
    border-radius: 28px;
    background: #080d18;
    color: #fff;
    box-shadow: 0 24px 64px rgba(8,13,24,.18);
    contain: paint;
    transition: transform .3s var(--ease), box-shadow .3s ease;
}
@media (hover: hover) and (pointer: fine) {
    .dwdp-case:hover { transform: translateY(-6px); box-shadow: 0 30px 72px rgba(8,13,24,.22); }
}
.dwdp-case-meta {
    position: absolute;
    z-index: 4;
    top: 22px;
    left: 22px;
    right: 22px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 18px;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.dwdp-case-meta small { color: rgba(255,255,255,.58); font-size: 8px; text-align: right; }
.dwdp-browser {
    position: absolute;
    inset: 12% 6% 25%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    background: #10182d;
    box-shadow: 0 18px 44px rgba(0,0,0,.32);
}
.dwdp-browser-bar { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.42); font-size: 8px; }
.dwdp-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.34); }
.dwdp-browser-bar span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dwdp-browser-scene { position: relative; height: calc(100% - 42px); overflow: hidden; padding: clamp(24px,3vw,48px); color: #fff; }
.dwdp-browser-scene b { position: relative; z-index: 3; display: block; max-width: 780px; font-size: clamp(34px,3.7vw,66px); line-height: .94; letter-spacing: -.06em; }
.dwdp-scene-one { background: radial-gradient(circle at 75% 30%,rgba(75,112,255,.65),transparent 24%), radial-gradient(circle at 42% 74%,rgba(18,235,184,.28),transparent 30%), linear-gradient(140deg,#101a42,#070b15 65%); }
.dwdp-scene-one > span { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.42); }
.dwdp-scene-one > span:nth-of-type(1) { width: 54%; aspect-ratio: 1; right: -14%; bottom: -52%; }
.dwdp-scene-one > span:nth-of-type(2) { width: 38%; aspect-ratio: 1; right: 15%; bottom: -39%; border-color: rgba(16,185,129,.70); }
.dwdp-scene-one > span:nth-of-type(3) { width: 22%; aspect-ratio: 1; right: 36%; bottom: -18%; border-color: rgba(255,255,255,.22); }
.dwdp-scene-two { background: radial-gradient(circle at 76% 38%,rgba(255,74,157,.46),transparent 27%), radial-gradient(circle at 27% 70%,rgba(117,87,255,.5),transparent 32%), linear-gradient(145deg,#1d102e,#080813 70%); }
.dwdp-scene-two ol { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 22px; margin: 0; padding: 0; list-style: none; counter-reset: item; }
.dwdp-scene-two li { display: flex; align-items: center; justify-content: space-between; min-height: 42px; border-bottom: 1px solid rgba(255,255,255,.19); font-size: 13px; }
.dwdp-scene-two li::after { counter-increment: item; content: "0" counter(item); font-size: 8px; color: rgba(255,255,255,.46); }
.dwdp-scene-two > span { position: absolute; width: 42%; height: 80%; right: -8%; bottom: -35%; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); transform: rotate(-25deg); }
.dwdp-scene-three { background: radial-gradient(circle at 30% 32%,rgba(17,185,129,.48),transparent 28%), radial-gradient(circle at 72% 68%,rgba(52,107,255,.55),transparent 32%), linear-gradient(145deg,#071b25,#060b14 72%); }
.dwdp-scene-three > div { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 20px; display: grid; grid-template-columns: repeat(2,minmax(70px,1fr)); gap: 8px; }
.dwdp-scene-three > div span { min-height: 54px; display: flex; align-items: end; padding: 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.07); font-size: 10px; }
.dwdp-case-caption { position: absolute; z-index: 4; left: 22px; right: 22px; bottom: 20px; color: #fff; }
.dwdp-case-caption h3 { margin: 0; font-size: clamp(22px,2vw,34px); line-height: 1; letter-spacing: -.04em; }
.dwdp-case-caption p { margin: 10px 0 0; font-size: 10px; line-height: 1.5; color: rgba(255,255,255,.58); }
.dwdp-index-link { display: inline-flex; margin: 34px var(--side) 0; font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; transition: transform .2s var(--ease); }

.dwdp-contact {
    position: relative;
    min-height: 90vh;
    padding: clamp(110px, 17vh, 190px) var(--side);
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    overflow: hidden;
}
.dwdp-contact::before,
.dwdp-contact::after {
    content: "";
    position: absolute;
    width: clamp(90px, 11vw, 180px);
    aspect-ratio: 1.25;
    border-radius: 46% 54% 61% 39% / 45% 40% 60% 55%;
    background: linear-gradient(135deg,#020304,#334a7d 35%,#06080d 70%,#b3c5ff);
    opacity: .88;
}
.dwdp-contact::before { top: 18%; right: 10%; transform: rotate(15deg); }
.dwdp-contact::after { bottom: 18%; left: 14%; width: clamp(64px, 7vw, 110px); transform: rotate(-22deg); }
.dwdp-float-object { display: none; }
.dwdp-contact h2 { position: relative; z-index: 2; margin: 0; font-size: clamp(62px,9.7vw,170px); line-height: .87; letter-spacing: -.075em; font-weight: 420; }
.dwdp-contact p { position: relative; z-index: 2; margin: 34px 0 22px; font-size: 12px; color: #555b53; }
.dwdp-contact-button { position: relative; z-index: 2; display: inline-flex; gap: 18px; align-items: center; padding: 15px 21px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; transition: transform .2s var(--ease); }

.dwdp-footer {
    position: relative;
    min-height: 86vh;
    overflow: hidden;
    padding: clamp(90px, 12vh, 140px) var(--side) 42px;
    color: #f3f5f4;
    background:
        radial-gradient(circle at 18% 16%, rgba(174,190,183,.14), transparent 30%),
        radial-gradient(circle at 84% 58%, rgba(86,111,100,.14), transparent 34%),
        #050706;
}
.dwdp-footer-grid { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3,minmax(160px,1fr)); gap: clamp(30px,7vw,110px); max-width: 1000px; }
.dwdp-footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dwdp-footer-grid h2 { margin: 0 0 12px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.48); }
.dwdp-footer-grid a { font-size: 12px; }
.dwdp-footer-grid p { margin: 20px 0 0; font-size: 10px; line-height: 1.7; color: rgba(255,255,255,.48); }
.dwdp-footer-status { position: relative; z-index: 3; margin: 12vh 0 0; max-width: 330px; font-size: 10px; color: rgba(255,255,255,.48); }
.dwdp-footer-wordmark { position: absolute; z-index: 2; left: var(--side); bottom: -.10em; font-size: clamp(150px,28vw,470px); line-height: .75; letter-spacing: -.1em; font-weight: 820; color: #f0f3f1; white-space: nowrap; opacity: .94; }
.dwdp-metal { display: none; }
.dwdp-top { position: absolute; z-index: 5; right: var(--side); bottom: 48px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #070908; font-size: 22px; }
.dwdp-copyright { position: absolute; z-index: 5; right: calc(var(--side) + 76px); bottom: 64px; font-size: 9px; color: rgba(255,255,255,.45); }

/* Only one-time, compositor-friendly reveals. No element follows scroll position. */
html.js .dwdp-hero-copy > *,
html.js .dwdp-mosaic { opacity: 0; transform: translate3d(0,18px,0); }
html.dwdp-ready .dwdp-hero-copy > *,
html.dwdp-ready .dwdp-mosaic {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .65s var(--ease);
}
html.dwdp-ready .dwdp-hero-copy h1 { transition-delay: 60ms; }
html.dwdp-ready .dwdp-hero-note { transition-delay: 120ms; }
html.dwdp-ready .dwdp-mosaic { transition-delay: 150ms; }
.dwdp-reveal {
    opacity: 0;
    transform: translate3d(0,22px,0);
    transition: opacity .46s ease var(--dwdp-delay,0ms), transform .58s var(--ease) var(--dwdp-delay,0ms);
}
.dwdp-reveal.is-visible { opacity: 1; transform: none; }

/* Skip rendering far-below-fold sections until they approach the viewport. */
@supports (content-visibility: auto) {
    .dwdp-client-possibilities,
    .dwdp-statement,
    .dwdp-directions,
    .dwdp-contact,
    .dwdp-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }
}

.dwdp-brand:focus-visible,
.dwdp-pill:focus-visible,
.dwdp-menu a:focus-visible,
.dwdp-menu-close:focus-visible,
.dwdp-contact-button:focus-visible,
.dwdp-index-link:focus-visible,
.dwdp-top:focus-visible,
.dwdp-intro-copy a:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 4px;
}

@media (max-width: 1100px) {
    .dwdp-case-stage { grid-template-columns: 1fr; }
    .dwdp-case { min-height: min(760px, 76vh); }
    .dwdp-browser { inset: 11% 6% 21%; }
    .dwdp-browser-scene b { font-size: clamp(42px, 7vw, 90px); }
    .dwdp-case-caption { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
    .dwdp-case-caption p { max-width: 340px; margin: 0; }
}

@media (max-width: 900px) {
    :root { --header-h: 70px; --side: clamp(18px, 5vw, 38px); --radius: 22px; }
    body.admin-bar .dwdp-header { top: 46px; }
    body.admin-bar .dwdp-menu { top: 46px; height: calc(100dvh - 46px); }
    .dwdp-pill--light { display: none; }
    .dwdp-header { background: rgba(239,236,227,.98); border-color: rgba(17,19,17,.08); }
    .dwdp-hero-copy { min-height: 72vh; grid-template-columns: 1fr; align-content: end; row-gap: 28px; padding-bottom: 8vh; }
    .dwdp-hero-copy .dwdp-kicker,
    .dwdp-hero-copy h1,
    .dwdp-hero-note { grid-column: 1; }
    .dwdp-hero-note { margin: 0; max-width: 440px; }
    .dwdp-mosaic { min-height: 66vh; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); }
    .dwdp-tile--a { grid-column: 1; grid-row: 1; }
    .dwdp-tile--b { grid-column: 2; grid-row: 1; }
    .dwdp-tile--c { grid-column: 1; grid-row: 2; }
    .dwdp-tile--d { grid-column: 2; grid-row: 2; }
    .dwdp-intro { min-height: auto; grid-template-columns: 1fr; grid-template-areas: "title" "portrait" "quote" "copy"; gap: 8vh; }
    .dwdp-intro blockquote { margin: 0; }
    .dwdp-portrait { justify-self: start; width: min(470px,88vw); }
    .dwdp-intro-copy { justify-self: start; }
    .dwdp-possibility,
    .dwdp-possibility--right { min-height: auto; grid-template-columns: 1fr; padding: 10vh 0; gap: 42px; }
    .dwdp-possibility--right .dwdp-possibility-copy { order: 2; }
    .dwdp-possibility-copy { justify-self: start; }
    .dwdp-directions-intro { grid-template-columns: 1fr; align-items: start; }
    .dwdp-case-pin { padding: 0 var(--side); }
    .dwdp-case-stage { grid-template-columns: 1fr; }
    .dwdp-case { min-height: 680px; }
    .dwdp-browser { inset: 12% 5% 22%; }
    .dwdp-index-link { width: calc(100% - (var(--side) * 2)); margin-left: var(--side); margin-right: var(--side); }
    .dwdp-contact { min-height: 78vh; }
    .dwdp-contact::before,
    .dwdp-contact::after { opacity: .45; }
    .dwdp-footer { min-height: 820px; }
    .dwdp-footer-grid { grid-template-columns: 1fr 1fr; }
    .dwdp-footer-grid > div:last-child { grid-column: 1 / -1; }
    .dwdp-footer-wordmark { font-size: clamp(130px,34vw,300px); }

    /* On phones and tablets, reveal content immediately to avoid any chance of
       paint-on-entry hitching while the user is actively swiping. */
    .dwdp-reveal,
    .dwdp-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 560px) {
    .dwdp-brand > span { display: none; }
    .dwdp-brand small { grid-column: 1; }
    .dwdp-menu { padding-top: max(88px, calc(env(safe-area-inset-top) + 72px)); }
    .dwdp-pill { min-height: 44px; }
    .dwdp-hero-copy { min-height: 74vh; }
    .dwdp-hero-copy h1 { font-size: clamp(52px,16vw,80px); }
    .dwdp-mosaic { min-height: 72vh; gap: 8px; }
    .dwdp-tile { border-radius: 18px; box-shadow: none; }
    .dwdp-tile small { left: 11px; bottom: 10px; font-size: 7px; }
    .dwdp-intro { padding-top: 11vh; }
    .dwdp-intro > h2 { font-size: clamp(52px,16vw,80px); }
    .dwdp-client-possibilities > h2 { font-size: clamp(66px,22vw,106px); }
    .dwdp-black-ribbon { margin-bottom: 7vh; }
    .dwdp-possibility-art { border-radius: 20px; box-shadow: none; }
    .dwdp-lanyard { border-width: 12px; border-bottom-width: 22px; }
    .dwdp-possibility-art strong { font-size: 8vw; box-shadow: 0 12px 24px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.1); }
    .dwdp-statement { padding-left: var(--side); padding-right: var(--side); }
    .dwdp-statement-stage { min-height: 62vh; }
    .dwdp-statement-main { font-size: clamp(40px,12.5vw,62px); }
    .dwdp-statement-secondary { font-size: clamp(24px,7.8vw,38px); }
    .dwdp-directions-intro h2 { font-size: clamp(64px,20vw,104px); }
    .dwdp-case { min-height: 610px; border-radius: 22px; box-shadow: none; }
    .dwdp-case-meta { top: 18px; left: 18px; right: 18px; }
    .dwdp-browser { inset: 14% 4% 24%; border-radius: 16px; box-shadow: none; }
    .dwdp-browser-scene { padding: 24px 18px; }
    .dwdp-browser-scene b { font-size: clamp(32px,11vw,54px); }
    .dwdp-case-caption { left: 18px; right: 18px; bottom: 16px; display: block; }
    .dwdp-case-caption p { margin-top: 8px; }
    .dwdp-contact h2 { font-size: clamp(54px,17vw,86px); }
    .dwdp-contact::before,
    .dwdp-contact::after { display: none; }
    .dwdp-footer { min-height: 900px; }
    .dwdp-footer-grid { grid-template-columns: 1fr; }
    .dwdp-footer-grid > div:last-child { grid-column: auto; }
    .dwdp-footer-status { margin-top: 8vh; }
    .dwdp-footer-wordmark { left: 8px; font-size: 38vw; bottom: 92px; }
    .dwdp-top { bottom: 28px; }
    .dwdp-copyright { left: var(--side); right: auto; bottom: 42px; max-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    html.js .dwdp-hero-copy > *,
    html.js .dwdp-mosaic,
    .dwdp-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (forced-colors: active) {
    .dwdp-menu,
    .dwdp-tile,
    .dwdp-possibility-art,
    .dwdp-case,
    .dwdp-footer { border: 1px solid CanvasText; }
}