/* =========================================================
   CUSTOMER JOURNEY
   Page-specific styles only.
   ========================================================= */

/* Add only styles unique to this service page. */
/* =========================================================
   LEAKENDIA
   CUSTOMER JOURNEY SERVICE

   Page-specific styles only.
   Global tokens, buttons, typography and container behavior
   are inherited from the global stylesheets.
========================================================= */


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

.journey-hero {
    position: relative;
    overflow: hidden;

    padding:
        clamp(8rem, 14vw, 12rem)
        0
        var(--space-4xl);

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(255, 59, 48, 0.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(255, 59, 48, 0.04),
            transparent 28%
        ),
        var(--color-bg);

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


.journey-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.7),
            transparent
        );
}


.journey-hero-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);

    align-items: center;

    gap:
        clamp(
            var(--space-2xl),
            7vw,
            7rem
        );
}


/* =========================================================
   EYEBROW
========================================================= */

.journey-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    margin-bottom:
        var(--space-lg);

    color:
        var(--color-text-secondary);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-bold);

    letter-spacing:
        0.14em;
}


.journey-eyebrow i {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

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

    background:
        var(--color-primary);

    box-shadow:
        0 0 18px
        rgba(255, 59, 48, 0.7);
}


/* =========================================================
   HERO COPY
========================================================= */

.journey-hero h1 {
    max-width: 780px;

    margin: 0;

    color:
        var(--color-text);

    font-size:
        clamp(
            3rem,
            6.4vw,
            6rem
        );

    line-height: 0.98;

    letter-spacing:
        -0.055em;
}


.journey-hero h1 span {
    display: block;

    color:
        var(--color-primary);
}


.journey-lead {
    max-width: 690px;

    margin:
        var(--space-xl)
        0
        0;

    color:
        var(--color-text-secondary);

    font-size:
        var(--text-md);

    line-height: 1.75;
}


.journey-support {
    max-width: 650px;

    margin:
        var(--space-md)
        0
        0;

    color:
        var(--color-text-muted);

    line-height: 1.75;
}


.journey-actions {
    display: flex;
    flex-wrap: wrap;

    gap:
        var(--space-sm);

    margin-top:
        var(--space-xl);
}


.journey-button {
    border-radius:
        var(--border-radius-sm);

    font-weight:
        var(--weight-bold);
}


/* =========================================================
   HERO JOURNEY VISUAL
========================================================= */

.journey-visual {
    position: relative;

    padding:
        var(--space-lg);

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

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

    background:
        rgba(16, 16, 16, 0.82);

    backdrop-filter:
        blur(18px);

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


.journey-visual::before {
    content: "";

    position: absolute;

    inset: -1px;

    z-index: -1;

    border-radius:
        inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255, 59, 48, 0.22),
            transparent 28%,
            transparent 75%,
            rgba(255, 255, 255, 0.04)
        );
}


.journey-visual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-sm);

    padding-bottom:
        var(--space-md);

    margin-bottom:
        var(--space-md);

    border-bottom:
        1px solid
        var(--color-border-light);

    color:
        var(--color-text-muted);

    font-size:
        0.68rem;

    font-weight:
        var(--weight-bold);

    letter-spacing:
        0.12em;
}


.journey-live {
    color:
        var(--color-primary);
}


/* =========================================================
   FUNNEL
========================================================= */

.journey-funnel {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        var(--space-sm)
        0;
}


.journey-stage {
    width: 100%;

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

    gap:
        var(--space-md);

    padding:
        0.9rem
        1rem;

    border:
        1px solid
        var(--color-border-light);

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

    background:
        var(--color-bg-tertiary);

    transition:
        transform
        var(--transition-fast),
        border-color
        var(--transition-fast);
}


.journey-stage:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(255, 59, 48, 0.28);
}


.journey-stage > div {
    display: flex;
    align-items: baseline;

    gap:
        0.55rem;
}


.journey-stage strong {
    color:
        var(--color-text);

    font-size:
        1.2rem;
}


.journey-stage span {
    color:
        var(--color-text-secondary);

    font-size:
        0.8rem;
}


.journey-stage small {
    color:
        var(--color-text-muted);

    font-size:
        0.68rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.1em;
}


