/* =========================================================
   FINARCH — financial services
   ========================================================= */

/* =========================================================
   Hero — frame, photo and type scale come from hero.css.
   Only the colour and this page's own copy live here.
   ========================================================= */

.fa-svc-hero {
    --fa-hero-title-max: 96px;
    background: radial-gradient(120% 120% at 76% 78%, #3E1622 0%, #2A101A 52%, #1D0C14 100%);
}

/* ---------- copy ---------- */

.fa-svc-hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand);
    flex: none;
    animation: fa-pulse 2.6s ease-in-out infinite;
}

.fa-svc-hero__title {
    max-width: 20ch;
    line-height: .94;
}

.fa-svc-hero__lede-wrap {
    margin-top: var(--fa-hero-gap-lede);
}

.fa-svc-hero__lede {
    margin: 0;
    max-width: 52ch;
    line-height: 1.62;
    color: rgba(255, 255, 255, .94);
}

.fa-svc-hero__tagline {
    margin: var(--fa-hero-gap-block) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: clamp(16px, 8.8px + 0.8vw, 24px);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.025em;
    color: #ffffff;
}

/* Each word fades a step further back. */
.fa-svc-hero__tagline span:nth-child(2) { color: rgba(255, 255, 255, .62); }
.fa-svc-hero__tagline span:nth-child(n + 3) { color: rgba(255, 255, 255, .42); }

/* ---------- reveal ---------- */

.fa-svc-hero [data-fa-anim] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}

.fa-svc-hero [data-fa-anim="title"] {
    transform: translateY(32px);
    transition-duration: 1s;
}

.fa-svc-hero [data-fa-anim].is-in {
    opacity: 1;
    transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 899.98px) {
    .fa-svc-hero__title { max-width: 18ch; }
}

/* Matches the smaller mobile hero scale (hero.css, --copy-bottom). */
@media (max-width: 767px) {
    /* A notch smaller and lower than the shared scale, so the copy stays
       below the figure in this photo. */
    .fa-hero-std.fa-svc-hero {
        --fa-hero-fs-title: 24px;
        --fa-hero-fs-lede: 12.5px;
        --fa-hero-fs-eyebrow: 9.5px;
        --fa-hero-gap-title: 10px;
        --fa-hero-gap-lede: 10px;
        --fa-hero-pad-bottom: 20px;
    }

    .fa-svc-hero__tagline {
        gap: 6px 14px;
        font-size: 15px;
    }
}

/* =========================================================
   Services
   ========================================================= */

.fa-svc,
.fa-svc * { box-sizing: border-box; }

.fa-svc {
    overflow-x: clip;
    padding: 0 var(--fa-gutter, clamp(20px, 4.5vw, 72px)) 5vw;
    background: var(--fa-ink, #111111);
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #ffffff;
    line-height: normal;
}

/* Card text is sized in container units so it tracks the width of the
   stack; below 1200px it holds at 12px. */
.fa-svc__stack {
    position: relative;
    isolation: isolate;
    max-width: var(--fa-shell, 1560px);
    margin: 0 auto;
    padding-top: 2.6vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    min-width: 0;
    container-type: inline-size;
    container-name: fa-svc;
}

.fa-svc__aurora {
    position: absolute;
    left: -14%;
    top: 0;
    z-index: -1;
    width: min(120%, 60vw);
    aspect-ratio: 1.1;
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%,
            rgba(122, 45, 78, .5),
            rgba(84, 36, 61, .16) 46%,
            rgba(84, 36, 61, 0) 74%);
    filter: blur(34px);
    animation: fa-svc-aurora-drift 11s ease-in-out infinite;
}

@keyframes fa-svc-aurora-drift {
    0% { transform: translate3d(0, -6%, 0) scale(.92); }
    25% { transform: translate3d(24%, 26%, 0) scale(1.08); }
    50% { transform: translate3d(4%, 58%, 0) scale(1); }
    75% { transform: translate3d(28%, 26%, 0) scale(1.12); }
    100% { transform: translate3d(0, -6%, 0) scale(.92); }
}

.fa-svc__row {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 1.5vw;
    align-items: stretch;
    min-width: 0;
}

/* ---------- photo ---------- */

.fa-svc__shot {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 1.55vw;
    background: #131315;
}

