/* ==========================================================
   DIGITAL LADS PUBLISHERS — BOOK TO SCREENPLAY
   Designed to sit beside your existing site styles.
   Brand palette inspired by the supplied website screenshot:
   deep navy / warm cream / editorial gold / muted plum.
========================================================== */

:root {
    --dlp-navy: #071c38;
    --dlp-navy-2: #0b294c;
    --dlp-ink: #142235;
    --dlp-cream: #eae8e4;
    --dlp-paper: #f7f5f1;
    --dlp-gold: #d3ae7c;
    --dlp-gold-deep: #b98a50;
    --dlp-plum: #3f2948;
    --dlp-line: rgba(7, 28, 56, 0.14);
    --dlp-white: #ffffff;
    --dlp-radius-lg: 32px;
    --dlp-radius-md: 20px;
    --dlp-shadow: 0 24px 70px rgba(7, 28, 56, 0.12);
}

.dlp-screen-shell {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.dlp-screen-hero {
    position: relative;
    overflow: hidden;
    color: var(--dlp-white);
    background: radial-gradient(circle at 15% 16%, #d6b07d33, transparent 33%), radial-gradient(circle at 92% 10%, rgba(211, 174, 124, .13), transparent 24%), linear-gradient(135deg, #071a35 0%, #092545 50%, #06182f 100%);
    padding: clamp(105px, 12vw, 160px) 0 90px;
}

.dlp-screen-hero::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -150px;
    height: 260px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .07);
    transform: rotate(-4deg);
}

.dlp-screen-hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.dlp-screen-hero__glow--one {
    width: 320px;
    height: 320px;
    right: -120px;
    bottom: -80px;
    border: 58px solid rgba(211, 174, 124, .16);
}

.dlp-screen-hero__glow--two {
    width: 210px;
    height: 210px;
    left: -115px;
    top: 28%;
    border: 42px solid rgba(255, 255, 255, .05);
}

.dlp-screen-hero .dlp-screen-shell {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(44px, 6vw, 84px);
    align-items: center;
    position: relative;
    z-index: 2;
}

.dlp-kicker-light {
    color: var(--dlp-gold) !important;
}

.dlp-screen-hero h1,
.dlp-story-intro h2,
.dlp-section-head h2,
.dlp-why h2,
.dlp-screen-cta h2 {
    margin: 0;
    color: var(--dlp-navy);
    line-height: .98;
    letter-spacing: -0.045em;
}

.dlp-screen-hero h1 {
    color: var(--dlp-white);
    font-size: clamp(52px, 6vw, 84px);
    max-width: 760px;
}

.dlp-screen-hero h1 span,
.dlp-story-intro h2 span,
.dlp-section-head h2 span,
.dlp-why h2 span {
    color: var(--dlp-gold);
}

.dlp-screen-hero__copy > p {
    max-width: 680px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 17px;
    line-height: 1.75;
}

.dlp-screen-actions,
.dlp-center-actions,
.dlp-screen-cta__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dlp-screen-actions {
    margin-top: 34px;
}

.dlp-btn-gold,
.dlp-btn-navy,
.dlp-btn-outline {
    border: 1px solid transparent;
    cursor: pointer;
}

.dlp-btn-gold {
    background: var(--dlp-gold);
    color: var(--dlp-navy);
}

.dlp-btn-gold:hover {
    background: #e1c194;
}

.dlp-btn-navy {
    background: var(--dlp-navy);
    color: var(--dlp-white);
}

.dlp-btn-navy:hover {
    background: var(--dlp-navy-2);
}

.dlp-btn-outline {
    background: transparent;
    color: var(--dlp-white);
    border-color: rgba(255, 255, 255, .32);
}

.dlp-btn-outline:hover {
    background: rgba(255, 255, 255, .08);
}

.dlp-screen-trust {
    display: flex;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-top: 28px;
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.dlp-screen-trust span {
    position: relative;
    padding-left: 15px;
}

.dlp-screen-trust span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dlp-gold);
    transform: translateY(-50%);
}

