/* Step reel (Calendly-style): a row of gradient cards, each framing a small product UI, with a
   numbered caption underneath. The row starts on the content edge and bleeds off the right; it
   scrolls sideways (swipe, trackpad, drag or the arrow buttons). Markup:

   <section class="sreel" aria-label="…">
     <div class="sreel-head"> eyebrow, h2, lead </div>
     <div class="sreel-nav"><button data-dir="-1">…</button><button data-dir="1">…</button></div>
     <div class="sreel-track" tabindex="0">
       <article class="sreel-card" data-g="1">
         <div class="sreel-stage"><div class="sreel-frame"><div class="sreel-ui">…</div></div></div>
         <p class="sreel-cap"><span class="n">01</span><b>Title</b> continuation.</p>
       </article> …
     </div>
   </section>
   data-g 1-4 picks the gradient (on the card, or on a standalone .sreel-stage). Loaded by /js/steps.js. */

.sreel { padding: 112px 0 104px; overflow-x: clip; }
.sreel-head { text-align: center; max-width: 760px; margin: 0 auto; padding: 0 16px; }
.sreel-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.sreel-head .h2 { font-size: 48px; line-height: 52px; letter-spacing: -0.04em; text-wrap: balance; }
.sreel-head .lead { margin: 16px auto 0; max-width: 600px; text-wrap: balance; }

.sreel-nav { display: flex; justify-content: flex-end; gap: 8px; width: min(1180px, 100% - 32px); margin: 40px auto 20px; }
.sreel-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); display: grid; place-items: center; color: var(--black); transition: background-color .2s, opacity .2s; }
.sreel-nav button:hover { background: var(--grey); }
.sreel-nav button:disabled { opacity: .35; cursor: default; background: var(--white); }
.sreel-nav svg { width: 18px; height: 18px; }

.sreel-track {
  margin-top: 48px;
  --edge: max(16px, (100vw - 1180px) / 2);
  display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  padding: 4px var(--edge) 8px; scrollbar-width: none; cursor: grab;
}
.sreel-track::-webkit-scrollbar { display: none; }
.sreel-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.sreel-track.dragging * { pointer-events: none; }
.sreel-track:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 12px; }

.sreel-card { flex: 0 0 clamp(300px, 36vw, 500px); scroll-snap-align: start; user-select: none; }

