/* =====================================================
   SERVICES — HERO
===================================================== */

.services-hero{
position:relative;
height:680px;
min-height:620px;
overflow:hidden;
background:var(--forest-dark);
color:var(--warm-white);
}

.services-hero-media{
position:absolute;
inset:0;
}

.services-hero-media img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}

.services-hero-media::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(15,22,17,.52) 0%,
rgba(15,22,17,.18) 30%,
rgba(15,22,17,.08) 100%
),
linear-gradient(
90deg,
rgba(15,22,17,.86) 0%,
rgba(15,22,17,.64) 45%,
rgba(15,22,17,.18) 80%,
rgba(15,22,17,.08) 100%
);
}

.services-hero .container{
position:relative;
z-index:2;
height:100%;
display:flex;
align-items:center;
padding-top:var(--header-height);
}

.services-hero-content{
max-width:850px;
padding:70px 0;
}

.services-hero .eyebrow{
margin-bottom:26px;
color:var(--sand);
}

.services-hero h1{
max-width:850px;
margin-bottom:28px;
font-size:62px;
line-height:1.08;
color:var(--warm-white);
}

.services-hero-content p{
max-width:640px;
font-size:18px;
line-height:1.75;
color:rgba(255,255,255,.78);
}


/* =====================================================
   SERVICES — INTRO
===================================================== */

.services-intro{
background:var(--warm-white);
}

.service-details{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}

.service-details-block{
padding:42px 54px 46px 0;
}

.service-details-block + .service-details-block{
padding-left:54px;
border-left:1px solid var(--line);
}

.service-details-block .number{
display:block;
margin-bottom:22px;
}

.service-details-block h3{
margin-bottom:18px;
font-family:var(--font-display);
font-size:30px;
font-weight:400;
color:var(--forest-dark);
}

.service-details-block > p{
max-width:520px;
margin-bottom:28px;
font-size:15px;
line-height:1.75;
}

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

.service-list li{
position:relative;
padding:10px 0 10px 18px;
border-bottom:1px solid rgba(216,210,199,.7);
font-size:14px;
line-height:1.5;
color:var(--charcoal);
}

.service-list li::before{
content:"";
position:absolute;
top:20px;
left:0;
width:5px;
height:5px;
border-radius:50%;
background:var(--wood);
}


/* =====================================================
   SERVICES — SPECIFICATIONS
===================================================== */

.service-specs{
background:var(--cream);
}

.spec-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1px;
background:var(--line);
border:1px solid var(--line);
}

.spec-card{
padding:34px;
background:var(--warm-white);
}

.spec-card h3{
margin-bottom:28px;
font-family:var(--font-display);
font-size:25px;
font-weight:400;
color:var(--forest-dark);
}

.spec-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:14px 0;
border-top:1px solid var(--line);
}

.spec-row span{
font-size:13px;
color:var(--gray);
}

.spec-row strong{
font-size:14px;
font-weight:600;
text-align:right;
color:var(--forest-dark);
}

.spec-note{
margin-top:24px;
padding-top:20px;
border-top:1px solid var(--line);
font-size:13px;
line-height:1.65;
color:var(--gray);
}


/* =====================================================
   SERVICES — WARNING
===================================================== */

.warning-block{
display:grid;
grid-template-columns:180px minmax(240px,.65fr) minmax(0,1fr);
gap:42px;
align-items:start;
margin-top:52px;
padding:36px 0;
border-top:1px solid var(--wood);
border-bottom:1px solid var(--line);
}

.warning-block .eyebrow{
margin-top:7px;
}

.warning-block h3{
font-family:var(--font-display);
font-size:27px;
font-weight:400;
color:var(--forest-dark);
}

.warning-list{
display:flex;
flex-direction:column;
}

.warning-list li{
position:relative;
padding:11px 0 11px 20px;
border-bottom:1px solid var(--line);
font-size:14px;
line-height:1.6;
color:var(--charcoal);
}

.warning-list li:last-child{
border-bottom:0;
}

.warning-list li::before{
content:"—";
position:absolute;
left:0;
color:var(--wood);
}


/* =====================================================
   SERVICES — DIRECTIONS
===================================================== */

.service-direction{
background:var(--warm-white);
}

.service-direction-grid{
display:grid;
grid-template-columns:minmax(380px,.85fr) minmax(0,1.15fr);
gap:88px;
align-items:center;
}

.service-direction-grid-reverse .service-direction-content{
order:2;
}

.service-direction-grid-reverse .service-direction-media{
order:1;
}

.service-direction-content{
max-width:560px;
}

.service-direction-content .eyebrow{
margin-bottom:24px;
}

.service-direction-content h2{
margin-bottom:26px;
font-size:42px;
}

.service-direction-content > p{
margin-bottom:18px;
font-size:16px;
line-height:1.8;
}


/* =====================================================
   SERVICES — REGULAR DIRECTION IMAGE
===================================================== */

.service-direction-media{
height:520px;
overflow:hidden;
background:var(--cream);
}

.service-direction-media img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
transition:transform .8s ease;
}

.service-direction-media:hover img{
transform:scale(1.025);
}


/* =====================================================
   SERVICES — DARK DIRECTION
   Фото является фоном всей секции
===================================================== */

