:root {
    --kdf-primary: #2563eb;
    --kdf-primary-dark: #1d4ed8;
    --kdf-secondary: #0f172a;
    --kdf-accent: #38bdf8;

    --kdf-background: #ffffff;
    --kdf-surface: #f8fafc;

    --kdf-text: #0f172a;
    --kdf-muted: #64748b;
    --kdf-border: #e2e8f0;

    --kdf-radius: 16px;
    --kdf-container: 1180px;

    --kdf-shadow:
        0 10px 35px rgba(15, 23, 42, .08);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--kdf-text);
    background: var(--kdf-background);

    line-height: 1.65;
}


a {
    color: var(--kdf-primary);
    text-decoration: none;
}


a:hover {
    color: var(--kdf-primary-dark);
}


.kdf-container {
    width: min(
        calc(100% - 40px),
        var(--kdf-container)
    );

    margin: 0 auto;
}


/* HEADER */

.kdf-header {
    position: sticky;
    top: 0;
    z-index: 100;

    background:
        rgba(255, 255, 255, .94);

    backdrop-filter: blur(14px);

    border-bottom:
        1px solid var(--kdf-border);
}


.kdf-header-inner {
    height: 76px;

    display: flex;
    align-items: center;
    gap: 36px;
}


.kdf-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-right: auto;

    color: var(--kdf-secondary);
    font-weight: 800;
    font-size: 1.1rem;
}


.kdf-brand-mark {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--kdf-primary),
            var(--kdf-accent)
        );

    border-radius: 12px;
}


.kdf-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}


.kdf-nav a {
    color: #334155;
    font-weight: 500;
}


.kdf-nav a:hover {
    color: var(--kdf-primary);
}


/* BUTTON */

.kdf-button,
.kdf-content a strong,
.kdf-content strong a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 22px;

    border-radius: 10px;

    color: white !important;

    background:
        linear-gradient(
            135deg,
            var(--kdf-primary),
            var(--kdf-primary-dark)
        );

    font-weight: 700;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.kdf-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(37, 99, 235, .25);
}


/* PAGE */

.kdf-main {
    min-height: 70vh;
}


.kdf-page {
    padding: 80px 0 100px;
}


.kdf-content {
    max-width: 1000px;
    margin: 0 auto;
}


/* HERO */

.kdf-content > h1:first-child {
    max-width: 880px;

    margin:
        20px auto 28px;

    text-align: center;

    font-size:
        clamp(2.5rem, 6vw, 4.8rem);

    line-height: 1.05;
    letter-spacing: -.045em;

    color: var(--kdf-secondary);
}


.kdf-content > h1:first-child + p {
    max-width: 760px;

    margin:
        0 auto 60px;

    text-align: center;

    font-size: 1.2rem;
    color: var(--kdf-muted);
}


/* HEADINGS */

.kdf-content h2 {
    margin-top: 72px;
    margin-bottom: 22px;

    font-size:
        clamp(1.8rem, 4vw, 2.6rem);

    letter-spacing: -.025em;
    line-height: 1.15;
}


.kdf-content h3 {
    margin-top: 35px;

    font-size: 1.35rem;
}


/* CONTENT */

.kdf-content p {
    font-size: 1.08rem;
    color: #475569;
}


.kdf-content ul {
    list-style: none;

    padding: 0;
    margin: 30px 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.kdf-content li {
    padding: 22px;

    background: var(--kdf-surface);

    border:
        1px solid var(--kdf-border);

    border-radius:
        var(--kdf-radius);

    box-shadow:
        0 4px 20px rgba(15, 23, 42, .035);
}


.kdf-content li::before {
    content: "✓";

    margin-right: 10px;

    color: var(--kdf-primary);
    font-weight: 800;
}


/* FOOTER */

.kdf-footer {
    padding: 60px 0;

    color: #94a3b8;

    background: #0f172a;
}


.kdf-footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}


.kdf-footer-brand {
    color: white;

    font-size: 1.2rem;
    font-weight: 800;
}


.kdf-footer p {
    max-width: 500px;
}


.kdf-footer-meta {
    text-align: right;
}


/* PREMIUM DARK */

.kdf-style-premium-dark {
    --kdf-background: #09090b;
    --kdf-surface: #18181b;

    --kdf-text: #fafafa;
    --kdf-muted: #a1a1aa;

    --kdf-secondary: #fafafa;

    --kdf-primary: #8b5cf6;
    --kdf-primary-dark: #7c3aed;
    --kdf-accent: #22d3ee;

    --kdf-border: #27272a;
}


.kdf-style-premium-dark .kdf-header {
    background:
        rgba(9, 9, 11, .92);
}


.kdf-style-premium-dark
.kdf-nav a {

    color: #d4d4d8;
}


.kdf-style-premium-dark
.kdf-content p {

    color: #a1a1aa;
}


/* CLEAN CORPORATE */

.kdf-style-clean-corporate {
    --kdf-primary: #0f766e;
    --kdf-primary-dark: #115e59;
    --kdf-accent: #14b8a6;
    --kdf-secondary: #1e293b;
}


/* MOBILE */

@media (max-width: 800px) {

    .kdf-header-inner {
        height: auto;

        padding-top: 18px;
        padding-bottom: 18px;

        flex-wrap: wrap;
    }


    .kdf-nav {
        order: 3;

        width: 100%;

        overflow-x: auto;

        gap: 20px;
    }


    .kdf-header-cta {
        display: none;
    }


    .kdf-page {
        padding-top: 50px;
    }


    .kdf-content ul {
        grid-template-columns: 1fr;
    }


    .kdf-footer-inner {
        flex-direction: column;
    }


    .kdf-footer-meta {
        text-align: left;
    }

}

/* ==========================================================
   FACTORY STRUCTURED SECTIONS
   ========================================================== */


.kdf-section {
    padding: 90px 0;
}


.kdf-section-inner {
    width: min(
        calc(100% - 40px),
        1180px
    );

    margin: 0 auto;
}


.kdf-eyebrow {
    margin-bottom: 15px;

    color: var(--kdf-primary);

    font-size: .82rem;
    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.kdf-section h2 {
    max-width: 760px;

    margin:
        0 0 22px;

    font-size:
        clamp(2rem, 4vw, 3.1rem);

    line-height: 1.1;

    letter-spacing: -.035em;
}


.kdf-section-lead {
    max-width: 720px;

    margin-bottom: 45px;

    color: var(--kdf-muted);

    font-size: 1.12rem;
}


/* HERO */

.kdf-hero {
    position: relative;

    overflow: hidden;

    padding:
        140px 0
        130px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(37, 99, 235, .14),
            transparent 55%
        );
}


.kdf-hero .kdf-section-inner {
    max-width: 950px;
}


.kdf-hero h1 {
    margin:
        0 auto
        28px;

    font-size:
        clamp(3rem, 7vw, 5.8rem);

    line-height: .98;

    letter-spacing: -.055em;

    color: var(--kdf-secondary);
}


.kdf-hero-text {
    max-width: 730px;

    margin:
        0 auto
        36px;

    color: var(--kdf-muted);

    font-size:
        clamp(
            1.08rem,
            2vw,
            1.28rem
        );
}


/* BUTTON */

.kdf-section-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-top: 20px;

    padding:
        14px
        26px;

    border-radius: 11px;

    color: white !important;

    background:
        linear-gradient(
            135deg,
            var(--kdf-primary),
            var(--kdf-primary-dark)
        );

    font-weight: 750;

    box-shadow:
        0 12px 30px
        rgba(37, 99, 235, .22);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.kdf-section-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(37, 99, 235, .3);
}


/* CARDS */

.kdf-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;

    margin-top: 40px;
}


.kdf-card {
    padding: 30px;

    background:
        var(--kdf-surface);

    border:
        1px solid
        var(--kdf-border);

    border-radius:
        var(--kdf-radius);

    box-shadow:
        var(--kdf-shadow);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.kdf-card:hover {
    transform:
        translateY(-5px);
}


.kdf-card-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    border-radius: 12px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--kdf-primary),
            var(--kdf-accent)
        );

    font-weight: 800;
}


.kdf-card h3 {
    margin:
        0 0 12px;

    font-size: 1.25rem;
}


.kdf-card p {
    margin: 0;

    color:
        var(--kdf-muted);
}


/* SERVICES */

.kdf-services {
    background:
        var(--kdf-surface);
}


/* BENEFITS */

.kdf-benefits {
    background:
        var(--kdf-background);
}


/* ABOUT */

.kdf-about {
    background:
        var(--kdf-secondary);

    color: white;
}


.kdf-about-grid {
    width: min(
        calc(100% - 40px),
        1100px
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 440px)
        minmax(0, 1fr);

    gap: 70px;

    align-items: center;
}


.kdf-about h2 {
    color: white;
}


.kdf-about-content {
    max-width: 560px;
}


.kdf-about-text {
    color: #cbd5e1;

    font-size: 1.15rem;
}


/* CTA */

.kdf-cta {
    padding:
        100px 20px;
}


.kdf-cta-inner {
    max-width: 1050px;

    margin: 0 auto;

    padding:
        75px 60px;

    text-align: center;

    color: white;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            var(--kdf-primary),
            var(--kdf-primary-dark)
        );

    box-shadow:
        0 25px 60px
        rgba(37, 99, 235, .25);
}


