/* ============================================================
   PAGE — SERVICES
   ============================================================ */

/* ---------------- Sticky index rail ---------------- */
.svc-index{
  position:sticky; top: calc(var(--header-h) + 1rem); z-index:5;
  display:flex; gap:.5rem; flex-wrap:wrap;
  padding: .55rem; border-radius: var(--r-pill);
  background: var(--glass); border:1px solid var(--glass-line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  width:max-content; max-width:100%; margin-inline:auto;
  margin-bottom: clamp(2.4rem,5vw,4.4rem);
}
.svc-index a{
  padding:.6em 1.15em; border-radius:var(--r-pill);
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-mut); transition: all .35s var(--e-out); white-space:nowrap;
}
.svc-index a:hover{ color:var(--text); background: var(--surface); }
.svc-index a.is-on{ background-image: var(--grad-hot); color:#fff; box-shadow: var(--shadow-glow); }
@media (max-width:640px){ .svc-index{ display:none; } }

/* ---------------- Service blocks ---------------- */
.svc-block{
  padding-block: clamp(3rem, 7vw, 7rem);
  border-bottom:1px solid var(--line-soft);
  scroll-margin-top: calc(var(--header-h) + 5rem);
}
.svc-block:last-of-type{ border-bottom:0; }

.svc-block__grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.8rem,5vw,5.5rem); align-items:center;
}
.svc-block:nth-of-type(even) .svc-block__media{ order:2; }
@media (max-width:940px){
  .svc-block__grid{ grid-template-columns:1fr; }
  .svc-block:nth-of-type(even) .svc-block__media{ order:0; }
}

.svc-block__media{ position:relative; }
.svc-block__media .frame{ aspect-ratio: 3/2; border-radius: var(--r-lg); }
.svc-block__media .frame--b{
  position:absolute; right:-8%; bottom:-9%;
  width: 46%; aspect-ratio: 1/1; border-radius: var(--r-md);
  border: 6px solid var(--bg); box-shadow: var(--shadow-lg);
}
@media (max-width:940px){ .svc-block__media .frame--b{ right:0; bottom:-6%; width:38%; } }
@media (max-width:520px){ .svc-block__media .frame--b{ display:none; } }

.svc-block__body{ display:grid; gap: var(--s-3); align-content:center; }
.svc-block__num{
  font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.24em; color:var(--accent);
}
.svc-block h2{ font-size: clamp(1.9rem,4.2vw,3.3rem); }

.svc-points{ list-style:none; display:grid; gap:.85rem; margin-top:.5rem; }
.svc-points li{
  display:flex; gap:.9rem; align-items:flex-start;
  font-size:var(--t-sm); color:var(--text-soft);
  padding-bottom:.85rem; border-bottom:1px solid var(--line-soft);
}
.svc-points li:last-child{ border-bottom:0; }
.svc-points li::before{
  content:""; flex:none; width:7px; height:7px; margin-top:.55em;
  background: var(--accent); transform: rotate(45deg);
}

/* ---------------- Work strip under each service ---------------- */
.svc-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap: clamp(.6rem,1.3vw,1.1rem);
  margin-top: clamp(1.8rem,4vw,3.2rem);
}
@media (max-width:760px){ .svc-strip{ grid-template-columns:repeat(2,1fr); } }

.svc-strip__cell{
  position:relative; overflow:hidden; border-radius: var(--r-md);
  cursor:pointer; height:100%;
}
.svc-strip__cell .frame{
  display:block; aspect-ratio: 4/3; border-radius: var(--r-md); height:100%;
}
.svc-strip__cell img{ width:100%; height:100%; object-fit:cover; }
.svc-strip__cell::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background-image: var(--grad-hot);
  opacity:0; mix-blend-mode:multiply;
  transition: opacity .45s var(--e-out);
}
.svc-strip__cell:hover::after{ opacity:.30; }
.svc-strip__cell:hover{ box-shadow: var(--shadow-glow); }

/* ---------------- Collections ---------------- */
.coll-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(1rem,2vw,1.8rem); }
@media (max-width:940px){ .coll-grid{ grid-template-columns:1fr; } }

.coll{
  display:grid; gap:1.2rem; align-content:start; height:100%;
  padding: clamp(1.6rem,3vw,2.6rem);
  border:1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-elev); position:relative; overflow:hidden;
  transition: transform .55s var(--e-out), box-shadow .55s var(--e-out), border-color .45s;
}
.coll:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }
.coll--feat{ border-color: var(--accent); }
.coll--feat::before{
  content:"Most booked"; position:absolute; top:0; right:0;
  background: var(--accent); color:#fff;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  padding:.5em 1.1em; border-bottom-left-radius: var(--r-md);
}
.coll__name{ font-family:var(--f-display); font-size: var(--t-lg); }
.coll__for{ font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.coll__price{ font-family:var(--f-display); font-size: var(--t-md); color:var(--text-soft); }
.coll__price span{ font-size:.7em; color:var(--text-mut); }
.coll ul{ list-style:none; display:grid; gap:.7rem; }
.coll li{ display:flex; gap:.7rem; font-size:var(--t-sm); color:var(--text-mut); }
.coll li svg{ flex:none; width:15px; height:15px; margin-top:.35em; stroke:var(--accent); fill:none; stroke-width:1.8; }
.coll .btn{ margin-top:auto; }

/* ---------------- Add-ons ---------------- */
.addons{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(.8rem,1.6vw,1.4rem); }
@media (max-width:860px){ .addons{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .addons{ grid-template-columns:1fr; } }
.addon{
  padding: 1.15rem 1.35rem; border:1px solid var(--line-soft);
  border-radius: var(--r-md); background: var(--surface);
  display:flex; align-items:center; gap:.9rem;
  font-size:var(--t-sm); color:var(--text-soft);
  transition: border-color .4s, background-color .4s, transform .45s var(--e-out);
}
.addon:hover{ border-color: var(--accent); transform: translateY(-3px); }
.addon .orn i{ background: var(--accent); }