.journey-stage-smaller {
    width: 90%;
}


.journey-stage-medium {
    width: 79%;
}


.journey-stage-small {
    width: 68%;
}


.journey-stage-tiny {
    width: 57%;
}


/* =========================================================
   FUNNEL DROP
========================================================= */

.journey-drop {
    min-height: 40px;

    display: flex;
    align-items: center;

    gap:
        0.65rem;
}


.journey-drop span {
    width: 1px;
    height: 22px;

    background:
        linear-gradient(
            to bottom,
            var(--color-border),
            rgba(255, 59, 48, 0.55)
        );
}


.journey-drop p {
    margin: 0;

    color:
        var(--color-text-muted);

    font-size:
        0.66rem;
}


.journey-result {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap:
        0.45rem;

    margin-top:
        0.2rem;
}


.journey-result span {
    color:
        var(--color-primary);
}


.journey-result strong {
    padding:
        0.6rem
        1rem;

    border:
        1px solid
        rgba(50, 215, 75, 0.2);

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

    background:
        rgba(50, 215, 75, 0.06);

    color:
        var(--color-success);

    font-size:
        0.75rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}


.journey-disclaimer {
    margin:
        var(--space-md)
        0
        0;

    padding-top:
        var(--space-md);

    border-top:
        1px solid
        var(--color-border-light);

    color:
        var(--color-text-muted);

    font-size:
        0.67rem;

    line-height: 1.6;
}


/* =========================================================
   COMMON SECTION STRUCTURE
========================================================= */

.journey-section {
    padding:
        var(--space-4xl)
        0;

    border-bottom:
        1px solid
        var(--color-border-light);

    background:
        var(--color-bg);
}


.journey-two-col {
    display: grid;

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

    gap:
        clamp(
            var(--space-2xl),
            8vw,
            8rem
        );
}


.journey-section-label {
    margin-bottom:
        var(--space-md);

    color:
        var(--color-primary);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-bold);

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.journey-section h2,
.journey-cta h2 {
    margin: 0;

    color:
        var(--color-text);

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

    line-height: 1.04;

    letter-spacing:
        -0.045em;
}


.journey-section h2 span {
    color:
        var(--color-primary);
}


.journey-section-heading {
    max-width: 820px;

    margin-bottom:
        var(--space-2xl);
}


.journey-section-heading > p {
    max-width: 680px;

    margin:
        var(--space-lg)
        0
        0;

    color:
        var(--color-text-secondary);

    font-size:
        var(--text-md);

    line-height: 1.75;
}


/* =========================================================
   PROBLEM
========================================================= */

.journey-problem {
    background:
        var(--color-bg-secondary);
}


.journey-copy p {
    margin:
        0
        0
        var(--space-md);

    color:
        var(--color-text-secondary);

    line-height: 1.8;
}


.journey-copy strong {
    color:
        var(--color-text);
}


.journey-copy .journey-emphasis {
    margin-top:
        var(--space-lg);

    padding:
        var(--space-md);

    border-left:
        2px solid
        var(--color-primary);

    background:
        rgba(255, 59, 48, 0.045);

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


/* =========================================================
   JOURNEY MAP
========================================================= */

.journey-map-section {
    overflow: hidden;
}


.journey-map {
    display: grid;

    grid-template-columns:
        repeat(11, auto);

    align-items: stretch;

    gap:
        0.55rem;

    overflow-x: auto;

    padding-bottom:
        var(--space-sm);

    scrollbar-width:
        thin;
}


.journey-map-card {
    width: 215px;

    min-height: 260px;

    display: flex;
    flex-direction: column;

    padding:
        var(--space-lg);

    border:
        1px solid
        var(--color-border-light);

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

    background:
        var(--color-bg-secondary);

    transition:
        transform
        var(--transition-fast),
        border-color
        var(--transition-fast);
}


.journey-map-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(255, 59, 48, 0.3);
}


.journey-map-number {
    margin-bottom:
        auto;

    color:
        var(--color-primary);

    font-size:
        0.7rem;

    font-weight:
        var(--weight-bold);
}


