/* =========================================================
   ISFAHANWEB HOME V10.1
   BENCHMARK PARITY PASS

   Content / IA / SEO / URLs remain frozen.
========================================================= */


/* =========================================================
   01 — HERO
   More asymmetric, layered, agency-like.
========================================================= */

@media(min-width:1100px){

.iw10-hero{
min-height:920px;
padding-top:70px;
}

.iw10-hero-grid{
grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr);
gap:15px;
min-height:725px;
}

.iw10-hero-copy{
position:relative;
z-index:9;
padding-inline-end:0;
}

.iw10-hero h1{
position:relative;
z-index:8;
max-width:850px;
font-size:clamp(4.35rem,6.7vw,7.65rem);
line-height:.94;
}

.iw10-hero h1 em{
position:relative;
margin-inline-start:-2.5vw;
}

.iw10-hero-lead{
max-width:520px;
}

.iw10-hero-art{
min-height:700px;
margin-inline-start:-5vw;
}

.iw10-browser{
width:min(88%,620px);
height:620px;
transform:
translate(-50%,-50%)
rotate(-4deg);

border-width:10px;

box-shadow:
0 55px 120px rgba(14,32,41,.24);
}


/* supporting project layer */

.iw10-hero-art::before{
content:"";

position:absolute;
z-index:1;

left:-20px;
top:72px;

width:255px;
height:335px;

border:7px solid #fff;

background:
#fff
url("/wp-content/themes/isfahanweb-v1/assets/starter-media/2026/08/portfolio-webp/14.webp")
top center / 100% auto
no-repeat;

box-shadow:
0 30px 70px rgba(14,32,41,.15);

transform:
rotate(7deg)
translateZ(-10px);
}


/* dot / texture field */

.iw10-hero-art::after{
content:"";

position:absolute;
z-index:0;

right:-10px;
bottom:65px;

width:165px;
height:165px;

opacity:.25;

background:
radial-gradient(
circle,
var(--blue) 0 3px,
transparent 4px
);

background-size:16px 16px;
}

.iw10-hero-caption{
right:-10px;
bottom:75px;
width:270px;

transform:
translateZ(40px);
}

.iw10-shape-blue{
width:230px;
height:230px;
right:-35px;
top:30px;
}

.iw10-shape-orange{
left:36px;
bottom:73px;

width:42px;
height:185px;
}

}


/* proof becomes part of hero composition */

.iw10-proof{
box-shadow:
0 -10px 35px
rgba(14,32,41,.025);
}

.iw10-proof div div{
transition:
background .3s ease,
transform .3s ease;
}

@media(hover:hover) and (pointer:fine){

.iw10-proof div div:hover{
background:#f7fbfc;
transform:translateY(-3px);
}

}


/* =========================================================
   02 — SERVICES
   Editorial interaction, stronger rhythm.
========================================================= */

.iw10-services{
padding-top:155px;
padding-bottom:165px;

background:
linear-gradient(
180deg,
#fff 0%,
#f8faf9 100%
);
}

.iw10-services::before{
content:"SERVICES";

position:absolute;
z-index:0;

left:-3vw;
top:65px;

color:
rgba(14,32,41,.025);

font-family:var(--en);
font-size:clamp(8rem,17vw,18rem);
font-weight:900;
letter-spacing:-.09em;
line-height:.72;

pointer-events:none;
}

.iw10-services > .iw-shell{
position:relative;
z-index:2;
}

.iw10-service-list{
position:relative;
border-top:0;
}

.iw10-service{
min-height:178px;

padding:
25px 24px;

border-top:
1px solid
rgba(14,32,41,.12);

border-bottom:0;

transition:
transform .4s cubic-bezier(.2,.75,.25,1),
padding .4s cubic-bezier(.2,.75,.25,1),
color .3s ease,
box-shadow .35s ease;
}

.iw10-service:last-child{
border-bottom:
1px solid
rgba(14,32,41,.12);
}

.iw10-service::before{
transform:
translateX(102%);

transform-origin:center;
}

.iw10-service:hover::before,
.iw10-service.is-active::before{
transform:translateX(0);
}

.iw10-service:hover,
.iw10-service.is-active{
padding-inline:42px;

box-shadow:
0 22px 55px
rgba(14,32,41,.06);
}

.iw10-service h3{
font-size:
clamp(1.8rem,3vw,3.2rem);
}

.iw10-service p{
font-size:.87rem;
}


/* giant service identity */

.iw10-service::after{
position:absolute;

z-index:1;

left:4%;

top:50%;

transform:
translateY(-50%);

font-family:var(--en);

font-size:
clamp(4rem,8vw,8.5rem);

font-weight:900;

letter-spacing:-.08em;

line-height:.75;

opacity:.045;

pointer-events:none;
}

.iw10-service:nth-child(1)::after{
content:"DESIGN";
}