/* Stage: one gradient surface per card, with faint vertical lines at both edges */
.sreel-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; display: grid; place-items: center; padding: 0 12%; isolation: isolate; }
.sreel-card[data-g="1"] .sreel-stage, .sreel-stage[data-g="1"] { background: linear-gradient(155deg, #B5A6F0 0%, #8E86E8 45%, #9DB4F4 100%); }
.sreel-card[data-g="2"] .sreel-stage, .sreel-stage[data-g="2"] { background: linear-gradient(155deg, #C9D8FA 0%, #9CB2F2 50%, #B9A9EE 100%); }
.sreel-card[data-g="3"] .sreel-stage, .sreel-stage[data-g="3"] { background: linear-gradient(155deg, #A9E2DA 0%, #8FB8F2 55%, #9C9BEA 100%); }
.sreel-card[data-g="4"] .sreel-stage, .sreel-stage[data-g="4"] { background: linear-gradient(155deg, #F2B9D9 0%, #B9A3EE 50%, #8FA8F0 100%); }
.sreel-stage::before, .sreel-stage::after { content: ""; position: absolute; top: 22%; bottom: 22%; width: 54px; z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 12px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.sreel-stage::before { left: 14px; }
.sreel-stage::after { right: 14px; }

/* Frosted frame around the white UI card */
.sreel-frame { width: 100%; padding: 9px; border-radius: 24px; background: rgba(255, 255, 255, .32); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 18px 40px -18px rgba(40, 30, 90, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .5s var(--ease); }
.sreel-card:hover .sreel-frame { transform: translateY(-4px); }
.sreel-ui { background: var(--white); border-radius: 16px; padding: 20px 22px; font-size: 15px; line-height: 20px; }
.sreel-ui-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.sreel-ui-h strong { font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.sreel-pill { flex: none; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--lavender); color: var(--purple); }
.sreel-pill.ok { background: #E3F6EA; color: #1F8A4C; }
.sreel-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #EEEEF0; }
.sreel-row:first-of-type { border-top: 0; }
.sreel-row em { font-style: normal; font-weight: 700; color: var(--cobalt); min-width: 64px; }
.sreel-row small { color: var(--label); font-size: 13px; min-width: 64px; }
.sreel-row b { font-weight: 600; }
.sreel-row .end { margin-left: auto; }
.sreel-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--white); background: var(--cobalt); font-size: 13px; font-weight: 700; }
.sreel-tick { width: 20px; height: 20px; border-radius: 50%; flex: none; background: #E3F6EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A4C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* Caption: number, bold title flowing into grey copy */
.sreel-cap { margin-top: 22px; font-size: 19px; line-height: 28px; color: var(--label); text-wrap: pretty; max-width: 470px; }
.sreel-cap .n { color: var(--purple); font-weight: 700; margin-right: 10px; font-variant-numeric: tabular-nums; }
.sreel-cap b { color: var(--black); font-weight: 700; }

/* No entrance animation: cards and captions show straight away */

@media (max-width: 960px) {
  .sreel { padding: 72px 0; }
  .sreel-head .h2 { font-size: 32px; line-height: 38px; }
  .sreel-nav { display: none; }
  .sreel-track { margin-top: 32px; gap: 14px; cursor: auto; }
  .sreel-card { flex-basis: 84vw; }
  .sreel-stage { aspect-ratio: auto; min-height: 300px; padding: 32px 8%; }
  .sreel-ui-h { flex-wrap: wrap; row-gap: 6px; }
  .sreel-stage::before, .sreel-stage::after { width: 30px; left: 8px; }
  .sreel-stage::after { left: auto; right: 8px; }
  .sreel-ui { padding: 16px; font-size: 14px; }
  .sreel-ui-h strong { font-size: 16px; }
  .sreel-cap { font-size: 16px; line-height: 24px; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sreel.js .sreel-card { opacity: 1; transform: none; transition: none; }
  .sreel-frame { transition: none; }
}

/* Pinned mode (desktop, data-pin on .sreel): the section holds while vertical scroll moves the
   cards sideways, then releases once the last card is in view. JS sets the section height. */
.sreel.pinned { padding: 0; }
.sreel.pinned .sreel-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; overflow: hidden; }
.sreel.pinned .sreel-track { overflow: hidden; scroll-snap-type: none; cursor: default; margin-top: 40px; }
.sreel.pinned .sreel-card { flex-basis: min(clamp(300px, 36vw, 500px), calc((100vh - 420px) * 1.333)); }
/* Breathing room after the pinned row before the next section */
.sreel.pinned { margin-bottom: 24px; }
.sreel.pinned .sreel-cap { min-height: 84px; }
/* Pages with a sticky tab bar under the header (services) leave room for it while pinned */
.sreel.pinned.below-tabs .sreel-pin { padding-top: 150px; }
.sreel.pinned.below-tabs .sreel-card { flex-basis: min(clamp(300px, 36vw, 500px), calc((100vh - 500px) * 1.333)); }
/* Phones: every card the same size (fixed stage height, text block reserves the same lines) and pinned like desktop */
@media (max-width: 960px) {
  .sreel-stage { aspect-ratio: auto; height: 300px; min-height: 0; }
  .sreel-card p, .sreel-card .sreel-txt { min-height: 4.5em; }
  .sreel.pinned .sreel-pin { padding-top: 64px; }
  .sreel.pinned .sreel-head .h2 { font-size: 28px; line-height: 34px; }
  .sreel.pinned .sreel-head .lead { display: none; }
  .sreel.pinned .sreel-track { margin-top: 24px; padding-inline: 16px; gap: 12px; }
  .sreel.pinned .sreel-card { flex-basis: calc(100vw - 48px); }
  .sreel.pinned .sreel-stage { height: min(300px, 40svh); }
}
@media (max-width: 960px) {
  /* The pinned row starts and ends on the 16px page edge, so the first and last cards sit flush */
  .sreel.pinned .sreel-track { scroll-padding-inline: 16px; }
  .sreel.pinned .sreel-track::after { content: ""; flex: 0 0 4px; }
}
@media (max-width: 960px) {
  .sreel.pinned .sreel-pin { top: 64px; height: auto; padding: 24px 0 8px; justify-content: flex-start; }
}
/* Phones: one consistent top spacing for every pinned step row (was 24px on some pages, 150px on services) */
@media (max-width: 960px) {
  .sreel.pinned .sreel-pin, .sreel.pinned.below-tabs .sreel-pin { padding-top: 56px; }
}
@media (max-width: 960px) { .sreel.pinned.below-tabs .sreel-card { flex-basis: calc(100vw - 48px); } }