/* ════════════════════════════════════════════════════════════
   pages/services.css — Service tabs + detail panels
   ════════════════════════════════════════════════════════════ */

/* ─── HERO: crossfading service backdrop + rotating label ── */
.svc-hero{position:relative;overflow:hidden}
.svc-hero::before{z-index:1}            /* keep the dark gradient above the photos */
.svc-hero .container{position:relative;z-index:2}
.svc-hero-bg{position:absolute;inset:0;z-index:0}
.svc-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1.2s ease,transform 6s ease}
.svc-hero-img.active{opacity:1;transform:scale(1)}

.svc-hero-rotator{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.svc-rotator-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--hero-muted)}
.svc-rotator-word{
  font-family:inherit;cursor:pointer;border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);
  color:#fff;font-size:15px;font-weight:700;letter-spacing:-.2px;
  padding:9px 18px;border-radius:30px;display:inline-flex;align-items:center;gap:9px;
  transition:opacity .4s ease,transform .4s ease,border-color .15s,background .15s;
}
.svc-rotator-word::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 4px rgba(31,139,87,.25);flex-shrink:0}
.svc-rotator-word:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.16)}
.svc-rotator-word.is-swapping{opacity:0;transform:translateY(6px)}
@media(prefers-reduced-motion:reduce){
  .svc-hero-img{transition:opacity .4s ease;transform:none}
  .svc-rotator-word{transition:none}
}

/* Tab navigation */
.svc-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:48px}
.svc-tab{
  font-size:13.5px;font-weight:600;color:var(--text-muted);
  background:var(--card);border:1.5px solid var(--card-border);
  border-radius:8px;padding:10px 18px;transition:all .15s;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;font-family:inherit;
}
.svc-tab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-tab:hover{border-color:var(--accent);color:var(--accent)}
.svc-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Detail panels */
.svc-panel{display:none}
.svc-panel.active{display:block;animation:svcFade .35s ease}
@keyframes svcFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.svc-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.svc-panel-media{border-radius:14px;overflow:hidden;background:var(--bg-alt);min-height:340px;position:relative}
.svc-panel-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.svc-panel-media-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--accent-light),var(--accent2-light))}
.svc-panel-media-ph svg{width:56px;height:56px;stroke:var(--accent);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.svc-panel h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;margin-bottom:16px}
.svc-panel-desc{font-size:15.5px;color:var(--text-muted);line-height:1.78;margin-bottom:24px}
.svc-deliverables{list-style:none;margin-bottom:30px;display:grid;gap:11px}
.svc-deliverables li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--text);line-height:1.55}
.svc-deliverables li svg{width:18px;height:18px;stroke:var(--accent2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:1px}

@media(max-width:860px){
  .svc-panel-grid{grid-template-columns:1fr;gap:28px}
  .svc-panel-media{min-height:240px;order:-1}
}