.iw10-service:nth-child(2)::after{
content:"DOMAIN";
}

.iw10-service:nth-child(3)::after{
content:"HOST";
}

.iw10-service:nth-child(4)::after{
content:"SEO";
}

.iw10-service:nth-child(4):hover::after,
.iw10-service:nth-child(4).is-active::after{
color:#fff;
opacity:.045;
}


/* =========================================================
   03 — MANIFESTO / WHY
   Sticky statement + scrolling reasons.
========================================================= */

.iw10-manifesto{
padding-top:165px;
padding-bottom:170px;
}

.iw10-manifesto-grid{
align-items:start;

grid-template-columns:
minmax(360px,.78fr)
minmax(0,1.22fr);

gap:115px;
}

@media(min-width:1051px){

.iw10-manifesto-title{
position:sticky;
top:120px;
}

}

.iw10-reasons article{
position:relative;

min-height:132px;

padding:
30px 25px;

transition:
background .38s ease,
transform .38s cubic-bezier(.2,.75,.25,1);
}

.iw10-reasons article::before{
content:"";

position:absolute;

left:0;
top:0;
bottom:0;

width:3px;

transform:scaleY(0);

transform-origin:bottom;

background:
linear-gradient(
var(--blue),
var(--green),
var(--orange)
);

transition:
transform .38s ease;
}

.iw10-reasons article:hover,
.iw10-reasons article.is-active{
background:
rgba(255,255,255,.045);

transform:
translateX(-8px);
}

.iw10-reasons article:hover::before,
.iw10-reasons article.is-active::before{
transform:scaleY(1);
}

.iw10-reasons h3{
font-size:
clamp(1.25rem,1.8vw,1.65rem);
}

.iw10-reasons p{
max-width:520px;
font-size:.83rem;
}


/* =========================================================
   04 — PORTFOLIO
   Sticky stacking / full-screen project experience.
========================================================= */

.iw10-work{
position:relative;

padding-top:145px;

background:#edf1f2;
}

.iw10-work-head{
padding-bottom:10px;
}

@media(min-width:1051px){

.iw10-project{
position:sticky;

top:78px;

height:
calc(100vh - 90px);

min-height:680px;

border-radius:
20px 20px 0 0;

box-shadow:
0 -12px 50px
rgba(14,32,41,.11);

transform-origin:
center top;
}

.iw10-project:nth-of-type(2){
z-index:2;
}

.iw10-project:nth-of-type(3){
z-index:3;
}

.iw10-project:nth-of-type(4){
z-index:4;
}

}


.iw10-project-media img{
height:118%;

transform:
translateY(-5%)
scale(1.025);

transition:
filter .6s ease;
}

.iw10-project.is-current
.iw10-project-media img{
filter:
saturate(1.12)
contrast(1.03);
}

.iw10-project-info{
padding:
24px 28px;

background:
linear-gradient(
90deg,
rgba(8,22,29,.72),
rgba(8,22,29,.22)
);

backdrop-filter:
blur(8px);

-webkit-backdrop-filter:
blur(8px);
}

.iw10-project-info h3{
font-size:
clamp(3rem,5.8vw,6.35rem);
}

.iw10-project-info p{
max-width:470px;
}

.iw10-work-link{
position:relative;
z-index:10;

background:#edf1f2;
}


/* =========================================================
   05 — PROCESS
   More visual, less table-like.
========================================================= */

.iw10-process{
padding-top:160px;
padding-bottom:175px;

overflow:hidden;

background:
linear-gradient(
150deg,
#f5f1e9 0%,
#fbfaf7 65%,
#eef8fb 100%
);
}

.iw10-process::before{
content:"PROCESS";

position:absolute;

right:-3vw;
top:60px;

color:
rgba(14,32,41,.03);

font-family:var(--en);

font-size:
clamp(8rem,18vw,19rem);

font-weight:900;
letter-spacing:-.09em;
line-height:.72;

pointer-events:none;
}

.iw10-process > .iw-shell{
position:relative;
z-index:2;
}

.iw10-process-grid{
gap:14px;

border-top:0;
}

.iw10-process-grid article{
position:relative;

min-height:410px;

padding:
32px 28px 40px;

overflow:hidden;

border:0;

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

box-shadow:
inset 0 0 0 1px
rgba(14,32,41,.07);

transition:
transform .38s cubic-bezier(.2,.75,.25,1),
box-shadow .38s ease;
}

.iw10-process-grid article:nth-child(1){
transform:translateY(0);
}

.iw10-process-grid article:nth-child(2){
transform:translateY(35px);
}

.iw10-process-grid article:nth-child(3){
transform:translateY(0);
}

.iw10-process-grid article:nth-child(4){
transform:translateY(35px);
}

