/* =================================
   portfolio / portfolio
================================= */


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

.portfolio-hero {

    padding:
        calc(var(--space-xl) * 2)
        0
        var(--space-xl);

    overflow: hidden;

}


.portfolio-hero-grid {

    display: grid;

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

    gap:
        var(--space-xl);

    align-items:
        center;

}


.portfolio-hero-content {

    max-width:
        760px;

}


.portfolio-hero-content h1 {

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

    font-size:
        clamp(2.8rem, 6vw, 5.5rem);

    line-height:
        0.95;

    letter-spacing:
        -0.055em;

}


.portfolio-hero-content h1 span {

    display:
        block;

    color:
        var(--color-primary);

}


.portfolio-hero-content p {

    max-width:
        650px;

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

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

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

    line-height:
        1.8;

}


.portfolio-hero-actions {

    display:
        flex;

    gap:
        var(--space-sm);

    flex-wrap:
        wrap;

}



/* =================================
   BUTTONS
================================= */

.portfolio-hero .btn,
.portfolio-cta .btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.65rem;

    padding:
        0.95rem 1.4rem;

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

    text-decoration:
        none;

    font-weight:
        700;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);

}


.portfolio-hero .btn:hover,
.portfolio-cta .btn:hover {

    transform:
        translateY(-2px);

}


.portfolio-hero .btn-primary,
.portfolio-cta .btn-primary {

    background:
        var(--color-primary);

    color:
        var(--color-white);

}


.portfolio-hero .btn-secondary {

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

    color:
        var(--color-text);

    background:
        transparent;

}



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

.eyebrow {

    display:
        inline-block;

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

    font-weight:
        800;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    color:
        var(--color-primary);

}



/* =================================
   INVESTIGATION HERO CARD
================================= */

.portfolio-hero-visual {

    display:
        flex;

    justify-content:
        center;

    perspective:
        1200px;

}


.investigation-card {

    width:
        min(100%, 440px);

    padding:
        var(--space-lg);

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

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

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

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

    transform:
        rotate(2deg);

    transition:
        transform var(--transition-normal);

}


.investigation-card:hover {

    transform:
        rotate(0deg)
        translateY(-6px);

}


.investigation-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

    font-weight:
        800;

    letter-spacing:
        0.1em;

}


.status-dot {

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 16px var(--color-primary);

}


.investigation-line {

    height:
        1px;

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

    background:
        var(--color-border);

}


.investigation-data {

    display:
        flex;

    flex-direction:
        column;

}


.data-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        1rem 0;

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

}


.data-row span {

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

}


.data-row strong {

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

}


.data-row .danger {

    color:
        var(--color-primary);

}


.investigation-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

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

}


.investigation-footer span {

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

}


.investigation-footer strong {

    color:
        var(--color-primary);

}



/* =================================
   PROCESS STATS
================================= */

.portfolio-stats {

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

}


.stats-grid {

    display:
        grid;

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

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

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

}


.stat-card {

    padding:
        var(--space-lg);

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

}


.stat-card:last-child {

    border-right:
        none;

}


.stat-number {

    display:
        block;

    margin-bottom:
        0.5rem;

    font-size:
        2rem;

    font-weight:
        800;

    color:
        var(--color-primary);

}


.stat-label {

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

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

}



/* =================================
   INVESTIGATION SECTION
================================= */

.case-studies-section {

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

}


.section-heading {

    display:
        grid;

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

    gap:
        var(--space-xl);

    align-items:
        end;

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

}


.section-heading h2 {

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

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

    line-height:
        1;

    letter-spacing:
        -0.045em;

}


.section-heading h2 span {

    display:
        block;

    color:
        var(--color-primary);

}


.section-heading > p {

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

    line-height:
        1.8;

}



/* =================================
   ILLUSTRATIVE NOTICE
================================= */

.investigation-notice {

    display:
        flex;

    gap:
        var(--space-md);

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

    padding:
        var(--space-md);

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

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

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

}


.notice-mark {

    color:
        var(--color-primary);

    font-size:
        1.5rem;

    font-weight:
        900;

}