.kdf-cta h2 {
    margin:
        0 auto
        20px;

    color: white;
}


.kdf-cta p {
    max-width: 650px;

    margin:
        0 auto
        20px;

    color:
        rgba(
            255,
            255,
            255,
            .85
        );
}


.kdf-cta
.kdf-section-button {

    color:
        var(--kdf-primary)
        !important;

    background: white;
}


/* CONTACT */

.kdf-contact {
    background:
        var(--kdf-surface);
}


/* RESPONSIVE */

@media (
    max-width: 900px
) {

    .kdf-card-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .kdf-about-grid {
        grid-template-columns:
            1fr;

        gap: 40px;
    }

}


@media (
    max-width: 640px
) {

    .kdf-section {
        padding:
            65px 0;
    }

    .kdf-hero {
        padding:
            90px 0;
    }

    .kdf-card-grid {
        grid-template-columns:
            1fr;
    }

    .kdf-cta {
        padding:
            60px 20px;
    }

    .kdf-cta-inner {
        padding:
            50px 25px;
    }

}

/* ==========================================================
   GENERATED IMAGES
   ========================================================== */


.kdf-hero {
    text-align: left;
}


.kdf-hero-grid {
    width: min(
        calc(100% - 40px),
        1280px
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 70px;

    align-items: center;
}


.kdf-hero-copy {
    max-width: 650px;
}


.kdf-hero h1 {
    margin-left: 0;
    margin-right: 0;

    text-align: left;
}


.kdf-hero-text {
    margin-left: 0;
    margin-right: 0;

    text-align: left;
}


.kdf-hero-visual {
    position: relative;
}


.kdf-hero-visual::before {
    content: "";

    position: absolute;

    inset: 8% -5% -8% 8%;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            var(--kdf-primary),
            var(--kdf-accent)
        );

    opacity: .16;

    filter: blur(20px);
}


.kdf-hero-visual img {
    position: relative;

    display: block;

    width: 100%;
    height: 520px;

    object-fit: cover;

    border-radius: 26px;

    box-shadow:
        0 30px 70px
        rgba(15, 23, 42, .18);
}


/* ABOUT IMAGE */

.kdf-about-image {
    display: flex;
    align-items: center;
    justify-content: center;
}


.kdf-about-image img {
    display: block;

    width: 100%;
    max-width: 420px;
    height: 320px;

    object-fit: cover;
    object-position: center;

    border-radius: 20px;

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, .20);
}


@media (max-width: 900px) {

    .kdf-hero-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .kdf-hero-visual img {
        height: 420px;
    }


    .kdf-about-image img {
        width: 100%;
        max-width: 460px;
        height: 320px;
    }

}


@media (max-width: 640px) {

    .kdf-hero {
        text-align: center;
    }


    .kdf-hero h1,
    .kdf-hero-text {
        text-align: center;

        margin-left: auto;
        margin-right: auto;
    }


    .kdf-hero-visual img {
        height: 300px;

        border-radius: 18px;
    }


    .kdf-about-image img {
        width: 100%;
        max-width: 100%;
        height: 260px;

        border-radius: 16px;
    }

}
/* ==========================================================
   KIZUNADATA DESIGN ENGINE 2.0
   Phase 1: premium theme tokens + controlled section variants
   ========================================================== */

:root {
    --kdf-font-body:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --kdf-font-display:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --kdf-section-space: 104px;
    --kdf-card-radius: 22px;
    --kdf-button-radius: 999px;
    --kdf-header-bg: rgba(255, 255, 255, .90);
    --kdf-header-link: #334155;
    --kdf-footer-bg: #0f172a;
    --kdf-footer-text: #94a3b8;
    --kdf-hero-glow: rgba(37, 99, 235, .16);
}


body {
    font-family:
        var(--kdf-font-body);
}


.kdf-section h1,
.kdf-section h2,
.kdf-section h3,
.kdf-brand {
    font-family:
        var(--kdf-font-display);
}


.kdf-header {
    background:
        var(--kdf-header-bg);
}


.kdf-nav a {
    color:
        var(--kdf-header-link);
}


.kdf-footer {
    color:
        var(--kdf-footer-text);

    background:
        var(--kdf-footer-bg);
}


.kdf-section {
    padding:
        var(--kdf-section-space)
        0;
}


.kdf-card {
    border-radius:
        var(--kdf-card-radius);
}


.kdf-section-button,
.kdf-button {
    border-radius:
        var(--kdf-button-radius);
}


/* ----------------------------------------------------------
   Theme: LUMEN
   Legacy alias: modern-professional
   ---------------------------------------------------------- */

.kdf-style-lumen,
.kdf-style-modern-professional {
    --kdf-primary: #2563eb;
    --kdf-primary-dark: #1d4ed8;
    --kdf-secondary: #0f172a;
    --kdf-accent: #22d3ee;

    --kdf-background: #ffffff;
    --kdf-surface: #f6f8fc;

    --kdf-text: #0f172a;
    --kdf-muted: #64748b;
    --kdf-border: #e2e8f0;

    --kdf-font-body:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --kdf-font-display:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --kdf-card-radius: 24px;
    --kdf-button-radius: 999px;

    --kdf-header-bg:
        rgba(255, 255, 255, .90);

    --kdf-header-link:
        #334155;

    --kdf-footer-bg:
        #0b1220;

    --kdf-footer-text:
        #94a3b8;

    --kdf-hero-glow:
        rgba(37, 99, 235, .18);
}


/* ----------------------------------------------------------
   Theme: NOIR
   Legacy alias: premium-dark
   ---------------------------------------------------------- */

.kdf-style-noir,
.kdf-style-premium-dark {
    --kdf-primary: #a78bfa;
    --kdf-primary-dark: #7c3aed;
    --kdf-secondary: #fafafa;
    --kdf-accent: #22d3ee;

    --kdf-background: #09090b;
    --kdf-surface: #121215;

    --kdf-text: #fafafa;
    --kdf-muted: #a1a1aa;
    --kdf-border: #27272a;

    --kdf-card-radius: 26px;
    --kdf-button-radius: 999px;

    --kdf-header-bg:
        rgba(9, 9, 11, .84);

    --kdf-header-link:
        #d4d4d8;

    --kdf-footer-bg:
        #050506;

    --kdf-footer-text:
        #71717a;

    --kdf-hero-glow:
        rgba(139, 92, 246, .28);

    --kdf-shadow:
        0 20px 60px
        rgba(0, 0, 0, .38);
}


.kdf-style-noir .kdf-header,
.kdf-style-premium-dark .kdf-header {
    border-color:
        rgba(255, 255, 255, .08);
}


.kdf-style-noir .kdf-card,
.kdf-style-premium-dark .kdf-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .018)
        );
}


/* ----------------------------------------------------------
   Theme: SUMMIT
   Legacy alias: clean-corporate
   ---------------------------------------------------------- */

.kdf-style-summit,
.kdf-style-clean-corporate {
    --kdf-primary: #d97706;
    --kdf-primary-dark: #b45309;
    --kdf-secondary: #0f172a;
    --kdf-accent: #fbbf24;

    --kdf-background: #ffffff;
    --kdf-surface: #f5f6f7;

    --kdf-text: #111827;
    --kdf-muted: #596579;
    --kdf-border: #dce1e7;

    --kdf-font-display:
        "Arial Narrow",
        "Roboto Condensed",
        Inter,
        sans-serif;

    --kdf-card-radius: 12px;
    --kdf-button-radius: 8px;

    --kdf-header-bg:
        rgba(255, 255, 255, .95);

    --kdf-header-link:
        #1f2937;

    --kdf-footer-bg:
        #0f172a;

    --kdf-footer-text:
        #94a3b8;

    --kdf-hero-glow:
        rgba(217, 119, 6, .18);
}


.kdf-style-summit .kdf-section h1,
.kdf-style-summit .kdf-section h2,
.kdf-style-clean-corporate .kdf-section h1,
.kdf-style-clean-corporate .kdf-section h2 {
    text-transform:
        none;

    letter-spacing:
        -.045em;
}


/* ----------------------------------------------------------
   Theme: ATELIER
   ---------------------------------------------------------- */

.kdf-style-atelier {
    --kdf-primary: #b45309;
    --kdf-primary-dark: #92400e;
    --kdf-secondary: #292524;
    --kdf-accent: #e7a35e;

    --kdf-background: #fbfaf7;
    --kdf-surface: #f2efe9;

    --kdf-text: #292524;
    --kdf-muted: #78716c;
    --kdf-border: #ded8cf;

    --kdf-font-display:
        Georgia,
        "Times New Roman",
        serif;

    --kdf-card-radius: 4px;
    --kdf-button-radius: 2px;

    --kdf-header-bg:
        rgba(251, 250, 247, .92);

    --kdf-header-link:
        #44403c;

    --kdf-footer-bg:
        #292524;

    --kdf-footer-text:
        #d6d3d1;

    --kdf-hero-glow:
        rgba(180, 83, 9, .12);
}


.kdf-style-atelier .kdf-eyebrow {
    letter-spacing:
        .20em;
}


.kdf-style-atelier .kdf-section h1,
.kdf-style-atelier .kdf-section h2 {
    font-weight: 500;
}


/* ----------------------------------------------------------
   Theme: AURA
   ---------------------------------------------------------- */

