/* P-021P2 PORTFOLIO V2 */

.pp-body {
    margin:0;
    min-width:320px;
    background:#02080e;
    color:#eaf3f5;
}

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

.pp-main a {
    color:inherit;
}

.pp-hero {
    position:relative;
    overflow:hidden;
    padding:clamp(80px,9vw,138px) 0 clamp(72px,8vw,112px);
    border-bottom:1px solid rgba(84,218,228,.09);
    background:
        radial-gradient(700px 360px at 82% 28%,rgba(84,218,228,.075),transparent 70%),
        radial-gradient(560px 330px at 15% 75%,rgba(121,89,223,.065),transparent 72%),
        #02080e;
}

.pp-hero::before {
    content:"";
    position:absolute;
    top:0;
    inset-inline-end:12%;
    width:38%;
    height:1px;
    background:linear-gradient(90deg,transparent,#54dae4,#7959df,transparent);
}

.pp-hero-grid {
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
    gap:clamp(48px,8vw,110px);
    align-items:end;
}

.pp-kicker,
.pp-section-head span,
.pp-archive-head span,
.pp-seo-panel > span {
    display:block;
    margin-bottom:18px;
    color:#54dae4;
    direction:ltr;
    text-align:right;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.16em;
}

.pp-hero h1 {
    max-width:790px;
    margin:0;
    color:#f5fafb;
    font-size:clamp(2.7rem,5.4vw,5.6rem);
    line-height:1.18;
    letter-spacing:-.055em;
}

.pp-hero h1 strong {
    display:block;
    color:#d7ab66;
    font-weight:700;
}

.pp-hero p {
    max-width:720px;
    margin:30px 0 0;
    color:#91a7b0;
    font-size:clamp(.94rem,1.3vw,1.08rem);
    line-height:2.05;
}

.pp-hero p a {
    color:#cdeef1;
    text-decoration-color:rgba(84,218,228,.35);
    text-underline-offset:4px;
}

.pp-metrics {
    border-inline-start:1px solid rgba(84,218,228,.14);
}

.pp-metrics div {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    padding:22px 0 22px 28px;
    border-bottom:1px solid rgba(255,255,255,.055);
}

.pp-metrics strong {
    color:#eef8f9;
    direction:ltr;
    font-size:2rem;
    font-weight:500;
}

.pp-metrics span {
    color:#728992;
    font-size:.76rem;
}

.pp-selected,
.pp-archive {
    padding:clamp(82px,9vw,132px) 0;
}

.pp-section-head {
    display:grid;
    grid-template-columns:1fr minmax(300px,.72fr);
    gap:70px;
    margin-bottom:58px;
    align-items:end;
}

.pp-section-head h2,
.pp-archive-head h2 {
    margin:0;
    color:#edf5f7;
    font-size:clamp(1.8rem,3vw,3rem);
    line-height:1.35;
}

.pp-section-head p,
.pp-archive-head p {
    margin:0;
    color:#7f949e;
    font-size:.88rem;
    line-height:2;
}

.pp-featured-grid {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:26px;
}

.pp-featured-grid .pp-project:first-child {
    grid-row:span 2;
}

.pp-project {
    min-width:0;
    border:1px solid rgba(255,255,255,.065);
    background:#041019;
}

.pp-project-image {
    position:relative;
    display:block;
    overflow:hidden;
    aspect-ratio:16/10;
    border-bottom:1px solid rgba(84,218,228,.10);
    background:#07141c;
}

.pp-featured-grid .pp-project:first-child .pp-project-image {
    aspect-ratio:4/3;
}

.pp-project-image img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:top center;
}

.pp-project-index {
    position:absolute;
    inset-inline-start:16px;
    bottom:14px;
    padding:6px 8px;
    border:1px solid rgba(84,218,228,.24);
    background:#02080ee8;
    color:#cbeff2;
    direction:ltr;
    font-size:.61rem;
    letter-spacing:.12em;
}

.pp-project-copy {
    padding:25px 25px 27px;
}

.pp-type {
    color:#54dae4;
    font-size:.67rem;
    font-weight:700;
}

.pp-project h2 {
    margin:10px 0 11px;
    color:#eaf3f5;
    font-size:1.02rem;
    line-height:1.65;
}

.pp-project p {
    margin:0;
    color:#768d97;
    font-size:.76rem;
    line-height:1.95;
}

.pp-view {
    display:inline-block;
    margin-top:20px;
    color:#c3d8dd !important;
    font-size:.72rem;
    text-decoration:none;
}

.pp-archive {
    border-top:1px solid rgba(255,255,255,.045);
    background:
        radial-gradient(650px 300px at 86% 20%,rgba(121,89,223,.04),transparent 72%),
        #02070d;
}

.pp-archive-head {
    max-width:680px;
    margin-bottom:50px;
}

.pp-archive-head p {
    margin-top:15px;
}

.pp-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.pp-grid .pp-project {
    display:grid;
    grid-template-columns:minmax(180px,.9fr) minmax(0,1.1fr);
}

.pp-grid .pp-project-image {
    height:100%;
    min-height:275px;
    aspect-ratio:auto;
    border-bottom:0;
    border-inline-end:1px solid rgba(84,218,228,.09);
}