.investigation-notice strong {

    display:
        block;

    margin-bottom:
        0.35rem;

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

    letter-spacing:
        0.12em;

    color:
        var(--color-primary);

}


.investigation-notice p {

    margin:
        0;

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

    line-height:
        1.7;

}



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

.case-studies-grid {

    display:
        grid;

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

    gap:
        var(--space-lg);

}


.case-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        500px;

    padding:
        var(--space-lg);

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

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

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

    overflow:
        hidden;

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);

}


.case-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        var(--color-primary);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform var(--transition-normal);

}


.case-card:hover {

    transform:
        translateY(-6px);

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

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.12);

}


.case-card:hover::before {

    transform:
        scaleX(1);

}


.case-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

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

}


.case-number {

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

    font-weight:
        800;

    letter-spacing:
        0.12em;

    color:
        var(--color-primary);

}


.case-category {

    padding:
        0.4rem 0.65rem;

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

    border-radius:
        999px;

    font-size:
        0.7rem;

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

}


.case-type {

    display:
        block;

    margin-bottom:
        0.65rem;

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    color:
        var(--color-primary);

}


.case-card h3 {

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

    font-size:
        clamp(1.5rem, 3vw, 2.2rem);

    line-height:
        1.1;

    letter-spacing:
        -0.025em;

}


.case-card-summary {

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

    line-height:
        1.7;

}


.case-card-meta {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        var(--space-sm);

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

}


.case-meta {

    padding:
        var(--space-sm);

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

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

}


.case-meta span {

    display:
        block;

    margin-bottom:
        0.35rem;

    font-size:
        0.7rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

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

}


.case-meta strong {

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

}


.case-card-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    padding:
        0.9rem 0;

    border:
        none;

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

    background:
        transparent;

    color:
        var(--color-text);

    font:
        inherit;

    font-weight:
        700;

    text-align:
        left;

    cursor:
        pointer;

}


.case-card-button span:last-child {

    color:
        var(--color-primary);

    font-size:
        1.3rem;

}



/* =================================
   EMPTY STATE
================================= */

.portfolio-empty {

    padding:
        4rem 1rem;

    text-align:
        center;

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

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

}


.portfolio-empty span {

    font-weight:
        800;

    color:
        var(--color-primary);

}


.portfolio-empty p {

    margin-top:
        0.5rem;

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

}



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

.portfolio-method {

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

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

}


.method-grid {

    display:
        grid;

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

    gap:
        var(--space-xl);

}


.method-content {

    max-width:
        600px;

}


.method-content h2 {

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

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

    line-height:
        1;

    letter-spacing:
        -0.04em;

}


.method-content p {

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

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

    line-height:
        1.8;

}


.method-steps {

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

}


.method-step {

    display:
        grid;

    grid-template-columns:
        70px 1fr;

    gap:
        var(--space-md);

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

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

}


.method-number {

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

    font-weight:
        800;

    color:
        var(--color-primary);

}


.method-step h3 {

    margin-bottom:
        0.4rem;

    font-size:
        1.2rem;

}


.method-step p {

    margin:
        0;

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

    line-height:
        1.6;

}



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

.portfolio-cta {

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

}


.portfolio-cta-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-xl);

    padding:
        clamp(2rem, 6vw, 5rem);

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

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

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

}


.portfolio-cta h2 {

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

    max-width:
        700px;

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

    line-height:
        1;

    letter-spacing:
        -0.04em;

}


.portfolio-cta p {

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

}



/* =================================
   INVESTIGATION MODAL
================================= */

.case-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        1rem;

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

    backdrop-filter:
        blur(10px);

}


.case-modal[hidden] {

    display:
        none;

}


.case-modal-content {

    position:
        relative;

    width:
        min(1000px, 100%);

    max-height:
        92vh;

    overflow-y:
        auto;

    padding:
        clamp(1.5rem, 4vw, 4rem);

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

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

    background:
        var(--color-bg);

}


.case-modal-close {

    position:
        sticky;

    top:
        0;

    float:
        right;

    z-index:
        5;

    width:
        42px;

    height:
        42px;

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

    border-radius:
        50%;

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

    color:
        var(--color-text);

    font-size:
        1.3rem;

    cursor:
        pointer;

}


