/* ============================================================
   SERVICE-PAGE.CSS
   Shared by every Tier-1 service page (Liquidation, Installation,
   and future pages using the same section patterns). main.css
   must be loaded first — this file only adds what's specific to
   the service-page template (hero banner, process list, FAQ,
   persona cards, related-services cards, photo gallery).
   ============================================================ */

/* ── BREADCRUMB ── */
/* .crumb now lives in main.css (shared across all subpages) */

/* ── PAGE HERO (static image, no slideshow/intro — subpages skip those) ── */
.phero{position:relative;padding:3rem 4.5rem 5rem;overflow:hidden;border-bottom:1px solid var(--border)}
.phero-bg{position:absolute;inset:0;background-image:url('https://images.pexels.com/photos/8082235/pexels-photo-8082235.jpeg?auto=compress&cs=tinysrgb&w=1800');background-size:cover;background-position:center;filter:brightness(.28) saturate(1.1);z-index:0}
.phero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,0,16,.55) 0%,rgba(6,0,16,.92) 85%);z-index:1}
.phero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 15% 20%,rgba(139,68,255,.3) 0%,transparent 45%)}
.phero-in{position:relative;z-index:2;max-width:900px}
.phero .hero-h1{font-size:clamp(3rem,7vw,6.2rem)}
.phero .hero-sub{max-width:560px;margin-bottom:2.4rem}
.phero .hero-cta{margin-bottom:2.6rem}

/* ── STAT ROW (static variant of homepage's absolute-positioned .hero-stats) ── */
.stat-row{display:flex;flex-wrap:wrap;border-top:1px solid rgba(139,68,255,.2);padding-top:1.6rem;max-width:820px;opacity:0;animation:up .8s .65s forwards}

/* ── PROCESS LIST ── */
.process{display:flex;flex-direction:column;max-width:820px}
.prow{display:grid;grid-template-columns:70px 1fr;gap:1.6rem;padding:1.9rem 0;border-bottom:1px solid rgba(139,68,255,.18)}
.prow:last-child{border-bottom:none}
.pnum{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;letter-spacing:.05em;color:rgba(217,70,239,.55);line-height:1}
.prow h3{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.05em;color:#fff;margin-bottom:.5rem}
.prow p{font-size:.85rem;font-weight:300;line-height:1.75;color:rgba(255,255,255,.45);max-width:600px}

/* ── WHY GRID (two-column wrapper around shared .bcard) ── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ── PROJECT PHOTOGRAPHY GALLERY (placeholder) ── */
.gal-note{font-family:'Josefin Sans',sans-serif;font-size:.68rem;font-weight:400;letter-spacing:.03em;color:rgba(217,70,239,.6);background:rgba(139,68,255,.08);border:1px dashed rgba(217,70,239,.35);border-radius:10px;padding:.9rem 1.2rem;margin-bottom:2rem;max-width:720px}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pg-cell{position:relative;border-radius:12px;overflow:hidden;height:200px;border:1px solid rgba(139,68,255,.25)}
.pg-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.85) saturate(1.15)}
.pg-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,0,16,.9) 0%,transparent 60%)}
.pg-tag{position:absolute;top:.9rem;left:.9rem;font-family:'Josefin Sans',sans-serif;font-size:.5rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,171,252,.9);background:rgba(6,0,16,.6);border:1px solid rgba(217,70,239,.4);border-radius:4px;padding:.25rem .55rem;white-space:nowrap}
.pg-cap{position:absolute;bottom:.9rem;left:.9rem;right:.9rem;font-family:'Josefin Sans',sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.03em;color:#fff}

/* ── PERSONA CARDS ── */
.persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pc{border:1px solid rgba(139,68,255,.2);border-radius:16px;padding:1.8rem;background:rgba(255,255,255,.03);transition:all .25s}
.pc:hover{background:rgba(139,68,255,.08);border-color:rgba(217,70,239,.4);transform:translateY(-4px)}
.pc-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.05em;color:#fff;display:block;margin-bottom:.7rem}
.pc-desc{font-size:.82rem;font-weight:300;line-height:1.7;color:rgba(255,255,255,.42);margin-bottom:1.1rem}

/* ── FAQ ── */
.faq{max-width:780px}
.faq-item{border-bottom:1px solid rgba(139,68,255,.18);padding:1.8rem 0}
.faq-item:first-child{padding-top:0}
.faq-item h3{font-family:'Bebas Neue',sans-serif;font-size:1.35rem;letter-spacing:.04em;color:#fff;margin-bottom:.6rem}
.faq-item p{font-size:.85rem;font-weight:300;line-height:1.8;color:rgba(255,255,255,.45)}

/* ── RELATED SERVICES CARDS ── */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.rc{border-radius:16px;border:1px solid rgba(139,68,255,.25);background:rgba(139,68,255,.06);padding:1.8rem;transition:all .3s}
.rc:hover{transform:translateY(-6px);border-color:rgba(217,70,239,.5);box-shadow:0 20px 50px rgba(139,68,255,.2)}
.rc-tag{font-family:'Josefin Sans',sans-serif;font-size:.5rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--neon);border:1px solid rgba(217,70,239,.4);border-radius:4px;padding:.2rem .6rem;display:inline-block;margin-bottom:.8rem}
.rc-title{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:.05em;color:#fff;display:block;margin-bottom:.6rem}
.rc-desc{font-size:.82rem;font-weight:300;line-height:1.7;color:rgba(255,255,255,.45);margin-bottom:1rem}
.rc-link{font-family:'Josefin Sans',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--neon2);text-decoration:none}

/* ── PAGE RESPONSIVE ── */
@media(max-width:900px){
  .phero{padding:6.5rem 2rem 4rem}
  .why-grid,.persona-grid,.rel-grid,.photo-grid{grid-template-columns:1fr}
  .prow{grid-template-columns:50px 1fr}
}