.kdf-style-aura {
    --kdf-primary: #c026d3;
    --kdf-primary-dark: #a21caf;
    --kdf-secondary: #312e46;
    --kdf-accent: #fb7185;

    --kdf-background: #fffafd;
    --kdf-surface: #faf2f8;

    --kdf-text: #312e46;
    --kdf-muted: #756d86;
    --kdf-border: #eee0eb;

    --kdf-card-radius: 32px;
    --kdf-button-radius: 999px;

    --kdf-header-bg:
        rgba(255, 250, 253, .92);

    --kdf-header-link:
        #514b64;

    --kdf-footer-bg:
        #29263b;

    --kdf-footer-text:
        #c7c1d3;

    --kdf-hero-glow:
        rgba(192, 38, 211, .13);
}


/* ----------------------------------------------------------
   Theme: LOCAL
   ---------------------------------------------------------- */

.kdf-style-local {
    --kdf-primary: #059669;
    --kdf-primary-dark: #047857;
    --kdf-secondary: #0f2f2a;
    --kdf-accent: #38bdf8;

    --kdf-background: #ffffff;
    --kdf-surface: #f1f8f6;

    --kdf-text: #16332e;
    --kdf-muted: #607a74;
    --kdf-border: #d9e9e5;

    --kdf-card-radius: 20px;
    --kdf-button-radius: 12px;

    --kdf-header-bg:
        rgba(255, 255, 255, .94);

    --kdf-header-link:
        #294e47;

    --kdf-footer-bg:
        #0f2f2a;

    --kdf-footer-text:
        #a8c7c0;

    --kdf-hero-glow:
        rgba(5, 150, 105, .16);
}


/* ==========================================================
   HERO VARIANTS
   ========================================================== */

.kdf-hero {
    isolation: isolate;

    background:
        radial-gradient(
            circle at 20% 0%,
            var(--kdf-hero-glow),
            transparent 52%
        );
}


.kdf-hero .kdf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


.kdf-hero .kdf-eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    background:
        currentColor;

    opacity: .55;
}


.kdf-button-arrow {
    margin-left: 8px;

    transition:
        transform .2s ease;
}


.kdf-section-button:hover
.kdf-button-arrow {
    transform:
        translateX(4px);
}


/* Split */

.kdf-hero--split
.kdf-hero-grid {
    min-height:
        560px;
}


.kdf-hero--split
.kdf-hero-copy {
    position: relative;
    z-index: 2;
}


.kdf-hero--no-image
.kdf-hero-grid {
    grid-template-columns:
        minmax(0, 820px);

    justify-content:
        center;

    text-align: center;
}


.kdf-hero--no-image
.kdf-hero-copy {
    max-width: 820px;

    margin: 0 auto;
}


.kdf-hero--no-image
.kdf-hero-copy h1,
.kdf-hero--no-image
.kdf-hero-text {
    text-align: center;

    margin-left: auto;
    margin-right: auto;
}


/* Centered */

.kdf-hero--centered {
    padding:
        125px 0
        110px;

    text-align: center;
}


.kdf-hero-centered-inner {
    width: min(
        calc(100% - 40px),
        1080px
    );

    margin: 0 auto;
}


.kdf-hero--centered
.kdf-hero-copy {
    max-width: 850px;

    margin: 0 auto;
}


.kdf-hero--centered h1,
.kdf-hero--centered
.kdf-hero-text {
    text-align: center;

    margin-left: auto;
    margin-right: auto;
}


.kdf-hero--centered
.kdf-hero-visual {
    max-width: 980px;

    margin:
        65px auto
        0;
}


.kdf-hero--centered
.kdf-hero-visual img {
    height: 500px;
}


/* Full-width and cinematic */

.kdf-hero--full-width,
.kdf-hero--cinematic {
    position: relative;

    display: flex;
    align-items: flex-end;

    min-height:
        min(780px, 82vh);

    padding:
        150px 0
        100px;

    background:
        var(--kdf-secondary);

    color: white;
}


.kdf-hero-backdrop {
    position: absolute;
    z-index: -3;

    inset: 0;
}


.kdf-hero-backdrop img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.kdf-hero-shade {
    position: absolute;
    z-index: -2;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 9, 18, .90)
                0%,
            rgba(4, 9, 18, .63)
                48%,
            rgba(4, 9, 18, .28)
                100%
        );
}


.kdf-hero--cinematic
.kdf-hero-shade {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .16)
                0%,
            rgba(0, 0, 0, .30)
                42%,
            rgba(0, 0, 0, .88)
                100%
        );
}


.kdf-hero-stage {
    width: min(
        calc(100% - 40px),
        1280px
    );

    margin: 0 auto;
}


.kdf-hero--full-width
.kdf-hero-copy {
    max-width: 760px;
}


.kdf-hero--cinematic
.kdf-hero-copy {
    max-width: 900px;

    margin-top:
        180px;
}


.kdf-hero--full-width h1,
.kdf-hero--cinematic h1 {
    margin:
        0 0
        28px;

    color: white;

    text-align: left;

    font-size:
        clamp(
            3.4rem,
            7vw,
            6.6rem
        );

    line-height:
        .94;
}


.kdf-hero--cinematic h1 {
    max-width:
        1000px;

    font-size:
        clamp(
            3.6rem,
            8vw,
            7.2rem
        );
}


.kdf-hero--full-width
.kdf-hero-text,
.kdf-hero--cinematic
.kdf-hero-text {
    margin-left: 0;
    margin-right: 0;

    text-align: left;

    color:
        rgba(
            255,
            255,
            255,
            .78
        );
}


.kdf-hero--full-width
.kdf-eyebrow,
.kdf-hero--cinematic
.kdf-eyebrow {
    color:
        rgba(
            255,
            255,
            255,
            .72
        );
}


/* no image fallback */

.kdf-hero--full-width.kdf-hero--no-image,
.kdf-hero--cinematic.kdf-hero--no-image {
    background:
        linear-gradient(
            135deg,
            var(--kdf-secondary),
            color-mix(
                in srgb,
                var(--kdf-primary)
                35%,
                var(--kdf-secondary)
            )
        );
}


/* ==========================================================
   SERVICES VARIANTS
   ========================================================== */

.kdf-services--cards {
    background:
        var(--kdf-surface);
}


.kdf-services--tiles {
    background:
        var(--kdf-background);
}


.kdf-services--tiles
.kdf-card-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;
}


.kdf-services--tiles
.kdf-card {
    position: relative;

    min-height: 230px;

    padding:
        36px;

    overflow: hidden;

    background:
        var(--kdf-secondary);

    color: white;

    border-color:
        transparent;
}


.kdf-services--tiles
.kdf-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    bottom: -90px;

    border-radius: 999px;

    background:
        var(--kdf-primary);

    opacity: .12;
}


.kdf-services--tiles
.kdf-card h3 {
    position: relative;
    z-index: 1;

    max-width: 420px;

    color: white;

    font-size:
        clamp(
            1.4rem,
            2.4vw,
            2rem
        );
}


.kdf-services--tiles
.kdf-card p {
    position: relative;
    z-index: 1;

    max-width: 520px;

    color:
        rgba(
            255,
            255,
            255,
            .68
        );
}


.kdf-services--tiles
.kdf-card-icon {
    background:
        transparent;

    width: auto;
    height: auto;

    justify-content:
        flex-start;

    color:
        rgba(
            255,
            255,
            255,
            .42
        );

    font-family:
        var(--kdf-font-display);

    font-size: .78rem;

    letter-spacing: .16em;
}


.kdf-services--tiles
.kdf-card-check {
    display: none;
}


.kdf-services--tiles
.kdf-card-number {
    display: inline;
}


/* normal cards hide numeric label */

.kdf-card-number {
    display: none;
}


/* Minimal services list */

.kdf-services--minimal-list {
    background:
        var(--kdf-background);
}


.kdf-minimal-list {
    margin-top: 45px;

    border-top:
        1px solid
        var(--kdf-border);
}


.kdf-minimal-row {
    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr);

    gap: 24px;

    padding:
        30px 0;

    border-bottom:
        1px solid
        var(--kdf-border);
}


.kdf-minimal-index {
    padding-top: 4px;

    color:
        var(--kdf-primary);

    font-size: .78rem;
    font-weight: 800;

    letter-spacing: .16em;
}


.kdf-minimal-row h3 {
    margin: 0;

    font-size:
        clamp(
            1.3rem,
            2.4vw,
            1.75rem
        );
}


.kdf-minimal-row p {
    max-width: 680px;

    margin:
        8px 0
        0;

    color:
        var(--kdf-muted);
}


/* ==========================================================
   BENEFITS VARIANTS
   ========================================================== */

.kdf-benefits--editorial {
    background:
        var(--kdf-background);
}


.kdf-editorial-list {
    max-width: 900px;

    margin-top: 46px;
}


.kdf-editorial-item {
    display: grid;

    grid-template-columns:
        16px
        minmax(0, 1fr);

    gap: 22px;

    padding:
        24px 0;

    border-bottom:
        1px solid
        var(--kdf-border);
}


.kdf-editorial-mark {
    width: 8px;
    height: 8px;

    margin-top: 9px;

    border-radius: 999px;

    background:
        var(--kdf-primary);

    box-shadow:
        0 0 0 7px
        color-mix(
            in srgb,
            var(--kdf-primary)
            10%,
            transparent
        );
}


