/* ==============================================================
 * lazarjovovic.com — consulting.css
 * Styles for the Consulting page. Loaded after site.css + page.css.
 * ============================================================== */

.consulting-page{padding:170px 0 60px}

/* ——— Hero ——— */
.cons-hero{margin-bottom:clamp(50px,8vw,100px);max-width:880px}
.cons-hero-text .kicker{margin-bottom:22px}
.cons-hero-text h1{font-family:var(--display);font-weight:500;font-size:clamp(2.5rem,5.4vw,4.4rem);letter-spacing:-.025em;line-height:1.0;margin-bottom:28px}
.cons-hero-text h1 em{font-style:italic;color:var(--accent)}
.cons-lead{color:var(--ink-soft);font-size:1.15rem;line-height:1.6;max-width:60ch;margin-bottom:34px}

/* ——— Two planes ——— */
.cons-planes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:clamp(50px,7vw,90px)}
.plane{background:var(--paper);padding:clamp(30px,3.5vw,50px);transition:background .4s ease}
.plane:hover{background:var(--paper-2)}
.plane-head{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin-bottom:22px}
.plane-ix{font-family:var(--mono);font-size:.8rem;color:var(--accent);padding-top:8px}
.plane-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.plane-head h2{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.015em;line-height:1.08}
.plane-desc{color:var(--ink-soft);font-size:1.04rem;line-height:1.6;margin-bottom:24px}
.plane-points{list-style:none}
.plane-points li{position:relative;padding:12px 0 12px 26px;border-top:1px solid var(--line);color:var(--ink);font-size:.98rem}
.plane-points li::before{content:"→";position:absolute;left:0;color:var(--accent);font-family:var(--mono);font-size:.85rem;top:13px}

/* ——— Sections ——— */
.cons-section{padding:clamp(50px,7vw,90px) 0;border-top:1px solid var(--line)}
.cons-section-head{margin-bottom:50px;max-width:760px}
.cons-section-head .kicker-sm{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.cons-section-head h2{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,3.6vw,2.8rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:18px}
.cons-section-lead{color:var(--ink-soft);font-size:1.08rem;line-height:1.6;max-width:62ch}

/* ——— Process ——— */
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.process-step{background:var(--paper);padding:clamp(26px,3vw,40px);transition:background .4s ease}
.process-step:hover{background:var(--paper-2)}
.step-num{font-family:var(--mono);font-size:.8rem;color:var(--accent);display:block;margin-bottom:18px}
.process-step h3{font-family:var(--display);font-size:1.3rem;font-weight:500;letter-spacing:-.01em;margin-bottom:10px}
.process-step p{color:var(--ink-soft);font-size:.96rem;line-height:1.55}

/* ——— Technologies ——— */
.tech-tags{display:flex;flex-wrap:wrap;gap:12px}
.tech-tag{font-family:var(--mono);font-size:.82rem;letter-spacing:.03em;padding:10px 18px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--paper);transition:.3s}
.tech-tag:hover{border-color:var(--accent);color:var(--accent)}

/* ——— CTA ——— */
.cons-cta{text-align:center;padding:clamp(70px,10vw,130px) 0 40px;border-top:1px solid var(--line);margin-top:clamp(50px,7vw,90px)}
.cons-cta h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:22px;max-width:20ch;margin-inline:auto}
.cons-cta h2 em{font-style:italic;color:var(--accent)}
.cons-cta p{color:var(--ink-soft);font-size:1.08rem;max-width:50ch;margin:0 auto 32px}

/* ——— Mobile ——— */
@media(max-width:880px){
    .consulting-page{padding:130px 0 40px}
    .cons-planes{grid-template-columns:1fr}
    .process-steps{grid-template-columns:1fr}
}