.dlp-screen-hero__visual {
    position: relative;
}

.dlp-visual-stage {
    display: grid;
    grid-template-columns: 1fr 36px 1fr 36px 1fr;
    align-items: center;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 30px;
    background: rgba(255, 255, 255, .055);
    box-shadow: 0 30px 85px rgba(0, 0, 0, .24);
    backdrop-filter: blur(14px);
}

.dlp-visual-card {
    min-width: 0;
}

.dlp-visual-label {
    display: block;
    min-height: 32px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dlp-visual-arrow {
    color: var(--dlp-gold);
    text-align: center;
    font-size: 25px;
}

.dlp-book-cover,
.dlp-script-sheet,
.dlp-cinema-frame {
    aspect-ratio: 4 / 5.3;
    border-radius: 10px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
}

.dlp-book-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(211, 174, 124, .45);
    background:
        linear-gradient(rgba(7, 28, 56, .15), rgba(7, 28, 56, .78)),
        radial-gradient(circle at 50% 26%, #ae8b69 0%, #384463 32%, #0b1d37 72%);
}

.dlp-book-cover::before,
.dlp-book-cover::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    border: 1px solid rgba(211, 174, 124, .32);
    border-radius: 50%;
}

.dlp-book-cover::before {
    top: -36px;
    left: -26px;
}

.dlp-book-cover::after {
    right: -40px;
    bottom: -34px;
}

.dlp-book-cover small {
    color: var(--dlp-gold);
    font-size: 7px;
    letter-spacing: .17em;
}

.dlp-book-cover strong {
    margin: 12px 0 14px;
    color: #fff;
    font-family: Georgia, serif;
    font-size: clamp(20px, 2.2vw, 34px);
    line-height: .9;
    letter-spacing: .02em;
}

.dlp-book-cover i {
    color: rgba(255, 255, 255, .67);
    font-family: Georgia, serif;
    font-size: 8px;
    font-weight: 400;
}

.dlp-script-sheet {
    box-sizing: border-box;
    padding: 20px 16px;
    color: #141414;
    background: #f7f3e9;
    border: 1px solid #d8ccb8;
    transform: rotate(-1.5deg);
}

.dlp-script-sheet span,
.dlp-script-sheet b,
.dlp-script-sheet em {
    display: block;
    font-family: "Courier New", monospace;
}

.dlp-script-sheet span {
    font-size: 8px;
}

.dlp-script-sheet b {
    margin-top: 16px;
    font-size: 8px;
}

.dlp-script-sheet p {
    margin: 10px 0 0;
    font-family: "Courier New", monospace;
    font-size: 7px;
    line-height: 1.5;
}

.dlp-script-sheet em {
    margin-top: 18px;
    text-align: center;
    font-size: 7px;
    font-style: normal;
}

.dlp-script-sheet .dialogue {
    width: 72%;
    margin-inline: auto;
    text-align: center;
}

.dlp-cinema-frame {
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(211, 174, 124, .44);
    background: linear-gradient(#d6b67d 0 35%, #654a42 36% 60%, #121a28 61%);
}

.dlp-cinema-sky {
    position: absolute;
    inset: 0 0 36%;
    background:
        radial-gradient(circle at 65% 33%, rgba(255,255,255,.85), transparent 8%),
        radial-gradient(circle at 64% 34%, rgba(234, 184, 102, .78), transparent 25%);
}

.dlp-cinema-person {
    position: absolute;
    left: 50%;
    bottom: 17%;
    width: 12px;
    height: 40px;
    border-radius: 10px 10px 3px 3px;
    background: #111824;
    transform: translateX(-50%);
}

.dlp-cinema-person::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #111824;
    transform: translateX(-50%);
}

.dlp-cinema-frame > span {
    position: absolute;
    left: 50%;
    bottom: 8px;
    color: rgba(255, 255, 255, .72);
    font-size: 7px;
    letter-spacing: .16em;
    transform: translateX(-50%);
}

