/* =====================================================
   Services page — on top of styles-v2.css
   ===================================================== */

/* ---------- HERO ---------- */
.sv-hero { background: var(--vs-carmine); color: var(--vs-cream); padding: var(--sp-6) 0; position: relative; overflow: hidden; }
.sv-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 10%, rgba(232,200,117,0.18) 0%, transparent 55%); pointer-events: none; }
.sv-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-5); align-items: center; position: relative; }
@media (max-width: 960px) { .sv-hero__grid { grid-template-columns: 1fr; } }
.sv-hero__title { font-size: clamp(3rem, 7vw, 6.2rem); line-height: 0.92; letter-spacing: -0.04em; margin: var(--sp-2) 0 var(--sp-3); }
.sv-hero__title em { font-style: italic; color: var(--vs-butter); }
.sv-hero__sub { font-size: 1.1rem; line-height: 1.6; max-width: 500px; opacity: 0.88; margin-bottom: var(--sp-4); }
.sv-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.sv-hero__media { position: relative; height: 560px; }
@media (max-width: 960px) { .sv-hero__media { height: 480px; } }
.sv-hero__phone { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(4deg); width: 250px; aspect-ratio: 9/19.5; background: var(--vs-ink); border-radius: 40px; padding: 9px; box-shadow: 0 40px 80px -24px rgba(0,0,0,0.55); z-index: 2; }
.sv-hero__phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; display: block; }
.sv-hero__photo { position: absolute; border-radius: var(--r-lg); background: center/cover no-repeat; border: 5px solid var(--vs-cream); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.45); transition: transform 500ms var(--ease); }
.sv-hero__photo--a { width: 200px; aspect-ratio: 4/5; left: 0; top: 4%; transform: rotate(-8deg); }
.sv-hero__photo--b { width: 190px; aspect-ratio: 4/5; right: 0; bottom: 2%; transform: rotate(7deg); border-color: var(--vs-butter); }
.sv-hero__photo:hover { transform: rotate(0) scale(1.05); z-index: 5; }
.sv-hero__chip { position: absolute; z-index: 4; background: var(--vs-butter); color: var(--vs-ink); padding: 10px 18px; border-radius: var(--r-pill); font-family: var(--font-display); font-style: italic; font-size: 1rem; box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.sv-hero__chip--1 { top: 8%; right: 6%; transform: rotate(6deg); }
.sv-hero__chip--2 { bottom: 10%; left: 6%; background: var(--vs-cream); transform: rotate(-5deg); }
@media (max-width: 600px) { .sv-hero__photo--a { width: 130px; } .sv-hero__photo--b { width: 130px; } .sv-hero__phone { width: 200px; } }

/* ---------- SERVICES EXPLORER ---------- */
.sv-explorer { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-5); margin-top: var(--sp-5); align-items: start; }
@media (max-width: 960px) { .sv-explorer { grid-template-columns: 1fr; } }
.sv-list { display: flex; flex-direction: column; border-top: 1px solid rgba(20,10,12,0.12); }
.sv-item { border-bottom: 1px solid rgba(20,10,12,0.12); }
.sv-item__btn { width: 100%; background: transparent; border: 0; padding: var(--sp-3) 0; display: grid; grid-template-columns: 54px 1fr 30px; align-items: center; gap: 12px; text-align: left; cursor: pointer; color: var(--vs-ink); }
.sv-item__num { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--vs-carmine); }
.sv-item__name { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; transition: color 300ms, transform 400ms var(--ease); }
.sv-item__icon { font-size: 1.4rem; color: var(--vs-carmine); transition: transform 400ms var(--ease); }
.sv-item__btn:hover .sv-item__name { color: var(--vs-carmine); transform: translateX(6px); }
.sv-item.is-open .sv-item__name { color: var(--vs-carmine); font-style: italic; }
.sv-item.is-open .sv-item__icon { transform: rotate(45deg); }
.sv-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease); }
.sv-item.is-open .sv-item__panel { grid-template-rows: 1fr; }
.sv-item__inner { overflow: hidden; padding-left: 66px; }
.sv-item__inner > div { padding-bottom: var(--sp-4); }
.sv-item__lead { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.25; margin-bottom: 12px; }
.sv-item__inner p { font-size: 1rem; line-height: 1.6; opacity: 0.82; margin-bottom: 12px; }
.sv-item__get { font-size: 0.95rem; line-height: 1.55; background: var(--vs-cream-deep); border-left: 3px solid var(--vs-carmine); padding: 12px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 14px 0; }
.sv-item__get strong { color: var(--vs-carmine); }
.sv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-tags span { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(20,10,12,0.18); font-weight: 500; }
@media (max-width: 600px) { .sv-item__inner { padding-left: 0; } }

.sv-stage { position: sticky; top: 120px; aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden; background: var(--vs-ink); box-shadow: 0 30px 60px -24px rgba(20,10,12,0.4); }
@media (max-width: 960px) { .sv-stage { position: relative; top: 0; order: -1; aspect-ratio: 16/11; } }
.sv-stage__img { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transform: scale(1.06); transition: opacity 700ms var(--ease), transform 1200ms var(--ease); }
.sv-stage__img.is-active { opacity: 1; transform: scale(1); }
.sv-stage__tag { position: absolute; left: 18px; bottom: 18px; z-index: 2; background: var(--vs-cream); color: var(--vs-ink); padding: 8px 16px; border-radius: var(--r-pill); font-family: var(--font-display); font-style: italic; font-size: 0.95rem; }