.journey-map-card h3 {
    margin:
        var(--space-lg)
        0
        var(--space-sm);

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


.journey-map-card p {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size:
        0.86rem;

    line-height: 1.65;
}


.journey-map-card > span {
    display: block;

    margin-top:
        var(--space-md);

    padding-top:
        var(--space-sm);

    border-top:
        1px solid
        var(--color-border-light);

    color:
        var(--color-text-muted);

    font-size:
        0.68rem;
}


.journey-connector {
    display: flex;
    align-items: center;

    color:
        var(--color-primary);

    font-size:
        1.2rem;
}


/* =========================================================
   INVESTIGATION GRID
========================================================= */

.journey-investigation {
    background:
        var(--color-bg-secondary);
}


.journey-grid {
    display: grid;

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

    gap:
        var(--space-md);
}


.journey-card {
    min-height: 255px;

    padding:
        var(--space-lg);

    border:
        1px solid
        var(--color-border-light);

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

    background:
        var(--color-bg-tertiary);

    transition:
        transform
        var(--transition-fast),
        border-color
        var(--transition-fast);
}


.journey-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(255, 59, 48, 0.28);
}


.journey-card-number {
    display: block;

    margin-bottom:
        var(--space-xl);

    color:
        var(--color-primary);

    font-size:
        0.7rem;

    font-weight:
        var(--weight-bold);
}


.journey-card h3 {
    margin:
        0
        0
        var(--space-sm);

    color:
        var(--color-text);

    font-size:
        1.15rem;
}


.journey-card p {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size:
        0.9rem;

    line-height: 1.7;
}


/* =========================================================
   METHOD
========================================================= */

.journey-method {
    background:
        var(--color-bg);
}


.journey-steps {
    display: grid;

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

    border:
        1px solid
        var(--color-border-light);

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

    overflow: hidden;
}


.journey-step {
    min-height: 285px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding:
        var(--space-lg);

    background:
        var(--color-bg-secondary);

    border-right:
        1px solid
        var(--color-border-light);
}


.journey-step:last-child {
    border-right: 0;
}


.journey-step > span {
    color:
        var(--color-primary);

    font-size:
        0.72rem;

    font-weight:
        var(--weight-bold);
}


.journey-step h3 {
    margin:
        0
        0
        var(--space-sm);

    color:
        var(--color-text);

    font-size:
        1.25rem;
}


.journey-step p {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size:
        0.88rem;

    line-height: 1.7;
}


/* =========================================================
   DELIVERABLES
========================================================= */

.journey-deliverables {
    background:
        var(--color-bg-secondary);
}


.journey-deliverables-intro {
    max-width: 540px;

    margin:
        var(--space-lg)
        0
        0;

    color:
        var(--color-text-secondary);

    line-height: 1.75;
}


.journey-deliverable-list {
    border-top:
        1px solid
        var(--color-border);
}


.journey-deliverable {
    display: grid;

    grid-template-columns:
        45px
        1fr;

    gap:
        var(--space-md);

    padding:
        var(--space-lg)
        0;

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


.journey-deliverable > span {
    color:
        var(--color-primary);

    font-size:
        0.7rem;

    font-weight:
        var(--weight-bold);
}


.journey-deliverable h3 {
    margin:
        0
        0
        0.4rem;

    color:
        var(--color-text);

    font-size:
        1rem;
}


.journey-deliverable p {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size:
        0.87rem;

    line-height: 1.65;
}


/* =========================================================
   COMPARISON
========================================================= */

.journey-comparison-grid {
    display: grid;

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

    gap:
        var(--space-md);
}


.journey-comparison-card {
    padding:
        var(--space-xl);

    border:
        1px solid
        var(--color-border-light);

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

    background:
        var(--color-bg-secondary);
}


.journey-before {
    opacity: 0.78;
}


.journey-after {
    border-color:
        rgba(50, 215, 75, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(50, 215, 75, 0.045),
            var(--color-bg-secondary)
        );
}


.journey-comparison-label {
    display: block;

    margin-bottom:
        var(--space-lg);

    color:
        var(--color-text-muted);

    font-size:
        0.68rem;

    font-weight:
        var(--weight-bold);

    letter-spacing:
        0.12em;
}


.journey-after
.journey-comparison-label {
    color:
        var(--color-success);
}


.journey-flow-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        0.55rem;

    margin-bottom:
        var(--space-lg);
}


