/* Formium Alliance: home "We build what's next" + "Our services".
   One pinned stage that continues the black 3D-F section: a sharp white peak (inverted V) rises from the bottom of the screen and turns it white while the
   statement is already there (white on black, black on white). "We build" blurs, "what's next" stays, three red cards roll up over it, then the badge and the line arrive. */
#services.fa-svc { position: relative; background: #000; padding: 0 !important; margin: 0 !important; }
.fa-svc__track { position: relative; height: 720vh; height: 720svh; background: #000; }
.fa-svc__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: #000; display: flex; flex-direction: column; align-items: center; padding: 112px 20px 0; box-sizing: border-box; font-family: var(--fa-font, 'Geist', system-ui, sans-serif); color: #141414; }

/* the sharp white peak: its clip-path is set from the scroll position (see formium-services.js) */
.fa-svc__dome.is-fixed { position: fixed; z-index: 0; }
.fa-svc__dome { position: absolute; inset: 0; z-index: 0; background: #fff; opacity: 0; pointer-events: none; will-change: mask-image; }

/* "We build / what's next": same size as the hero headline; it lives INSIDE the white peak, so it only shows where the white is (never on the black) */
.fa-svc__big { position: absolute; left: 50%; top: 50%; z-index: 1; width: min(94vw, 1100px); margin: 0 !important; transform: translate(-50%, -50%); text-align: center; color: #000 !important; font-weight: 400 !important; letter-spacing: var(--fa-title-ls, -.03em) !important; line-height: var(--fa-title-lh, 1.06) !important; font-size: var(--fa-title, 56px) !important; pointer-events: none; }
.fa-svc__wb, .fa-svc__wn { display: block; will-change: transform, opacity, filter; }
.fa-svc__wn { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; line-height: 1.06; font-size: 1em; }
.fa-svc__wn em { font-style: italic; }

/* badge: same style as the hero's "Your Growth. Our Mission." pill */
.fa-svc__head { text-align: center; position: relative; z-index: 3; flex: none; opacity: 0; will-change: transform, opacity; }
.fa-svc__pill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; margin: 0; border-radius: 999px; background: rgba(20, 20, 20, .05); border: 1px solid rgba(20, 20, 20, .12); }
#services .fa-svc__pill span { font-size: 13px; font-weight: 400; letter-spacing: .04em; color: rgba(20, 20, 20, .75); line-height: 1.4; }
/* the small line sits under the cards (hero sub-text style) */
.fa-svc__foot { position: relative; z-index: 3; flex: none; margin-top: 46px; text-align: center; opacity: 0; will-change: transform, opacity; }
#services .fa-svc__line { margin: 0 auto !important; max-width: 560px; font-size: 14px !important; font-weight: 400 !important; line-height: 19px !important; color: rgba(20, 20, 20, .62) !important; text-wrap: balance; }

.fa-svc__cards { position: relative; z-index: 2; width: 100%; max-width: 1120px; margin: 28px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; perspective: 1800px; perspective-origin: 50% 35%; }
.fa-svc__card { position: relative; display: block; height: clamp(430px, 62vh, 520px); height: clamp(430px, 62svh, 520px); border-radius: 30px; color: #fff; text-decoration: none; transform-style: preserve-3d; will-change: transform; translate: 0 0; transition: translate .7s cubic-bezier(.22, 1, .36, 1); -webkit-tap-highlight-color: transparent; }
.fa-svc__card.is-live:hover { translate: 0 -8px; }
/* every card is the same brand red (#E60023, the hero button colour) */
.fa-svc__face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #E60023; box-shadow: 0 40px 56px -38px rgba(20, 20, 20, .5); }
.fa-svc__face::before { content: ''; position: absolute; inset: 0; background: radial-gradient(110% 55% at 8% 0%, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 62%); pointer-events: none; }
.fa-svc__front { padding: 30px 30px 28px; }
.fa-svc__back { transform: rotateY(180deg); display: grid; place-items: center; }
.fa-svc__back i { position: relative; z-index: 1; width: 54%; aspect-ratio: 877 / 300; background: #fff; -webkit-mask: url('/images/shared/Logos/Main Logo/Main_white_logo.svg') center / contain no-repeat; mask: url('/images/shared/Logos/Main Logo/Main_white_logo.svg') center / contain no-repeat; }

/* the card: a top panel (label, name, description, list) and a ticket-like stub under a dashed line (number + button) */
.fa-svc__front { display: flex; flex-direction: column; padding: 0; }
.fa-svc__panel { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; padding: 28px 28px 20px; display: flex; flex-direction: column; }
.fa-svc__eyebrow { display: block; font-size: 13px; letter-spacing: .04em; opacity: .8; }
#services .fa-svc__name { margin: 8px 0 0 !important; font-size: 34px !important; line-height: 1.04 !important; letter-spacing: -.03em !important; font-weight: 500 !important; color: #fff !important; }
#services .fa-svc__desc { margin: 12px 0 0 !important; max-width: 27ch; font-size: 16px !important; line-height: 1.4 !important; color: rgba(255, 255, 255, .9) !important; }
.fa-svc__list { list-style: none; margin: auto 0 0; padding: 18px 0 0; }
.fa-svc__list li { position: relative; padding: 0 0 0 18px; font-size: 15px; line-height: 1.85; color: #fff; }
.fa-svc__list li::before { content: ''; position: absolute; left: 1px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; }
.fa-svc__stub { position: relative; z-index: 2; flex: none; height: 88px; margin: 0 14px; border-top: 1.5px dashed rgba(255, 255, 255, .55); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.fa-svc__no { font-family: var(--fa-mono, 'Geist Mono', ui-monospace, monospace); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; opacity: .85; }
.fa-svc__btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 6px 0 18px; border-radius: 99px; background: #fff; color: #E60023; font-size: 14px; font-weight: 500; transition: gap .5s cubic-bezier(.22, 1, .36, 1); }
.fa-svc__btn b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E60023; color: #fff; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.fa-svc__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fa-svc__card.is-live:hover .fa-svc__btn b { transform: translateX(3px); }
.fa-svc__card.is-live:hover .fa-svc__btn { gap: 14px; }

@media (max-width: 1100px) and (min-width: 768px) { .fa-svc__cards { gap: 12px; } .fa-svc__panel { padding: 22px 20px 14px; } #services .fa-svc__name { font-size: 26px !important; } #services .fa-svc__desc { font-size: 14px !important; } .fa-svc__list li { font-size: 13px; } .fa-svc__stub { margin: 0 10px; padding: 0 8px; } .fa-svc__no { display: none; } .fa-svc__stub { justify-content: center; } }
@media (max-width: 767px) {
  .fa-svc__track { height: 700vh; height: 700svh; }
  .fa-svc__stage { padding-top: 92px; }
  .fa-svc__cards { display: block; height: 590px; margin-top: 22px; max-width: none; perspective-origin: 50% 20%; }
  .fa-svc__card { position: absolute; left: 50%; top: calc(var(--i) * 82px); width: min(86vw, 330px); margin-left: calc(min(86vw, 330px) / -2); height: 424px; z-index: calc(var(--i) + 1); }
  .fa-svc__panel { padding: 22px 22px 14px; }
  #services .fa-svc__name { font-size: 28px !important; }
  #services .fa-svc__desc { font-size: 15px !important; }
  .fa-svc__foot { margin-top: 30px; padding: 0 12px; }
}
@media (max-width: 767px) and (max-height: 700px) { .fa-svc__card { height: 380px; top: calc(var(--i) * 70px); } .fa-svc__cards { height: 520px; } .fa-svc__list li { line-height: 1.6; } .fa-svc__stub { height: 74px; } }
@media (prefers-reduced-motion: reduce) { .fa-svc__track { height: auto; background: #fff; } .fa-svc__stage { position: relative; height: auto; min-height: 100vh; padding-bottom: 80px; background: #fff; } .fa-svc__big { display: none; } .fa-svc__dome { opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; } .fa-svc__head, .fa-svc__foot { opacity: 1; } }

/* soft colour behind the cards, so the glass has something to catch (fades in with the cards) */
.fa-svc__glow { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.fa-svc__glow i { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; animation: fa-svc-drift 16s ease-in-out infinite alternate; }
.fa-svc__glow i:nth-child(1) { width: 30vw; height: 30vw; left: 16%; top: 36%; background: rgba(230, 0, 35, .26); }
.fa-svc__glow i:nth-child(2) { width: 28vw; height: 28vw; right: 14%; top: 24%; background: rgba(244, 60, 0, .22); animation-duration: 19s; animation-delay: -6s; }
.fa-svc__glow i:nth-child(3) { width: 26vw; height: 18vw; left: 37%; bottom: 14%; background: rgba(255, 110, 140, .2); animation-duration: 22s; animation-delay: -11s; }
@keyframes fa-svc-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
@media (max-width: 767px) { .fa-svc__glow i { filter: blur(50px); } .fa-svc__glow i:nth-child(1) { width: 80vw; height: 80vw; left: -20%; top: 30%; } .fa-svc__glow i:nth-child(2) { width: 70vw; height: 70vw; right: -20%; top: 18%; } .fa-svc__glow i:nth-child(3) { width: 70vw; height: 50vw; left: 15%; bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .fa-svc__glow { opacity: 1; } .fa-svc__glow i { animation: none; } }

/* front side: liquid glass (same language as the header: frosted, tinted, bright rim) with a thin brand-red border at half strength. The back stays red with the logo. */
.fa-svc__front { color: #141414; background: linear-gradient(150deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .3) 55%, rgba(255, 255, 255, .46));
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgba(230, 0, 35, .5), inset 1.5px 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 22px rgba(255, 255, 255, .4), 0 40px 56px -40px rgba(20, 20, 20, .3); }
.fa-svc__front::before { display: block; background: linear-gradient(125deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .15) 28%, rgba(255, 255, 255, 0) 46%); opacity: .8; }
.fa-svc__eyebrow { color: #E60023; opacity: 1; }
#services .fa-svc__front .fa-svc__name { color: #141414 !important; }
#services .fa-svc__front .fa-svc__desc { color: rgba(20, 20, 20, .68) !important; }
.fa-svc__front .fa-svc__list li { color: #141414; }
.fa-svc__front .fa-svc__list li::before { background: #E60023; }
.fa-svc__front .fa-svc__stub { border-top-color: rgba(230, 0, 35, .45); }
.fa-svc__front .fa-svc__no { color: rgba(20, 20, 20, .6); opacity: 1; }
.fa-svc__front .fa-svc__btn { background: #E60023; color: #fff; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35), 0 10px 20px -10px rgba(230, 0, 35, .8); }
.fa-svc__front .fa-svc__btn b { background: #fff; color: #E60023; }

/* "Our work" link after the line: brand orange, underlined, goes to the work page */
#services .fa-svc__line .fa-svc__work { color: #F43C00 !important; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; transition: opacity .3s; }
#services .fa-svc__line .fa-svc__work:hover { opacity: .7; }