.fa-svc__shot img {
    position: absolute;
    inset: -2%;
    display: block;
    width: 104%;
    height: 104%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform: scale(1.07);
    transition: transform 1.5s cubic-bezier(.16, 1, .3, 1);
}

.fa-svc__shot.is-in img { transform: scale(1); }

/* ---------- card ---------- */

.fa-svc-card {
    --fa-svc-ease: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1em;
    padding: 2.6em;
    font-size: max(12px, 1.099cqi);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.55vw;
    background: rgba(24, 24, 26, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffffff;
    transition: opacity 1.05s var(--fa-svc-ease), transform .95s var(--fa-svc-ease), border-color .5s ease, background .5s ease, box-shadow .5s ease, color .5s ease;
    transition-delay: 130ms;
}

.fa-svc__row:nth-of-type(even) .fa-svc-card { background: rgba(31, 31, 34, .72); }

.fa-svc-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.1em;
}

.fa-svc-card__num {
    font-size: 3.4em;
    font-weight: 600;
    line-height: .9;
    letter-spacing: -.05em;
    color: rgba(255, 255, 255, .22);
    transform-origin: left center;
    transition: color .6s ease, transform .6s var(--fa-svc-ease), opacity .6s ease;
}

.fa-svc-card__tag {
    flex: none;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: .45em .85em;
    font-size: .64em;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    transition: color .45s ease, background .45s ease, border-color .45s ease;
}

.fa-svc-card__title {
    margin: 0;
    font-family: var(--font-primary, 'Inter', system-ui, sans-serif);
    font-size: 1.7em;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.035em;
    color: #ffffff;
    text-wrap: pretty;
    overflow-wrap: break-word;
    transition: color .5s ease;
}

.fa-svc-card__lead {
    margin: 0;
    font-size: 1.06em;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.02em;
    color: #ffffff;
    text-wrap: pretty;
    transition: color .5s ease;
}

/* Rich text: every block is a paragraph that slides in on hover. */
.fa-svc-card__body {
    display: flex;
    flex-direction: column;
    gap: 1.1em;
}

.fa-svc-card__body > * {
    margin: 0;
    font-size: .85em;
    line-height: 1.64;
    color: rgba(255, 255, 255, .7);
    text-wrap: pretty;
    transition: transform .5s var(--fa-svc-ease), color .4s ease, border-color .4s ease;
}

.fa-svc-card__body > :first-child {
    padding-top: 1em;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.fa-svc-card__body > * :is(p, li, span, strong, em) {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.fa-svc-card__cta {
    margin-top: .5em;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .6em;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    padding: .85em 1.55em;
    background: transparent;
    font-size: .82em;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), border-color .3s, background .3s;
}

/* Only lifts: the colours stay whatever the card state has set. */
.fa-svc-card__cta:hover,
.fa-svc-card__cta:focus-visible {
    transform: translateY(-3px);
    color: #ffffff;
}

/* ---------- active (the card nearest the reading line, set by JS) ---------- */

.fa-svc-card.is-active {
    border-color: rgba(255, 255, 255, .26);
    box-shadow: 0 40px 80px -60px rgba(0, 0, 0, .9);
}

.fa-svc-card.is-active .fa-svc-card__num {
    color: rgba(255, 255, 255, .6);
    transform: scale(1.06);
}

/* ---------- hover / focus: the card inverts to light ---------- */

.fa-svc .fa-svc-card.fa-svc-card:is(:hover, :focus-within) {
    transform: translateY(-10px);
    border-color: var(--color-brand);
    background: #ffffff;
    box-shadow: 0 40px 70px -50px rgba(17, 17, 17, .5);
    color: #111111;
}

.fa-svc-card:is(:hover, :focus-within) .fa-svc-card__num {
    color: var(--color-brand);
    transform: scale(1.09);
}

.fa-svc-card:is(:hover, :focus-within) .fa-svc-card__tag {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #ffffff;
}

.fa-svc-card:is(:hover, :focus-within) :is(.fa-svc-card__title, .fa-svc-card__lead) { color: #111111; }

.fa-svc-card:is(:hover, :focus-within) .fa-svc-card__body > * {
    transform: translateX(8px);
    color: rgba(17, 17, 17, .72);
}

.fa-svc-card:is(:hover, :focus-within) .fa-svc-card__body > :first-child { border-top-color: rgba(17, 17, 17, .12); }

.fa-svc-card:is(:hover, :focus-within) .fa-svc-card__body > :nth-child(2) { transition-delay: 60ms; }
.fa-svc-card:is(:hover, :focus-within) .fa-svc-card__body > :nth-child(3) { transition-delay: 120ms; }
.fa-svc-card:is(:hover, :focus-within) .fa-svc-card__body > :nth-child(4) { transition-delay: 180ms; }
.fa-svc-card:is(:hover, :focus-within) .fa-svc-card__body > :nth-child(n + 5) { transition-delay: 240ms; }

.fa-svc-card:is(:hover, :focus-within) .fa-svc-card__cta {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #ffffff;
}

/* ---------- reveal ---------- */

.fa-svc [data-fa-anim] {
    opacity: 0;
    transform: translateY(2.6vw);
}

.fa-svc__shot[data-fa-anim] { transition: opacity 1.05s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); }

.fa-svc [data-fa-anim].is-in {
    opacity: 1;
    transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 899.98px) {
    .fa-svc__stack {
        gap: 28px;
        padding-top: 30px;
    }

    .fa-svc__row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .fa-svc__shot {
        aspect-ratio: 16 / 10;
        border-radius: 18px;
    }

    .fa-svc-card {
        font-size: 15px;
        border-radius: 18px;
    }
}

/* =========================================================
   CTA
   ========================================================= */

.fa-svc-cta,
.fa-svc-cta * { box-sizing: border-box; }

.fa-svc-cta {
    padding: clamp(56px, 9vh, 110px) var(--fa-gutter, clamp(20px, 4.5vw, 72px)) clamp(72px, 11vh, 140px);
    background: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: var(--fa-ink, #111111);
    line-height: normal;
}

/* Same static card as the homepage brief: it only reveals, it has no hover. */
.fa-svc-cta__card {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.4vh, 24px);
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 26px;
    padding: clamp(28px, 4vw, 64px);
    background: #F4F4F5;
    text-align: center;
}

.fa-svc-cta__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, .55);
}