.iw10-process-grid article::before{
content:"";

position:absolute;

right:-65px;
bottom:-75px;

width:175px;
height:175px;

border-radius:50%;

background:
rgba(24,183,241,.08);
}

.iw10-process-grid article:nth-child(2)::before{
background:
rgba(155,214,61,.12);
}

.iw10-process-grid article:nth-child(3)::before{
background:
rgba(255,134,19,.11);
}

.iw10-process-grid article:nth-child(4)::before{
background:
rgba(14,32,41,.07);
}

.iw10-process-grid b{
margin-bottom:115px;

font-size:
clamp(5rem,7vw,7.4rem);

color:
rgba(14,32,41,.105);
}

@media(hover:hover) and (pointer:fine){

.iw10-process-grid article:hover{
transform:
translateY(-8px);

box-shadow:
0 28px 65px
rgba(14,32,41,.10);
}

.iw10-process-grid article:nth-child(2):hover,
.iw10-process-grid article:nth-child(4):hover{
transform:
translateY(26px);
}

}


/* =========================================================
   SECTION TRANSITIONS
========================================================= */

.iw10-manifesto{
clip-path:
polygon(
0 0,
100% 0,
100% 96%,
0 100%
);
}

.iw10-work{
margin-top:-55px;

padding-top:200px;
}

.iw10-process{
margin-top:-1px;
}

.iw10-infra{
position:relative;
z-index:3;

padding-top:145px;
padding-bottom:145px;
}


/* =========================================================
   INFRA PANEL POLISH
========================================================= */

.iw10-infra-grid{
position:relative;

overflow:hidden;

padding:
58px 60px;

box-shadow:
0 40px 90px
rgba(14,32,41,.17);
}

.iw10-infra-grid::before{
content:"";

position:absolute;

left:-100px;
bottom:-150px;

width:330px;
height:330px;

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

border-radius:50%;
}

.iw10-infra-grid::after{
content:"";

position:absolute;

right:0;
top:0;

width:5px;
height:100%;

background:
linear-gradient(
var(--blue),
var(--green),
var(--orange)
);
}

.iw10-infra-copy,
.iw10-domain-tool{
position:relative;
z-index:2;
}


/* =========================================================
   FINAL TRANSITION
========================================================= */

.iw10-final{
padding-top:165px;
padding-bottom:155px;
}


/* =========================================================
   MOBILE
   Preserve clarity; avoid desktop gimmicks.
========================================================= */

@media(max-width:700px){

.iw10-hero{
padding-top:38px;
}

.iw10-hero-art{
min-height:440px;
}

.iw10-browser{
width:85%;
height:390px;
}

.iw10-hero-caption{
width:175px;
right:0;
bottom:18px;
}

.iw10-services{
padding-top:86px;
padding-bottom:94px;
}

.iw10-services::before{
font-size:7rem;
top:30px;
}

.iw10-service{
min-height:150px;
padding:
21px 5px;
}

.iw10-service::after{
font-size:4rem;
left:1%;
}

.iw10-service:hover,
.iw10-service.is-active{
padding-inline:8px;
box-shadow:none;
}

.iw10-manifesto{
padding:
90px 0;

clip-path:none;
}

.iw10-reasons article{
min-height:0;

padding:
22px 5px;
}

.iw10-reasons article:hover,
.iw10-reasons article.is-active{
transform:none;
}

.iw10-work{
margin-top:0;
padding-top:85px;
}

.iw10-project{
position:relative;
top:auto;

height:auto;
min-height:600px;

border-radius:0;

box-shadow:none;
}

.iw10-project-info{
padding:
18px 19px;

background:
linear-gradient(
180deg,
rgba(8,22,29,.12),
rgba(8,22,29,.77)
);
}

.iw10-project-info h3{
font-size:
clamp(2.25rem,10vw,3rem);
}

.iw10-process{
padding:
88px 0 105px;
}

.iw10-process::before{
font-size:6rem;
top:28px;
}

.iw10-process-grid{
display:block;
}

.iw10-process-grid article,
.iw10-process-grid article:nth-child(n){
display:grid;

grid-template-columns:
65px 1fr;

gap:12px;

min-height:0;

margin-bottom:8px;

padding:
23px 18px;

transform:none;
}

.iw10-process-grid article:hover,
.iw10-process-grid article:nth-child(n):hover{
transform:none;
}

.iw10-process-grid b{
grid-row:1 / 4;

margin:0;

font-size:3rem;
}

.iw10-process-grid small,
.iw10-process-grid h3,
.iw10-process-grid p{
grid-column:2;
}

.iw10-infra{
padding:
85px 0;
}

.iw10-infra-grid{
padding:
36px 22px;

box-shadow:
0 24px 55px
rgba(14,32,41,.13);
}

.iw10-final{
padding:
92px 0;
}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

.iw10-service,
.iw10-reasons article,
.iw10-process-grid article{
transition:none!important;
}

}