.kdf-editorial-item h3 {
    margin: 0;

    font-size: 1.25rem;
}


.kdf-editorial-item p {
    margin:
        7px 0
        0;

    color:
        var(--kdf-muted);
}


/* ==========================================================
   ABOUT VARIANTS
   ========================================================== */

.kdf-about--image-right
.kdf-about-image {
    order: 2;
}


.kdf-about--image-right
.kdf-about-content {
    order: 1;
}


.kdf-about--centered-story {
    background:
        var(--kdf-secondary);

    color: white;
}


.kdf-about-story {
    width: min(
        calc(100% - 40px),
        980px
    );

    margin: 0 auto;

    text-align: center;
}


.kdf-about-story
.kdf-about-content {
    max-width: 780px;

    margin: 0 auto;
}


.kdf-about-story
.kdf-about-content h2 {
    margin-left: auto;
    margin-right: auto;
}


.kdf-about-story
.kdf-about-text {
    max-width: 700px;

    margin-left: auto;
    margin-right: auto;
}


.kdf-about-story
.kdf-about-image {
    max-width: 850px;

    margin:
        55px auto
        0;
}


.kdf-about-story
.kdf-about-image img {
    max-width: none;
    height: 460px;

    border-radius:
        var(--kdf-card-radius);
}


/* ==========================================================
   CTA VARIANTS
   ========================================================== */

.kdf-cta--centered
.kdf-cta-inner {
    text-align: center;
}


.kdf-cta--centered
.kdf-cta-action {
    display: flex;
    justify-content: center;
}


.kdf-cta--banner
.kdf-cta-inner {
    max-width: 1180px;

    padding:
        60px 70px;

    text-align: left;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


.kdf-cta--banner
.kdf-cta-copy {
    max-width: 720px;
}


.kdf-cta--banner
.kdf-cta h2 {
    margin-left: 0;
}


.kdf-cta--banner
.kdf-cta p {
    margin-left: 0;
}


.kdf-cta--banner
.kdf-section-button {
    margin-top: 0;

    white-space: nowrap;
}


.kdf-cta--split
.kdf-cta-inner {
    max-width: 1180px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 60px;

    padding:
        70px;

    text-align: left;

    background:
        var(--kdf-secondary);
}


.kdf-cta--split
.kdf-cta h2,
.kdf-cta--split
.kdf-cta p {
    margin-left: 0;
}


.kdf-cta--split
.kdf-section-button {
    margin-top: 0;

    background:
        var(--kdf-primary);

    color: white !important;
}


/* ==========================================================
   CONTACT VARIANTS
   ========================================================== */

.kdf-contact--clean {
    background:
        var(--kdf-background);
}


.kdf-contact--clean
.kdf-editorial-list {
    margin-bottom: 28px;
}


.kdf-contact--cards {
    background:
        var(--kdf-surface);
}


/* ==========================================================
   Theme-specific art direction
   ========================================================== */

.kdf-style-noir
.kdf-hero--split,
.kdf-style-premium-dark
.kdf-hero--split {
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(139, 92, 246, .20),
            transparent 40%
        ),
        #09090b;
}


.kdf-style-noir
.kdf-hero-visual img,
.kdf-style-premium-dark
.kdf-hero-visual img {
    box-shadow:
        0 40px 100px
        rgba(0, 0, 0, .52);
}


.kdf-style-atelier
.kdf-card {
    box-shadow: none;
}


.kdf-style-atelier
.kdf-hero {
    background:
        linear-gradient(
            180deg,
            #fbfaf7,
            #f4efe7
        );
}


.kdf-style-aura
.kdf-card {
    box-shadow:
        0 18px 55px
        rgba(91, 52, 90, .08);
}


.kdf-style-local
.kdf-card-icon {
    border-radius: 10px;
}


/* ==========================================================
   Responsive Design Engine 2.0
   ========================================================== */

@media (max-width: 900px) {

    .kdf-hero--full-width,
    .kdf-hero--cinematic {
        min-height: 680px;

        padding:
            130px 0
            75px;
    }


    .kdf-services--tiles
    .kdf-card-grid {
        grid-template-columns:
            1fr;
    }


    .kdf-cta--banner
    .kdf-cta-inner {
        display: block;

        padding:
            55px 40px;

        text-align: center;
    }


    .kdf-cta--banner
    .kdf-cta-copy {
        margin: 0 auto;
    }


    .kdf-cta--banner
    .kdf-cta h2,
    .kdf-cta--banner
    .kdf-cta p {
        margin-left: auto;
        margin-right: auto;
    }


    .kdf-cta--banner
    .kdf-section-button {
        margin-top: 24px;
    }


    .kdf-cta--split
    .kdf-cta-inner {
        grid-template-columns:
            1fr;

        gap: 26px;

        text-align: center;
    }


    .kdf-cta--split
    .kdf-cta h2,
    .kdf-cta--split
    .kdf-cta p {
        margin-left: auto;
        margin-right: auto;
    }
}


@media (max-width: 640px) {

    :root {
        --kdf-section-space:
            70px;
    }


    .kdf-hero--full-width,
    .kdf-hero--cinematic {
        min-height: 610px;

        padding:
            110px 0
            65px;
    }


    .kdf-hero--full-width h1,
    .kdf-hero--cinematic h1 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4.4rem
            );
    }


    .kdf-hero--centered
    .kdf-hero-visual img {
        height: 300px;
    }


    .kdf-minimal-row {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        gap: 12px;
    }


    .kdf-about-story
    .kdf-about-image img {
        height: 300px;
    }


    .kdf-cta--banner
    .kdf-cta-inner,
    .kdf-cta--split
    .kdf-cta-inner {
        padding:
            45px 24px;
    }
}

/* ==========================================================
   DESIGN ENGINE 2.0 - PHASE 1.1 QUALITY PATCH
   Fix editorial benefit rows collapsing into a min-content column.
   ========================================================== */

.kdf-benefits--editorial
.kdf-editorial-list {
    width: 100%;
    max-width: 900px;
}

.kdf-benefits--editorial
.kdf-editorial-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 22px;
}

