/* ============================================================
   services-v1.css — PROPOSAL 1: "Interactive Vertical Showcase"
   Standalone add-on for the Services section. Depends on tokens
   and utility classes already defined in style.css (colors, fonts,
   .section, .eyebrow, .section-title, .btn, .reveal, etc).
   ============================================================ */

.services-v1{
  position:relative; background:var(--black); color:#fff;
  clip-path:polygon(0 3.5%,100% 0,100% 96.5%,0 100%);
  padding-block:120px;
}
@media(min-width:768px){ .services-v1{ padding-block:140px; } }
.services-v1 .section-subtitle{ color:#c9c9c9; }

.sv1-showcase{ display:flex; flex-direction:column; gap:22px; margin-top:50px; }
@media(min-width:992px){
  .sv1-showcase{ display:grid; grid-template-columns:.85fr 1.15fr; gap:0; align-items:stretch; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); overflow:hidden; }
}

/* ---------- list of services ---------- */
.sv1-list{ display:flex; flex-direction:column; }
@media(min-width:992px){ .sv1-list{ justify-content:center; background:#0d0d0d; } }

.sv1-item{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.09);
  background:transparent; color:#fff; position:relative;
  transition:background .3s ease, padding-left .3s ease;
}
.sv1-list .sv1-item:first-child{ border-top:1px solid rgba(255,255,255,.09); }
@media(min-width:992px){ .sv1-list .sv1-item:first-child{ border-top:0; } }
.sv1-item:hover, .sv1-item:focus-visible{ background:rgba(255,255,255,.045); outline:none; }
.sv1-item.is-active{ background:rgba(218,0,0,.1); padding-left:26px; }
.sv1-item.is-active::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red); }

.sv1-num{ font-family:var(--font-accent); font-size:2rem; font-weight:600; color:rgba(255,255,255,.32); width:26px; flex-shrink:0; transition:color .3s ease; }
.sv1-item.is-active .sv1-num{ color:var(--red); }

.sv1-item-body{ display:flex; align-items:center; gap:14px; flex-grow:1; min-width:0; }
.sv1-item-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.07); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  transition:background .3s ease, transform .3s ease;
}
.sv1-item.is-active .sv1-item-icon{ background:var(--red); transform:scale(1.06); }
.sv1-item-text{ display:flex; flex-direction:column; min-width:0; }
.sv1-item-text strong{ font-family:var(--font-heading); font-weight:700; font-size:1.5rem; }
.sv1-item-text span{ font-size:1.1rem; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sv1-arrow{ margin-left:auto; color:var(--red); opacity:0; transform:translateX(-6px); transition:all .3s ease; flex-shrink:0; }
.sv1-item.is-active .sv1-arrow, .sv1-item:hover .sv1-arrow{ opacity:1; transform:translateX(0); }

/* ---------- image stage ---------- */
.sv1-stage{ position:relative; min-height:320px; order:-1; border-radius:var(--radius-lg); overflow:hidden; }
@media(min-width:992px){ .sv1-stage{ min-height:580px; order:0; border-radius:0; } }
@media(min-width:576px) and (max-width:991px){ .sv1-stage{ min-height:420px; } }

.sv1-progress{ position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.15); z-index:6; }
.sv1-progress-bar{ display:block; height:100%; width:0%; background:var(--red); }
.sv1-progress-bar.is-animating{ transition:width 5.2s linear; width:100%; }

.sv1-slides{ position:relative; width:100%; height:100%; min-height:inherit; }
.sv1-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s ease; }
.sv1-slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.sv1-slide-media{ position:absolute; inset:0; overflow:hidden; }
.sv1-slide-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 5.5s ease; }
.sv1-slide.is-active .sv1-slide-media img{ transform:scale(1); }
.sv1-slide-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 100%); }

.sv1-slide-content{ position:absolute; left:0; right:0; bottom:0; padding:28px 26px; z-index:2; }
@media(min-width:768px){ .sv1-slide-content{ padding:40px 40px; } }
.sv1-slide-content .sv1-slide-eyebrow{ display:inline-block; font-family:var(--font-accent); font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--white); background:rgba(218,0,0,.15); border:1px solid rgba(218,0,0,.4); padding:5px 12px; border-radius:50px; margin-bottom:14px; }
.sv1-slide-content h3{ font-size:1.4rem; color:#fff; margin-bottom:10px; }
@media(min-width:768px){ .sv1-slide-content h3{ font-size:1.75rem; } }
.sv1-slide-content p{ color:#dcdcdc; max-width:460px; margin-bottom:20px; font-size:.94rem; }

/* ---------- responsive reflow: image first, tappable list below ---------- */
@media(max-width:991px){
  .sv1-item{ cursor:pointer; }
}