/* Services section (home + /service) – scoped under .svc.
   Each service is a tall "chapter". Inside it a stage is pinned to the viewport while the reader scrolls;
   scroll progress through the chapter alone decides which service name is active, and the photo follows it.
   Behaviour lives in services-section.v5.js. */

.svc {
  --nav: 70px;                               /* the site's sticky navigation */
  --bar: 56px;                               /* the 01-05 tab bar */
  --step: 34vh;                              /* scroll distance spent on each service name (bigger = slower) */
  --gap: clamp(28px, 5vw, 72px);
  --pad: clamp(16px, 4vw, 120px);
  background: #121212; color: #fafafa; font-family: var(--font-poppins, Poppins, system-ui, sans-serif);
  width: 100%;
}
.svc *, .svc *::before, .svc *::after { box-sizing: border-box; }
.svc a { color: inherit; text-decoration: none; }
.svc ol { list-style: none; margin: 0; padding: 0; }

/* ---------- 01-05 tab bar ---------- */
.svc .svc__tabs { position: sticky; top: var(--nav); z-index: 50; height: var(--bar); display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 var(--pad); background: linear-gradient(to bottom, #121212 70%, transparent); }
.svc .tab { position: relative; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 0; background: none; color: #fafafa; font: 600 11px/1 var(--font-poppins, Poppins, sans-serif); letter-spacing: .08em; opacity: .35; cursor: pointer; transition: opacity .3s; }
.svc .tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(var(--prog, 0)); transform-origin: left; }
.svc .tab[aria-current="true"] { opacity: 1; }
.svc .tab:focus-visible { outline: 2px solid #e05e0b; outline-offset: 2px; }

/* ---------- chapter / pinned stage ---------- */
.svc .chapter { position: relative; padding: 0 var(--pad); border-top: 1px solid rgba(255,255,255,.07); height: calc(100svh - var(--nav) - var(--bar) + var(--n) * var(--step)); }
.svc .stage {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  height: calc(100svh - var(--nav) - var(--bar));
  padding: clamp(14px, 2.4vh, 30px) 0;
  position: sticky; top: calc(var(--nav) + var(--bar));
}

.svc .stage__left { display: flex; flex-direction: column; min-height: 0; }
.svc .eyebrow { align-self: flex-start; padding: 5px 11px; border: 1px solid rgba(255,255,255,.14); font-size: 11px; letter-spacing: .3em; font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,.5); }
.svc .title { margin: clamp(10px, 1.8vh, 20px) 0; font-size: clamp(32px, min(5vw, 9vh), 72px); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; color: #fafafa; }
.svc .title .slash { color: rgba(255,255,255,.16); font-weight: 300; }

.svc .photo { position: relative; flex: 1 1 auto; min-height: 0; background: #0c0c0c; overflow: hidden; }
.svc .photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(.5); opacity: 0; z-index: 1; transition: opacity 0s linear .45s; background: none; }
/* the new photo fades in OVER the old one, which only disappears afterwards: no dip, no blink */
.svc .photo img.is-on { opacity: 1; z-index: 2; transition: opacity .45s ease; }

.svc .desc { margin: clamp(10px, 1.8vh, 20px) 0 0; max-width: 34em; font-size: clamp(12px, 1.05vw, 14.5px); line-height: 1.8; color: rgba(255,255,255,.55); font-weight: 300; }
.svc .more { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.45); transition: color .25s; }
.svc .more::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.svc .more:hover, .svc .more:focus-visible { color: #fafafa; }

.svc .stage__right { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.svc .list { display: flex; flex-direction: column; }
.svc .item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(8px, 1.5vh, 18px) 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: clamp(18px, min(2.4vw, 4.4vh), 34px); font-weight: 300; letter-spacing: -.01em; line-height: 1.2; opacity: .34; transition: opacity .35s, transform .35s; min-height: 44px; }
.svc .item__arrow { opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; font-size: .7em; }
.svc .item.is-active { opacity: 1; transform: translateX(8px); }
.svc .item.is-active .item__arrow { opacity: 1; transform: none; }
.svc .item:hover, .svc .item:focus-visible { opacity: 1; outline: none; }

.svc .cases { margin-top: clamp(12px, 2.4vh, 28px); }
.svc .cases__label { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.35); }
.svc .cases__label::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.svc .cases__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.svc .case { margin: 0; }
.svc .case img { width: 100%; max-width: none; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) brightness(.8); display: block; }
.svc .case b { display: block; margin-top: 6px; font-size: 11px; font-weight: 500; }
.svc .case span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); }

/* short laptops: drop the least important rows so everything still fits the pinned stage */
@media (max-height: 700px) and (min-width: 1024px) { .svc .cases { display: none; } }
@media (max-height: 600px) and (min-width: 1024px) { .svc .desc { display: none; } }

/* ---------- below 1024px: no pinning, a simple stacked card per service ---------- */
@media (max-width: 1023px) {
  .svc .chapter { height: auto; padding-top: clamp(28px, 5vw, 48px); padding-bottom: clamp(28px, 5vw, 48px); }
  .svc .stage { position: static; height: auto; grid-template-columns: 1fr; gap: 24px; padding: 0; }
  .svc .photo { flex: none; aspect-ratio: 16 / 10; }
  .svc .item { opacity: .9; font-size: clamp(18px, 4.6vw, 26px); }
  .svc .item.is-active { transform: none; }
  .svc .item__arrow { opacity: .5; transform: none; }
  .svc .cases { display: none; }
  .svc .svc__tabs { justify-content: flex-start; overflow-x: auto; }
}

/* ---------- closing call to action ---------- */
.svc .closing { text-align: center; padding: clamp(48px, 7vw, 104px) var(--pad); border-top: 1px solid rgba(255,255,255,.07); }
.svc .closing p { margin: 0 auto 32px; max-width: 14em; font-size: clamp(22px, 3.6vw, 50px); line-height: 1.2; letter-spacing: -.02em; font-weight: 400; }
.svc .closing__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 14px 28px; background: #fafafa; color: #080808; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; border: 1px solid #fafafa; transition: background .3s, color .3s; }
.svc .closing__btn:hover, .svc .closing__btn:focus-visible { background: transparent; color: #fafafa; outline: none; }

@media (prefers-reduced-motion: reduce) {
  .svc .photo img, .svc .photo img.is-on, .svc .item, .svc .item__arrow, .svc .tab { transition-duration: .01ms !important; transition-delay: 0s !important; }
}