/* Nexxus Consultancy — Subpage Styles */

/* ── Hero ── */
.sub-hero{position:relative;min-height:65vh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:60px}
.sub-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.3) saturate(.8)}
.sub-hero-ov{position:absolute;inset:0;background:linear-gradient(to top,var(--black) 0%,rgba(10,10,11,.4) 50%,rgba(10,10,11,.7) 100%)}
.sub-hero-content{position:relative;z-index:2;max-width:680px}
.sub-breadcrumb{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--t3);margin-bottom:20px}
.sub-breadcrumb a{color:rgba(255,255,255,.4);transition:color var(--tr)}
.sub-breadcrumb a:hover{color:var(--gold)}
.sub-breadcrumb svg{width:14px;height:14px}
.sub-hero-title{font-family:var(--fd);font-size:clamp(2.2rem,4.5vw,3.6rem);color:#fff;line-height:1.1;margin-bottom:16px}
.sub-hero-title em{font-style:normal;color:var(--gold)}
.sub-hero-sub{font-size:1.05rem;color:var(--t2);line-height:1.75;margin-bottom:12px}
.sub-hero-detail{font-size:.92rem;color:var(--t3);line-height:1.75;margin-bottom:32px}

/* ── Service Blocks ── */
.sub-services{padding:80px 0}
.sub-svc-block{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:80px;padding-bottom:80px;border-bottom:1px solid var(--border)}
.sub-svc-block:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.sub-svc-block.reverse{direction:rtl}
.sub-svc-block.reverse>*{direction:ltr}
.sub-svc-num{font-family:var(--fd);font-size:3rem;color:rgba(201,168,76,.08);line-height:1;margin-bottom:8px}
.sub-svc-text h2{font-family:var(--fd);font-size:clamp(1.4rem,2.5vw,1.9rem);color:#fff;margin-bottom:16px;line-height:1.2}
.sub-svc-text h2 span{color:var(--gold)}
.sub-svc-text p{color:var(--t2);font-size:.92rem;line-height:1.8;margin-bottom:14px}
.sub-svc-text strong{color:rgba(255,255,255,.8)}
.sub-svc-list{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.sub-svc-list li{color:var(--t2);font-size:.88rem;line-height:1.7;padding-left:20px;position:relative}
.sub-svc-list li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.5}
.sub-svc-list li strong{color:rgba(255,255,255,.8)}
.sub-svc-img{border-radius:var(--rl);overflow:hidden;border:1px solid var(--border)}
.sub-svc-img img{width:100%;height:360px;object-fit:cover;display:block;transition:transform .5s ease}
.sub-svc-block:hover .sub-svc-img img{transform:scale(1.03)}

/* ── Why Section ── */
.sub-why{padding:80px 0;background:var(--dark);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sub-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.sub-why-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:28px 24px;text-align:center;transition:all .3s ease}
.sub-why-card:hover{border-color:rgba(201,168,76,.15);transform:translateY(-3px)}
.sub-why-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.1);color:var(--gold)}
.sub-why-icon svg{width:22px;height:22px}
.sub-why-card h4{font-family:var(--fh);font-weight:700;font-size:.88rem;color:#fff;margin-bottom:8px}
.sub-why-card p{font-size:.8rem;color:var(--t2);line-height:1.6}
.sub-why-note{text-align:center;font-size:1rem;color:var(--t2);margin-top:12px}
.sub-why-note strong{color:var(--gold)}

/* ── Completed Projects ── */
.sub-projects{padding:80px 0}
.sub-proj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sub-proj-card{position:relative;border-radius:var(--rl);overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;cursor:pointer;transition:all .35s ease}
.sub-proj-card:hover{border-color:rgba(201,168,76,.2);transform:translateY(-3px);box-shadow:var(--shm)}
.sub-proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sub-proj-card:hover img{transform:scale(1.04)}
.sub-proj-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,.85) 0%,transparent 50%);padding:16px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity .3s ease}
.sub-proj-card:hover .sub-proj-ov{opacity:1}
.sub-proj-ov h4{font-family:var(--fh);font-weight:700;font-size:.82rem;color:#fff;margin-bottom:2px}
.sub-proj-ov span{font-size:.68rem;color:var(--gold);font-weight:600;letter-spacing:1.5px;text-transform:uppercase}

/* ── CTA ── */
.sub-cta{padding:80px 0;background:var(--dark);border-top:1px solid var(--border);text-align:center}
.sub-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── Responsive ── */
@media(max-width:1024px){
  .sub-svc-block{grid-template-columns:1fr;gap:32px}
  .sub-svc-block.reverse{direction:ltr}
  .sub-why-grid{grid-template-columns:repeat(2,1fr)}
  .sub-proj-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .sub-hero{min-height:55vh}
  .sub-why-grid{grid-template-columns:1fr}
  .sub-proj-grid{grid-template-columns:1fr}
  .sub-svc-img img{height:260px}
}