.dlp-visual-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.dlp-visual-badges span {
    padding: 10px 8px;
    border-radius: 999px;
    color: rgb(255 255 255);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 11px;
}

.dlp-story-intro {
    position: relative;
    overflow: hidden;
    background: var(--dlp-paper);
    padding-bottom: 0 !important;
}

.dlp-story-intro::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    left: -105px;
    top: 70px;
    border: 44px solid rgba(211, 174, 124, .26);
    border-radius: 50%;
}

.dlp-story-intro__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(50px, 8vw, 100px);
    align-items: start;
}

.dlp-story-intro h2,
.dlp-section-head h2,
.dlp-why h2 {
    margin-top: 14px;
    font-size: clamp(42px, 5.2vw, 70px);
}

.dlp-story-intro__copy p {
    margin: 0 0 18px;
    color: #5e6977;
    font-size: 16px;
    line-height: 1.78;
}

.dlp-format-strip {
    position: relative;
    z-index: 1;
    margin-top: 72px;
    background: var(--dlp-navy);
}

.dlp-format-strip__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.dlp-format-strip span {
    position: relative;
    padding: 23px 14px;
    color: rgba(255, 255, 255, .76);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.dlp-format-strip span + span {
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.dlp-screen-services {
    background: var(--dlp-cream);
}

.dlp-section-head {
    max-width: 820px;
    margin-bottom: 48px;
}

.dlp-section-head p {
    max-width: 700px;
    margin: 22px 0 0;
    color: #69717b;
    font-size: 16px;
    line-height: 1.75;
}

.dlp-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.dlp-service-card {
    position: relative;
    overflow: hidden;
    min-height: 290px;
    padding: 30px;
    border: 1px solid var(--dlp-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .5);
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}

.dlp-service-card:hover {
    transform: translateY(-6px);
    background: #fff;
    box-shadow: var(--dlp-shadow);
}

.dlp-service-no {
    position: absolute;
    right: 22px;
    top: 20px;
    color: rgba(7, 28, 56, .2);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.dlp-service-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 34px;
    border-radius: 14px;
    color: var(--dlp-navy);
    background: rgba(211, 174, 124, .35);
    font-weight: 800;
    font-size: 13px;
}

.dlp-service-card h3,
.dlp-process-step h3,
.dlp-why__cards h3 {
    margin: 0;
    color: var(--dlp-navy);
    line-height: 1.15;
}

.dlp-service-card h3 {
    font-size: 22px;
}

.dlp-service-card p {
    margin: 15px 0 0;
    color: #66707b;
    font-size: 14px;
    line-height: 1.7;
}

.dlp-center-actions {
    justify-content: center;
    margin-top: 34px;
}

.dlp-process {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 10%, rgba(75, 43, 85, .46), transparent 26%),
        linear-gradient(145deg, #071a35, #0a294a);
}

.dlp-process::before {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 300px;
    height: 300px;
    border: 50px solid rgba(211, 174, 124, .12);
    border-radius: 50%;
}

.dlp-section-head--light h2 {
    color: #fff;
}

.dlp-section-head--light p {
    color: rgba(255, 255, 255, .62);
}

.dlp-process-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.dlp-process-track::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 25px;
    height: 1px;
    background: rgba(211, 174, 124, .42);
}

.dlp-process-step {
    position: relative;
    z-index: 1;
    padding: 0 18px;
    text-align: center;
}

.dlp-process-step > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 24px;
    border: 1px solid rgba(211, 174, 124, .7);
    border-radius: 50%;
    color: var(--dlp-navy);
    background: var(--dlp-gold);
    box-shadow: 0 0 0 8px rgba(7, 28, 56, .95);
    font-size: 11px;
    font-weight: 800;
}

.dlp-process-step h3 {
    color: #fff;
    font-size: 18px;
}

.dlp-process-step p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .57);
    font-size: 13px;
    line-height: 1.65;
}

.dlp-why {
    position: relative;
    overflow: hidden;
    background: var(--dlp-paper);
}