.fa-svc-cta__title {
    margin: 0;
    max-width: 34ch;
    font-family: var(--font-primary, 'Inter', system-ui, sans-serif);
    font-size: clamp(20px, 5.6px + 1.6vw, 36px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.035em;
    color: var(--fa-ink, #111111);
    text-wrap: balance;
    overflow-wrap: break-word;
}

.fa-svc-cta__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Rich text: paragraphs, bold and links from the editor. */
.fa-svc-cta__subtitle {
    max-width: 56ch;
    font-size: clamp(14px, 6.22px + 0.78vw, 21px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.02em;
    color: rgba(17, 17, 17, .72);
    text-wrap: balance;
}

    .fa-svc-cta__subtitle p { margin: 0; }

    .fa-svc-cta__subtitle p + p { margin-top: 8px; }

    .fa-svc-cta__subtitle a {
        color: var(--color-brand);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.fa-svc-cta__actions {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.fa-svc-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    border-radius: 999px;
    padding: 16px 30px;
    font-size: 14px;
    text-decoration: none;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), border-color .3s, background .3s;
}

.fa-svc-cta__btn:hover,
.fa-svc-cta__btn:focus-visible { transform: translateY(-3px); }

.fa-svc-cta__btn--primary {
    background: var(--color-brand);
    color: #ffffff;
    font-weight: 600;
}

.fa-svc-cta__btn--primary:hover,
.fa-svc-cta__btn--primary:focus-visible {
    background: #6B2E4D;
    color: #ffffff;
}

.fa-svc-cta [data-fa-anim] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

.fa-svc-cta [data-fa-anim].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fa-svc-hero [data-fa-anim],
    .fa-svc [data-fa-anim],
    .fa-svc-cta [data-fa-anim] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .fa-svc-hero__eyebrow-dot,
    .fa-svc__aurora { animation: none; }

    .fa-svc__shot img,
    .fa-svc-card,
    .fa-svc-card *,
    .fa-svc .fa-svc-card.fa-svc-card:is(:hover, :focus-within) { transition: none; }

    .fa-svc__shot img { transform: none; }
    .fa-svc .fa-svc-card.fa-svc-card:is(:hover, :focus-within) { transform: none; }

    .fa-svc-cta__btn,
    .fa-svc-cta__btn:hover,
    .fa-svc-cta__btn:focus-visible {
        transition: none;
        transform: none;
    }
}