.service-direction-dark{
position:relative;
overflow:hidden;

padding-top:0;
padding-bottom:0;

background:var(--forest-dark);
color:var(--warm-white);
}


/*
Важно:
контейнер не должен становиться containing block
для абсолютного изображения.
*/

.service-direction-dark .container{
position:static;
}


/*
Grid нужен только для расположения текста.
Левая колонка остаётся свободной,
контент находится справа.
*/

.service-direction-dark .service-direction-grid{
grid-template-columns:minmax(0,1fr) minmax(460px,560px);
gap:80px;
align-items:center;
min-height:820px;
}


/*
Контент находится поверх фото и затемнения.
*/

.service-direction-dark .service-direction-content{
grid-column:2;
position:relative;
z-index:3;

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

padding:80px 0;
}


/*
Фото вынимается из grid и становится
фоном ВСЕЙ секции.
*/

.service-direction-dark .service-direction-media{
position:absolute;
inset:0;
z-index:0;

width:100%;
height:100%;

overflow:hidden;
background:var(--forest-dark);
}

.service-direction-dark .service-direction-media img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
transform:none;
}

.service-direction-dark .service-direction-media:hover img{
transform:none;
}


/*
Поверх изображения кладём градиент.
Слева фотография остаётся хорошо видна,
справа постепенно уходит в глубокий зелёный.
*/

.service-direction-dark::after{
content:"";
position:absolute;
inset:0;
z-index:1;

pointer-events:none;

background:
linear-gradient(
90deg,
rgba(15,22,17,.18) 0%,
rgba(15,22,17,.24) 32%,
rgba(15,22,17,.48) 50%,
rgba(24,40,31,.82) 66%,
rgba(30,50,39,.97) 100%
);
}


/* =====================================================
   DARK DIRECTION — TYPOGRAPHY
===================================================== */

.service-direction-dark .eyebrow{
color:var(--sand);
}

.service-direction-dark h2{
max-width:520px;
margin-bottom:26px;
font-size:42px;
line-height:1.12;
color:var(--warm-white);
}

.service-direction-dark .service-direction-content > p{
max-width:540px;
margin-bottom:18px;
font-size:16px;
line-height:1.8;
color:rgba(255,255,255,.76);
}


/* =====================================================
   SERVICES — DIRECTION FACT
===================================================== */

.direction-fact{
margin-top:36px;
padding:24px 0;

display:flex;
align-items:flex-end;
justify-content:space-between;
gap:30px;

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

.direction-fact span{
max-width:180px;
font-size:13px;
line-height:1.5;
color:rgba(255,255,255,.6);
}

.direction-fact strong{
font-family:var(--font-display);
font-size:30px;
font-weight:400;
white-space:nowrap;
color:var(--sand);
}


/* =====================================================
   SERVICES — PRODUCTS
===================================================== */

.products-services{
background:var(--cream);
}

.products-services-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}

.product-service-card{
padding:38px 38px 42px 0;
}

.product-service-card + .product-service-card{
padding-left:38px;
border-left:1px solid var(--line);
}

.product-service-card .number{
display:block;
margin-bottom:26px;
}

.product-service-card h3{
margin-bottom:18px;
font-family:var(--font-display);
font-size:25px;
font-weight:400;
line-height:1.3;
color:var(--forest-dark);
}

.product-service-card p{
font-size:14px;
line-height:1.75;
}


/* =====================================================
   SERVICES — SPECIALTY
===================================================== */

.specialty-services{
background:var(--warm-white);
}

.specialty-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
}

.specialty-card{
position:relative;
height:540px;
overflow:hidden;
background:var(--forest-dark);
}

.specialty-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .8s ease;
}

.specialty-card::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(15,22,17,.84) 0%,
rgba(15,22,17,.34) 46%,
rgba(15,22,17,.04) 75%
);
}

.specialty-card:hover img{
transform:scale(1.025);
}

.specialty-card-content{
position:absolute;
left:36px;
right:36px;
bottom:34px;
z-index:2;
}

.specialty-card-content > span{
display:block;
margin-bottom:10px;
font-size:12px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
color:var(--sand);
}

.specialty-card-content h3{
margin-bottom:14px;
font-family:var(--font-display);
font-size:28px;
font-weight:400;
line-height:1.2;
color:var(--warm-white);
}

.specialty-card-content p{
max-width:500px;
font-size:14px;
line-height:1.65;
color:rgba(255,255,255,.72);
}


/* =====================================================
   SERVICES — PROJECT REQUIREMENTS
===================================================== */

.project-requirements{
background:var(--cream);
}

.project-requirements-grid{
display:grid;
grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);
gap:100px;
align-items:start;
}

.project-requirements .eyebrow{
margin-bottom:24px;
}

.project-requirements h2{
max-width:440px;
font-size:42px;
}

.requirements-list{
border-top:1px solid var(--line);
}

.requirement-item{
display:grid;
grid-template-columns:60px minmax(0,1fr);
gap:20px;
align-items:center;
padding:22px 0;
border-bottom:1px solid var(--line);
}

.requirement-item span{
font-family:var(--font-display);
font-size:15px;
color:var(--wood);
}

.requirement-item p{
font-size:15px;
line-height:1.6;
color:var(--charcoal);
}