.case-modal-header {

    padding-right:
        3rem;

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

}


.case-modal-header .eyebrow {

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

}


.case-modal-header h2 {

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

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

    line-height:
        0.98;

    letter-spacing:
        -0.045em;

}


.case-modal-header p {

    max-width:
        760px;

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

    line-height:
        1.8;

}



/* =================================
   MODAL FILE META
================================= */

.modal-file-meta {

    display:
        grid;

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

    gap:
        var(--space-sm);

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

}


.modal-highlight {

    padding:
        var(--space-md);

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

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

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

}


.modal-highlight span {

    display:
        block;

    margin-bottom:
        0.4rem;

    font-size:
        0.7rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

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

}


.modal-highlight strong {

    font-size:
        1rem;

}



/* =================================
   MODAL SECTIONS
================================= */

.modal-section {

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

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

}


.modal-section h3 {

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

    font-size:
        1.35rem;

}


.modal-section p {

    max-width:
        780px;

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

    line-height:
        1.85;

}


.modal-section strong {

    color:
        var(--color-text);

}


.modal-quote {

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

    padding:
        var(--space-md);

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

    color:
        var(--color-text);

    font-size:
        1.15rem;

    font-weight:
        700;

    line-height:
        1.6;

}


.journey {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        0.5rem;

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

}


.journey-step {

    padding:
        0.65rem 0.8rem;

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

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

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

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

}


.journey-arrow {

    color:
        var(--color-primary);

    font-weight:
        900;

}


.leak-list {

    display:
        grid;

    gap:
        var(--space-md);

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

}


.leak-item {

    padding:
        var(--space-lg);

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

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

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

}


.leak-item-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        1rem;

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

}


.leak-number {

    color:
        var(--color-primary);

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

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.leak-item h4 {

    margin-top:
        0.3rem;

    font-size:
        1.35rem;

}


.leak-severity {

    padding:
        0.35rem 0.55rem;

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

    border-radius:
        999px;

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        var(--color-primary);

}


.leak-detail {

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

}


.leak-detail-label {

    display:
        block;

    margin-bottom:
        0.25rem;

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    color:
        var(--color-primary);

}


.leak-detail p {

    margin:
        0;

    line-height:
        1.75;

}



/* =================================
   MODAL CONCLUSION
================================= */

.modal-conclusion {

    padding:
        var(--space-lg);

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

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

}


.modal-conclusion .eyebrow {

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

}


.modal-conclusion h3 {

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

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

}


.modal-conclusion p {

    margin:
        0;

    max-width:
        800px;

}



/* =================================
   RESPONSIVE
================================= */

@media (max-width: 900px) {

    .portfolio-hero-grid {

        grid-template-columns:
            1fr;

    }


    .portfolio-hero-visual {

        justify-content:
            flex-start;

    }


    .section-heading {

        grid-template-columns:
            1fr;

        gap:
            var(--space-md);

    }


    .method-grid {

        grid-template-columns:
            1fr;

    }


    .portfolio-cta-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


@media (max-width: 700px) {

    .stats-grid {

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

    }


    .stat-card:nth-child(2) {

        border-right:
            none;

    }


    .stat-card:nth-child(3),
    .stat-card:nth-child(4) {

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

    }


    .case-studies-grid {

        grid-template-columns:
            1fr;

    }


    .modal-file-meta {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 600px) {

    .portfolio-hero {

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

    }


    .portfolio-hero-actions {

        flex-direction:
            column;

    }


    .portfolio-hero-actions .btn {

        width:
            100%;

    }


    .case-card-meta {

        grid-template-columns:
            1fr;

    }


    .method-step {

        grid-template-columns:
            50px 1fr;

    }


    .portfolio-cta-inner {

        padding:
            var(--space-lg);

    }


    .investigation-notice {

        align-items:
            flex-start;

    }


    .case-modal {

        padding:
            0;

    }


    .case-modal-content {

        max-height:
            100vh;

        border-radius:
            0;

        border-left:
            none;

        border-right:
            none;

    }


    .leak-item {

        padding:
            var(--space-md);

    }


    .leak-item-header {

        flex-direction:
            column;

    }

}