.dlp-why::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -90px;
    width: 230px;
    height: 230px;
    border: 42px solid rgba(211, 174, 124, .25);
    border-radius: 50%;
}

.dlp-why__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(50px, 7vw, 90px);
    align-items: center;
}

.dlp-why__copy > p {
    margin: 24px 0 30px;
    color: #626d79;
    line-height: 1.78;
}

.dlp-why__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.dlp-why__cards article {
    min-height: 185px;
    padding: 26px;
    border: 1px solid var(--dlp-line);
    border-radius: 20px;
    background: #fff;
}

.dlp-why__cards article > span {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--dlp-gold-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.dlp-why__cards h3 {
    font-size: 20px;
}

.dlp-why__cards p {
    margin: 10px 0 0;
    color: #6d747d;
    font-size: 13px;
    line-height: 1.6;
}

.dlp-screen-cta {
    background: var(--dlp-cream);
}

.dlp-screen-cta__box {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px;
    align-items: center;
    padding: clamp(38px, 5vw, 70px);
    border-radius: var(--dlp-radius-lg);
    color: #fff;
    background:
        radial-gradient(circle at 92% 12%, rgba(92, 52, 98, .55), transparent 26%),
        linear-gradient(135deg, #071b37 0%, #0a2b4e 100%);
    box-shadow: var(--dlp-shadow);
}

.dlp-screen-cta__box::after {
    content: "";
    position: absolute;
    right: -74px;
    bottom: -104px;
    width: 230px;
    height: 230px;
    border: 42px solid rgba(211, 174, 124, .18);
    border-radius: 50%;
}

.dlp-screen-cta__box > * {
    position: relative;
    z-index: 1;
}

.dlp-screen-cta h2 {
    margin-top: 10px;
    color: #fff;
    font-size: clamp(42px, 5vw, 55px);
}

.dlp-screen-cta p {
    max-width: 710px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .67);
    line-height: 1.7;
}

.dlp-screen-cta__actions {
    min-width: 225px;
    flex-direction: column;
}

@media (max-width: 1100px) {
    .dlp-screen-hero .dlp-screen-shell {
        grid-template-columns: 1fr;
    }

    .dlp-screen-hero__copy {
        max-width: 800px;
    }

    .dlp-screen-hero__visual {
        max-width: 820px;
    }

    .dlp-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dlp-process-track {
        grid-template-columns: repeat(3, 1fr);
        gap: 34px 0;
    }

    .dlp-process-track::before {
        display: none;
    }

    .dlp-screen-cta__box {
        grid-template-columns: 1fr;
    }

    .dlp-screen-cta__actions {
        flex-direction: row;
    }
}

@media (max-width: 800px) {
    .dlp-screen-shell {
        width: min(100% - 30px, 1180px);
    }

    .dlp-screen-hero {
        padding-top: 95px;
    }

    .dlp-story-intro__grid,
    .dlp-why__grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .dlp-format-strip__inner {
        grid-template-columns: 1fr 1fr;
    }

    .dlp-format-strip span {
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .dlp-service-grid,
    .dlp-why__cards {
        grid-template-columns: 1fr;
    }

    .dlp-process-track {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .dlp-screen-hero h1 {
        font-size: clamp(45px, 14vw, 64px);
    }

    .dlp-visual-stage {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px;
    }

    .dlp-visual-card {
        max-width: 235px;
        width: 100%;
        margin-inline: auto;
    }

    .dlp-visual-arrow {
        transform: rotate(90deg);
    }

    .dlp-visual-badges {
        grid-template-columns: 1fr 1fr;
    }

    .dlp-process-track {
        grid-template-columns: 1fr;
    }

    .dlp-service-card {
        min-height: auto;
    }

    .dlp-screen-actions,
    .dlp-screen-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .dlp-screen-actions .wd-btn,
    .dlp-screen-cta__actions .wd-btn {
        justify-content: center;
        width: 100%;
    }
}