.pp-grid .pp-project-copy {
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.pp-seo-bridge {
    padding:0 0 clamp(90px,10vw,150px);
    background:#02070d;
}

.pp-seo-panel {
    position:relative;
    overflow:hidden;
    padding:clamp(42px,6vw,76px);
    border:1px solid rgba(84,218,228,.16);
    background:
        radial-gradient(520px 240px at 88% 18%,rgba(84,218,228,.07),transparent 72%),
        linear-gradient(135deg,#06141d,#040b12);
}

.pp-seo-panel::before {
    content:"";
    position:absolute;
    top:0;
    inset-inline-start:8%;
    width:220px;
    height:1px;
    background:linear-gradient(90deg,transparent,#d7ab66,#54dae4,transparent);
}

.pp-seo-panel h2 {
    max-width:720px;
    margin:0;
    color:#eef7f8;
    font-size:clamp(1.8rem,3.6vw,3.7rem);
    line-height:1.4;
}

.pp-seo-panel p {
    max-width:670px;
    margin:25px 0 0;
    color:#849aa4;
    font-size:.88rem;
    line-height:2.05;
}

.pp-actions {
    display:flex;
    gap:12px;
    margin-top:34px;
}

.pp-primary,
.pp-secondary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 20px;
    border-radius:10px;
    font-size:.77rem;
    font-weight:700;
    text-decoration:none;
}

.pp-primary {
    border:1px solid rgba(84,218,228,.40);
    background:rgba(84,218,228,.09);
    color:#dff8fa !important;
}

.pp-secondary {
    border:1px solid rgba(255,255,255,.08);
    color:#a7bac1 !important;
}

@media(max-width:900px) {
    .pp-hero-grid,
    .pp-section-head {
        grid-template-columns:1fr;
    }

    .pp-metrics {
        border-inline-start:0;
        border-top:1px solid rgba(84,218,228,.14);
    }

    .pp-featured-grid {
        grid-template-columns:1fr;
    }

    .pp-featured-grid .pp-project:first-child {
        grid-row:auto;
    }

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

@media(max-width:620px) {
    .pp-shell {
        width:min(100% - 24px,1180px);
    }

    .pp-hero {
        padding-top:64px;
    }

    .pp-grid .pp-project {
        display:block;
    }

    .pp-grid .pp-project-image {
        min-height:0;
        aspect-ratio:16/10;
        border-inline-end:0;
    }

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


/* ==========================================================
   P-021P3 FULLSHOT HOVER SCROLL
   Reuse proven Portfolio interaction
   ========================================================== */

@media (min-width:769px) {

    .pp-project-image,
    .pp-featured-grid .pp-project:first-child .pp-project-image,
    .pp-grid .pp-project-image {

        display:block;

        height:380px !important;
        min-height:380px !important;

        overflow:hidden !important;

        aspect-ratio:auto !important;

        background:#07141c;
    }


    .pp-project-image img {

        display:block !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        object-fit:initial !important;
        object-position:top center !important;

        transform:translateY(0) !important;

        transition:
            transform 24s linear !important;

        will-change:transform;
    }


    .pp-project-image:hover img {

        transform:
            translateY(calc(-100% + 380px)) !important;
    }

}


/* Mobile: static / performance safe */

@media (max-width:768px) {

    .pp-project-image,
    .pp-featured-grid .pp-project:first-child .pp-project-image,
    .pp-grid .pp-project-image {

        height:300px !important;
        min-height:300px !important;

        overflow:hidden !important;

        aspect-ratio:auto !important;
    }


    .pp-project-image img,
    .pp-project-image:hover img {

        width:100% !important;
        height:auto !important;

        transform:none !important;
        transition:none !important;
    }

}


/* END P-021P3 */


/* ========================================================
   P032B PORTFOLIO SIGNATURE POLISH
   ======================================================== */

.pp-main{
    background:#030c13;
}


/* HERO */

.pp-hero{
    padding:
        clamp(92px,9vw,140px) 0
        clamp(96px,10vw,150px) !important;

    background:
        linear-gradient(
            135deg,
            #06141d 0%,
            #051019 58%,
            #130b18 100%
        ) !important;
}

.pp-hero-grid{
    grid-template-columns:
        minmax(0,1.28fr)
        minmax(300px,.72fr) !important;

    gap:
        clamp(55px,8vw,115px) !important;

    align-items:center !important;
}

.pp-kicker,
.pp-section-head span,
.pp-archive-head span,
.pp-seo-panel > span{
    direction:rtl !important;

    color:#63dce6 !important;

    font-size:12px !important;

    letter-spacing:0 !important;
}

.pp-hero h1{
    max-width:850px !important;

    font-size:
        clamp(3rem,5.5vw,5.8rem) !important;

    line-height:1.27 !important;
}

.pp-hero h1 strong{
    color:#d8aa62 !important;

    margin-top:5px;
}

.pp-hero p{
    max-width:760px !important;

    margin-top:28px !important;

    color:#a4b7be !important;

    font-size:
        clamp(15.5px,1.15vw,17px) !important;

    line-height:2.08 !important;
}


/* METRICS */

.pp-metrics{
    padding:
        15px 0;

    border-inline-start:
        1px solid rgba(216,170,98,.20) !important;
}

.pp-metrics div{
    padding:
        24px 0 24px 30px !important;
}

.pp-metrics strong{
    color:#edf6f7 !important;

    font-size:
        clamp(2.8rem,4.3vw,4.5rem) !important;

    font-weight:250 !important;
}

.pp-metrics span{
    color:#8ca1a9 !important;

    font-size:13px !important;
}


/* SECTIONS */

.pp-selected,
.pp-archive{
    padding:
        clamp(95px,10vw,150px) 0 !important;
}

.pp-section-head{
    grid-template-columns:
        minmax(0,1fr)
        minmax(320px,.65fr) !important;

    gap:
        clamp(45px,7vw,95px) !important;

    margin-bottom:
        clamp(45px,6vw,72px) !important;
}

.pp-section-head h2,
.pp-archive-head h2{
    font-size:
        clamp(2.1rem,3.7vw,3.8rem) !important;

    line-height:1.45 !important;
}

.pp-section-head p,
.pp-archive-head p{
    color:#91a5ad !important;

    font-size:15px !important;

    line-height:2.05 !important;
}


/* FEATURED — EDITORIAL */

.pp-featured-grid{
    grid-template-columns:
        minmax(0,1.16fr)
        minmax(0,.84fr) !important;

    gap:22px !important;
}

.pp-project{
    position:relative;

    border:
        1px solid rgba(91,217,228,.10) !important;

    background:#06141d !important;
}

.pp-featured{
    background:
        linear-gradient(
            145deg,
            #071923,
            #061119
        ) !important;
}

.pp-project-image{
    border-bottom:
        1px solid rgba(91,217,228,.10) !important;

    background:#031018 !important;
}

.pp-project-index{
    left:auto !important;

    inset-inline-start:18px !important;

    bottom:18px !important;

    padding:7px 10px !important;

    border:
        1px solid rgba(216,170,98,.30) !important;

    background:
        rgba(3,12,18,.92) !important;

    color:#d8aa62 !important;

    font-size:11px !important;
}

.pp-project-copy{
    padding:
        29px 28px 31px !important;
}

.pp-type{
    color:#60dce6 !important;

    font-size:12px !important;

    font-weight:750 !important;
}

.pp-project h2{
    margin:
        12px 0 13px !important;

    color:#e6f0f2 !important;

    font-size:
        19px !important;

    line-height:1.65 !important;
}

.pp-project p{
    color:#8fa3ab !important;

    font-size:
        14.5px !important;

    line-height:2 !important;
}

.pp-view{
    margin-top:22px !important;

    color:#d1e5e8 !important;

    font-size:13px !important;

    font-weight:650;
}


/* FEATURED FIRST PROJECT */

.pp-featured-grid .pp-project:first-child
.pp-project-copy{
    padding:
        34px 32px 37px !important;
}

.pp-featured-grid .pp-project:first-child h2{
    font-size:
        clamp(1.3rem,2vw,1.7rem) !important;
}


/* ARCHIVE */

.pp-archive{
    border-top:
        1px solid rgba(255,255,255,.045);

    background:#020a10 !important;
}

.pp-archive-head{
    max-width:760px !important;

    margin-bottom:
        clamp(45px,6vw,70px) !important;
}

.pp-grid{
    gap:18px !important;
}

.pp-grid .pp-project{
    grid-template-columns:
        minmax(200px,.95fr)
        minmax(0,1.05fr) !important;

    min-height:320px;
}

.pp-grid .pp-project-copy{
    padding:
        28px 25px !important;
}


/* subtle alternating rhythm */

.pp-grid .pp-project:nth-child(4n+2),
.pp-grid .pp-project:nth-child(4n+3){
    background:#071721 !important;
}


/* FINAL PROJECT GATEWAY */

.pp-seo-bridge{
    padding:
        clamp(90px,9vw,130px) 0
        clamp(110px,11vw,165px) !important;

    background:#020a10 !important;
}

.pp-seo-panel{
    padding:
        clamp(46px,6vw,78px) !important;

    border:
        1px solid rgba(216,170,98,.15) !important;

    background:
        linear-gradient(
            135deg,
            rgba(16,34,43,.92),
            rgba(17,10,19,.82)
        ) !important;
}

.pp-seo-panel h2{
    max-width:800px !important;

    font-size:
        clamp(2.2rem,4vw,4.15rem) !important;
}

.pp-seo-panel p{
    color:#93a7af !important;

    font-size:15px !important;
}

.pp-primary,
.pp-secondary{
    min-height:48px !important;

    font-size:13px !important;
}

.pp-primary{
    background:
        linear-gradient(
            180deg,
            #67dfe8,
            #53cdd8
        ) !important;

    color:#04161e !important;
}


/* HOVER SCROLL — retain existing proven behavior */

@media(min-width:769px){

    .pp-project-image{
        height:410px !important;
        min-height:410px !important;
    }

    .pp-project-image:hover img{
        transform:
            translateY(calc(-100% + 410px)) !important;
    }

}


/* TABLET */

@media(max-width:900px){

    .pp-hero-grid,
    .pp-section-head{
        grid-template-columns:
            minmax(0,1fr) !important;
    }

    .pp-metrics{
        border-inline-start:0 !important;

        border-top:
            1px solid rgba(216,170,98,.18) !important;
    }

    .pp-featured-grid,
    .pp-grid{
        grid-template-columns:
            minmax(0,1fr) !important;
    }

}


/* MOBILE */

@media(max-width:620px){

    .pp-shell{
        width:
            min(100% - 24px,1180px) !important;
    }

    .pp-hero{
        padding:
            64px 0 78px !important;
    }

    .pp-hero h1{
        font-size:
            clamp(2.35rem,10.5vw,3.4rem) !important;
    }

    .pp-metrics div{
        padding:
            18px 0 !important;
    }

    .pp-metrics strong{
        font-size:2.4rem !important;
    }

    .pp-selected,
    .pp-archive{
        padding:
            72px 0 !important;
    }

    .pp-project h2{
        font-size:18px !important;
    }

    .pp-project p{
        font-size:14px !important;
    }

    .pp-project-copy,
    .pp-featured-grid .pp-project:first-child
    .pp-project-copy{
        padding:
            25px 21px 27px !important;
    }

    .pp-seo-bridge{
        padding:
            70px 0 90px !important;
    }

    .pp-seo-panel{
        padding:
            30px 22px !important;
    }

}

/* END P032B */


/* ========================================================
   P032C PORTFOLIO ARCHIVE READABILITY
   ======================================================== */


/* More breathing room between archive projects */

.pp-grid{
    gap:22px !important;
}


/* Stronger horizontal project cards */

.pp-grid .pp-project{
    grid-template-columns:
        minmax(235px,.95fr)
        minmax(0,1.05fr) !important;

    min-height:340px !important;
}


/* Archive image viewport */

@media(min-width:769px){

    .pp-grid .pp-project-image{
        height:340px !important;
        min-height:340px !important;
    }

    .pp-grid .pp-project-image:hover img{
        transform:
            translateY(calc(-100% + 340px)) !important;
    }

}


/* Archive copy */

.pp-grid .pp-project-copy{
    padding:
        32px 29px !important;
}

.pp-grid .pp-type{
    font-size:
        12.5px !important;

    line-height:
        1.8 !important;
}

.pp-grid .pp-project h2{
    margin:
        12px 0 14px !important;

    font-size:
        19px !important;

    line-height:
        1.75 !important;
}

.pp-grid .pp-project p{
    color:
        #93a7af !important;

    font-size:
        14.5px !important;

    line-height:
        2.05 !important;
}

.pp-grid .pp-view{
    margin-top:
        23px !important;

    font-size:
        13px !important;
}


/* Project number slightly more visible */

.pp-grid .pp-project-index{
    font-size:
        11.5px !important;

    color:
        #d8aa62 !important;
}


/* Keep section from feeling like one continuous table */

.pp-grid .pp-project:nth-child(odd){
    border-color:
        rgba(84,218,228,.12) !important;
}

.pp-grid .pp-project:nth-child(even){
    border-color:
        rgba(216,170,98,.10) !important;
}


/* Tablet */

@media(max-width:1000px){

    .pp-grid .pp-project{
        grid-template-columns:
            minmax(220px,.9fr)
            minmax(0,1.1fr) !important;
    }

}


/* Mobile */

@media(max-width:620px){

    .pp-grid .pp-project{
        display:block !important;

        min-height:0 !important;
    }

    .pp-grid .pp-project-image{
        height:300px !important;

        min-height:300px !important;
    }

    .pp-grid .pp-project-copy{
        padding:
            25px 21px 28px !important;
    }

    .pp-grid .pp-project h2{
        font-size:
            18px !important;
    }

    .pp-grid .pp-project p{
        font-size:
            14px !important;
    }

}

/* END P032C */


/* ========================================================
   P032D PORTFOLIO EDITORIAL CASE STUDY
   Visual-first / case-study-first
   ======================================================== */


/* --------------------------------------------------------
   HERO — more intentional / less dashboard-like
   -------------------------------------------------------- */

.pp-hero{
    min-height:620px;

    display:flex;
    align-items:center;
}

.pp-hero-grid{
    align-items:center !important;
}

.pp-metrics{
    position:relative;

    padding:
        18px 0 18px 32px !important;
}

.pp-metrics::before{
    content:"نمایه پروژه‌ها";

    display:block;

    margin-bottom:13px;

    color:#536e79;

    font-size:9px;

    letter-spacing:.14em;

    direction:ltr;
}

.pp-metrics div{
    min-height:86px;

    padding:
        18px 0 !important;
}

.pp-metrics strong{
    min-width:82px;

    text-align:left;

    line-height:1;
}

.pp-metrics span{
    flex:1;

    text-align:right;
}


/* ========================================================
   FEATURED CASE STUDIES
   Three large editorial stories
   ======================================================== */

.pp-selected{
    background:#041019 !important;
}

.pp-featured-grid{
    display:grid !important;

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

    gap:
        clamp(28px,4vw,42px) !important;
}


/* reset old masonry behavior */

.pp-featured-grid .pp-project:first-child{
    grid-row:auto !important;
}


/* full editorial row */

.pp-featured-grid .pp-project{
    display:grid !important;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(320px,.65fr) !important;

    min-height:520px;

    overflow:hidden;

    border:
        1px solid rgba(93,218,229,.11) !important;

    background:
        linear-gradient(
            125deg,
            #071923,
            #051019
        ) !important;
}


/* alternate image / copy */

.pp-featured-grid
.pp-project:nth-child(even)
.pp-project-image{
    grid-column:2;
    grid-row:1;
}

.pp-featured-grid
.pp-project:nth-child(even)
.pp-project-copy{
    grid-column:1;
    grid-row:1;
}


/* large project viewport */

@media(min-width:769px){

    .pp-featured-grid .pp-project-image{
        height:520px !important;

        min-height:520px !important;

        border-bottom:0 !important;

        border-inline-end:
            1px solid rgba(84,218,228,.09);
    }

    .pp-featured-grid
    .pp-project:nth-child(even)
    .pp-project-image{
        border-inline-end:0;

        border-inline-start:
            1px solid rgba(84,218,228,.09);
    }

    .pp-featured-grid
    .pp-project-image:hover img{
        transform:
            translateY(calc(-100% + 520px)) !important;
    }

}


/* featured copy */

.pp-featured-grid .pp-project-copy{
    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        clamp(40px,5vw,66px) !important;
}

.pp-featured-grid .pp-project-copy::before{
    content:"روایت پروژه";

    display:block;

    margin-bottom:22px;

    color:#597680;

    font-size:9px;

    font-weight:750;

    letter-spacing:.15em;

    direction:ltr;
}

.pp-featured-grid .pp-type{
    font-size:13px !important;
}

.pp-featured-grid .pp-project h2{
    max-width:470px;

    margin:
        14px 0 18px !important;

    font-size:
        clamp(1.55rem,2.5vw,2.35rem) !important;

    line-height:1.55 !important;

    letter-spacing:-.025em;
}

.pp-featured-grid .pp-project p{
    max-width:470px;

    font-size:15px !important;

    line-height:2.05 !important;
}

.pp-featured-grid .pp-view{
    margin-top:30px !important;

    padding-top:16px;

    border-top:
        1px solid rgba(255,255,255,.055);

    font-size:13px !important;
}


/* ========================================================
   ARCHIVE — visual-first cards
   ======================================================== */

.pp-archive{
    background:#020a10 !important;
}

.pp-archive-head{
    max-width:820px !important;
}


/* taxonomy */

.pp-archive-tags{
    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:26px;
}

.pp-archive-tags span{
    display:inline-flex;

    align-items:center;

    min-height:30px;

    padding:0 11px;

    border:
        1px solid rgba(84,218,228,.10);

    background:#06141c;

    color:#728a94;

    font-size:11px;
}


/* two strong visual columns */

.pp-grid{
    display:grid !important;

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

    gap:
        24px !important;
}


/* remove compact horizontal style */

.pp-grid .pp-project{
    display:block !important;

    min-height:0 !important;

    overflow:hidden;

    background:#06141d !important;
}


/* archive image now dominates */

@media(min-width:769px){

    .pp-grid .pp-project-image{
        height:430px !important;

        min-height:430px !important;

        width:100%;

        border-inline-end:0 !important;

        border-bottom:
            1px solid rgba(84,218,228,.09) !important;
    }

    .pp-grid
    .pp-project-image:hover img{
        transform:
            translateY(calc(-100% + 430px)) !important;
    }

}


/* copy behaves like museum/project caption */

.pp-grid .pp-project-copy{
    min-height:235px;

    display:flex !important;

    flex-direction:column;

    justify-content:flex-start !important;

    padding:
        29px 28px 31px !important;
}

.pp-grid .pp-type{
    font-size:12px !important;
}

.pp-grid .pp-project h2{
    max-width:470px;

    margin:
        11px 0 12px !important;

    font-size:
        19px !important;

    line-height:1.7 !important;
}

.pp-grid .pp-project p{
    max-width:500px;

    font-size:
        14px !important;

    line-height:
        2 !important;
}

.pp-grid .pp-view{
    margin-top:auto !important;

    padding-top:20px;

    font-size:12.5px !important;
}


/* subtle gallery rhythm */

.pp-grid .pp-project:nth-child(4n+1),
.pp-grid .pp-project:nth-child(4n+4){
    background:#071821 !important;
}

.pp-grid .pp-project:nth-child(4n+2),
.pp-grid .pp-project:nth-child(4n+3){
    background:#06131b !important;
}


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

.pp-seo-panel{
    display:grid;

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

    column-gap:
        clamp(40px,7vw,90px);

    align-items:end;
}

.pp-seo-panel > span,
.pp-seo-panel > h2,
.pp-seo-panel > p{
    grid-column:1;
}

.pp-actions{
    grid-column:2;

    grid-row:1 / span 4;

    align-self:end;

    margin-top:0 !important;

    flex-direction:column;

    min-width:185px;
}

.pp-actions a{
    width:100%;
}


/* ========================================================
   TABLET
   ======================================================== */

@media(max-width:900px){

    .pp-hero{
        min-height:0;
    }

    .pp-featured-grid .pp-project{
        grid-template-columns:
            minmax(0,1fr) !important;

        min-height:0;
    }

    .pp-featured-grid
    .pp-project:nth-child(even)
    .pp-project-image,
    .pp-featured-grid
    .pp-project:nth-child(even)
    .pp-project-copy{
        grid-column:auto;
        grid-row:auto;
    }

    .pp-grid{
        grid-template-columns:
            minmax(0,1fr) !important;
    }

    .pp-seo-panel{
        display:block;
    }

    .pp-actions{
        margin-top:32px !important;

        flex-direction:row;

        min-width:0;
    }

}


/* ========================================================
   MOBILE
   ======================================================== */

@media(max-width:620px){

    .pp-metrics{
        padding:
            15px 0 !important;
    }

    .pp-metrics::before{
        margin-bottom:8px;
    }

    .pp-featured-grid{
        gap:18px !important;
    }

    .pp-featured-grid .pp-project-image,
    .pp-grid .pp-project-image{
        height:310px !important;

        min-height:310px !important;
    }

    .pp-featured-grid .pp-project-copy{
        padding:
            29px 22px 32px !important;
    }

    .pp-featured-grid
    .pp-project h2{
        font-size:
            1.55rem !important;
    }

    .pp-featured-grid
    .pp-project p{
        font-size:
            14px !important;
    }

    .pp-grid .pp-project-copy{
        min-height:0;

        padding:
            25px 21px 28px !important;
    }

    .pp-archive-tags{
        gap:6px;
    }

    .pp-archive-tags span{
        font-size:10.5px;
    }

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

}

/* END P032D */


/* ========================================================
   P032E PORTFOLIO APPROVED THEME
   Navy / Teal / Cyan / Aubergine / Gold
   ======================================================== */


.pp-main{
    --pp-navy:#061722;
    --pp-navy-2:#081e2a;
    --pp-navy-3:#0a2531;
    --pp-navy-4:#0d2a36;

    --pp-teal:#2d9b9c;
    --pp-cyan:#58d8e2;
    --pp-violet:#8b6cc7;
    --pp-gold:#d8aa62;

    background:
        var(--pp-navy) !important;

    color:#edf5f6;
}


/* --------------------------------------------------------
   PAGE BACKGROUNDS — REMOVE BLACK FEEL
   -------------------------------------------------------- */

.pp-hero{
    background:
        linear-gradient(
            125deg,
            #071b27 0%,
            #08202b 62%,
            #1b1020 100%
        ) !important;

    border-bottom:
        1px solid rgba(88,216,226,.13) !important;
}

.pp-selected{
    background:
        #071b26 !important;
}

.pp-archive{
    background:
        #061722 !important;

    border-top:
        1px solid rgba(88,216,226,.09) !important;
}

.pp-seo-bridge{
    background:
        #071923 !important;
}


/* --------------------------------------------------------
   REMOVE ENGLISH UI REMNANTS
   -------------------------------------------------------- */

.pp-metrics::before{
    content:"نمایه پروژه‌ها" !important;

    direction:rtl !important;

    text-align:right !important;

    letter-spacing:0 !important;

    color:#71a7aa !important;

    font-size:12px !important;

    font-weight:700;
}

.pp-featured-grid
.pp-project-copy::before{
    content:"روایت پروژه" !important;

    direction:rtl !important;

    letter-spacing:0 !important;

    color:#70aeb0 !important;

    font-size:12px !important;
}


/* --------------------------------------------------------
   TYPOGRAPHY REVIEW
   -------------------------------------------------------- */

.pp-kicker,
.pp-section-head span,
.pp-archive-head span,
.pp-seo-panel > span{
    font-size:
        13px !important;

    font-weight:
        750 !important;
}

.pp-hero p{
    font-size:
        clamp(16px,1.12vw,17.5px) !important;

    color:
        #b0c1c7 !important;
}

.pp-section-head h2,
.pp-archive-head h2{
    font-size:
        clamp(2.25rem,3.8vw,3.9rem) !important;
}

.pp-section-head p,
.pp-archive-head p{
    font-size:
        15.5px !important;

    color:
        #9db0b7 !important;
}

.pp-type{
    font-size:
        13px !important;
}

.pp-project h2{
    font-size:
        20px !important;

    line-height:
        1.7 !important;
}

.pp-project p{
    font-size:
        15px !important;

    line-height:
        2.05 !important;

    color:
        #9aadb4 !important;
}

.pp-view{
    font-size:
        13.5px !important;
}


/* ========================================================
   CATEGORY NAVIGATION
   ======================================================== */

.pp-category-nav{
    position:sticky;

    top:68px;

    z-index:30;

    padding:
        14px 0;

    background:
        rgba(6,23,34,.97);

    border-bottom:
        1px solid rgba(88,216,226,.12);
}

.pp-category-nav-inner{
    display:grid;

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

    gap:
        8px;
}

.pp-cat{
    --cat:#58d8e2;

    min-width:0;

    min-height:68px;

    display:flex;

    align-items:center;

    gap:11px;

    padding:
        10px 13px;

    border:
        1px solid color-mix(
            in srgb,
            var(--cat) 25%,
            transparent
        );

    border-radius:
        12px;

    background:
        #0a2531;

    color:
        #dce9eb !important;

    text-decoration:none;

    scroll-margin-top:
        150px;
}

.pp-cat svg{
    width:25px;

    height:25px;

    flex:
        0 0 25px;

    fill:none;

    stroke:
        var(--cat);

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.pp-cat span{
    min-width:0;

    display:grid;

    gap:3px;
}

.pp-cat b{
    font-size:
        13px;

    font-weight:
        750;

    line-height:
        1.5;
}

.pp-cat small{
    color:
        #758f99;

    font-size:
        10px;

    line-height:
        1.5;
}

.pp-cat:hover,
.pp-cat:focus-visible{
    background:
        #0c2b37;

    border-color:
        var(--cat);

    color:#fff !important;
}


.pp-cat-all{
    --cat:#58d8e2;
}

.pp-cat-industrial{
    --cat:#36a7a3;
}

.pp-cat-health{
    --cat:#57c7d8;
}

.pp-cat-shop{
    --cat:#d8aa62;
}

.pp-cat-service{
    --cat:#628bc7;
}

.pp-cat-corporate{
    --cat:#8b6cc7;
}

.pp-cat-tech{
    --cat:#4eb69f;
}

.pp-cat-tourism{
    --cat:#c88f63;
}


/* ========================================================
   FEATURED CASE STUDIES — SEPARATED CARDS
   ======================================================== */

.pp-featured-grid{
    gap:
        28px !important;
}

.pp-featured-grid .pp-project{
    --feature:#36a7a3;

    overflow:hidden;

    border:
        1px solid rgba(54,167,163,.40) !important;

    border-radius:
        22px;

    background:
        #0a2531 !important;

    box-shadow:
        0 18px 42px rgba(1,11,17,.20);
}

.pp-featured-grid
.pp-project:nth-child(2){
    --feature:#8b6cc7;

    border-color:
        rgba(139,108,199,.38) !important;

    background:
        #0c2230 !important;
}

.pp-featured-grid
.pp-project:nth-child(3){
    --feature:#d8aa62;

    border-color:
        rgba(216,170,98,.36) !important;

    background:
        #09232d !important;
}

.pp-featured-grid
.pp-project::before{
    content:"";

    position:absolute;

    z-index:4;

    top:0;

    right:0;

    left:0;

    height:3px;

    background:
        var(--feature);
}

.pp-featured-grid
.pp-project-image{
    background:
        #061722 !important;
}

.pp-featured-grid
.pp-project-copy{
    background:
        linear-gradient(
            145deg,
            rgba(10,37,49,.98),
            rgba(8,29,40,.98)
        );
}

.pp-featured-grid .pp-type{
    color:
        var(--feature) !important;
}

.pp-featured-grid .pp-project h2{
    font-size:
        clamp(1.65rem,2.45vw,2.35rem) !important;

    color:
        #f0f5f6 !important;
}

.pp-featured-grid .pp-project p{
    font-size:
        15.5px !important;

    color:
        #a7b8be !important;
}


/* ========================================================
   ARCHIVE GROUPING
   ======================================================== */

.pp-grouped-grid{
    display:block !important;
}

.pp-category-group{
    --group:#58d8e2;

    scroll-margin-top:
        165px;

    padding:
        34px;

    margin-bottom:
        34px;

    border:
        1px solid rgba(88,216,226,.16);

    border-radius:
        22px;

    background:
        #081e2a;
}

.pp-category-industrial{
    --group:#36a7a3;
}

.pp-category-health{
    --group:#57c7d8;
}

.pp-category-shop{
    --group:#d8aa62;
}

.pp-category-service{
    --group:#628bc7;
}

.pp-category-corporate{
    --group:#8b6cc7;
}

.pp-category-tech{
    --group:#4eb69f;
}

.pp-category-head{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:35px;

    margin-bottom:
        25px;

    padding-bottom:
        20px;

    border-bottom:
        1px solid rgba(255,255,255,.055);
}

.pp-category-head span{
    display:block;

    margin-bottom:
        7px;

    color:
        var(--group);

    font-size:
        11px;

    font-weight:
        750;
}

.pp-category-head h3{
    margin:0;

    color:
        #edf5f6;

    font-size:
        clamp(1.65rem,2.6vw,2.45rem);

    line-height:
        1.5;
}

.pp-category-head p{
    max-width:
        390px;

    margin:0;

    color:
        #849da6;

    font-size:
        13.5px;

    line-height:
        1.9;
}

.pp-category-projects{
    display:grid;

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

    gap:
        20px;
}


/* ========================================================
   PROJECT CARDS — STRONG SEPARATION
   ======================================================== */

.pp-category-projects .pp-project{
    position:relative;

    display:block !important;

    overflow:hidden;

    min-height:0 !important;

    border:
        1px solid color-mix(
            in srgb,
            var(--group) 25%,
            transparent
        ) !important;

    border-radius:
        16px;

    background:
        #0a2531 !important;
}

.pp-category-projects
.pp-project::before{
    content:"";

    position:absolute;

    z-index:5;

    top:0;

    right:0;

    width:
        72px;

    height:
        3px;

    background:
        var(--group);
}

.pp-category-projects
.pp-project-image{
    width:100%;

    background:
        #061722 !important;

    border-inline-end:
        0 !important;

    border-bottom:
        1px solid rgba(88,216,226,.10) !important;
}

.pp-category-projects
.pp-project-copy{
    min-height:
        245px;

    display:flex !important;

    flex-direction:column;

    justify-content:flex-start !important;

    padding:
        28px 27px 30px !important;

    background:
        #0a2531;
}

.pp-category-projects
.pp-type{
    color:
        var(--group) !important;
}

.pp-category-projects
.pp-project h2{
    margin:
        11px 0 13px !important;

    color:
        #edf5f6 !important;

    font-size:
        19px !important;
}

.pp-category-projects
.pp-project p{
    color:
        #99adb5 !important;

    font-size:
        14.5px !important;
}

.pp-category-projects
.pp-view{
    margin-top:
        auto !important;

    padding-top:
        20px;

    color:
        #cce1e4 !important;
}


/* project index */

.pp-project-index{
    border-color:
        rgba(216,170,98,.36) !important;

    background:
        rgba(6,23,34,.94) !important;

    color:
        #d8aa62 !important;

    font-size:
        11px !important;
}


/* --------------------------------------------------------
   DESKTOP SCREENSHOT VIEWPORT
   -------------------------------------------------------- */

@media(min-width:769px){

    .pp-category-projects
    .pp-project-image{
        height:
            400px !important;

        min-height:
            400px !important;
    }

    .pp-category-projects
    .pp-project-image:hover img{
        transform:
            translateY(
                calc(-100% + 400px)
            ) !important;
    }

}


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

.pp-seo-panel{
    border:
        1px solid rgba(88,216,226,.19) !important;

    border-radius:
        20px;

    background:
        linear-gradient(
            130deg,
            #0a2531,
            #0b202c 65%,
            #1b1020
        ) !important;
}


/* ========================================================
   TABLET
   ======================================================== */

@media(max-width:1000px){

    .pp-category-nav-inner{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* ========================================================
   MOBILE
   ======================================================== */

@media(max-width:620px){

    .pp-category-nav{
        top:
            58px;

        padding:
            10px 0;
    }

    .pp-category-nav .pp-shell{
        width:
            100% !important;
    }

    .pp-category-nav-inner{
        display:flex;

        overflow-x:auto;

        gap:
            7px;

        padding:
            0 12px 6px;

        scrollbar-width:none;
    }

    .pp-category-nav-inner::-webkit-scrollbar{
        display:none;
    }

    .pp-cat{
        flex:
            0 0 170px;

        min-height:
            61px;

        padding:
            8px 11px;
    }

    .pp-cat svg{
        width:
            22px;

        height:
            22px;
    }

    .pp-category-group{
        padding:
            22px 15px;

        margin-bottom:
            22px;

        border-radius:
            16px;
    }

    .pp-category-head{
        display:block;

        margin-bottom:
            19px;

        padding-bottom:
            16px;
    }

    .pp-category-head p{
        margin-top:
            8px;
    }

    .pp-category-projects{
        grid-template-columns:
            minmax(0,1fr);
    }

    .pp-category-projects
    .pp-project-image{
        height:
            300px !important;

        min-height:
            300px !important;
    }

    .pp-category-projects
    .pp-project-copy{
        min-height:
            0;

        padding:
            24px 20px 26px !important;
    }

    .pp-project h2{
        font-size:
            18px !important;
    }

    .pp-project p{
        font-size:
            14px !important;
    }

}

/* END P032E */


/* ========================================================
   P032E4 PORTFOLIO NAV SIGNATURE
   ======================================================== */


/* --------------------------------------------------------
   PAGE 02 SIGNATURE
   -------------------------------------------------------- */

.pp-page-signature{
    position:relative;

    display:grid;

    gap:8px;

    margin-bottom:18px;

    padding:
        0 0 25px;

    border-bottom:
        1px solid rgba(216,170,98,.18);
}

.pp-page-signature::after{
    content:"";

    position:absolute;

    right:0;
    bottom:-1px;

    width:72px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            #d8aa62,
            #58d8e2
        );
}

.pp-page-signature strong{
    display:block;

    direction:ltr;

    color:#d8aa62;

    font-size:
        clamp(4.5rem,6vw,6.6rem);

    font-weight:250;

    line-height:.84;

    letter-spacing:-.06em;
}

.pp-page-signature span{
    display:block;

    color:#edf5f6;

    font-size:
        clamp(1.35rem,2vw,1.85rem);

    font-weight:760;

    line-height:1.55;
}


/* Metrics remain secondary */

.pp-page-signature ~ div{
    padding:
        17px 0 !important;
}

.pp-page-signature ~ div strong{
    font-size:
        clamp(2rem,3vw,3rem) !important;
}


/* ========================================================
   STICKY CATEGORY NAV — ONE ROW / LESS COVERAGE
   ======================================================== */

.pp-category-nav{
    top:60px !important;

    padding:
        8px 0 !important;

    background:
        rgba(6,23,34,.985) !important;
}


/* Desktop = eight categories in one line */

@media(min-width:1001px){

    .pp-category-nav-inner{
        display:grid !important;

        grid-template-columns:
            repeat(8,minmax(0,1fr)) !important;

        gap:
            6px !important;
    }

    .pp-cat{
        min-height:
            54px !important;

        gap:
            7px !important;

        padding:
            7px 9px !important;

        border-radius:
            9px !important;
    }

    .pp-cat svg{
        width:
            20px !important;

        height:
            20px !important;

        flex:
            0 0 20px !important;
    }

    .pp-cat b{
        font-size:
            11.5px !important;

        line-height:
            1.45 !important;

        white-space:
            nowrap;
    }

    /* secondary text not needed in compact desktop rail */

    .pp-cat small{
        display:none !important;
    }

}


/* ========================================================
   TABLET — ONE HORIZONTAL RAIL, NOT 4 ROWS
   ======================================================== */

@media(min-width:621px) and (max-width:1000px){

    .pp-category-nav{
        top:
            58px !important;
    }

    .pp-category-nav-inner{
        display:flex !important;

        overflow-x:auto;

        flex-wrap:nowrap;

        gap:
            7px !important;

        padding-bottom:
            4px;

        scrollbar-width:none;
    }

    .pp-category-nav-inner::-webkit-scrollbar{
        display:none;
    }

    .pp-cat{
        flex:
            0 0 155px;

        min-height:
            56px !important;

        padding:
            7px 10px !important;
    }

    .pp-cat svg{
        width:
            21px !important;

        height:
            21px !important;

        flex:
            0 0 21px !important;
    }

    .pp-cat small{
        display:none !important;
    }

}


/* ========================================================
   SAFE ANCHOR ARRIVAL
   ======================================================== */

.pp-selected,
.pp-category-group,
.pp-featured[id]{
    scroll-margin-top:
        145px !important;
}


/* ========================================================
   MOBILE — RAIL HIGHER + SMALLER
   ======================================================== */

@media(max-width:620px){

    .pp-category-nav{
        top:
            52px !important;

        padding:
            7px 0 !important;
    }

    .pp-category-nav-inner{
        padding-bottom:
            3px !important;
    }

    .pp-cat{
        flex:
            0 0 150px !important;

        min-height:
            56px !important;
    }

    .pp-cat small{
        display:none !important;
    }

    .pp-page-signature{
        margin-top:
            4px;

        margin-bottom:
            12px;

        padding-bottom:
            20px;
    }

    .pp-page-signature strong{
        font-size:
            clamp(4rem,20vw,5.5rem);
    }

    .pp-page-signature span{
        font-size:
            1.35rem;
    }

    .pp-selected,
    .pp-category-group,
    .pp-featured[id]{
        scroll-margin-top:
            125px !important;
    }

}

/* END P032E4 */


/* ========================================================
   P032E5 PORTFOLIO SIGNATURE ALIGN
   Match approved Contact page signature system
   ======================================================== */

.pp-page-signature{
    gap:10px !important;
}


/* Page number — same visual role as Contact 04 */

.pp-page-signature strong{
    color:#dce7e9 !important;

    font-size:
        clamp(4.2rem,5.8vw,6rem) !important;

    font-weight:
        300 !important;

    line-height:
        .95 !important;
}


/* Page title — same approved Contact treatment */

.pp-page-signature span{
    margin-top:
        8px !important;

    color:
        #d8aa62 !important;

    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif !important;

    font-size:
        clamp(2.6rem,4vw,4.2rem) !important;

    font-weight:
        650 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        -.02em !important;
}


/* Heritage underline */

.pp-page-signature::after{
    width:
        88px !important;

    background:
        linear-gradient(
            90deg,
            #d8aa62,
            #58d8e2
        ) !important;
}


/* Mobile */

@media(max-width:620px){

    .pp-page-signature strong{
        font-size:
            clamp(3.6rem,15vw,4.8rem) !important;
    }

    .pp-page-signature span{
        font-size:
            clamp(2.25rem,10vw,3.4rem) !important;

        font-weight:
            650 !important;

        line-height:
            1.4 !important;
    }

}

/* END P032E5 */

/* P526B-PAGE-NUMBER-GOLD */
.pp-page-signature strong{color:#d8aa62!important;font-family:inherit!important;font-size:clamp(4.2rem,5.8vw,6rem)!important;font-weight:300!important;line-height:.95!important;letter-spacing:normal!important}
/* END-P526B */