.kdf-benefits--editorial
.kdf-editorial-item
> div {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.kdf-benefits--editorial
.kdf-editorial-item h3,
.kdf-benefits--editorial
.kdf-editorial-item p {
    width: 100%;
    max-width: 760px;
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 640px) {
    .kdf-benefits--editorial
    .kdf-editorial-item {
        gap: 16px;
    }
}
/* ==========================================================
   DESIGN ENGINE 2.0 - PHASE 1.2 VISUAL CONTRAST PATCH

   Fixes:
   1. Noir service tiles using a light background with white text.
   2. Noir About sections using a light background with white text.
   3. Noir split CTA using a light background with white text.
   4. Editorial/contact rows collapsing into very narrow vertical text.
   ========================================================== */


/* ----------------------------------------------------------
   Editorial rows: use the full available width everywhere
   ---------------------------------------------------------- */

.kdf-editorial-list {
    width: 100%;
    max-width: 900px;
}

.kdf-editorial-item {
    display: flex;
    align-items: flex-start;

    width: 100%;
    min-width: 0;

    gap: 22px;
}

.kdf-editorial-item
> div {
    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
}

.kdf-editorial-item h3,
.kdf-editorial-item p {
    width: 100%;
    max-width: 760px;

    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.kdf-editorial-mark {
    flex: 0 0 auto;
}


/* Contact pages should not collapse their information rows. */

.kdf-contact--clean
.kdf-editorial-list {
    width: 100%;
    max-width: 900px;
}

.kdf-contact--clean
.kdf-editorial-item {
    width: 100%;
    max-width: 900px;
}

.kdf-contact--clean
.kdf-editorial-item
> div {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}


/* ----------------------------------------------------------
   NOIR: true dark contrast surfaces
   ---------------------------------------------------------- */

.kdf-style-noir
.kdf-services--tiles
.kdf-card,
.kdf-style-premium-dark
.kdf-services--tiles
.kdf-card {
    background:
        linear-gradient(
            145deg,
            #1a1a1f,
            #111114
        );

    color: #fafafa;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, .28);
}

.kdf-style-noir
.kdf-services--tiles
.kdf-card h3,
.kdf-style-premium-dark
.kdf-services--tiles
.kdf-card h3 {
    color: #fafafa;
}

.kdf-style-noir
.kdf-services--tiles
.kdf-card p,
.kdf-style-premium-dark
.kdf-services--tiles
.kdf-card p {
    color:
        rgba(
            250,
            250,
            250,
            .66
        );
}


/* About sections in Noir must remain dark instead of inheriting
   --kdf-secondary (#fafafa) as their background. */

.kdf-style-noir
.kdf-about,
.kdf-style-premium-dark
.kdf-about {
    background:
        linear-gradient(
            180deg,
            #111114,
            #0c0c0f
        );

    color: #fafafa;
}

.kdf-style-noir
.kdf-about h2,
.kdf-style-premium-dark
.kdf-about h2 {
    color: #fafafa;
}

.kdf-style-noir
.kdf-about-text,
.kdf-style-premium-dark
.kdf-about-text {
    color: #b7b7c2;
}

.kdf-style-noir
.kdf-about--centered-story,
.kdf-style-premium-dark
.kdf-about--centered-story {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(139, 92, 246, .14),
            transparent 46%
        ),
        #111114;

    color: #fafafa;
}

.kdf-style-noir
.kdf-about--centered-story
.kdf-about-content h2,
.kdf-style-premium-dark
.kdf-about--centered-story
.kdf-about-content h2 {
    color: #fafafa;
}

.kdf-style-noir
.kdf-about--centered-story
.kdf-about-text,
.kdf-style-premium-dark
.kdf-about--centered-story
.kdf-about-text {
    color: #b7b7c2;
}


/* Split CTAs in Noir also used --kdf-secondary as a background,
   which is intentionally a light heading color in this theme. */

.kdf-style-noir
.kdf-cta--split
.kdf-cta-inner,
.kdf-style-premium-dark
.kdf-cta--split
.kdf-cta-inner {
    background:
        linear-gradient(
            135deg,
            #17171c,
            #111114
        );

    color: #fafafa;

    border:
        1px solid
        rgba(255, 255, 255, .08);
}

.kdf-style-noir
.kdf-cta--split
.kdf-cta h2,
.kdf-style-premium-dark
.kdf-cta--split
.kdf-cta h2 {
    color: #fafafa;
}

.kdf-style-noir
.kdf-cta--split
.kdf-cta p,
.kdf-style-premium-dark
.kdf-cta--split
.kdf-cta p {
    color: #b7b7c2;
}


/* Prevent any remaining Noir section card copy from inheriting
   an unreadable light-on-light combination. */

.kdf-style-noir
.kdf-card h3,
.kdf-style-premium-dark
.kdf-card h3 {
    color: #fafafa;
}

.kdf-style-noir
.kdf-card p,
.kdf-style-premium-dark
.kdf-card p {
    color: #a9a9b4;
}


/* On light cards that may intentionally appear inside Noir,
   use explicit dark text. */

.kdf-style-noir
.kdf-card.kdf-card--light,
.kdf-style-premium-dark
.kdf-card.kdf-card--light {
    color: #18181b;
}

.kdf-style-noir
.kdf-card.kdf-card--light h3,
.kdf-style-premium-dark
.kdf-card.kdf-card--light h3 {
    color: #18181b;
}

.kdf-style-noir
.kdf-card.kdf-card--light p,
.kdf-style-premium-dark
.kdf-card.kdf-card--light p {
    color: #52525b;
}


@media (max-width: 640px) {

    .kdf-editorial-item {
        gap: 16px;
    }

    .kdf-contact--clean
    .kdf-editorial-item {
        gap: 14px;
    }
}
/* ==========================================================
   DESIGN ENGINE 2.0 - PHASE 2 PREMIUM CONTENT BLOCKS
   Process · FAQ · Stats · Testimonials · Gallery
   ========================================================== */


/* ----------------------------------------------------------
   PROCESS
   ---------------------------------------------------------- */

.kdf-process {
    background:
        var(--kdf-background);
}

.kdf-process-list {
    margin-top: 48px;
}

.kdf-process--steps
.kdf-process-list {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 18px;
}

.kdf-process-step {
    position: relative;

    min-width: 0;

    padding: 30px;

    border:
        1px solid
        var(--kdf-border);

    border-radius:
        var(--kdf-card-radius);

    background:
        var(--kdf-surface);
}

.kdf-process-number {
    display: inline-flex;

    margin-bottom: 28px;

    color:
        var(--kdf-primary);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .18em;
}

.kdf-process-copy h3 {
    margin: 0;

    color:
        var(--kdf-text);

    font-size:
        clamp(
            1.2rem,
            2vw,
            1.6rem
        );
}

.kdf-process-copy p {
    margin:
        10px 0
        0;

    color:
        var(--kdf-muted);

    line-height: 1.7;
}


/* Timeline */

.kdf-process--timeline
.kdf-process-list {
    position: relative;

    max-width: 900px;
}

.kdf-process--timeline
.kdf-process-list::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 28px;

    width: 1px;

    background:
        var(--kdf-border);
}

.kdf-process--timeline
.kdf-process-step {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 22px;

    padding:
        0 0
        38px;

    border: 0;

    background:
        transparent;
}

.kdf-process--timeline
.kdf-process-number {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin: 0;

    border:
        1px solid
        var(--kdf-border);

    border-radius: 999px;

    background:
        var(--kdf-background);
}


/* ----------------------------------------------------------
   FAQ
   ---------------------------------------------------------- */

.kdf-faq {
    background:
        var(--kdf-surface);
}

.kdf-faq-list {
    margin-top: 42px;
}

.kdf-faq--accordion
.kdf-faq-list {
    max-width: 920px;
}

.kdf-faq-item {
    border-bottom:
        1px solid
        var(--kdf-border);
}

.kdf-faq-item:first-child {
    border-top:
        1px solid
        var(--kdf-border);
}

.kdf-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding:
        24px 0;

    color:
        var(--kdf-text);

    cursor: pointer;

    list-style: none;

    font-family:
        var(--kdf-font-display);

    font-size:
        clamp(
            1.05rem,
            1.8vw,
            1.35rem
        );

    font-weight: 700;
}

.kdf-faq-item summary::-webkit-details-marker {
    display: none;
}

.kdf-faq-plus {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    border:
        1px solid
        var(--kdf-border);

    border-radius: 999px;

    color:
        var(--kdf-primary);

    transition:
        transform .2s ease;
}

.kdf-faq-item[open]
.kdf-faq-plus {
    transform:
        rotate(45deg);
}

.kdf-faq-item p {
    max-width: 760px;

    margin:
        -4px 0
        24px;

    color:
        var(--kdf-muted);

    line-height: 1.75;
}


/* FAQ two-column */

.kdf-faq--two-column
.kdf-faq-list {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;
}

.kdf-faq-card {
    padding: 28px;

    border:
        1px solid
        var(--kdf-border);

    border-radius:
        var(--kdf-card-radius);

    background:
        var(--kdf-background);
}

.kdf-faq-card h3 {
    margin: 0;

    color:
        var(--kdf-text);

    font-size: 1.15rem;
}

.kdf-faq-card p {
    margin:
        10px 0
        0;

    color:
        var(--kdf-muted);

    line-height: 1.7;
}


/* ----------------------------------------------------------
   STATS
   ---------------------------------------------------------- */

.kdf-stats {
    background:
        var(--kdf-background);
}

.kdf-stats-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 16px;

    margin-top: 40px;
}

.kdf-stat {
    min-width: 0;

    padding: 30px;

    border:
        1px solid
        var(--kdf-border);

    border-radius:
        var(--kdf-card-radius);

    background:
        var(--kdf-surface);
}

.kdf-stat-value {
    color:
        var(--kdf-primary);

    font-family:
        var(--kdf-font-display);

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.7rem
        );

    font-weight: 800;

    line-height: .95;

    letter-spacing: -.055em;
}

.kdf-stat-label {
    margin-top: 14px;

    color:
        var(--kdf-text);

    font-weight: 700;
}

.kdf-stat p {
    margin:
        8px 0
        0;

    color:
        var(--kdf-muted);
}


/* Stats band */

.kdf-stats--band
.kdf-section-inner {
    padding:
        54px;

    border-radius:
        var(--kdf-card-radius);

    background:
        #111827;

    color: white;
}

.kdf-stats--band
.kdf-section-inner h2 {
    color: white;
}

.kdf-stats--band
.kdf-section-lead {
    color:
        rgba(
            255,
            255,
            255,
            .66
        );
}

.kdf-stats--band
.kdf-stats-grid {
    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    padding-top: 34px;
}

.kdf-stats--band
.kdf-stat {
    padding:
        0 24px;

    border: 0;
    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius: 0;

    background:
        transparent;
}

.kdf-stats--band
.kdf-stat:last-child {
    border-right: 0;
}

.kdf-stats--band
.kdf-stat-label {
    color: white;
}

.kdf-stats--band
.kdf-stat p {
    color:
        rgba(
            255,
            255,
            255,
            .58
        );
}


/* ----------------------------------------------------------
   TESTIMONIALS
   ---------------------------------------------------------- */

.kdf-testimonials {
    background:
        var(--kdf-surface);
}

.kdf-testimonials-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 18px;

    margin-top: 42px;
}

.kdf-testimonial {
    min-width: 0;

    margin: 0;

    padding: 32px;

    border:
        1px solid
        var(--kdf-border);

    border-radius:
        var(--kdf-card-radius);

    background:
        var(--kdf-background);
}

.kdf-testimonial-mark {
    color:
        var(--kdf-primary);

    font-family: Georgia, serif;
    font-size: 4rem;

    line-height: .7;
}

.kdf-testimonial p {
    margin:
        24px 0
        0;

    color:
        var(--kdf-text);

    font-size:
        1.05rem;

    line-height: 1.75;
}

.kdf-testimonial footer {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-top: 28px;

    color:
        var(--kdf-text);
}

.kdf-testimonial footer span {
    color:
        var(--kdf-muted);

    font-size: .82rem;
}


/* Spotlight */

.kdf-testimonials--spotlight
.kdf-testimonials-grid {
    grid-template-columns:
        1fr;
}

.kdf-testimonials--spotlight
.kdf-testimonial {
    max-width: 900px;

    padding:
        clamp(
            34px,
            6vw,
            70px
        );
}