/* ---------- BEHIND THE SCENES ---------- */
.sv-bts { background: var(--vs-ink); color: var(--vs-cream); padding: var(--sp-6) 0; overflow: hidden; }
.sv-bts__head { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.sv-bts__head h2 em { font-style: italic; color: var(--vs-butter); }
.sv-bts__head p { max-width: 380px; opacity: 0.75; }
.sv-bts__hint { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vs-butter); }
.sv-bts__track { display: flex; gap: 14px; overflow-x: auto; padding: 0 32px 20px; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.sv-bts__track::-webkit-scrollbar { display: none; }
.sv-bts__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.sv-bts__item { flex: 0 0 300px; aspect-ratio: 3/4; border-radius: var(--r-lg); overflow: hidden; background: #0a0506 center/cover no-repeat; scroll-snap-align: start; position: relative; transition: transform 500ms var(--ease); user-select: none; }
.sv-bts__item:nth-child(odd) { transform: translateY(18px); }
.sv-bts__item:hover { transform: translateY(-6px) rotate(-1deg); }
.sv-bts__item video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sv-bts__item--wide { flex-basis: 420px; }
.sv-bts__label { position: absolute; left: 14px; bottom: 14px; background: rgba(20,10,12,0.7); backdrop-filter: blur(6px); color: var(--vs-cream); padding: 6px 12px; border-radius: var(--r-pill); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 600px) { .sv-bts__item { flex-basis: 230px; } .sv-bts__item--wide { flex-basis: 300px; } }

/* ---------- THE SYSTEM ---------- */
.sv-system { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
@media (max-width: 900px) { .sv-system { grid-template-columns: 1fr; } }
.sv-system__line { position: absolute; top: 34px; left: 34px; right: 34px; height: 2px; background: rgba(245,238,222,0.18); }
.sv-system__line::after { content: ''; position: absolute; inset: 0; background: var(--vs-butter); transform: scaleX(0); transform-origin: left; transition: transform 1800ms cubic-bezier(.22,1,.36,1); }
.sv-system.is-visible .sv-system__line::after { transform: scaleX(1); }
@media (max-width: 900px) { .sv-system__line { display: none; } }
.sv-step { position: relative; z-index: 1; }
.sv-step__dot { width: 68px; height: 68px; border-radius: 50%; background: var(--vs-carmine-deep); border: 2px solid var(--vs-butter); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--vs-butter); margin-bottom: var(--sp-3); transition: background 400ms, color 400ms, transform 400ms var(--ease); }
.sv-step:hover .sv-step__dot { background: var(--vs-butter); color: var(--vs-ink); transform: scale(1.08) rotate(-6deg); }
.sv-step h3 { margin-bottom: 10px; }
.sv-step h3 em { font-style: italic; color: var(--vs-butter); }
.sv-step p { opacity: 0.82; line-height: 1.6; }

/* ---------- PACKAGES ---------- */
.sv-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: var(--sp-5); align-items: stretch; }
@media (max-width: 960px) { .sv-packs { grid-template-columns: 1fr; } }
.sv-pack { position: relative; border-radius: var(--r-lg); padding: var(--sp-4); background: var(--vs-cream); border: 1.5px solid rgba(20,10,12,0.12); display: flex; flex-direction: column; transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
.sv-pack:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -28px rgba(20,10,12,0.35); }
.sv-pack--feature { background: var(--vs-carmine); color: var(--vs-cream); border-color: var(--vs-carmine); }
.sv-pack__badge { position: absolute; top: -14px; right: 22px; background: var(--vs-butter); color: var(--vs-ink); padding: 6px 14px; border-radius: var(--r-pill); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.sv-pack__name { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--vs-carmine); margin-bottom: 10px; }
.sv-pack--feature .sv-pack__name { color: var(--vs-butter); }
.sv-pack h3 { margin-bottom: 12px; }
.sv-pack > p { opacity: 0.82; line-height: 1.55; margin-bottom: var(--sp-3); font-size: 0.97rem; }
.sv-pack ul { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: 10px; }
.sv-pack li { padding-left: 26px; position: relative; font-size: 0.95rem; }
.sv-pack li::before { content: '✦'; position: absolute; left: 0; color: var(--vs-carmine); }
.sv-pack--feature li::before { color: var(--vs-butter); }
.sv-pack .btn { margin-top: auto; align-self: flex-start; }

/* ---------- FAQ ---------- */
.sv-faq { max-width: 860px; margin: var(--sp-5) auto 0; border-top: 1px solid rgba(245,238,222,0.15); }
.sv-faq__item { border-bottom: 1px solid rgba(245,238,222,0.15); }
.sv-faq__q { width: 100%; text-align: left; background: transparent; border: 0; color: var(--vs-cream); padding: var(--sp-3) 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.15; }
.sv-faq__q span { font-family: var(--font-body); font-size: 1.4rem; color: var(--vs-butter); transition: transform 400ms var(--ease); flex-shrink: 0; }
.sv-faq__item.is-open .sv-faq__q { color: var(--vs-butter); font-style: italic; }
.sv-faq__item.is-open .sv-faq__q span { transform: rotate(45deg); }
.sv-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--ease); }
.sv-faq__item.is-open .sv-faq__a { grid-template-rows: 1fr; }
.sv-faq__a > div { overflow: hidden; }
.sv-faq__a p { padding-bottom: var(--sp-3); opacity: 0.82; line-height: 1.65; max-width: 700px; }