.journey-flow-line span {
    padding:
        0.5rem
        0.65rem;

    border:
        1px solid
        var(--color-border-light);

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

    background:
        var(--color-bg-tertiary);

    color:
        var(--color-text-secondary);

    font-size:
        0.72rem;
}


.journey-flow-line i {
    color:
        var(--color-text-muted);

    font-style: normal;
}


.journey-flow-line
.journey-lost {
    border-color:
        rgba(255, 59, 48, 0.25);

    color:
        var(--color-primary);
}


.journey-flow-line
.journey-converted {
    border-color:
        rgba(50, 215, 75, 0.22);

    color:
        var(--color-success);
}


.journey-comparison-card p {
    margin: 0;

    color:
        var(--color-text-secondary);

    line-height: 1.7;
}


/* =========================================================
   REALITY CHECK
========================================================= */

.journey-reality {
    position: relative;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 59, 48, 0.055),
            transparent 42%
        ),
        var(--color-bg-secondary);
}


.journey-reality .container {
    max-width: 900px;
}


.journey-reality p {
    max-width: 700px;

    margin:
        var(--space-md)
        auto
        0;

    color:
        var(--color-text-secondary);

    line-height: 1.8;
}


.journey-reality
.journey-reality-highlight {
    margin-top:
        var(--space-xl);

    color:
        var(--color-text);

    font-size:
        var(--text-md);

    font-weight:
        var(--weight-bold);
}


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

.journey-cta {
    padding:
        var(--space-4xl)
        0;

    background:
        var(--color-bg);
}


.journey-cta-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap:
        var(--space-2xl);

    padding:
        clamp(
            var(--space-xl),
            5vw,
            var(--space-3xl)
        );

    border:
        1px solid
        rgba(255, 59, 48, 0.18);

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 59, 48, 0.065),
            var(--color-bg-secondary) 48%
        );
}


.journey-cta-box > div {
    max-width: 760px;
}


.journey-cta h2 {
    font-size:
        clamp(
            2rem,
            4vw,
            4rem
        );
}


.journey-cta p {
    max-width: 620px;

    margin:
        var(--space-md)
        0
        0;

    color:
        var(--color-text-secondary);

    line-height: 1.7;
}


.journey-cta .journey-button {
    flex-shrink: 0;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .journey-hero-grid,
    .journey-two-col {
        grid-template-columns:
            1fr;
    }


    .journey-hero-grid {
        gap:
            var(--space-2xl);
    }


    .journey-visual {
        max-width: 720px;
    }


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


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


    .journey-step {
        border-bottom:
            1px solid
            var(--color-border-light);
    }


    .journey-step:nth-child(2) {
        border-right: 0;
    }


    .journey-step:nth-child(3),
    .journey-step:nth-child(4) {
        border-bottom: 0;
    }


    .journey-comparison-grid {
        grid-template-columns:
            1fr;
    }


    .journey-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

    .journey-hero {
        padding:
            7rem
            0
            5rem;
    }


    .journey-hero h1 {
        font-size:
            clamp(
                2.65rem,
                13vw,
                4.2rem
            );
    }


    .journey-section,
    .journey-cta {
        padding:
            5rem
            0;
    }


    .journey-actions {
        flex-direction: column;
    }


    .journey-actions .btn,
    .journey-cta-box .btn {
        width: 100%;

        justify-content: center;
    }


    .journey-visual {
        padding:
            var(--space-md);
    }


    .journey-visual-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .journey-stage,
    .journey-stage-smaller,
    .journey-stage-medium,
    .journey-stage-small,
    .journey-stage-tiny {
        width: 100%;
    }


    .journey-grid {
        grid-template-columns:
            1fr;
    }


    .journey-card {
        min-height: auto;
    }


    .journey-steps {
        grid-template-columns:
            1fr;
    }


    .journey-step {
        min-height: 230px;

        border-right: 0;

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


    .journey-step:nth-child(3) {
        border-bottom:
            1px solid
            var(--color-border-light);
    }


    .journey-step:last-child {
        border-bottom: 0;
    }


    .journey-comparison-card {
        padding:
            var(--space-lg);
    }


    .journey-cta-box {
        padding:
            var(--space-lg);
    }

}