.kdf-testimonials--spotlight
.kdf-testimonial p {
    max-width: 780px;

    font-family:
        var(--kdf-font-display);

    font-size:
        clamp(
            1.55rem,
            3vw,
            2.6rem
        );

    line-height: 1.25;

    letter-spacing: -.025em;
}


/* ----------------------------------------------------------
   GALLERY
   ---------------------------------------------------------- */

.kdf-gallery {
    background:
        var(--kdf-background);
}

.kdf-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;

    margin-top: 42px;
}

.kdf-gallery-item {
    min-width: 0;

    margin: 0;

    overflow: hidden;

    border-radius:
        var(--kdf-card-radius);

    background:
        var(--kdf-surface);
}

.kdf-gallery-item img {
    display: block;

    width: 100%;
    height: 340px;

    object-fit: cover;
}

.kdf-gallery-item figcaption {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 18px 20px;

    color:
        var(--kdf-text);
}

.kdf-gallery-item figcaption span {
    color:
        var(--kdf-muted);

    font-size: .82rem;
}


/* Mosaic */

.kdf-gallery--mosaic
.kdf-gallery-grid {
    grid-template-columns:
        repeat(
            12,
            minmax(0, 1fr)
        );
}

.kdf-gallery--mosaic
.kdf-gallery-item {
    grid-column:
        span 4;
}

.kdf-gallery--mosaic
.kdf-gallery-item:first-child {
    grid-column:
        span 7;
}

.kdf-gallery--mosaic
.kdf-gallery-item:nth-child(2) {
    grid-column:
        span 5;
}

.kdf-gallery--mosaic
.kdf-gallery-item:first-child img,
.kdf-gallery--mosaic
.kdf-gallery-item:nth-child(2) img {
    height: 430px;
}


/* ----------------------------------------------------------
   NOIR refinements for new components
   ---------------------------------------------------------- */

.kdf-style-noir
.kdf-process-step,
.kdf-style-noir
.kdf-faq-card,
.kdf-style-noir
.kdf-testimonial,
.kdf-style-premium-dark
.kdf-process-step,
.kdf-style-premium-dark
.kdf-faq-card,
.kdf-style-premium-dark
.kdf-testimonial {
    background:
        linear-gradient(
            145deg,
            #18181d,
            #111114
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .08
        );
}

.kdf-style-noir
.kdf-process-copy h3,
.kdf-style-noir
.kdf-faq-card h3,
.kdf-style-noir
.kdf-testimonial p,
.kdf-style-noir
.kdf-testimonial footer,
.kdf-style-premium-dark
.kdf-process-copy h3,
.kdf-style-premium-dark
.kdf-faq-card h3,
.kdf-style-premium-dark
.kdf-testimonial p,
.kdf-style-premium-dark
.kdf-testimonial footer {
    color: #fafafa;
}

.kdf-style-noir
.kdf-faq-item summary,
.kdf-style-premium-dark
.kdf-faq-item summary {
    color: #fafafa;
}

.kdf-style-noir
.kdf-stats--band
.kdf-section-inner,
.kdf-style-premium-dark
.kdf-stats--band
.kdf-section-inner {
    background:
        linear-gradient(
            135deg,
            #18181d,
            #0e0e11
        );
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .kdf-process--steps
    .kdf-process-list,
    .kdf-testimonials-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .kdf-faq--two-column
    .kdf-faq-list {
        grid-template-columns:
            1fr;
    }

    .kdf-stats-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .kdf-gallery-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .kdf-gallery--mosaic
    .kdf-gallery-item,
    .kdf-gallery--mosaic
    .kdf-gallery-item:first-child,
    .kdf-gallery--mosaic
    .kdf-gallery-item:nth-child(2) {
        grid-column:
            span 6;
    }

    .kdf-stats--band
    .kdf-stat {
        border-right: 0;
        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .12
            );

        padding:
            24px 0;
    }
}


@media (max-width: 640px) {

    .kdf-process--steps
    .kdf-process-list,
    .kdf-testimonials-grid,
    .kdf-stats-grid,
    .kdf-gallery-grid {
        grid-template-columns:
            1fr;
    }

    .kdf-process--timeline
    .kdf-process-step {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 16px;
    }

    .kdf-process--timeline
    .kdf-process-list::before {
        left: 23px;
    }

    .kdf-process--timeline
    .kdf-process-number {
        width: 46px;
        height: 46px;
    }

    .kdf-stats--band
    .kdf-section-inner {
        padding:
            36px 24px;
    }

    .kdf-gallery--mosaic
    .kdf-gallery-item,
    .kdf-gallery--mosaic
    .kdf-gallery-item:first-child,
    .kdf-gallery--mosaic
    .kdf-gallery-item:nth-child(2) {
        grid-column:
            1 / -1;
    }

    .kdf-gallery-item img,
    .kdf-gallery--mosaic
    .kdf-gallery-item:first-child img,
    .kdf-gallery--mosaic
    .kdf-gallery-item:nth-child(2) img {
        height: 300px;
    }
}
/* ==========================================================
   DESIGN ENGINE 2.0 - PHASE 3 CONVERSION COMPONENTS
   Contact Form · Leads · Maps
   ========================================================== */


/* ----------------------------------------------------------
   CONTACT FORM
   ---------------------------------------------------------- */

.kdf-lead {
    background:
        var(--kdf-surface);
}

.kdf-lead-inner {
    width: min(
        calc(100% - 40px),
        1180px
    );

    margin: 0 auto;
}

.kdf-lead--split
.kdf-lead-inner {
    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(420px, 1.18fr);

    gap: 70px;

    align-items: start;
}

.kdf-lead--centered
.kdf-lead-copy {
    max-width: 760px;

    margin: 0 auto 40px;

    text-align: center;
}

.kdf-lead--centered
.kdf-contact-form {
    max-width: 820px;

    margin: 0 auto;
}

.kdf-lead-copy h2 {
    margin:
        0 0
        20px;

    color:
        var(--kdf-text);

    font-size:
        clamp(
            2.2rem,
            4.5vw,
            4rem
        );

    line-height: 1.02;

    letter-spacing: -.045em;
}

.kdf-lead-copy
.kdf-section-lead {
    margin-left: 0;
    margin-right: 0;

    text-align: left;
}

.kdf-lead--centered
.kdf-section-lead {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.kdf-contact-form {
    position: relative;

    padding: 34px;

    border:
        1px solid
        var(--kdf-border);

    border-radius:
        var(--kdf-card-radius);

    background:
        var(--kdf-background);

    box-shadow:
        0 24px 70px
        rgba(15, 23, 42, .08);
}

.kdf-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;
}

.kdf-form-field--full {
    grid-column:
        1 / -1;
}

.kdf-form-field label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--kdf-text);

    font-size: .78rem;
    font-weight: 700;
}

.kdf-form-field input,
.kdf-form-field textarea {
    display: block;

    width: 100%;

    box-sizing: border-box;

    border:
        1px solid
        var(--kdf-border);

    border-radius: 12px;

    background:
        var(--kdf-surface);

    color:
        var(--kdf-text);

    font: inherit;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.kdf-form-field input {
    min-height: 50px;

    padding:
        0 14px;
}

.kdf-form-field textarea {
    min-height: 150px;

    padding:
        13px 14px;

    resize: vertical;
}

.kdf-form-field input:focus,
.kdf-form-field textarea:focus {
    border-color:
        var(--kdf-primary);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--kdf-primary)
            12%,
            transparent
        );

    background:
        var(--kdf-background);
}

.kdf-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-top: 20px;
}

.kdf-form-submit {
    min-height: 48px;

    padding:
        0 22px;

    border: 0;

    border-radius:
        var(--kdf-button-radius);

    background:
        var(--kdf-primary);

    color: white;

    cursor: pointer;

    font: inherit;
    font-size: .86rem;
    font-weight: 800;

    transition:
        transform .18s ease,
        opacity .18s ease;
}

.kdf-form-submit:hover {
    transform:
        translateY(-1px);
}

.kdf-form-submit:disabled {
    cursor:
        not-allowed;

    opacity: .55;
}

.kdf-form-status {
    min-height: 20px;

    color:
        var(--kdf-muted);

    font-size: .78rem;

    line-height: 1.5;
}

.kdf-form-status--success {
    color: #059669;
}

.kdf-form-status--error {
    color: #dc2626;
}

.kdf-form-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip:
        rect(
            0 0 0 0
        ) !important;

    white-space:
        nowrap !important;
}


/* ----------------------------------------------------------
   MAP
   ---------------------------------------------------------- */

.kdf-map {
    background:
        var(--kdf-background);
}

.kdf-map-frame {
    margin-top: 42px;

    overflow: hidden;

    border:
        1px solid
        var(--kdf-border);

    border-radius:
        var(--kdf-card-radius);

    background:
        var(--kdf-surface);

    box-shadow:
        0 24px 70px
        rgba(15, 23, 42, .08);
}

.kdf-map-frame iframe {
    display: block;

    width: 100%;
    height: 520px;

    border: 0;
}


/* ----------------------------------------------------------
   NOIR
   ---------------------------------------------------------- */

.kdf-style-noir
.kdf-lead,
.kdf-style-premium-dark
.kdf-lead {
    background:
        #0c0c0f;
}

.kdf-style-noir
.kdf-contact-form,
.kdf-style-premium-dark
.kdf-contact-form {
    border-color:
        rgba(
            255,
            255,
            255,
            .08
        );

    background:
        linear-gradient(
            145deg,
            #19191e,
            #111114
        );

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .34);
}

.kdf-style-noir
.kdf-form-field label,
.kdf-style-noir
.kdf-lead-copy h2,
.kdf-style-premium-dark
.kdf-form-field label,
.kdf-style-premium-dark
.kdf-lead-copy h2 {
    color: #fafafa;
}

.kdf-style-noir
.kdf-form-field input,
.kdf-style-noir
.kdf-form-field textarea,
.kdf-style-premium-dark
.kdf-form-field input,
.kdf-style-premium-dark
.kdf-form-field textarea {
    border-color:
        rgba(
            255,
            255,
            255,
            .10
        );

    background:
        #0d0d10;

    color: #fafafa;
}

.kdf-style-noir
.kdf-map-frame,
.kdf-style-premium-dark
.kdf-map-frame {
    border-color:
        rgba(
            255,
            255,
            255,
            .08
        );

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, .30);
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .kdf-lead--split
    .kdf-lead-inner {
        grid-template-columns:
            1fr;

        gap: 36px;
    }
}


@media (max-width: 640px) {

    .kdf-contact-form {
        padding: 24px;
    }

    .kdf-form-grid {
        grid-template-columns:
            1fr;
    }

    .kdf-form-field--full {
        grid-column: auto;
    }

    .kdf-form-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .kdf-form-submit {
        width: 100%;
    }

    .kdf-map-frame iframe {
        height: 380px;
    }
}

/* ==========================================================
   KIZUNADATA CONTACT FORM - LAYOUT & INTERACTION PATCH
   Added after Phase 3 styles so these rules safely override
   the previous contact-form layout without changing other
   Design Engine sections.
   ========================================================== */

.kdf-lead {
    position: relative;
    overflow: hidden;

    padding:
        96px 0;

    background:
        var(--kdf-surface);
}


/* Decorative layers must never block form interaction. */

.kdf-lead::before,
.kdf-lead::after,
.kdf-lead-inner::before,
.kdf-lead-inner::after,
.kdf-contact-form::before,
.kdf-contact-form::after {
    pointer-events: none !important;
}


.kdf-lead-inner {
    position: relative;
    z-index: 1;

    width: min(
        calc(100% - 40px),
        1180px
    );

    margin: 0 auto;
}


/* ----------------------------------------------------------
   SPLIT CONTACT LAYOUT
   ---------------------------------------------------------- */

.kdf-lead--split
.kdf-lead-inner {
    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.12fr);

    gap: clamp(
        42px,
        6vw,
        78px
    );

    align-items: center;
}


.kdf-lead-copy {
    position: relative;
    z-index: 2;

    max-width: 500px;
}


.kdf-lead-copy
.kdf-eyebrow {
    margin-bottom: 16px;
}


.kdf-lead-copy h2 {
    max-width: 560px;

    margin:
        0 0
        22px;

    color:
        var(--kdf-text);

    font-size:
        clamp(
            2.45rem,
            4.4vw,
            4.2rem
        );

    line-height: .98;

    letter-spacing: -.05em;
}


.kdf-lead-copy
.kdf-section-lead {
    max-width: 500px;

    margin:
        0;

    color:
        var(--kdf-muted);

    text-align: left;

    font-size:
        1.02rem;

    line-height: 1.75;
}


/* ----------------------------------------------------------
   CENTERED CONTACT LAYOUT
   ---------------------------------------------------------- */

.kdf-lead--centered
.kdf-lead-inner {
    max-width: 900px;
}


.kdf-lead--centered
.kdf-lead-copy {
    max-width: 760px;

    margin:
        0 auto
        42px;

    text-align: center;
}


.kdf-lead--centered
.kdf-lead-copy h2 {
    margin-left: auto;
    margin-right: auto;
}


.kdf-lead--centered
.kdf-section-lead {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


/* ----------------------------------------------------------
   FORM CARD
   ---------------------------------------------------------- */

.kdf-contact-form {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 720px;

    margin: 0;

    padding:
        clamp(
            28px,
            4vw,
            42px
        );

    border:
        1px solid
        var(--kdf-border);

    border-radius:
        var(--kdf-card-radius);

    background:
        var(--kdf-background);

    box-shadow:
        0 28px 80px
        rgba(15, 23, 42, .10);

    pointer-events: auto !important;
}


.kdf-lead--centered
.kdf-contact-form {
    margin: 0 auto;
}


/* ----------------------------------------------------------
   FORM GRID
   ---------------------------------------------------------- */

.kdf-form-grid {
    position: relative;
    z-index: 4;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        20px
        18px;

    width: 100%;

    pointer-events: auto !important;
}


.kdf-form-field {
    position: relative;
    z-index: 5;

    min-width: 0;

    pointer-events: auto !important;
}


.kdf-form-field--full {
    grid-column:
        1 / -1;
}


.kdf-form-field label {
    display: block;

    margin:
        0 0
        8px;

    color:
        var(--kdf-text);

    font-size: .78rem;
    font-weight: 700;

    line-height: 1.3;
}


/* ----------------------------------------------------------
   INPUTS
   ---------------------------------------------------------- */

.kdf-form-field input,
.kdf-form-field textarea,
.kdf-form-field select {
    position: relative;
    z-index: 6;

    display: block !important;

    width: 100% !important;

    box-sizing: border-box;

    opacity: 1 !important;
    visibility: visible !important;

    border:
        1px solid
        var(--kdf-border);

    border-radius: 13px;

    background:
        var(--kdf-background);

    color:
        var(--kdf-text);

    box-shadow:
        inset 0 0 0 1px
        rgba(15, 23, 42, .015);

    font: inherit;

    outline: none;

    pointer-events: auto !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.kdf-form-field input {
    min-height: 52px !important;

    padding:
        0 15px !important;

    cursor: text;
}


.kdf-form-field textarea {
    min-height: 155px !important;

    padding:
        14px 15px !important;

    resize: vertical;

    cursor: text;
}


.kdf-form-field input:hover,
.kdf-form-field textarea:hover,
.kdf-form-field select:hover {
    border-color:
        color-mix(
            in srgb,
            var(--kdf-primary)
            38%,
            var(--kdf-border)
        );
}


.kdf-form-field input:focus,
.kdf-form-field textarea:focus,
.kdf-form-field select:focus {
    border-color:
        var(--kdf-primary);

    background:
        var(--kdf-background);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--kdf-primary)
            12%,
            transparent
        );
}


.kdf-form-field input::placeholder,
.kdf-form-field textarea::placeholder {
    color:
        color-mix(
            in srgb,
            var(--kdf-muted)
            72%,
            transparent
        );
}


/* ----------------------------------------------------------
   ACTIONS
   ---------------------------------------------------------- */

.kdf-form-actions {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 22px;

    pointer-events: auto !important;
}


.kdf-form-submit {
    position: relative;
    z-index: 6;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding:
        0 24px;

    border: 0;

    border-radius:
        var(--kdf-button-radius);

    background:
        linear-gradient(
            135deg,
            var(--kdf-primary),
            var(--kdf-primary-dark)
        );

    color: white;

    box-shadow:
        0 12px 28px
        color-mix(
            in srgb,
            var(--kdf-primary)
            22%,
            transparent
        );

    cursor: pointer;

    font: inherit;
    font-size: .86rem;
    font-weight: 800;

    pointer-events: auto !important;

    transition:
        transform .18s ease,
        opacity .18s ease,
        box-shadow .18s ease;
}


.kdf-form-submit:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 16px 32px
        color-mix(
            in srgb,
            var(--kdf-primary)
            30%,
            transparent
        );
}


.kdf-form-submit:disabled {
    cursor:
        not-allowed;

    opacity: .55;

    transform: none;
}


.kdf-form-status {
    min-height: 20px;

    color:
        var(--kdf-muted);

    font-size: .78rem;

    line-height: 1.5;
}


.kdf-form-status--success {
    color: #059669;
}


.kdf-form-status--error {
    color: #dc2626;
}


/* Keep the anti-spam honeypot hidden without affecting real inputs. */

.kdf-form-honeypot {
    position: absolute !important;

    left: -10000px !important;
    top: auto !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ----------------------------------------------------------
   NOIR / PREMIUM DARK
   ---------------------------------------------------------- */

.kdf-style-noir
.kdf-lead,
.kdf-style-premium-dark
.kdf-lead {
    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(139, 92, 246, .11),
            transparent 40%
        ),
        #0c0c0f;
}


.kdf-style-noir
.kdf-contact-form,
.kdf-style-premium-dark
.kdf-contact-form {
    border-color:
        rgba(
            255,
            255,
            255,
            .09
        );

    background:
        linear-gradient(
            145deg,
            #19191e,
            #111114
        );

    box-shadow:
        0 32px 90px
        rgba(0, 0, 0, .38);
}


.kdf-style-noir
.kdf-form-field label,
.kdf-style-noir
.kdf-lead-copy h2,
.kdf-style-premium-dark
.kdf-form-field label,
.kdf-style-premium-dark
.kdf-lead-copy h2 {
    color: #fafafa;
}


.kdf-style-noir
.kdf-form-field input,
.kdf-style-noir
.kdf-form-field textarea,
.kdf-style-noir
.kdf-form-field select,
.kdf-style-premium-dark
.kdf-form-field input,
.kdf-style-premium-dark
.kdf-form-field textarea,
.kdf-style-premium-dark
.kdf-form-field select {
    border-color:
        rgba(
            255,
            255,
            255,
            .12
        );

    background:
        #0d0d10;

    color: #fafafa;

    box-shadow: none;
}


.kdf-style-noir
.kdf-form-field input:focus,
.kdf-style-noir
.kdf-form-field textarea:focus,
.kdf-style-premium-dark
.kdf-form-field input:focus,
.kdf-style-premium-dark
.kdf-form-field textarea:focus {
    border-color:
        var(--kdf-primary);

    background:
        #111116;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .kdf-lead {
        padding:
            78px 0;
    }


    .kdf-lead--split
    .kdf-lead-inner {
        grid-template-columns:
            1fr;

        gap: 40px;
    }


    .kdf-lead-copy {
        max-width: 680px;
    }


    .kdf-contact-form {
        max-width: none;
    }
}


@media (max-width: 640px) {

    .kdf-lead {
        padding:
            64px 0;
    }


    .kdf-lead-inner {
        width:
            min(
                calc(100% - 28px),
                1180px
            );
    }


    .kdf-lead-copy h2 {
        font-size:
            clamp(
                2.15rem,
                11vw,
                3.2rem
            );
    }


    .kdf-contact-form {
        padding: 24px;

        border-radius: 20px;
    }


    .kdf-form-grid {
        grid-template-columns:
            1fr;

        gap: 17px;
    }


    .kdf-form-field--full {
        grid-column:
            auto;
    }


    .kdf-form-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .kdf-form-submit {
        width: 100%;
    }
}
/* ==========================================================
   DESIGN ENGINE 2.0 - PHASE 4 SMART MEDIA
   Hero Carousel · Gallery Enhancements · Before / After
   ========================================================== */


/* ----------------------------------------------------------
   HERO CAROUSEL
   Pure CSS auto-fade, capped at five slides.
   ---------------------------------------------------------- */

.kdf-hero--carousel {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: flex-end;

    min-height:
        min(800px, 84vh);

    padding:
        150px 0
        100px;

    overflow: hidden;

    background:
        var(--kdf-secondary);

    color: white;
}

.kdf-carousel-track {
    position: absolute;
    z-index: -3;

    inset: 0;
}

.kdf-carousel-slide {
    position: absolute;

    inset: 0;

    opacity: 0;
}

.kdf-carousel-slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.kdf-hero--carousel
.kdf-hero-shade {
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(4, 9, 18, .90)
                0%,
            rgba(4, 9, 18, .60)
                48%,
            rgba(4, 9, 18, .24)
                100%
        );
}

.kdf-hero--carousel
.kdf-hero-copy {
    max-width: 820px;
}

.kdf-hero--carousel h1 {
    margin:
        0 0
        28px;

    color: white;

    text-align: left;

    font-size:
        clamp(
            3.4rem,
            7vw,
            6.8rem
        );

    line-height: .94;
}

.kdf-hero--carousel
.kdf-hero-text {
    margin-left: 0;
    margin-right: 0;

    color:
        rgba(
            255,
            255,
            255,
            .78
        );

    text-align: left;
}

.kdf-hero--carousel
.kdf-eyebrow {
    color:
        rgba(
            255,
            255,
            255,
            .76
        );
}

@keyframes kdfCarouselFade2 {
    0%, 42% { opacity: 1; }
    50%, 92% { opacity: 0; }
    100% { opacity: 1; }
}

.kdf-carousel--2
.kdf-carousel-slide {
    animation:
        kdfCarouselFade2
        12s
        infinite;
}

.kdf-carousel--2
.kdf-carousel-slide--2 {
    animation-delay: -6s;
}

@keyframes kdfCarouselFade3 {
    0%, 27% { opacity: 1; }
    34%, 93% { opacity: 0; }
    100% { opacity: 1; }
}

.kdf-carousel--3
.kdf-carousel-slide {
    animation:
        kdfCarouselFade3
        18s
        infinite;
}

.kdf-carousel--3
.kdf-carousel-slide--2 {
    animation-delay: -12s;
}

.kdf-carousel--3
.kdf-carousel-slide--3 {
    animation-delay: -6s;
}

@keyframes kdfCarouselFade4 {
    0%, 19% { opacity: 1; }
    25%, 94% { opacity: 0; }
    100% { opacity: 1; }
}

.kdf-carousel--4
.kdf-carousel-slide {
    animation:
        kdfCarouselFade4
        24s
        infinite;
}

.kdf-carousel--4
.kdf-carousel-slide--2 {
    animation-delay: -18s;
}

.kdf-carousel--4
.kdf-carousel-slide--3 {
    animation-delay: -12s;
}

.kdf-carousel--4
.kdf-carousel-slide--4 {
    animation-delay: -6s;
}

@keyframes kdfCarouselFade5 {
    0%, 14% { opacity: 1; }
    20%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

.kdf-carousel--5
.kdf-carousel-slide {
    animation:
        kdfCarouselFade5
        30s
        infinite;
}

.kdf-carousel--5
.kdf-carousel-slide--2 {
    animation-delay: -24s;
}

.kdf-carousel--5
.kdf-carousel-slide--3 {
    animation-delay: -18s;
}

.kdf-carousel--5
.kdf-carousel-slide--4 {
    animation-delay: -12s;
}

.kdf-carousel--5
.kdf-carousel-slide--5 {
    animation-delay: -6s;
}

.kdf-carousel--1
.kdf-carousel-slide {
    opacity: 1;
}


/* ----------------------------------------------------------
   BEFORE / AFTER
   ---------------------------------------------------------- */

.kdf-before-after {
    background:
        var(--kdf-background);
}

.kdf-before-after-list {
    display: grid;

    gap: 34px;

    margin-top: 44px;
}

.kdf-before-after-item {
    overflow: hidden;

    border:
        1px solid
        var(--kdf-border);

    border-radius:
        var(--kdf-card-radius);

    background:
        var(--kdf-surface);
}

.kdf-before-after-visuals {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

.kdf-before-after-frame {
    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;
}

.kdf-before-after-frame img {
    display: block;

    width: 100%;
    height: 430px;

    object-fit: cover;
}

.kdf-before-after-frame figcaption {
    position: absolute;

    left: 18px;
    bottom: 18px;

    padding:
        8px 12px;

    border-radius: 999px;

    background:
        rgba(0, 0, 0, .70);

    color: white;

    backdrop-filter:
        blur(10px);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.kdf-before-after-copy {
    padding:
        26px 30px
        30px;
}

.kdf-before-after-copy h3 {
    margin: 0;

    color:
        var(--kdf-text);
}

.kdf-before-after-copy p {
    margin:
        8px 0
        0;

    color:
        var(--kdf-muted);
}

/* Reveal variant gives the pair a more dramatic overlapping frame. */

.kdf-before-after--reveal
.kdf-before-after-visuals {
    position: relative;

    display: block;

    min-height: 520px;
}

.kdf-before-after--reveal
.kdf-before-after-frame {
    position: absolute;

    inset: 0;
}

.kdf-before-after--reveal
.kdf-before-frame {
    clip-path:
        inset(
            0 50% 0 0
        );

    z-index: 2;
}

.kdf-before-after--reveal
.kdf-after-frame {
    z-index: 1;
}

.kdf-before-after--reveal
.kdf-before-after-frame img {
    height: 520px;
}

.kdf-before-after--reveal
.kdf-before-after-visuals::after {
    content: "";

    position: absolute;
    z-index: 3;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 3px;

    background: white;

    box-shadow:
        0 0 0 1px
        rgba(0, 0, 0, .12);
}


/* ----------------------------------------------------------
   Gallery polish
   ---------------------------------------------------------- */

.kdf-gallery-item {
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.kdf-gallery-item:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 22px 60px
        rgba(15, 23, 42, .12);
}

.kdf-gallery-item img {
    transition:
        transform .45s ease;
}

.kdf-gallery-item:hover img {
    transform:
        scale(1.025);
}


/* Noir media surfaces */

.kdf-style-noir
.kdf-before-after-item,
.kdf-style-premium-dark
.kdf-before-after-item {
    border-color:
        rgba(255, 255, 255, .08);

    background:
        linear-gradient(
            145deg,
            #18181d,
            #111114
        );
}

.kdf-style-noir
.kdf-before-after-copy h3,
.kdf-style-premium-dark
.kdf-before-after-copy h3 {
    color: #fafafa;
}


@media (max-width: 900px) {

    .kdf-hero--carousel {
        min-height: 680px;

        padding:
            130px 0
            75px;
    }
}


@media (max-width: 640px) {

    .kdf-hero--carousel {
        min-height: 610px;

        padding:
            110px 0
            65px;
    }

    .kdf-hero--carousel h1 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4.4rem
            );
    }

    .kdf-before-after-visuals {
        grid-template-columns:
            1fr;
    }

    .kdf-before-after-frame img,
    .kdf-before-after--reveal
    .kdf-before-after-frame img {
        height: 320px;
    }

    .kdf-before-after--reveal
    .kdf-before-after-visuals {
        min-height: 320px;
    }
}