
:root {
    --hp-dark:    #0F0B28;
    --hp-purple:  #2A1878;
    --hp-purple2: #4B23B0;
    --hp-teal:    #23B7B4;
    --hp-white:   #FFFFFF;
    --hp-light:   #F3F2F8;
    --hp-font:    'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
    --hp-header-menu-height: 44px;
    --hp-frame-pad: 16px;
    --hp-frame-radius: 20px;
    --hp-top-progress: 0%;
}

.home-site-nav ul li {
    list-style: none;
    list-style-position: unset;
}

/* ─── Page load splash ─────────────────────────────
 * Per Figma screencast — four smooth phases:
 *  1. small light-lavender card with "slingshot" wordmark (calm initial state)
 *  2. background gently darkens from lavender to purple gradient
 *  3. hero video fades in inside the card → card expands to viewport
 *  4. overlay slowly fades out, revealing the home page gradually
 */
.home-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    opacity: 1;
    transition: opacity .7s ease-in-out;  /* eased fade for smooth reveal */
    pointer-events: auto;
}
.home-loader-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.home-loader-overlay.is-gone {
    display: none;
}
.home-loader-card {
    /* Absolutely positioned + transform-translated so it can travel from the
     * viewport CENTRE (small card) to the hero's TOP-LEFT (16px,16px) while it
     * grows. The overlay no longer flex-centres it — that left the expanded
     * card centred vertically while the real hero sits at the top, producing a
     * "jump up" when the overlay faded. translate() interpolates smoothly. */
    position: absolute;
    top: 0;
    left: 0;
    /* Centre the 340×188 card: left=(100vw-340)/2, top=(100vh-188)/2 */
    transform: translate(calc(50vw - 170px), calc(50vh - 94px));
    overflow: hidden;
    width: 340px;
    height: 188px;
    border-radius: 20px;
    /* Born ALREADY in the hero's purple gradient — exactly like the inner-page
     * splash cards (.sl-splash-card). No light-lavender→purple morph, so there's
     * no perceptible delay between the rectangle appearing and its colour: the
     * card simply fades in purple. The bubble video fades in on top as it
     * appears (see .is-ready rule below). */
    background:
        radial-gradient(circle at 30% 40%, rgba(185, 105, 235, 0.35) 0 35%, transparent 60%),
        linear-gradient(140deg, #2A1878 0%, #4B23B0 60%, #6438c8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(76, 60, 140, 0.12);
    will-change: width, height, border-radius, transform;
    /* Smooth fade-in: opacity 0 → 1 via the .is-ready class (opacity-only, NO
     * keyframe — a keyframe with `forwards` would lock width/height and block
     * the later expand). Expand uses width/height (not transform:scale) so a
     * 16px margin is guaranteed at ANY viewport width. */
    opacity: 0;
    transition:
        opacity .5s cubic-bezier(.16, 1, .3, 1),
        transform .55s cubic-bezier(.5, 0, .2, 1),
        width .55s cubic-bezier(.5, 0, .2, 1),
        height .55s cubic-bezier(.5, 0, .2, 1),
        border-radius .55s ease,
        box-shadow .55s ease;
}
.home-loader-overlay.is-ready .home-loader-card {
    opacity: 1;
}
/* Bubble video fades in WITH the card (no separate "darken" beat) so the card
 * appears fully formed — purple + bubbles — in one motion, like the inner pages. */
.home-loader-overlay.is-ready .home-loader-card-video {
    opacity: 0.92;
}
/* Dark-purple wash that fades in over the lavender base — gives a smooth,
 * frame-by-frame colour fill rather than an abrupt swap. */
.home-loader-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 30% 40%, rgba(185, 105, 235, 0.35) 0 35%, transparent 60%),
        linear-gradient(140deg, #2A1878 0%, #4B23B0 60%, #6438c8 100%);
    opacity: 0;
    pointer-events: none;
    /* ease-out (fast start) so the purple becomes visible quickly once the card
     * appears, rather than creeping in — keeps the colour change feeling
     * immediate after the rectangle shows. */
    transition: opacity .5s ease-out;
}
/* Hero animation sits above the wash; fades in slightly later so the dark
 * fill happens first, then the blobs reveal themselves. */
.home-loader-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease-out;
}
.home-loader-logo {
    position: relative;
    z-index: 3;
    font-family: var(--hp-font, 'Onest', sans-serif);
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 2px 14px rgba(70, 50, 140, 0.18);
    transition: opacity .8s ease;
}

/* Phase 2 — the card is already purple (+ bubbles) from .is-ready; this just
 * deepens the shadow a touch as it settles before the expand. No colour morph. */
.home-loader-overlay.is-darkening .home-loader-card {
    box-shadow: 0 24px 70px rgba(15, 11, 40, 0.22);
}

/* Phase 3 — card expands to MATCH the rounded hero card (16px margin around
 * it), NOT full-screen. width:calc(100vw-32px) guarantees the 16px side gaps
 * at any viewport. height≈hero card. border-radius 24px = exact hero match,
 * so when the overlay fades the splash card aligns 1:1 with the hero beneath.
 * Full-bleed comes later, only on scroll (see hero/services rules below). */
.home-loader-overlay.is-expanding .home-loader-card {
    /* Travel to the hero's top-left (16px,16px) AS it grows, so the expanded
     * card lands exactly on the hero card beneath — no vertical jump on fade.
     * --hero-h is set by home.js to the real hero height so the bottom edge
     * matches too; min(78vh,752px) is the fallback if JS hasn't run. */
    transform: translate(var(--hero-left, 16px), var(--hero-top, 16px));
    width: var(--hero-w, calc(100vw - 32px));
    height: var(--hero-h, min(78vh, 752px));
    border-radius: 24px;
    box-shadow: 0 40px 90px rgba(15, 11, 40, 0.32);
}
.home-loader-overlay.is-expanding .home-loader-logo {
    opacity: 0;
}

/* Mobile (≤768px): splash entirely disabled — overlay hidden, JS skips. */
@media (max-width: 768px) {
    .home-loader-overlay { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .home-loader-overlay,
    .home-loader-card,
    .home-loader-card::before,
    .home-loader-card-video,
    .home-loader-logo { transition: none; }
}

/* ─── Hero content entrance ─────────────────────────────────────────
 * Per designer screencast: after the splash card fills the screen with the
 * bubble bg, the hero content (header, headline, video card, logos) does NOT
 * just appear — it fades + slides up into place as the white overlay
 * dissolves. body.home-splash is added by home.js only when the splash runs
 * (desktop). The content is behind the opaque overlay at first paint, so
 * starting it hidden causes no flash. If the splash is skipped (mobile / no
 * JS), body.home-splash is absent → content is fully visible by default. */
@media (min-width: 769px) {
    body.home-splash .home-site-header-inner,
    body.home-splash .home-hero-content,
    body.home-splash .home-hero-card,
    body.home-splash .home-logos-strip-wrapper {
        transition: opacity .6s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
    }
    /* Hidden until the reveal class lands */
    body.home-splash:not(.home-splash-reveal) .home-site-header-inner,
    body.home-splash:not(.home-splash-reveal) .home-hero-content,
    body.home-splash:not(.home-splash-reveal) .home-hero-card,
    body.home-splash:not(.home-splash-reveal) .home-logos-strip-wrapper {
        opacity: 0;
    }
    body.home-splash:not(.home-splash-reveal) .home-hero-content        { transform: translateY(28px); }
    body.home-splash:not(.home-splash-reveal) .home-hero-card           { transform: translateY(40px); }
    body.home-splash:not(.home-splash-reveal) .home-logos-strip-wrapper { transform: translateY(20px); }
    body.home-splash:not(.home-splash-reveal) .home-site-header-inner   { transform: translateY(-12px); }
    /* Staggered slide-in on reveal */
    body.home-splash-reveal .home-site-header-inner   { transition-delay: 0s; }
    body.home-splash-reveal .home-hero-content        { transition-delay: .06s; }
    body.home-splash-reveal .home-hero-card           { transition-delay: .16s; }
    body.home-splash-reveal .home-logos-strip-wrapper { transition-delay: .26s; }
}
@media (prefers-reduced-motion: reduce) {
    body.home-splash .home-site-header-inner,
    body.home-splash .home-hero-content,
    body.home-splash .home-hero-card,
    body.home-splash .home-logos-strip-wrapper {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Home Events feed sits on the Figma light-grey full-width band (#f3f2f8).
 * The shared feed content stays constrained to 1240px; only the background
 * bleeds to the viewport edges. */
body.home .sl-feed--event {
    position: relative;
    z-index: 0;
    isolation: isolate;
}

body.home .sl-feed--event::before {
    content: "";
    position: absolute;
    top: -96px;
    bottom: -96px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f3f2f8;
    z-index: -1;
}

@media (max-width: 640px) {
    body.home .sl-feed--event::before {
        top: -56px;
        bottom: -56px;
    }
}

/* ─── Reset ─────────────────────────────────────── */
.home-page-wrapper {
    font-family: var(--hp-font);
}
.home-page-wrapper h1,
.home-page-wrapper h2,
.home-page-wrapper h3,
.home-page-wrapper h4,
.home-page-wrapper h5,
.home-page-wrapper h6,
.home-page-wrapper p,
.home-page-wrapper a,
.home-page-wrapper button,
.home-page-wrapper span,
.home-page-wrapper li {
    font-family: var(--hp-font);
}
.home-page-wrapper *, .home-page-wrapper *::before, .home-page-wrapper *::after {
    box-sizing: border-box;
}
.home-page-wrapper a { text-decoration: none; }
.home-page-wrapper p {
    padding-bottom: 0;
}

/* ─── Home Header ───────────────────────────────── */
.home-site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1200;
    transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
    background: transparent;
}
/* On scroll: header sticks to top, edge-to-edge in white per Figma.
 * Visible white "padding below" comes from the wrap's 16px top margin (so
 * we DON'T add bottom margin here — wrap supplies the spacing).
 * Legacy code declares position:absolute + transparent !important in the
 * 1101+ media query, so we override with !important + higher specificity. */
body #homeSiteHeader.home-site-header.is-scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 18px rgba(15, 11, 40, 0.08) !important;
    border-radius: 0 !important;
    border-bottom: 0 !important;
}
/* The logo can render as an <img> (uploaded SVG/PNG, usually white) or as
 * a text span fallback. Cover both for the scrolled white header. */
body #homeSiteHeader.home-site-header.is-scrolled .home-site-logo-text {
    color: #222 !important;
}
body #homeSiteHeader.home-site-header.is-scrolled .home-site-logo img {
    filter: invert(1) brightness(0.75);
}
/* Pill background: subtle light-grey on white to match Figma */
body #homeSiteHeader.home-site-header.is-scrolled .home-site-menu {
    background: #f3f2f8 !important;
}
/* Right-side nav links (Work/About/Blog/Contact) flip white → dark */
body #homeSiteHeader.home-site-header.is-scrolled .home-site-menu > li:nth-child(n+5) a {
    color: #222 !important;
}
body #homeSiteHeader.home-site-header.is-scrolled .home-site-menu > li:nth-child(n+5) a:hover {
    color: #000 !important;
    background: rgba(34, 34, 34, 0.06) !important;
}
/* Left-side pill items stay dark on white pill (already #272346) — no change. */
/* "Let's talk" CTA already dark, stays as-is. */

.home-site-header.is-menu-open {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.home-site-header--light {
    background: #f3f2f8;
    border-bottom: 1px solid rgba(25, 18, 55, 0.08);
}
.home-site-header--light.is-scrolled,
.home-site-header--light.is-menu-open {
    background: rgba(243,242,248,.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.home-site-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 48px 14px;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 86px;
}
.home-site-logo img {
    width: 144px;
    max-height: none;
    height: auto;
    display: block;
    transform: none;
}
.home-site-logo-text {
    color: #fff;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.03em;
}
.home-site-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}
.home-site-menu,
.home-site-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.home-site-menu {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 2px;
    overflow: hidden;
    height: var(--hp-header-menu-height);
    transform: none;
}
.home-site-menu > li {
    height: 100%;
    display: flex;
    align-items: stretch;
}
.home-site-menu li a {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--hp-font);
    padding: 0 17px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    border-radius: 0;
    line-height: 1.1;
}
.home-site-menu > li:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}
.home-site-menu > li:nth-child(4) {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}
.home-site-menu > li:nth-child(-n+4) {
    background: rgba(255,255,255,.96);
}
.home-site-menu > li:nth-child(-n+4) a {
    background: transparent;
    color: #272346;
}
.home-site-menu > li:nth-child(n+5) a {
    background: transparent;
    color: #fff;
}
.home-site-menu > li:nth-child(-n+4) a:hover {
    color: #1d1a33;
    background: rgba(39,35,70,.08);
}
.home-site-menu > li:nth-child(n+5) a:hover {
    color: #fff;
    background: rgba(255,255,255,.22);
}
.home-site-header-cta {
    background: #171727;
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 100px;
    padding: 0 18px;
    font-weight: 700;
    font-size: 12px;
    font-family: var(--hp-font);
    white-space: nowrap;
    line-height: 1.1;
    height: var(--hp-header-menu-height);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transform: none;
}
.home-site-header-cta:hover {
    background: #24243a;
    color: #fff;
}
.home-site-header--light .home-site-menu {
    background: #e9e8f3;
}
.home-site-header--light .home-site-menu > li:nth-child(n+5) a {
    color: #4e496e;
}
.home-site-header--light .home-site-menu > li:nth-child(n+5) a:hover {
    background: #dddbea;
    color: #1f1b39;
}
.home-site-menu-toggle {
    display: none;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 100px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--hp-font);
}
.home-site-header--light .home-site-menu-toggle {
    color: #272346;
    border-color: rgba(39,35,70,.16);
    background: rgba(255,255,255,.42);
}
.home-mobile-menu {
    display: none;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 20px;
}
.home-mobile-menu.is-open {
    display: block;
}
.home-mobile-menu-list,
.home-mobile-menu-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.home-mobile-menu-list li a {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.home-mobile-menu-cta {
    display: inline-flex;
    margin-top: 18px;
    background: #fff;
    color: var(--hp-purple2);
    border-radius: 100px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
}
.home-site-header--light .home-mobile-menu-list li a {
    color: #272346;
    border-bottom-color: rgba(39,35,70,.1);
}
.home-site-header--light .home-mobile-menu-cta {
    background: #171727;
    color: #fff;
}

/* ─── Announcement Bar ───────────────────────────── */
.home-announcement-bar {
    background: linear-gradient(90deg, #5B2FBF 0%, #3A1FA0 100%);
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
    font-family: var(--hp-font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.home-announcement-bar .ann-label {
    background: rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.home-announcement-bar .ann-register {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 20px;
    padding: 4px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    transition: background .2s;
}
.home-announcement-bar .ann-register:hover { background: rgba(255,255,255,0.28); }

/* ─── Hero + Services shared wrapper ─────────────── *
 * Figma: hero and services share ONE continuous purple animated background
 * (video + blob layer). The wrapper is the positioning context; both
 * sections inside are transparent so the bg shows through. */
.home-hero-services-wrap {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, #0F0B28 0%, #1A1060 32%, #291878 60%, #1A265E 100%);
    font-family: var(--hp-font);
}

/* ─── Hero Section ───────────────────────────────── */
.home-hero-section {
    background: transparent;
    position: relative;
    font-family: var(--hp-font);
}

.home-hero-bg-video {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
    width: calc(100% + 48px);
    max-width: none;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
    object-position: top center;
    opacity: .96;
    pointer-events: none;
}

/* blobs */
.hp-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 1;
}
.hp-blob-1 { width: 640px; height: 540px; background: rgba(185,105,235,.32); top: -120px; right: 80px; }
.hp-blob-2 { width: 420px; height: 420px; background: rgba(90,70,210,.28); top: 180px; right: 340px; }
.hp-blob-3 { width: 320px; height: 320px; background: rgba(35,183,180,.22); bottom: 60px; right: 40px; }
.hp-blob-4 { width: 380px; height: 380px; background: rgba(255,145,205,.13); top: 80px; left: -60px; }

/* Figma: hero content area sits inside a 1513-px tall purple "card".
 * Bumping vertical padding so localhost matches the Figma vertical scale. */
.home-hero-inner {
    position: relative;
    z-index: 10;
    max-width: 1240px;
    margin: 0 auto;
    padding: 200px 48px 120px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    width: 100%;
}

/* Left */
/* Figma: Headline/XXXXL/Bold — Onest 100/700/lh:1/ls:0 */
.home-hero-title {
    color: var(--hp-c-white, #fff);
    font-size: clamp(56px, 7vw, 100px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    margin: 0 0 22px;
}
/* Figma: Headline/XL/Regular — Onest 32/400/lh:1.2/ls:-1px */
.home-hero-subtitle {
    color: rgba(255,255,255,.88);
    font-size: clamp(20px, 2.3vw, 32px);
    font-weight: 400;
    margin: 0 0 38px;
    line-height: 1.2;
    letter-spacing: -.03em;
}
.home-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid rgba(255,255,255,.9);
    color: #201753;
    background: #fff;
    border-radius: 100px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--hp-font);
    transition: all .25s;
}

.home-button-label,
.home-button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-button-label {
    min-width: 0;
}

.home-button-arrow {
    width: 14px;
    height: 14px;
    font-size: 15px;
    line-height: 1;
    transform: translateY(-1px);
    flex: 0 0 auto;
}
.home-hero-cta:hover {
    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,1);
    color: #201753;
}

/* Right — video card */
.home-hero-card {
    --hp-hero-card-radius: 20px;
    border-radius: var(--hp-hero-card-radius);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/3;
    box-shadow: 0 24px 64px rgba(0,0,0,.45);
    border: 0;
    isolation: isolate;
    clip-path: inset(0 round var(--hp-hero-card-radius));
    transform: translateZ(0);
    background-clip: padding-box;
}
.home-hero-card img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(15%);
}
.home-hero-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 35%, rgba(0,0,0,.65));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 28px;
    border-radius: inherit;
    overflow: hidden;
}
.home-hero-card-text {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}
.home-hero-play-btn {
    flex-shrink: 0;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .2s;
}
.home-hero-play-btn:hover { transform: scale(1.1); }
.home-hero-play-btn svg { fill: #1B1060; margin-left: 3px; }

/* Logos strip */
.home-logos-strip-wrapper {
    position: relative; z-index: 10;
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 0 48px;
}
.home-logos-strip {
    max-width: 1240px;
    margin: 0 auto;
    padding: 30px 0;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.home-logos-strip::-webkit-scrollbar { display: none; }
.home-logos-strip .logo-item,
.home-logos-strip > span,
.home-logos-strip > a {
    color: rgba(255,255,255,.94);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transition: opacity .2s;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.home-logos-strip .logo-item:hover,
.home-logos-strip > span:hover,
.home-logos-strip > a:hover { opacity: .82; }
.home-logos-strip .logo-item img,
.home-logos-strip > span img,
.home-logos-strip > a img {
    width: var(--home-logo-w, auto);
    max-width: var(--home-logo-max-w, 132px);
    height: auto;
    max-height: var(--home-logo-max-h, 36px);
    display: block;
    opacity: .98;
    filter: none;
    object-fit: contain;
}

.home-logo--connected-caregiver { --home-logo-w: 128px; --home-logo-max-h: 38px; }
.home-logo--churchill-downs { --home-logo-w: 138px; --home-logo-max-h: 40px; }
.home-logo--healthrev,
.home-logo--healthrey { --home-logo-w: 130px; --home-logo-max-h: 30px; }
.home-logo--paysign { --home-logo-w: 126px; --home-logo-max-h: 30px; }
.home-logo--projectteam,
.home-logo--project-team { --home-logo-w: 128px; --home-logo-max-h: 24px; }
.home-logo--schneider-electric { --home-logo-w: 152px; --home-logo-max-h: 38px; }
.home-logo--zoeller,
.home-logo--zoeller-group { --home-logo-w: 134px; --home-logo-max-h: 38px; }
.home-logo--univ-of-louisville,
.home-logo--university-of-louisville { --home-logo-w: 116px; --home-logo-max-h: 38px; }

/* ─── What We Do ─────────────────────────────────── */
/* Figma: services area is the lower half of the same purple card.
 * Background comes from the .home-hero-services-wrap (shared video + blobs);
 * this section is transparent so it shows through. */
.home-services-section {
    background: transparent;
    padding: 140px 48px 180px;
    position: relative;
    font-family: var(--hp-font);
}
.home-services-section::before {
    content: none;
}
.home-services-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}
.home-services-label {
    display: block;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
/* Figma: Headline/XXL/Medium — Onest 40/500/lh:1.2/ls:-1px */
.home-services-title {
    color: var(--hp-c-white, #fff);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.025em;
    margin: 0 0 32px;
}
/* Figma: outline pill — transparent bg, white border, Onest Medium 14 */
.home-services-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--hp-c-white, #fff);
    color: var(--hp-c-white, #fff);
    border-radius: 500px;
    padding: 14px 20px 14px 24px;
    height: 48px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--hp-font);
    transition: all .25s;
}
.home-services-cta:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Service cards grid */
.home-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 14px;
}
.service-card {
    border-radius: 20px;
    padding: 28px;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .25s;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.service-card:hover { transform: translateY(-4px); }

/* Featured (Consulting) */
.service-card.featured {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    min-height: 200px;
    justify-content: space-between;
}
.service-card.featured:hover,
.service-card.featured:focus-visible {
    background: #fff;
    border-color: #fff;
}
.service-card.dark {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}
.service-card.light {
    background: rgba(255,255,255,.92);
}
.service-card-icon {
    width: 38px; height: 38px;
    margin-bottom: 18px;
}
.service-card-icon svg { width: 100%; height: 100%; }
.service-card.featured .service-card-icon svg * {
    stroke: rgba(255,255,255,.9);
}
.service-card.featured:hover .service-card-icon svg *,
.service-card.featured:focus-visible .service-card-icon svg * {
    stroke: #6d44b7;
}
.service-card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 10px;
    font-family: var(--hp-font);
}
.service-card.featured .service-card-title { color: #fff; }
.service-card.featured:hover .service-card-title,
.service-card.featured:focus-visible .service-card-title { color: #1B1060; }
.service-card.dark .service-card-title    { color: #fff; }
.service-card.light .service-card-title   { color: #1B1060; }
.service-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(27,16,96,.6);
    flex: 1;
    margin-bottom: 20px;
    font-family: var(--hp-font);
}
.service-card.featured .service-card-desc {
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .2s ease, margin .2s ease, opacity .2s ease;
}
.service-card.featured:hover .service-card-desc,
.service-card.featured:focus-visible .service-card-desc {
    max-height: 80px;
    margin-bottom: 20px;
    opacity: 1;
}
/* Figma: arrow chip is 40×40, sits top-right of every card, visible only on hover.
 * Default = #f0eff8 (light-grey chip on glass), but goes white when card pops to white. */
.service-card-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: #f0eff8;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(.9);
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.service-card:hover .service-card-arrow,
.service-card:focus-visible .service-card-arrow {
    opacity: 1;
    transform: scale(1);
    background: transparent !important;  /* No chip bg — just the arrow icon */
}

/* ─── Service-card hover (Figma) — ALL 4 cards ──────────────
 * Default: glass card, white icon, title visible, desc + arrow hidden.
 * Hover : white card, title lifts up, desc + arrow appear, icon recolors to
 *         the per-card accent (purple / blue / green / red).
 *  - Icon FIXED 38×38 (flex 0 0 38px) so it never deforms.
 *  - Arrow chip background removed.
 *  - Icon recolor via `color:` + SVG currentColor → single clean cascade swap.
 *  - Title pinned to bottom (margin-top:auto), lifts via transform on hover
 *    (no flex-direction change → no layout flicker). */
@media (min-width: 769px) {
    .home-services-grid .service-card { position: relative; }

    .home-services-grid .service-card:nth-child(1) { --svc-accent: #6d44b7; } /* Consulting · purple */
    .home-services-grid .service-card:nth-child(2) { --svc-accent: #2563eb; } /* AI · blue */
    .home-services-grid .service-card:nth-child(3) { --svc-accent: #10b981; } /* Teams · green */
    .home-services-grid .service-card:nth-child(4) { --svc-accent: #dc2626; } /* Product · red */

    .home-services-grid .service-card > div {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .home-services-grid .service-card > div > .service-card-title {
        margin-top: auto;
        transition: transform .3s cubic-bezier(.65, .04, .35, 1);
    }
    .home-services-grid .service-card:hover > div > .service-card-title,
    .home-services-grid .service-card:focus-visible > div > .service-card-title {
        transform: translateY(-4px);
    }

    /* Icon — fixed size, never deforms */
    .home-services-grid .service-card .service-card-icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        flex-shrink: 0;
        margin-bottom: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition: color .25s ease;
    }
    .home-services-grid .service-card .service-card-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* White pop on hover (.dark cards) */
    .home-services-grid .service-card.dark:hover,
    .home-services-grid .service-card.dark:focus-visible {
        background: #fff;
        border-color: #fff;
    }
    .home-services-grid .service-card.dark:hover .service-card-title,
    .home-services-grid .service-card.dark:focus-visible .service-card-title {
        color: #1B1060;
    }

    /* Icon recolor → accent on hover (.featured + .dark) */
    .home-services-grid .service-card.featured:hover .service-card-icon,
    .home-services-grid .service-card.featured:focus-visible .service-card-icon,
    .home-services-grid .service-card.dark:hover .service-card-icon,
    .home-services-grid .service-card.dark:focus-visible .service-card-icon {
        color: var(--svc-accent);
    }

    /* Desc on .dark cards: hidden → slides in on hover */
    .home-services-grid .service-card.dark .service-card-desc {
        max-height: 0;
        margin: 0;
        opacity: 0;
        overflow: hidden;
        color: rgba(27, 16, 96, .6);
        transition: max-height .25s ease, margin .25s ease, opacity .25s ease;
    }
    .home-services-grid .service-card.dark:hover .service-card-desc,
    .home-services-grid .service-card.dark:focus-visible .service-card-desc {
        max-height: 80px;
        margin-bottom: 16px;
        opacity: 1;
    }

    /* SVG strokes + fills follow currentColor for a uniform recolor.
     * !important defeats the per-element inline `stroke="rgba(255,255,255,.85)"`
     * style attributes that ship with the admin-defined SVGs and that otherwise
     * cause visible color non-uniformity (one element at .85 next to another at
     * .9 on the same icon, etc.).
     *
     * NO transition declared on stroke / fill themselves — the parent
     * `.service-card-icon` already transitions `color`, and `currentColor`
     * follows it on every frame. Animating BOTH `color` on the parent AND
     * `stroke` on each child causes two staggered tweens that briefly show a
     * muddy intermediate hue at hover start (the "color distortion" reported
     * by the user). With a single tween only on `color`, the recolor is
     * smooth and consistent. */
    .home-services-grid .service-card .service-card-icon svg *[stroke] {
        stroke: currentColor !important;
    }
    .home-services-grid .service-card .service-card-icon svg *[fill]:not([fill="none"]) {
        fill: currentColor !important;
    }

    .home-services-grid .service-card .service-card-arrow {
        background: transparent !important;
    }
}


/* ─── About / Stats ──────────────────────────────── */
.home-about-section {
    background: var(--hp-light);
    padding: 86px 48px;
    font-family: var(--hp-font);
}

.home-about-section *,
.home-about-section *::before,
.home-about-section *::after {
    font-family: var(--hp-font);
}
.home-about-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px; align-items: stretch;
}
.home-about-left {
    border-radius: 24px;
    background: linear-gradient(140deg, #291878 0%, #1A1060 100%);
    padding: 48px;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 420px;
    position: relative; overflow: hidden;
}
.home-about-left img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .3;
}
.home-about-left-content { position: relative; z-index: 2; }
.home-about-left-content,
.home-about-left-content * {
    color: #fff;
}
.home-about-title {
    color: #fff;
    font-family: var(--hp-font);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800; line-height: 1.2;
    letter-spacing: -.02em; margin: 0 0 16px;
}
.home-about-desc {
    font-size: 15px; color: rgba(255,255,255,.72);
    line-height: 1.6; margin: 0 0 28px;
}
.home-about-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid rgba(255,255,255,.4);
    color: #fff; border-radius: 100px;
    padding: 12px 24px; font-size: 14px; font-weight: 600;
    font-family: var(--hp-font); transition: all .25s;
}
.home-about-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

.home-about-right {
    border-radius: 24px;
    background: #fff;
    padding: 36px 38px;
    display: flex; flex-direction: column; justify-content: center;
}
.home-about-tagline {
    font-family: var(--hp-font);
    font-size: 40px;
    color: #171631;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 28px;
    max-width: 460px;
}
.home-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 26px 22px;
    border-top: 1px solid rgba(27,16,96,.12);
    padding-top: 28px;
    margin-top: 4px;
}
.home-stat-number {
    font-size: 52px; font-weight: 800;
    color: var(--hp-dark); letter-spacing: -.04em;
    line-height: 1; margin-bottom: 8px;
}
.home-stat-label {
    font-size: 13px; color: #888; font-weight: 500; line-height: 1.4;
}



/* ─── CTA ────────────────────────────────────────── */
.home-cta-section {
    background: #f3f3f9;
    padding: 86px 48px;
    font-family: var(--hp-font);
}
.home-cta-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1.1fr;
    gap: 64px; align-items: center;
}
.home-cta-mascot { display: flex; justify-content: center; align-items: center; }
.home-cta-mascot img,
.home-cta-mascot-video { width: 100%; }
.home-cta-mascot-video { display: block; object-fit: contain; }
.home-cta-mascot-fallback { display: none; }
.home-cta-mascot-svg { width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .home-cta-mascot-video {
        display: none;
    }

    .home-cta-mascot-fallback {
        display: block;
    }
}
.home-cta-card {
    background: linear-gradient(140deg, #2A1878 0%, #4B23B0 100%);
    border-radius: 28px; padding: 56px;
    position: relative; overflow: hidden;
}
.home-cta-card::before {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
    top: -120px; right: -60px;
}
.home-cta-title {
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800; color: #fff;
    letter-spacing: -.025em; line-height: 1.2;
    margin: 0 0 18px; position: relative;
}
.home-cta-desc {
    font-size: 15px; color: rgba(255,255,255,.72);
    line-height: 1.6; margin: 0 0 32px; position: relative;
}
.home-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #2A1878;
    border-radius: 100px; padding: 14px 28px;
    font-size: 15px; font-weight: 700;
    font-family: var(--hp-font);
    transition: all .25s; position: relative;
}
.home-cta-btn:hover { background: rgba(255,255,255,.9); color: #2A1878; transform: translateY(-2px); }

/* ─── Newsletter ─────────────────────────────────── */
.home-newsletter-section {
    background: linear-gradient(140deg, #0F0B28 0%, #1A1060 50%, #0F0B28 100%);
    padding: 96px 48px;
    font-family: var(--hp-font);
}
.home-newsletter-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: center;
}
.home-newsletter-label {
    font-size: 13px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--hp-teal); margin: 0 0 16px;
}
.home-newsletter-title {
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 800; color: #fff;
    letter-spacing: -.03em; line-height: 1.1;
    margin: 0 0 20px;
}
.home-newsletter-desc {
    font-size: 16px; color: rgba(255,255,255,.65);
    line-height: 1.7; margin: 0;
}
.home-newsletter-form { display: flex; flex-direction: column; gap: 12px; }
.home-newsletter-input-wrap {
    display: flex; gap: 0;
    background: rgba(255,255,255,.07);
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 100px;
    overflow: hidden;
}
.home-newsletter-input {
    flex: 1; background: transparent;
    border: none; outline: none;
    padding: 16px 24px;
    font-size: 15px; color: #fff;
    font-family: var(--hp-font);
}
.home-newsletter-input::placeholder { color: rgba(255,255,255,.4); }
.home-newsletter-btn {
    background: var(--hp-teal); color: #fff;
    border: none; border-radius: 100px;
    padding: 14px 28px; margin: 4px;
    font-size: 15px; font-weight: 700;
    font-family: var(--hp-font);
    cursor: pointer; white-space: nowrap;
    transition: background .2s, transform .2s;
}
.home-newsletter-btn:hover { background: #1da8a5; transform: translateY(-1px); }
.home-newsletter-fine {
    font-size: 13px; color: rgba(255,255,255,.35);
    margin: 0; padding-left: 24px;
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
    .home-hero-inner,
    .home-services-inner { grid-template-columns: 1fr; gap: 48px; }
    .home-about-inner { grid-template-columns: 1fr; }
    .home-cta-inner { grid-template-columns: 1fr; }
    .home-newsletter-inner { grid-template-columns: 1fr; gap: 40px; }
    .work-card,
    .event-card,
    .blog-card { flex: 0 0 calc(50% - 8px); }
}
@media (max-width: 768px) {
    .home-hero-inner { padding: 112px 24px 40px; }
    .home-hero-title { font-size: 42px; }
    .home-hero-subtitle { font-size: 18px; }
    .home-services-section,
    .home-work-section,
    .home-about-section,
    .home-events-section,
    .home-blog-section,
    .home-newsletter-section,
    .home-cta-section { padding: 64px 24px; }
    .home-logos-strip-wrapper { padding: 0 24px; }
    .home-services-grid { grid-template-columns: 1fr; }
    .service-card.featured { grid-row: auto; }
    .home-stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .home-stat-number { font-size: 40px; }
    .home-section-header,
    .home-events-header,
    .home-blog-header { flex-direction: column; gap: 16px; }
    .home-events-meta,
    .home-blog-meta { text-align: left; max-width: 100%; }
    .home-carousel-footer { margin-top: 20px; }
    .home-carousel-progress { display: none; }
    .work-card,
    .event-card,
    .blog-card { flex: 0 0 100%; }
    .home-cta-card { padding: 36px 28px; }
    .home-about-tagline {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .home-about-right::after {
        margin-bottom: 20px;
    }
}
@media (max-width: 480px) {
    .home-hero-title { font-size: 36px; }
    .home-hero-subtitle { font-size: 16px; }
    .home-logos-strip { gap: 20px; }
    .home-about-left { padding: 32px; }
    .home-about-right { padding: 32px; }
}

/* ─── Legacy Salient header overrides removed ────── */

@media (max-width: 1100px) {
    .home-site-header-inner {
        padding: 14px 24px;
        min-height: 68px;
    }
    .home-site-nav,
    .home-site-header-cta {
        display: none;
    }
    .home-site-menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }
    .home-hero-inner {
        padding-top: 112px;
    }
    .home-site-logo img {
        width: 118px;
        max-height: 30px;
    }
}

/* ─── Figma home alignment overrides ───────────────── */
body.home,
body.home .container-wrap,
body.home #ajax-content-wrap {
    background: #fff;
}

.home-page-wrapper {
    background: #fff;
    color: #242333;
    overflow: hidden;
    position: relative;
}

.home-section-title,
.home-events-title,
.home-blog-title {
    color: #242333;
    font-weight: 500;
    letter-spacing: 0;
}

.home-section-link {
    border: 1px solid rgba(36,35,51,.12);
    border-radius: 999px;
    color: #242333;
    min-height: 48px;
    padding: 0 22px;
    align-items: center;
}

.home-section-link:hover {
    color: #242333;
    border-color: rgba(36,35,51,.28);
}

.service-card.dark .service-card-desc {
    display: none;
}

@media (min-width: 1101px) {
    :root {
        --hp-page-pad: 16px;
        --hp-radius: 20px;
        --hp-inner: 1240px;
        --hp-card-gap: 20px;
    }

    .home-site-header {
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        width: 100%;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0;
    }

    .home-site-header-inner {
        max-width: var(--hp-inner);
        min-height: 68px;
        padding: 20px 0 0;
        gap: 28px;
    }

    .home-site-logo img {
        width: 144px;
        max-height: 38px;
    }

    .home-site-menu {
        height: 48px;
        background: rgba(255,255,255,.22);
        border-radius: 999px;
        padding: 0;
    }

    .home-site-menu li a {
        font-size: 14px;
        font-weight: 500;
        padding: 0 28px;
    }

    .home-site-header-cta {
        height: 48px;
        min-width: 132px;
        justify-content: center;
        padding: 0 24px;
        font-size: 14px;
        font-weight: 500;
        background: #1f2026;
        border: 0;
    }

    .home-hero-section {
        margin: var(--hp-page-pad) var(--hp-page-pad) 0;
        border-radius: var(--hp-radius) var(--hp-radius) 0 0;
        background:
            radial-gradient(circle at 95% 12%, rgba(71,138,205,.58) 0 9%, transparent 26%),
            radial-gradient(circle at 46% -2%, rgba(255,255,255,.18) 0 10%, transparent 25%),
            radial-gradient(circle at 49% 98%, rgba(136,125,216,.36) 0 17%, transparent 37%),
            radial-gradient(circle at 20% 82%, rgba(146,75,204,.5) 0 16%, transparent 36%),
            linear-gradient(132deg, #521bc3 0%, #2e1b91 42%, #143a82 100%);
    }

    .home-hero-inner {
        max-width: var(--hp-inner);
        padding: 168px 0 76px;
        grid-template-columns: 600px 480px;
        gap: 160px;
    }

    .home-hero-title {
        max-width: 620px;
        font-size: 84px;
        line-height: 1.05;
        letter-spacing: 0;
        margin-bottom: 22px;
    }

    .home-hero-subtitle {
        font-size: 31px;
        line-height: 1.25;
        margin-bottom: 32px;
    }

    .home-hero-cta {
        min-height: 48px;
        padding: 0 24px;
        font-size: 14px;
        font-weight: 500;
    }

    .home-hero-card {
        --hp-hero-card-radius: 16px;
        width: 480px;
        max-width: 100%;
        aspect-ratio: 6 / 5;
        margin-left: auto;
        box-shadow: none;
    }

    .home-hero-card img {
        filter: none;
    }

    .home-hero-card-overlay {
        top: auto;
        left: 16px;
        right: 16px;
        bottom: 16px;
        height: 124px;
        background: rgba(28,29,25,.72);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        align-items: center;
        padding: 0 24px;
        border-radius: var(--hp-hero-card-radius);
    }

    .home-hero-card-text {
        font-size: 24px;
        line-height: 1.22;
        font-weight: 400;
        margin: 0;
    }

    .home-hero-play-btn {
        width: 48px;
        height: 48px;
    }

    .home-logos-strip-wrapper {
        border-top: 0;
        border-bottom: 1px solid rgba(255,255,255,.42);
        padding: 0;
    }

    .home-logos-strip {
        max-width: none;
        padding: 52px 24px 60px;
        gap: 36px;
        justify-content: space-between;
    }

    .home-logos-strip .logo-item,
    .home-logos-strip > span,
    .home-logos-strip > a {
        font-size: 13px;
        font-weight: 700;
        min-height: 38px;
        color: rgba(255,255,255,.94);
        opacity: 1;
    }

    .home-logos-strip .logo-item img,
    .home-logos-strip > span img,
    .home-logos-strip > a img {
        width: var(--home-logo-w, auto);
        max-width: var(--home-logo-max-w, 132px);
        height: auto;
        max-height: var(--home-logo-max-h, 36px);
    }

    .home-services-section {
        padding: 110px 0 112px;
        background: transparent;
        /* Wrapper provides the shared purple animated bg now. */
    }

    .home-services-section::before {
        display: none;
    }

    .home-services-inner {
        max-width: var(--hp-inner);
        grid-template-columns: 500px 608px;
        gap: 132px;
        align-items: start;
    }

    .home-services-left {
        padding-top: 62px;
    }

    .home-services-label {
        color: #fff;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        margin-bottom: 24px;
    }

    .home-services-title {
        max-width: 500px;
        font-size: 40px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0;
        margin-bottom: 52px;
    }

    .home-services-cta {
        min-height: 48px;
        padding: 0 24px;
        font-size: 14px;
        font-weight: 500;
        background: transparent;
        border-color: rgba(255,255,255,.9);
    }

    .home-services-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 210px;
        gap: var(--hp-card-gap);
    }

    .service-card {
        min-height: 210px;
        border-radius: 14px;
        padding: 30px 32px;
        justify-content: space-between;
        transform: none;
    }

    .service-card:hover {
        transform: none;
    }

    .service-card:nth-child(2),
    .service-card:nth-child(4) {
        transform: translateY(72px);
    }

    .service-card:nth-child(2):hover,
    .service-card:nth-child(4):hover {
        transform: translateY(72px);
    }

    .service-card.featured {
        min-height: 210px;
        position: relative;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.08);
    }

    .service-card.featured:hover,
    .service-card.featured:focus-visible {
        background: #fff;
        border-color: #fff;
    }

    .service-card.dark {
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.08);
    }

    .service-card-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 0;
    }

    .service-card-title {
        font-size: 26px;
        font-weight: 600;
        line-height: 1.18;
        letter-spacing: 0;
        margin: 0;
    }

    .service-card.featured .service-card-title {
        color: #fff;
    }

    .service-card.featured:hover .service-card-title,
    .service-card.featured:focus-visible .service-card-title {
        color: #242333;
    }

    .service-card-desc {
        margin: 10px 0 0;
        font-size: 15px;
        line-height: 1.45;
        color: #242333;
    }

    .service-card.featured .service-card-desc {
        max-height: 0;
        margin: 0;
        opacity: 0;
        overflow: hidden;
    }

    .service-card.featured:hover .service-card-desc,
    .service-card.featured:focus-visible .service-card-desc {
        max-height: 96px;
        margin: 10px 0 0;
        opacity: 1;
    }

    /* dark card desc is hidden via max-height/opacity (revealed on hover), not display:none */
    .service-card.dark .service-card-desc {
        display: block;
    }

    .service-card-arrow {
        position: absolute;
        top: 24px;
        right: 24px;
        width: 40px;
        height: 40px;
        background: #f0eff8;
        opacity: 0;
        transform: scale(.9);
    }

    .service-card.featured:hover .service-card-arrow,
    .service-card.featured:focus-visible .service-card-arrow {
        opacity: 1;
        transform: scale(1);
    }

    .service-card-arrow svg path {
        stroke: #242333;
    }

    .home-work-section {
        padding: 136px 0 92px;
    }

    .home-work-inner,
    .home-events-inner,
    .home-blog-inner {
        max-width: var(--hp-inner);
    }

    .home-section-header {
        margin-bottom: 46px;
    }

    .home-section-title,
    .home-events-title,
    .home-blog-title {
        font-size: 40px;
        line-height: 1.16;
    }

    .home-work-track,
    .home-blog-cards {
        gap: var(--hp-card-gap);
    }

    .work-card,
    .blog-card {
        flex: 0 0 calc((100% - (var(--hp-card-gap) * 2)) / 3);
        border-radius: 14px;
    }

    .work-card-image {
        aspect-ratio: 400 / 276;
    }

    .work-card-body {
        padding: 28px 32px 32px;
    }

    .work-card-title {
        font-size: 24px;
        line-height: 1.2;
        font-weight: 500;
        margin-bottom: 12px;
    }

    .work-card-desc {
        font-size: 15px;
        line-height: 1.45;
        color: #55525f;
        margin: 0 0 18px;
    }

    .work-card-tags,
    .blog-card-tags {
        margin: 0;
        gap: 8px;
    }

    .work-card-tag,
    .blog-card-tag,
    .event-card-tag {
        letter-spacing: 0;
        font-size: 11px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        padding: 6px 13px;
        color: #3f3263;
        background: #e8e5f0;
    }

    .home-carousel-footer {
        margin-top: 54px;
    }

    .carousel-nav-btn {
        width: 48px;
        height: 48px;
        border: 1px solid #e2e0e8;
        color: #242333;
    }

    .home-about-section {
        background: #fff;
        padding: 86px 0 120px;
    }

    .home-about-inner {
        max-width: var(--hp-inner);
        gap: var(--hp-card-gap);
    }

    .home-about-left,
    .home-about-right {
        border-radius: 14px;
        min-height: 500px;
    }

    .home-about-left {
        padding: 56px;
    }

    .home-about-title {
        max-width: 430px;
        font-size: 38px;
        line-height: 1.14;
        font-weight: 500;
        letter-spacing: 0;
    }

    .home-about-desc {
        max-width: 500px;
        font-size: 16px;
        line-height: 1.5;
        color: #fff;
    }

    .home-about-btn {
        min-height: 48px;
        padding: 0 24px;
        font-size: 14px;
        font-weight: 500;
        border-color: rgba(255,255,255,.85);
        color: #fff;
    }

    .home-about-right {
        background: #f5f2fb;
        padding: 68px 56px 58px;
        justify-content: flex-start;
    }

    .home-about-tagline {
        font-size: 24px;
        line-height: 1.24;
        font-weight: 600;
        letter-spacing: 0;
        max-width: 500px;
        margin-bottom: 54px;
    }

    .home-stats-grid {
        gap: 58px 96px;
        padding-top: 32px;
    }

    .home-stat-number {
        font-size: 38px;
        font-weight: 500;
        letter-spacing: 0;
        color: #171631;
    }

    .home-stat-label {
        font-size: 15px;
        color: #171631;
    }

    .home-events-section {
        background: #f3f2f8;
        padding: 116px 0 92px;
    }

    .home-events-header,
    .home-blog-header {
        margin-bottom: 48px;
    }

    .home-events-meta,
    .home-blog-meta {
        max-width: 560px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 42px;
        text-align: left;
        align-items: start;
    }

    .home-events-desc,
    .home-blog-desc {
        color: #242333;
        font-size: 16px;
        line-height: 1.45;
        margin: 0;
    }

    .home-events-cards {
        gap: var(--hp-card-gap);
    }

    .event-card {
        flex: 0 0 calc((100% - var(--hp-card-gap)) / 2);
        border-radius: 14px;
        background: #fff;
    }

    .event-card-image {
        aspect-ratio: 610 / 272;
        min-height: 0;
    }

    .event-card-body {
        min-height: 124px;
        padding: 0 32px 28px;
        align-items: center;
    }

    .event-card-tag {
        transform: translateY(-14px);
        margin-bottom: 0;
    }

    .event-card-title {
        font-size: 24px;
        line-height: 1.18;
        font-weight: 500;
    }

    .event-card-date {
        color: #242333;
        font-size: 13px;
    }

    .event-register-btn {
        min-width: 126px;
        min-height: 48px;
        justify-content: center;
        padding: 0 20px;
        color: #242333;
    }

    .home-blog-section {
        background: #fff;
        padding: 136px 0 90px;
    }

    .blog-card {
        background: transparent;
        overflow: visible;
    }

    .blog-card-image {
        aspect-ratio: 400 / 236;
        min-height: 0;
        border-radius: 14px;
    }

    .blog-card-body {
        padding: 24px 0 0;
    }

    .blog-card-badge {
        left: 16px;
        bottom: 16px;
        border-radius: 999px;
        padding: 9px 14px;
        font-size: 12px;
        font-weight: 500;
    }

    .blog-card-title {
        font-size: 24px;
        line-height: 1.22;
        font-weight: 500;
        margin-bottom: 12px;
    }

    .blog-card-desc {
        font-size: 15px;
        line-height: 1.45;
        color: #55525f;
        margin: 0 0 18px;
    }

    .home-cta-section {
        background: var(--hp-light);
        padding: 84px 0 0;
    }

    .home-cta-inner {
        max-width: var(--hp-inner);
        grid-template-columns: 584px 610px;
        gap: 46px;
        align-items: end;
    }

    .home-cta-mascot {
        align-self: end;
        justify-content: center;
        width: 584px;
        height: 520px;
        overflow: hidden;
    }

    .home-cta-mascot img,
    .home-cta-mascot-video,
    .home-cta-mascot-svg {
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
    }

    .home-cta-card {
        min-height: 347px;
        margin-bottom: 86px;
        border-radius: 14px;
        padding: 52px 64px;
        background-color: #1c55bd;
        background-image: url('../img/home-cta-card-bg.webp');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .home-cta-card::before {
        display: none;
    }

    .home-cta-title {
        max-width: 470px;
        font-size: 40px;
        line-height: 1.16;
        font-weight: 500;
        letter-spacing: 0;
        color: #fff;
    }

    .home-cta-desc {
        max-width: 500px;
        font-size: 16px;
        line-height: 1.45;
        color: #fff;
    }

    .home-cta-btn {
        min-height: 48px;
        padding: 0 24px;
        font-size: 14px;
        font-weight: 500;
    }
}

@media (max-width: 1100px) {
    .home-site-header {
        position: absolute;
    }

    .home-hero-section {
        margin: 10px 10px 0;
        border-radius: 18px 18px 0 0;
    }

    .home-services-section {
        margin: 0 10px 48px;
        border-radius: 0 0 18px 18px;
    }

    .home-section-link {
        align-self: flex-start;
    }

    .work-card,
    .event-card,
    .blog-card {
        border-radius: 14px;
    }
}

/* ─── Interactive polish + exact home behavior ───────────── */
.home-work-carousel,
.home-events-carousel,
.home-blog-carousel {
    overflow: hidden;
}

.carousel-nav-btn.disabled,
.carousel-nav-btn:disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

.home-logos-strip {
    overflow: hidden;
    scrollbar-width: none;
}

.home-logos-marquee {
    display: flex;
    width: max-content;
    min-width: 100%;
    animation: hp-logo-marquee 32s linear 3s infinite;
}

.home-logos-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 52px;
    flex: 0 0 calc(100% + 30px);
    min-width: calc(100% + 30px);
    padding-right: 0;
}

.home-logos-strip:hover .home-logos-marquee {
    animation-play-state: paused;
}

.home-logos-strip .logo-item,
.home-logos-strip > span,
.home-logos-strip > a {
    flex: 0 0 auto;
}

@keyframes hp-logo-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .home-logos-marquee {
        animation: none;
    }
}

.service-card {
    position: relative;
}

.service-card.dark:hover,
.service-card.dark:focus-visible {
    background: #fff;
    border-color: #fff;
}

.service-card.dark:hover .service-card-title,
.service-card.dark:focus-visible .service-card-title {
    color: #242333;
}

.service-card.dark .service-card-desc {
    display: block;
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    color: #242333;
    transition: max-height .2s ease, margin .2s ease, opacity .2s ease;
}

.service-card.dark:hover .service-card-desc,
.service-card.dark:focus-visible .service-card-desc {
    max-height: 96px;
    margin: 10px 0 0;
    opacity: 1;
}

/* REMOVED: legacy rule that set `stroke: #6d44b7` (purple) on every dark card's
 * icon on hover. It applied to AI/Teams/Product alike, causing a brief purple
 * flash before the per-card --svc-accent kicked in. Hover recolor now follows
 * `currentColor` via the @media (min-width: 769px) block above, which uses
 * !important + the right per-card accent. */

.service-card:hover .service-card-arrow,
.service-card:focus-visible .service-card-arrow {
    opacity: 1;
    transform: scale(1);
}

.service-card.dark .service-card-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: #f0eff8;
    opacity: 0;
    transform: scale(.9);
}

.service-card.dark:hover .service-card-arrow,
.service-card.dark:focus-visible .service-card-arrow {
    opacity: 1;
    transform: scale(1);
}

.service-card.dark .service-card-arrow svg path {
    stroke: #242333;
}

.home-about-left::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(106,73,168,.22) 38%, rgba(104,47,166,.74) 100%),
        linear-gradient(90deg, rgba(72,38,139,.24) 0%, rgba(72,38,139,.08) 54%, rgba(255,255,255,.08) 100%);
    pointer-events: none;
}

.home-about-left img {
    z-index: 0;
    opacity: 1;
    filter: grayscale(.05);
}

@media (min-width: 1101px) {
    .home-hero-section {
        background:
            radial-gradient(ellipse 520px 760px at 101% 8%, rgba(71,137,205,.7) 0 38%, transparent 62%),
            radial-gradient(ellipse 640px 430px at 47% -3%, rgba(255,255,255,.18) 0 36%, transparent 63%),
            radial-gradient(ellipse 680px 760px at 54% 103%, rgba(78,61,184,.74) 0 44%, transparent 70%),
            radial-gradient(ellipse 520px 700px at 19% 88%, rgba(156,77,209,.72) 0 42%, transparent 70%),
            linear-gradient(132deg, #5520c1 0%, #2f1a91 43%, #143b82 100%);
    }

    .home-services-section {
        background:
            radial-gradient(ellipse 680px 780px at 54% -12%, rgba(75,60,181,.72) 0 43%, transparent 70%),
            radial-gradient(ellipse 500px 660px at 19% 29%, rgba(152,80,207,.66) 0 42%, transparent 70%),
            radial-gradient(ellipse 620px 700px at 92% 72%, rgba(76,135,195,.52) 0 42%, transparent 72%),
            linear-gradient(132deg, #5520c1 0%, #2f1a91 43%, #143b82 100%);
    }

    .hp-blob {
        filter: blur(54px);
        opacity: .72;
    }

    .hp-blob-1 {
        width: 560px;
        height: 560px;
        top: -120px;
        right: -120px;
        background: rgba(84,146,208,.36);
    }

    .hp-blob-2 {
        width: 540px;
        height: 540px;
        top: 520px;
        right: 370px;
        background: rgba(80,63,184,.45);
    }

    .hp-blob-3 {
        width: 500px;
        height: 500px;
        bottom: -150px;
        right: 30px;
        background: rgba(78,133,191,.28);
    }

    .hp-blob-4 {
        width: 520px;
        height: 520px;
        top: 820px;
        left: 80px;
        background: rgba(163,80,212,.4);
    }

    .home-hero-card {
        background: #151515;
    }

    .home-hero-card img {
        height: calc(100% + 34px);
        transform: translateY(-28px) scale(1.03);
        transform-origin: center top;
    }
}

/* Figma top frame lock: Frame 1618873642 */
@media (min-width: 1101px) {
    .home-hero-section,
    .home-services-section {
        background-image: url('../img/home-top-bg.webp');
        background-repeat: no-repeat;
        background-size: 100% 1513px;
        background-color: #34209a;
    }

    .home-hero-section {
        background-position: center top;
    }

    .home-services-section {
        background-position: center -795px;
        padding-bottom: 106px;
        min-height: 718px;
    }

    .home-services-inner {
        grid-template-columns: 560px 608px;
        gap: 72px;
    }

    .home-services-title {
        max-width: 560px;
    }

    .hp-blob {
        display: none;
    }

    .home-hero-play-btn {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    body[data-button-style*="slightly_rounded"] .home-page-wrapper .home-hero-play-btn {
        border-radius: 50% !important;
    }

    .service-card.featured {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.08);
    }

    .service-card.featured:hover,
    .service-card.featured:focus-visible {
        background: #fff;
        border-color: #fff;
    }

    .service-card.featured .service-card-title {
        color: #fff;
    }

    .service-card.featured:hover .service-card-title,
    .service-card.featured:focus-visible .service-card-title {
        color: #242333;
    }

    .service-card.featured .service-card-icon svg * {
        stroke: rgba(255,255,255,.9);
    }

    .service-card.featured:hover .service-card-icon svg *,
    .service-card.featured:focus-visible .service-card-icon svg * {
        stroke: #8a4ee8;
    }
}

/* Figma mobile top frame */
@media (max-width: 768px) {
    body.home,
    body.home .container-wrap,
    body.home #ajax-content-wrap {
        background: #fff;
    }

    .home-site-header {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 20;
    }

    .home-site-header.is-scrolled,
    .home-site-header.is-menu-open {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .home-site-header-inner {
        min-height: 64px;
        padding: 0 16px;
        gap: 12px;
    }

    .home-site-logo img {
        width: 116px;
        max-height: 30px;
        filter: brightness(0) saturate(100%);
    }

    .home-site-menu-toggle {
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #242333;
        position: relative;
    }

    .home-site-menu-toggle span {
        display: none;
    }

    .home-site-menu-toggle::before,
    .home-site-menu-toggle::after {
        content: '';
        position: absolute;
        left: 7px;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    .home-site-menu-toggle::before {
        top: 11px;
    }

    .home-site-menu-toggle::after {
        top: 19px;
    }

    .home-mobile-menu {
        background: #fff;
        padding: 0 16px 16px;
    }

    .home-mobile-menu-list li a {
        color: #242333;
        border-bottom-color: rgba(36,35,51,.12);
    }

    .home-mobile-menu-cta {
        background: #242333;
        color: #fff;
    }

    .home-hero-section,
    .home-services-section {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        background-image: url('../img/home-top-bg.webp');
        background-repeat: no-repeat;
        background-size: auto 1439px;
        background-color: #34209a;
    }

    .home-hero-section {
        height: 715px;
        margin-top: 0;
        overflow: hidden;
        background-position: 50% 0;
    }

    .home-hero-inner {
        display: block;
        padding: 55px 16px 0;
        max-width: none;
    }

    /* Figma mobile (375): Headline/XL/Medium — Onest 32/500/lh:1.2/ls:-1px */
    .home-hero-title {
        width: 100%;
        max-width: 343px;
        font-size: 32px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -1px;
        margin: 0 0 16px;
    }

    /* Figma mobile: Body/L/Medium — Onest 18/500/lh:1.2 */
    .home-hero-subtitle {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        margin: 0 0 26px;
        color: rgba(255,255,255,.92);
    }

    .home-hero-cta {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        padding: 0 22px;
        border: 0;
        font-size: 14px;
        font-weight: 500;
    }

    .home-hero-card {
        --hp-hero-card-radius: 12px;
        width: 100%;
        aspect-ratio: 343 / 270;
        margin-top: 32px;
        box-shadow: none;
    }

    .home-hero-card img {
        filter: none;
        transform: none;
        height: 100%;
        object-position: center top;
    }

    .home-hero-card-overlay {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        height: 96px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 32px;
        gap: 12px;
        padding: 0 16px;
        border-radius: 0 0 var(--hp-hero-card-radius) var(--hp-hero-card-radius);
        background: rgba(28,29,25,.72);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        align-items: center;
    }

    .home-hero-card-text {
        font-size: 15px;
        line-height: 1.35;
        font-weight: 400;
        max-width: none;
        margin: 0;
    }

    .home-hero-play-btn {
        display: flex !important;
        justify-self: end;
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    body[data-button-style*="slightly_rounded"] .home-page-wrapper .home-hero-play-btn {
        border-radius: 50% !important;
    }

    .home-hero-play-btn svg {
        width: 12px;
        height: 14px;
    }

    .home-logos-strip-wrapper {
        margin-top: 48px;
        padding: 0;
        border-top: 0;
        border-bottom: 1px solid rgba(255,255,255,.28);
    }

    .home-logos-strip {
        width: 100%;
        padding: 0;
        height: 64px;
        max-width: none;
        align-items: center;
    }

    .home-logos-marquee {
        animation-duration: 26s;
    }

    .home-logos-track {
        gap: 34px;
        flex-basis: max-content;
        min-width: max-content;
        padding-right: 34px;
    }

    .home-logos-strip .logo-item {
        min-height: 64px;
    }

    .home-logos-strip .logo-item img {
        max-height: 32px;
        transform: scale(.84);
        transform-origin: center;
    }

    .home-services-section {
        margin-top: 0;
        margin-bottom: 0;
        padding: 48px 0 47px;
        overflow: hidden;
        background-position: 50% -715px;
    }

    .home-services-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: none;
        margin: 0;
    }

    .home-services-left {
        display: contents;
    }

    .home-services-label,
    .home-services-title,
    .home-services-cta {
        margin-left: 16px;
        margin-right: 16px;
    }

    .home-services-label {
        order: 1;
        color: #fff;
        font-size: 17px;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        margin-bottom: 16px;
    }

    .home-services-title {
        order: 2;
        max-width: 343px;
        font-size: 29px;
        line-height: 1.18;
        font-weight: 500;
        letter-spacing: 0;
        margin-bottom: 53px;
    }

    .home-services-title br {
        display: none;
    }

    .home-services-grid {
        order: 3;
        display: flex;
        grid-template-columns: none;
        gap: 20px;
        width: 100%;
        padding: 0 16px;
        overflow-x: auto;
        scroll-snap-type: none;
        scrollbar-width: none;
    }

    .home-services-grid::-webkit-scrollbar {
        display: none;
    }

    .service-card,
    .service-card:nth-child(2),
    .service-card:nth-child(4),
    .service-card:nth-child(2):hover,
    .service-card:nth-child(4):hover {
        flex: 0 0 280px;
        width: 280px;
        min-height: 210px;
        height: 210px;
        border-radius: 12px;
        padding: 32px;
        position: relative;
        transform: none;
        scroll-snap-align: start;
    }

    .service-card.featured,
    .service-card.dark {
        background: #fff;
        border-color: #fff;
    }

    .service-card.featured .service-card-title,
    .service-card.dark .service-card-title {
        color: #242333;
    }

    .service-card.featured .service-card-icon svg * {
        stroke: #8a4ee8;
    }

    .service-card.dark .service-card-icon svg * {
        stroke: #20b7ae;
    }

    .service-card.featured .service-card-desc {
        display: block;
        max-height: none;
        margin: 12px 0 0;
        opacity: 1;
        overflow: visible;
        color: #242333;
    }

    .service-card.featured .service-card-arrow {
        opacity: 1;
        transform: scale(1);
    }

    .service-card-title {
        font-size: 28px;
        line-height: 1.15;
        font-weight: 600;
    }

    .service-card-desc {
        font-size: 15px;
        line-height: 1.45;
    }

    .service-card-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 38px;
    }

    .service-card-arrow,
    .service-card.dark .service-card-arrow {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: #f3f1f7;
    }

    .service-card-arrow svg path {
        stroke: #242333;
    }

    .home-services-cta {
        order: 4;
        width: calc(100% - 32px);
        min-height: 48px;
        justify-content: center;
        margin-top: 32px;
        padding: 0 24px;
        border-color: rgba(255,255,255,.88);
        background: transparent;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
    }

    .home-cta-card {
        display: none;
    }
}

/* ─── Client top-section corrections ───────────────── */
.home-site-header-cta,
.home-hero-cta,
.home-services-cta,
.home-mobile-menu-cta {
    line-height: 1;
    gap: 8px;
}

.home-mobile-menu-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-section-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    padding: 0 22px;
    line-height: 1;
    color: #242333;
    border-color: #e2e0e8;
}

.home-section-link:hover {
    gap: 7px;
    color: #242333;
    border-color: #cbc6d5;
}

.home-carousel-progress {
    height: 1px;
    background: #ded9e7;
    overflow: hidden;
}

.home-carousel-progress span {
    height: 1px;
    background: #3f3263;
}

.home-page-wrapper .carousel-nav-btn,
body[data-button-style*="slightly_rounded"] .home-page-wrapper .carousel-nav-btn {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border-color: #e2e0e8 !important;
    background: #fff !important;
    color: #242333 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.home-page-wrapper .carousel-nav-btn:hover,
body[data-button-style*="slightly_rounded"] .home-page-wrapper .carousel-nav-btn:hover {
    border-color: #cbc6d5 !important;
    color: #242333 !important;
}

.home-page-wrapper .carousel-nav-btn:disabled,
.home-page-wrapper .carousel-nav-btn.disabled {
    color: #a9a5b6 !important;
}

@media (min-width: 1101px) {
    .home-events-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--hp-card-gap);
        align-items: start;
    }

    .home-events-meta {
        width: 100%;
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: start;
        text-align: left;
    }

    .home-events-desc {
        max-width: none;
    }

    .home-events-carousel {
        overflow: visible;
        position: relative;
    }

    .home-events-carousel::after {
        content: '';
        position: absolute;
        top: 0;
        right: calc((var(--hp-inner) - 100vw) / 2);
        bottom: 96px;
        z-index: 3;
        width: 160px;
        background: linear-gradient(90deg, rgba(243,242,248,0) 0%, #f3f2f8 86%);
        pointer-events: none;
    }

    .home-events-cards {
        overflow: visible;
    }

    /* Off-screen / peek cards faded — class is added dynamically by home.js
     * (.is-faded), so it tracks the current scroll index, not the DOM index. */
    .home-events-cards .event-card.is-faded {
        opacity: .42;
    }

    .home-blog-carousel {
        overflow: visible;
        position: relative;
    }

    .home-blog-cards {
        overflow: visible;
    }

    .home-blog-cards .blog-card.is-faded {
        opacity: .42;
    }

    .blog-card-tags {
        align-items: center;
        padding-bottom: 2px;
    }

    .blog-card-tag {
        min-height: 24px;
        line-height: 1;
    }
}

@media (min-width: 1101px) {
    .home-page-wrapper {
        --hp-frame-pad: 16px;
        --hp-frame-radius: 20px;
        --hp-top-progress: 0%;
    }

    .home-site-header-inner {
        padding-top: 21px;
    }

    .home-site-logo img {
        width: 144px;
        height: auto;
        max-height: none;
    }

    .home-site-menu {
        overflow: hidden;
    }

    .home-site-menu > li:first-child,
    .home-site-menu > li:first-child a {
        border-radius: 999px 0 0 999px;
    }

    .home-site-menu > li:nth-child(4),
    .home-site-menu > li:nth-child(4) a {
        border-radius: 0 999px 999px 0;
    }

    .home-site-menu > li:nth-child(n+5) a {
        color: #fff;
    }

    .home-site-menu > li:nth-child(n+5) a:hover {
        color: #fff;
    }

    .home-hero-section {
        margin: var(--hp-frame-pad) var(--hp-frame-pad) 0;
        border-radius: var(--hp-frame-radius) var(--hp-frame-radius) 0 0;
        background-image: url('../img/home-hero-bg.webp');
        background-size: cover;
        background-position: center top;
        transition: margin .08s linear, border-radius .08s linear;
    }

    .home-hero-bg-video {
        display: block;
    }

    .home-hero-inner,
    .home-logos-strip-wrapper {
        position: relative;
        z-index: 2;
    }

    .home-logos-strip-wrapper {
        border-bottom: 0;
    }

    .home-logos-strip-wrapper::before,
    .home-logos-strip-wrapper::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        pointer-events: none;
    }

    .home-logos-strip-wrapper::before {
        width: 100%;
        background: rgba(255,255,255,.16);
    }

    /* Status bar fills synchronously with the marquee animation
     * (independent of page scroll). Marquee duration on desktop = 25.6s,
     * so the bar grows 0% → 100% over the same window, then snaps back. */
    .home-logos-strip-wrapper::after {
        width: 0%;
        background: rgba(255, 255, 255, .48);
        animation: hp-logos-progress 25.6s linear 3s infinite;
    }
    @keyframes hp-logos-progress {
        from { width: 0%; }
        to   { width: 100%; }
    }
    /* Pause the status bar fill while the marquee is paused (mouse hover). */
    .home-logos-strip-wrapper:hover::after {
        animation-play-state: paused;
    }

    .home-logos-strip {
        padding: 46px 24px 48px;
    }

    .home-logos-marquee {
        animation-duration: 25.6s;
    }

    .home-logos-track {
        justify-content: flex-start;
        gap: 38px;
        flex: 0 0 max-content;
        min-width: max-content;
        padding-right: 38px;
    }

    .home-services-section {
        margin: 0 var(--hp-frame-pad);
        border-radius: 0 0 var(--hp-frame-radius) var(--hp-frame-radius);
        background-image: url('../img/home-top-bg.webp');
        background-size: 100% 1513px;
        background-position: center -795px;
        transition: margin .08s linear, border-radius .08s linear;
    }

    .service-card.featured,
    .service-card.dark {
        background: rgba(255,255,255,.16);
        border-color: rgba(255,255,255,.12);
    }

    .service-card {
        padding: 30px 32px 28px;
    }

    .service-card-icon {
        width: 34px;
        height: 34px;
    }

    .service-card-title {
        line-height: 1.16;
    }

    .service-card.dark:hover .service-card-desc,
    .service-card.dark:focus-visible .service-card-desc,
    .service-card.featured:hover .service-card-desc,
    .service-card.featured:focus-visible .service-card-desc {
        margin-top: 12px;
    }
}

/* ─── Mobile homepage Figma pass ─────────────────── */
@media (max-width: 768px) {
    .home-page-wrapper {
        font-family: 'Onest', Arial, sans-serif;
    }

    .home-site-logo img {
        width: 116px;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

    .home-mobile-menu {
        padding: 2px 16px 18px;
    }

    .home-mobile-menu-list,
    .home-mobile-menu-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .home-mobile-menu-list li {
        margin: 0;
        padding: 0;
    }

    .home-mobile-menu-list li:nth-child(-n+4) a {
        font-size: 18px;
        font-weight: 500;
    }

    .home-mobile-menu-list li:nth-child(4) {
        margin-bottom: 10px;
    }

    .home-mobile-menu-list li:nth-child(4)::after {
        content: '';
        display: block;
        height: 1px;
        margin-top: 10px;
        background: rgba(36,35,51,.12);
    }

    .home-mobile-menu-list li:nth-child(n+5) a {
        min-height: 48px;
        font-size: 16px;
        color: #4b4858;
    }

    .home-hero-bg-video {
        display: block;
        width: auto;
        min-width: 100%;
        height: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center top;
        opacity: .96;
    }

    .home-hero-card-overlay {
        padding: 0 24px;
        background: rgba(28,29,25,.76);
    }

    .home-hero-card-text {
        font-size: 14px;
        line-height: 1.38;
    }

    .home-logos-strip-wrapper {
        margin-top: 44px;
        border-bottom-color: rgba(255,255,255,.22);
    }

    .home-logos-marquee {
        animation: hp-logo-marquee 24s linear infinite;
    }

    .home-logos-track {
        gap: 28px;
        padding-right: 28px;
    }

    .home-services-title {
        color: #fff;
        font-size: 30px;
        line-height: 1.16;
    }

    .home-services-grid {
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
    }

    .service-card,
    .service-card:nth-child(2),
    .service-card:nth-child(4),
    .service-card:nth-child(2):hover,
    .service-card:nth-child(4):hover {
        flex-basis: 286px;
        width: 286px;
        min-height: 248px;
        height: auto;
        padding: 28px;
    }

    .service-card-icon {
        margin-bottom: 34px;
    }

    .service-card.dark .service-card-desc,
    .service-card.dark:hover .service-card-desc,
    .service-card.dark:focus-visible .service-card-desc {
        display: block;
        max-height: none;
        margin: 12px 0 0;
        opacity: 1;
        overflow: visible;
        color: #242333;
    }

    .service-card.dark .service-card-arrow,
    .service-card.dark:hover .service-card-arrow,
    .service-card.dark:focus-visible .service-card-arrow {
        opacity: 1;
        transform: scale(1);
    }

    .home-work-section,
    .home-events-section,
    .home-blog-section {
        padding-left: 0;
        padding-right: 0;
    }

    .home-work-section {
        padding-top: 58px;
        padding-bottom: 50px;
    }

    .home-blog-section {
        background: #fff;
        padding-top: 58px;
        padding-bottom: 20px;
    }

    .home-section-header,
    .home-events-header,
    .home-blog-header {
        padding: 0 24px;
        margin-bottom: 28px;
    }

    .home-section-title,
    .home-events-title,
    .home-blog-title {
        font-size: 30px;
        line-height: 1.12;
        font-weight: 500;
        letter-spacing: 0;
    }

    .home-section-link {
        align-self: flex-start;
        min-height: 38px;
        padding: 0 18px;
        font-size: 13px;
    }

    .home-work-carousel,
    .home-events-carousel,
    .home-blog-carousel {
        overflow: visible;
    }

    .home-work-track,
    .home-events-cards,
    .home-blog-cards {
        width: 100%;
        margin: 0;
        padding: 0 24px 8px !important;
        gap: 16px;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        transform: none !important;
        transition: none;
        scrollbar-width: none;
    }

    .home-work-track::-webkit-scrollbar,
    .home-events-cards::-webkit-scrollbar,
    .home-blog-cards::-webkit-scrollbar {
        display: none;
    }

    .work-card,
    .event-card,
    .blog-card {
        flex: 0 0 min(286px, calc(100vw - 80px));
        width: min(286px, calc(100vw - 80px));
        min-width: 0;
        scroll-snap-align: start;
    }

    .work-card:hover,
    .event-card:hover,
    .blog-card:hover {
        transform: none;
    }

    .home-work-section .home-carousel-footer,
    .home-events-section .home-carousel-footer,
    .home-blog-section .home-carousel-footer {
        display: none;
    }

    .work-card {
        background: #f1eff7;
        border-radius: 10px;
    }

    .work-card-body {
        padding: 18px 18px 20px;
    }

    .work-card-title {
        font-size: 17px;
        line-height: 1.28;
        margin-bottom: 9px;
    }

    .work-card-desc {
        font-size: 12px;
        line-height: 1.45;
        margin-bottom: 14px;
    }

    .work-card-tags,
    .event-card-tags,
    .blog-card-tags {
        gap: 7px;
    }

    .work-card-tag,
    .event-card-tag,
    .blog-card-tag {
        min-height: 23px;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 10px;
        line-height: 1;
    }

    .home-about-section {
        background: #fff;
        border-top: 1px solid #e7e3ef;
        padding: 48px 24px 54px;
    }

    .home-about-left {
        border-radius: 12px;
        overflow: hidden;
    }

    .home-about-title {
        font-size: 28px;
        line-height: 1.12;
    }

    .home-about-desc {
        font-size: 13px;
        line-height: 1.45;
    }

    .home-about-right {
        background: #fff;
        border: 1px solid #ece8f4;
        box-shadow: none;
    }

    .home-about-tagline {
        font-size: 22px;
        line-height: 1.14;
    }

    .home-stat-number {
        color: #151126;
    }

    .home-events-section {
        padding-top: 58px;
        padding-bottom: 54px;
        background: #f5f4fa;
    }

    .home-events-meta,
    .home-blog-meta {
        gap: 14px;
    }

    .home-events-desc {
        font-size: 13px;
        line-height: 1.5;
        max-width: 310px;
    }

    .event-card {
        background: #fff;
        border-radius: 10px;
        box-shadow: none;
    }

    .event-card-image {
        aspect-ratio: 286 / 176;
        height: auto;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
    }

    .event-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .event-card-body {
        display: block;
        padding: 15px 16px 16px;
    }

    .event-card-title {
        font-size: 15px;
        line-height: 1.28;
        margin-top: 14px;
    }

    .event-card-date {
        font-size: 11px;
        line-height: 1.35;
    }

    .event-register-btn {
        width: 100%;
        min-height: 38px;
        margin-top: 16px;
        justify-content: center;
    }

    .home-blog-desc,
    .blog-card-desc {
        display: none;
    }

    .home-blog-meta {
        align-items: flex-start;
    }

    .blog-card {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .blog-card-image {
        border-radius: 10px;
        overflow: hidden;
        aspect-ratio: 286 / 176;
    }

    .blog-card-body {
        padding: 16px 0 0;
    }

    .blog-card-title {
        font-size: 16px;
        line-height: 1.28;
        margin-bottom: 12px;
    }

    .home-cta-section {
        padding: 0 0 32px;
        background: #fff;
    }

    .home-cta-inner {
        display: block;
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .home-cta-mascot {
        width: min(290px, calc(100vw - 80px));
        height: 248px;
        margin: -18px auto -8px;
        border-radius: 12px 12px 0 0;
        background: #eaf6ff;
        overflow: visible;
    }

    .home-cta-mascot img,
    .home-cta-mascot video,
    .home-cta-mascot-svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: scale(1.06);
        transform-origin: center bottom;
    }

    .home-cta-card {
        display: block;
        width: min(312px, calc(100vw - 48px));
        margin: 0 auto;
        padding: 28px 20px 24px;
        border-radius: 14px;
        background-color: #4b23b0;
        background-image: url('../img/home-cta-card-bg.webp');
        background-size: cover;
        background-position: center;
        color: #fff;
        overflow: hidden;
    }

    .home-cta-card::before {
        display: none;
    }

    .home-cta-title,
    .home-cta-desc {
        color: #fff;
    }

    .home-cta-title {
        max-width: 260px;
        font-size: 24px;
        line-height: 1.12;
        margin-bottom: 18px;
    }

    .home-cta-desc {
        max-width: 260px;
        font-size: 13px;
        line-height: 1.55;
        margin-bottom: 22px;
        opacity: .92;
    }

    .home-cta-btn {
        min-height: 42px;
        padding: 0 22px;
        background: #fff;
        border-color: #fff;
        color: #242333;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .home-hero-bg-video {
        width: calc(100% + 96px);
        height: auto;
        min-height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-bg-video,
    .home-logos-marquee {
        animation: none;
    }

    .home-hero-bg-video {
        display: none;
    }
}

/* Home Page tokens */
.home-page-wrapper {
    --hp-grey: #222222;
    --hp-light: #f3f2f8;
    --hp-purple: #8652cb;
    --hp-frame-radius: 24px;
    color: var(--hp-grey);
    font-family: var(--hp-font);
}

.home-page-wrapper h1,
.home-page-wrapper h2,
.home-page-wrapper h3,
.home-page-wrapper p,
.home-page-wrapper a,
.home-page-wrapper button,
.home-page-wrapper span {
    letter-spacing: 0;
}

@media (min-width: 1101px) {
    .home-page-wrapper {
        --hp-frame-pad: 16px;
        --hp-radius: 24px;
        --hp-inner: 1240px;
        --hp-card-gap: 20px;
    }

    .home-page-wrapper .hp-blob {
        display: none;
    }

    .home-site-header {
        top: 0;
    }

    .home-site-header-inner {
        max-width: 1240px;
        min-height: 68px;
        padding: 20px 0;
        gap: 40px;
    }

    .home-site-logo img {
        width: 130px;
        max-width: 130px;
        max-height: 40px;
        object-fit: contain;
    }

    .home-site-menu {
        height: 48px;
        background: rgba(255,255,255,.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .home-site-menu > li:nth-child(-n+4) {
        background: #fff;
    }

    .home-site-menu > li:nth-child(-n+4) a {
        color: var(--hp-grey);
    }

    .home-site-menu > li:nth-child(n+5) a {
        color: #fff;
    }

    .home-site-menu li a {
        padding: 0 20px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
    }

    .home-site-header-cta {
        min-width: 120px;
        height: 48px;
        padding: 0 20px 0 24px;
        gap: 10px;
        background: var(--hp-grey);
        color: #fff;
        font-size: 14px;
        font-weight: 500;
    }

    /* Wrap = positioning context only. The page background behind it is WHITE,
     * so the 16px margin area around the hero card reads white (not blue). */
    .home-hero-services-wrap {
        margin: 0;
        border-radius: 0;
        background: #fff;
    }

    .home-hero-services-wrap .home-hero-section,
    .home-hero-services-wrap .home-services-section {
        min-height: 0;
        transition:
            margin .55s cubic-bezier(.65, .04, .35, 1),
            border-radius .55s cubic-bezier(.65, .04, .35, 1),
            background .55s ease;
    }

    /* The wrap-level video + blobs span the WHOLE wrap (hero + services). In
     * DEFAULT state we hide them so the blue bubbles don't bleed into the
     * margin around the hero; instead the hero card carries its own purple
     * bubble bg. On scroll they fade in and span both sections full-bleed. */
    .home-hero-services-wrap .home-hero-bg-video,
    .home-hero-services-wrap .hp-blob {
        transition: opacity .55s ease;
    }
    body:not(.is-scrolled) .home-hero-services-wrap .home-hero-bg-video,
    body:not(.is-scrolled) .home-hero-services-wrap .hp-blob {
        opacity: 0 !important;
    }
    body.is-scrolled .home-hero-services-wrap .home-hero-bg-video {
        opacity: .96 !important;
    }
    body.is-scrolled .home-hero-services-wrap .hp-blob {
        opacity: 1 !important;
    }

    /* DEFAULT: hero is a rounded card with 16px margin + its OWN purple bubble
     * bg (poster image of the hero video, full-strength so bubbles read).
     * Services is plain white. Everything around the hero is white. */
    body:not(.is-scrolled) .home-hero-services-wrap .home-hero-section {
        margin: 16px;
        border-radius: 24px;
        overflow: hidden;
        background:
            linear-gradient(140deg, rgba(15,11,40,.30) 0%, rgba(41,24,120,.18) 60%, rgba(26,38,94,.30) 100%),
            url('../img/home-hero-bg.webp') center center / cover no-repeat,
            linear-gradient(140deg, #0F0B28 0%, #1A1060 32%, #291878 60%, #1A265E 100%);
    }
    body:not(.is-scrolled) .home-hero-services-wrap .home-services-section {
        background: #fff !important;
    }

    /* ON SCROLL: hero unwraps (margin/radius → 0) and BOTH sections become
     * transparent so the now-visible wrap-level video + blobs show through
     * across hero AND services (one continuous full-bleed background). */
    body.is-scrolled .home-hero-services-wrap {
        background:
            linear-gradient(140deg, #0F0B28 0%, #1A1060 32%, #291878 60%, #1A265E 100%) center / cover no-repeat;
    }
    body.is-scrolled .home-hero-services-wrap .home-hero-section,
    body.is-scrolled .home-hero-services-wrap .home-services-section {
        background: transparent !important;
    }
    body.is-scrolled .home-hero-services-wrap .home-hero-section {
        margin: 0;
        border-radius: 0;
        overflow: visible;
    }

    .home-hero-section {
        min-height: 792px;
    }

    /* Video covers the FULL wrapper (hero + services), not just hero. */
    .home-hero-bg-video {
        width: auto;
        min-width: 100%;
        height: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center top;
        opacity: .96;
    }

    .home-hero-inner {
        max-width: 1272px;
        padding: 168px 0 0;
        grid-template-columns: 715px 480px;
        gap: 45px;
        align-items: start;
    }

    .home-hero-title {
        max-width: 715px;
        font-size: 100px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: 0;
        margin-bottom: 20px;
        white-space: nowrap;
    }

    .home-hero-subtitle {
        color: #fff;
        font-size: 32px;
        line-height: 1.2;
        font-weight: 400;
        letter-spacing: -1px;
        margin-bottom: 32px;
        white-space: nowrap;
    }

    .home-hero-cta,
    .home-services-cta,
    .home-section-link,
    .home-about-btn,
    .home-cta-btn,
    .event-register-btn {
        min-height: 48px;
        height: 48px;
        padding: 0 20px 0 24px;
        gap: 10px;
        border-radius: 500px !important;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
    }

    .home-hero-cta {
        background: #fff;
        color: var(--hp-grey);
        border-color: #fff;
    }

    .home-hero-card {
        --hp-hero-card-radius: 24px;
        width: 480px;
        height: 400px;
        aspect-ratio: auto;
        border-radius: 24px;
        box-shadow: none;
    }

    .home-hero-card img {
        height: 380px;
        object-fit: cover;
        filter: none;
    }

    .home-hero-card-overlay {
        inset: auto auto 16px 16px;
        width: 448px;
        min-height: 96px;
        padding: 32px 24px;
        align-items: center;
        background: rgba(97,97,97,.2);
        border-radius: 16px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .home-hero-card-text {
        font-size: 24px;
        line-height: 1.2;
        font-weight: 400;
    }

    .home-hero-play-btn {
        width: 48px;
        height: 48px;
        background: #fff;
    }

    .home-logos-strip-wrapper {
        margin-top: 49px;
        padding: 0;
    }

    .home-logos-strip {
        height: 144px;
        padding: 0 24px;
        display: flex;
        align-items: center;
        max-width: none;
    }

    .home-logos-track {
        gap: 48px;
        padding-right: 48px;
    }

    .home-logos-strip .logo-item {
        width: 134px;
        height: 80px;
        min-height: 80px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: .8;
        flex: 0 0 134px;
    }

    .home-logos-strip .logo-item img {
        max-width: 134px;
        max-height: 80px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .home-services-section {
        margin: 0 16px;
        min-height: 721px;
        padding: 108px 0 111px;
        border-radius: 0 0 24px 24px;
        background-image: url('../img/home-figma-top-bg.webp');
        background-size: auto 1513px;
        background-position: center -792px;
        background-repeat: no-repeat;
    }

    .home-services-inner {
        max-width: 1264px;
        grid-template-columns: 565px 608px;
        gap: 63px;
    }

    .home-services-left {
        padding-top: 58px;
    }

    .home-services-label {
        margin-bottom: 24px;
        color: #fff;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 500;
    }

    .home-services-title {
        max-width: 565px;
        margin-bottom: 48px;
        color: #fff;
        font-size: 40px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -1px;
    }

    .home-services-grid {
        grid-template-columns: repeat(2, 294px);
        grid-auto-rows: 210px;
        gap: 20px;
    }

    .service-card,
    .service-card:nth-child(2),
    .service-card:nth-child(4),
    .service-card:nth-child(2):hover,
    .service-card:nth-child(4):hover {
        width: 294px;
        min-height: 210px;
        height: 210px;
        padding: 32px;
        border-radius: 16px;
        border: 0;
        justify-content: flex-start;
        overflow: hidden;
    }

    .service-card:nth-child(2),
    .service-card:nth-child(4),
    .service-card:nth-child(2):hover,
    .service-card:nth-child(4):hover {
        transform: translateY(73px);
    }

    /* Figma: default state — all 4 cards are translucent glass.
     * Hover/focus turns the card opaque white. */
    .service-card.featured {
        background: rgba(255,255,255,.15);
        border-color: transparent;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }
    .service-card.featured:hover,
    .service-card.featured:focus-visible {
        background: #fff;
        border-color: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .service-card.dark,
    .service-card.dark:hover,
    .service-card.dark:focus-visible {
        background: rgba(255,255,255,.15);
        border-color: transparent;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }
    /* Dark cards also pop to opaque white on hover so all 4 share the same idiom */
    .service-card.dark:hover,
    .service-card.dark:focus-visible {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Icons are masked, not background-image — lets us recolor them per state.
     * Default: white (visible on glass purple). Hover: purple (visible on white card). */
    .service-card-icon {
        width: 40px;
        height: 40px;
        margin: 0 0 24px;
        background: #fff;
        -webkit-mask: var(--svc-icon) center / contain no-repeat;
        mask: var(--svc-icon) center / contain no-repeat;
        transition: background .2s ease;
    }

    .service-card-icon svg {
        display: none;
    }

    .service-card:nth-child(1) { --svc-icon: url('../img/home-service-consulting-icon.svg'); }
    .service-card:nth-child(2) { --svc-icon: url('../img/home-service-ai-icon.svg'); }
    .service-card:nth-child(3) { --svc-icon: url('../img/home-service-teams-icon.svg'); }
    .service-card:nth-child(4) { --svc-icon: url('../img/home-service-product-icon.svg'); }

    .service-card:hover .service-card-icon,
    .service-card:focus-visible .service-card-icon {
        background: var(--hp-c-purple, #8652CB);
    }

    /* Default title — white (glass cards). Hover/focus flips to grey on opaque-white bg. */
    .service-card-title {
        margin: 0;
        color: #fff;
        font-size: 27px;
        line-height: 1.2;
        font-weight: 500;
    }
    .service-card.featured:hover .service-card-title,
    .service-card.featured:focus-visible .service-card-title,
    .service-card.dark:hover .service-card-title,
    .service-card.dark:focus-visible .service-card-title {
        color: var(--hp-grey);
    }

    /* Description hidden by default on every card (glass state), revealed on hover. */
    .service-card-desc {
        display: block;
        max-height: 0;
        margin: 0;
        opacity: 0;
        overflow: hidden;
        color: var(--hp-grey);
        font-size: 14px;
        line-height: 1.4;
        font-weight: 400;
        transition: max-height .2s ease, margin .2s ease, opacity .2s ease;
    }
    .service-card.featured:hover .service-card-desc,
    .service-card.featured:focus-visible .service-card-desc,
    .service-card.dark:hover .service-card-desc,
    .service-card.dark:focus-visible .service-card-desc {
        max-height: 96px;
        margin: 6px 0 0;
        opacity: 1;
    }

    /* dark card desc must stay `display:block` so the max-height/opacity transition
     * can reveal it on hover. (Previously this set display:none which killed the reveal.) */
    .service-card.dark .service-card-desc,
    .service-card.dark:hover .service-card-desc,
    .service-card.dark:focus-visible .service-card-desc {
        display: block;
    }

    /* Arrow chip — same default for ALL cards (glass state hides it).
     * Visible only when card is hovered/focused. */
    .service-card-arrow {
        position: absolute;
        top: 24px;
        right: 24px;
        width: 40px;
        height: 40px;
        margin: 0;
        opacity: 0;
        transform: scale(.9);
        background: #f0eff8;
        transition: opacity .2s ease, transform .2s ease;
    }
    .service-card:hover .service-card-arrow,
    .service-card:focus-visible .service-card-arrow {
        opacity: 1;
        transform: scale(1);
    }

    .service-card-arrow svg {
        display: none;
    }

    /* Figma: arrow inside the 40×40 chip is ≈20px → roughly half the chip. */
    .service-card-arrow::before {
        content: '';
        width: 20px;
        height: 20px;
        background: url('../img/home-service-arrow.svg') center / contain no-repeat;
    }

    .home-work-section {
        padding: 136px 0 66px;
    }

    .home-work-inner,
    .home-events-inner,
    .home-blog-inner {
        max-width: 1240px;
    }

    .home-section-header,
    .home-blog-header {
        min-height: 96px;
        margin-bottom: 40px;
        align-items: flex-start;
    }

    .home-section-title,
    .home-events-title,
    .home-blog-title {
        color: var(--hp-grey);
        font-size: 40px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -1px;
    }

    .home-work-track,
    .home-blog-cards {
        width: 1400px;
        gap: 20px;
    }

    .home-work-carousel {
        overflow: visible;
    }

    .work-card,
    .blog-card {
        flex: 0 0 400px;
        width: 400px;
        border-radius: 16px;
    }

    /* Class-driven so it follows the carousel index, not DOM position. */
    .home-work-track .work-card.is-faded {
        opacity: .4;
    }

    .work-card {
        background: var(--hp-light);
    }

    .work-card-image,
    .blog-card-image {
        height: 300px;
        aspect-ratio: auto;
        border-radius: 16px;
    }

    .work-card-body {
        padding: 32px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .work-card-title,
    .blog-card-title,
    .event-card-title {
        color: var(--hp-grey);
        font-size: 24px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: 0;
        margin: 0;
    }

    .work-card-desc,
    .blog-card-desc {
        margin: 0;
        color: var(--hp-grey);
        opacity: .8;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 400;
    }

    .work-card-tags,
    .blog-card-tags {
        gap: 6px;
        margin: 0;
        padding: 0;
    }

    .work-card-tag,
    .blog-card-tag,
    .event-card-tag {
        min-height: 27px;
        padding: 6px 12px;
        border-radius: 500px;
        background: rgba(57,48,79,.07);
        color: #39304f;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 500;
        letter-spacing: .22px;
        text-transform: uppercase;
    }

    .home-carousel-footer {
        margin-top: 40px;
        gap: 20px;
    }

    .home-carousel-progress {
        height: 2px;
        background: rgba(57,48,79,.12);
    }

    .home-carousel-progress span {
        height: 2px;
        background: var(--hp-grey);
    }

    .home-events-section .event-card-info {
        position: static;
    }

    .home-events-section .event-card-tag {
        left: 32px;
        top: -13px;
        margin: 0;
    }

    .carousel-nav-btn {
        width: 48px;
        height: 48px;
        border-radius: 500px !important;
        border-color: rgba(34,34,34,.1);
        color: var(--hp-grey);
        background: transparent;
    }

    .home-about-section {
        padding: 120px 0;
        background: #fff;
    }

    .home-about-inner {
        min-height: 527px;
        gap: 20px;
    }

    .home-about-left,
    .home-about-right {
        min-height: 527px;
        border-radius: 16px;
    }

    .home-about-left {
        padding: 56px;
        justify-content: flex-end;
        background: #562b8c;
    }

    .home-about-title {
        max-width: 498px;
        font-size: 40px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -1px;
    }

    .home-about-desc {
        max-width: 498px;
        font-size: 16px;
        line-height: 1.4;
        font-weight: 400;
    }

    .home-about-right {
        padding: 64px 56px;
        background: linear-gradient(134.54deg, #eee9fe .2%, #f3f2f8 76.09%, #eee9fe 98.68%);
    }

    .home-about-tagline {
        margin-bottom: 56px;
        color: var(--hp-grey);
        font-size: 24px;
        line-height: 1.2;
        font-weight: 500;
    }

    .home-stats-grid {
        gap: 56px 40px;
        padding-top: 0;
        border-top: 1px solid rgba(34,34,34,.1);
        padding-top: 56px;
    }

    .home-stat {
        width: 229px;
    }

    .home-stat-number {
        color: var(--hp-grey);
        font-size: 40px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -1px;
    }

    .home-stat-label {
        color: var(--hp-grey);
        font-size: 16px;
        line-height: 1.4;
        font-weight: 400;
    }

    .home-events-section {
        padding: 80px 0 64px;
        background: var(--hp-light);
    }

    .home-events-header {
        margin-bottom: 48px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 610px;
        gap: 20px;
        align-items: start;
    }

    .home-events-meta {
        width: 610px;
        display: flex;
        gap: 40px;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .home-events-desc {
        flex: 1 1 auto;
        color: var(--hp-grey);
        font-size: 16px;
        line-height: 1.4;
        font-weight: 400;
    }

    .home-events-cards {
        width: 1850px;
        height: 420px;
        gap: 20px;
        overflow: visible;
    }

    .event-card {
        position: relative;
        flex: 0 0 610px;
        width: 610px;
        height: 420px;
        min-height: 420px;
        border-radius: 16px;
        background: #fff;
    }

    .event-card-image {
        width: 610px;
        height: 271px;
        aspect-ratio: auto;
    }

    .event-card-body {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 610px;
        height: 149px;
        padding: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }

    .event-card-info {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .event-card-tag {
        position: absolute;
        left: 0;
        top: -45px;
        margin: 0;
        transform: none;
        background: #e6dcf8;
        color: var(--hp-grey);
    }

    .event-card-date {
        color: var(--hp-grey);
        font-size: 12px;
        line-height: 1.4;
        font-weight: 400;
    }

    .event-register-btn {
        min-width: 126px;
        border: 1px solid var(--hp-grey);
        color: var(--hp-grey);
    }

    .home-events-cards .event-card.is-faded {
        opacity: .4;
    }

    .home-events-carousel::after {
        display: none;
    }

    .home-blog-section {
        padding: 120px 0 120px;
        background: #fff;
    }

    .home-blog-header {
        display: flex;
        gap: 20px;
        width: 1240px;
    }

    .home-blog-meta {
        max-width: none;
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }

    .home-blog-desc {
        width: 455px;
        height: 66px;
        color: var(--hp-grey);
        font-size: 16px;
        line-height: 1.4;
        font-weight: 400;
    }

    .blog-card {
        background: #fff;
    }

    .blog-card-body {
        padding: 24px 0 0;
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }

    .blog-card-body > :not(.blog-card-tags) {
        width: 100%;
    }

    .blog-card-tags {
        margin-top: 0;
    }

    .blog-card-badge {
        left: 12px;
        bottom: 12px;
        min-height: 40px;
        padding: 8px;
        border-radius: 500px;
        background: rgba(97,97,97,.35);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        font-size: 12px;
        line-height: 1.3;
        letter-spacing: .24px;
    }

    .home-blog-cards .blog-card.is-faded {
        opacity: .4;
    }

    .home-cta-section {
        min-height: 550px;
        padding: 0;
        background: var(--hp-light);
        overflow: hidden;
    }

    .home-cta-inner {
        width: 100%;
        max-width: 1440px;
        height: 550px;
        display: grid;
        grid-template-columns: minmax(640px, 55%) minmax(520px, 600px);
        gap: 0;
        align-items: center;
    }

    .home-cta-mascot {
        width: min(782px, 55vw);
        height: 532px;
        margin-left: 10px;
        align-self: end;
        justify-content: flex-start;
        overflow: visible;
    }

    .home-cta-mascot img,
    .home-cta-mascot-video,
    .home-cta-mascot-svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left bottom;
        transform: none;
    }

    .home-cta-card {
        width: 600px;
        min-height: 348px;
        margin: 0;
        padding: 48px 64px;
        border-radius: 16px;
        background-color: var(--hp-purple);
        background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1)), url('../img/home-cta-card-bg.webp');
        background-position: center;
        background-size: cover;
    }

    .home-cta-title {
        max-width: 491px;
        margin: 0 0 24px;
        color: #fff;
        font-size: 40px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -1px;
    }

    .home-cta-desc {
        max-width: 491px;
        margin: 0 0 34px;
        color: #fff;
        font-size: 16px;
        line-height: 1.4;
        font-weight: 400;
        opacity: 1;
    }

    .home-cta-btn {
        background: #fff;
        color: var(--hp-grey);
        border-color: #fff;
    }
}

@media (max-width: 768px) {
    .home-page-wrapper {
        --hp-frame-radius: 24px;
        font-family: var(--hp-font);
    }

    .home-page-wrapper .hp-blob {
        display: none;
    }

    .home-site-logo img {
        width: 114px;
        max-height: 32px;
        object-fit: contain;
    }

    .home-hero-section,
    .home-services-section {
        background-image: url('../img/home-figma-top-bg.webp');
        background-size: auto 1504px;
        background-repeat: no-repeat;
    }

    .home-hero-section {
        background-position: center top;
    }

    .home-services-section {
        background-position: center bottom;
    }

    /* Figma mobile: Headline/XL/Medium — Onest 32/500/lh:1.2/ls:-1px */
    .home-hero-title {
        font-size: 32px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -1px;
    }

    /* Figma mobile: Body/L/Medium — Onest 18/500/lh:1.2 */
    .home-hero-subtitle {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        color: #fff;
    }

    .home-services-title {
        font-size: 32px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -1px;
    }

    .service-card,
    .service-card:nth-child(2),
    .service-card:nth-child(4),
    .service-card:nth-child(2):hover,
    .service-card:nth-child(4):hover {
        flex-basis: 280px;
        width: 280px;
        min-height: 210px;
        height: 210px;
        padding: 32px;
        border-radius: 16px;
    }

    .service-card.featured,
    .service-card.featured:hover,
    .service-card.featured:focus-visible {
        background: #fff;
    }

    .service-card.dark,
    .service-card.dark:hover,
    .service-card.dark:focus-visible {
        background: rgba(255,255,255,.15);
        color: #fff;
    }

    .service-card-icon {
        width: 40px;
        height: 40px;
        margin: 0 0 24px;
        background: center / contain no-repeat;
    }

    .service-card-icon svg {
        display: none;
    }

    .service-card:nth-child(1) .service-card-icon { background-image: url('../img/home-service-consulting-icon.svg'); }
    .service-card:nth-child(2) .service-card-icon { background-image: url('../img/home-service-ai-icon.svg'); }
    .service-card:nth-child(3) .service-card-icon { background-image: url('../img/home-service-teams-icon.svg'); }
    .service-card:nth-child(4) .service-card-icon { background-image: url('../img/home-service-product-icon.svg'); }

    .service-card-title,
    .service-card.featured .service-card-title,
    .service-card.featured:hover .service-card-title {
        font-size: 27px;
        line-height: 1.2;
        font-weight: 500;
        color: var(--hp-grey);
    }

    .service-card.dark .service-card-title,
    .service-card.dark:hover .service-card-title {
        color: #fff;
    }

    .service-card.featured .service-card-desc,
    .service-card.featured:hover .service-card-desc {
        display: block;
        max-height: none;
        margin: 6px 0 0;
        opacity: 1;
        color: var(--hp-grey);
        font-size: 14px;
        line-height: 1.4;
    }

    .service-card.dark .service-card-desc,
    .service-card.dark:hover .service-card-desc {
        display: none;
    }

    .home-section-title,
    .home-events-title,
    .home-blog-title {
        font-size: 32px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -1px;
    }

    .work-card,
    .event-card,
    .blog-card {
        flex: 0 0 286px;
        width: 286px;
        border-radius: 16px;
    }

    .work-card-image,
    .blog-card-image {
        height: 176px;
        aspect-ratio: auto;
        border-radius: 16px;
    }

    .event-card-image {
        height: 176px;
        aspect-ratio: auto;
        border-radius: 16px 16px 0 0;
    }

    .work-card-tag,
    .event-card-tag,
    .blog-card-tag {
        background: rgba(57,48,79,.07);
        color: #39304f;
        letter-spacing: .22px;
        text-transform: uppercase;
    }

    /* ── Figma mobile: Work / Events / Blog sections
     * `Component 91/94/96` — section bg white, p:56/16, inner gap 32, CTA pill at bottom. */
    .home-work-section,
    .home-events-section,
    .home-blog-section {
        padding: 56px 16px;
    }

    .home-work-inner,
    .home-events-inner,
    .home-blog-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        max-width: none;
    }

    .home-section-header,
    .home-events-header,
    .home-blog-header,
    .home-events-meta,
    .home-blog-meta {
        display: contents;
    }

    .home-section-title,
    .home-events-title,
    .home-blog-title {
        order: 1;
        margin: 0;
    }

    .home-events-desc,
    .home-blog-desc {
        order: 2;
        margin: 0;
    }

    .home-work-carousel,
    .home-events-carousel,
    .home-blog-carousel { order: 3; }

    /* Figma: outline pill, full-width, h-48, padding 16/20/16/24, gap 10, Onest Medium 14 */
    .home-work-inner .home-section-link,
    .home-events-inner .home-section-link,
    .home-blog-inner .home-section-link {
        order: 99;
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: none;
        height: 48px;
        margin: 0;
        padding: 16px 20px 16px 24px;
        border: 1px solid #e6e6e6;
        border-radius: 500px;
        background: transparent;
        color: #222;
        font-family: var(--hp-font);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
    }
}

@media (min-width: 1101px) {
    .home-blog-section {
        padding-bottom: 54px;
    }

    .blog-card-body {
        padding: 24px 0 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .blog-card-body > :not(.blog-card-tags) {
        width: auto;
    }

    .blog-card-title,
    .blog-card-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .blog-card-title {
        -webkit-line-clamp: 2;
    }

    .blog-card-desc {
        -webkit-line-clamp: 2;
    }
}

@media (min-width: 1101px) and (max-width: 1399px) {
    .home-hero-inner {
        max-width: calc(100% - 112px);
        grid-template-columns: minmax(0, 1fr) 480px;
        gap: 44px;
    }

    .home-hero-title {
        max-width: 100%;
        font-size: clamp(78px, 7.3vw, 100px);
        white-space: normal;
    }

    .home-hero-subtitle {
        max-width: 100%;
        white-space: normal;
    }

    .home-services-inner {
        max-width: calc(100% - 112px);
        grid-template-columns: minmax(0, 1fr) 608px;
        gap: 44px;
    }

    .home-services-title {
        max-width: 100%;
        font-size: 36px;
    }
}

/* Home mobile (375px). */
@media (max-width: 768px) {
    body.home,
    body.home .container-wrap,
    body.home #ajax-content-wrap {
        background: #fff;
    }

    .home-page-wrapper {
        overflow-x: hidden;
    }

    .home-site-header {
        position: relative;
        top: 0;
        height: 64px;
        margin: 0;
        background: #fff;
        border: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.home #homeSiteHeader.home-site-header {
        top: 0 !important;
    }

    .home-site-header-inner {
        height: 64px;
        min-height: 64px;
        max-width: none;
        padding: 0 16px;
        gap: 12px;
    }

    .home-site-logo img {
        width: 114px;
        height: 32px;
        max-height: none;
        object-fit: contain;
        object-position: left center;
        filter: brightness(0) saturate(100%);
    }

    .home-site-nav,
    .home-site-header-cta {
        display: none;
    }

    .home-site-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-right: -16px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #242333;
    }

    .home-site-menu-toggle::before,
    .home-site-menu-toggle::after {
        left: 16px;
        width: 16px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    .home-site-menu-toggle::before {
        top: 19px;
    }

    .home-site-menu-toggle::after {
        top: 27px;
    }

    .home-hero-section,
    .home-services-section {
        background-image: url('../img/home-figma-top-bg.webp');
        background-size: auto 1504px;
        background-repeat: no-repeat;
        background-color: #2a22a5;
    }

    .home-hero-section {
        height: 716px;
        min-height: 716px;
        padding: 0;
        background-position: center top;
    }

    .home-hero-bg-video {
        display: block;
        top: 0;
        left: 50%;
        width: auto;
        height: 1504px;
        min-width: 100%;
        min-height: 716px;
        transform: translateX(-50%);
        object-fit: cover;
        object-position: top center;
        opacity: 1;
    }

    .home-hero-inner {
        display: block;
        max-width: none;
        padding: 48px 16px 0;
        margin: 0;
        width: 100%;
    }

    .home-hero-content {
        max-width: 343px;
    }

    .home-hero-title {
        max-width: 343px;
        margin: 0 0 12px;
        color: #fff;
        font-size: 48px;
        line-height: 1.05;
        font-weight: 700;
        letter-spacing: 0;
    }

    .home-hero-subtitle {
        max-width: 343px;
        margin: 0 0 24px;
        color: #fff;
        font-size: 16px;
        line-height: 1.4;
        font-weight: 400;
        letter-spacing: 0;
    }

    .home-hero-cta {
        width: 343px;
        height: 48px;
        min-height: 48px;
        justify-content: center;
        gap: 10px;
        padding: 0 24px;
        border: 0;
        border-radius: 999px;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 500;
    }

    .home-hero-card {
        width: 343px;
        height: 270px;
        aspect-ratio: auto;
        margin: 32px 0 0;
        border-radius: 16px;
        box-shadow: none;
        clip-path: inset(0 round 16px);
    }

    .home-hero-card img {
        width: 100%;
        height: 100%;
        filter: none;
        object-fit: cover;
        object-position: center center;
        transform: none;
    }

    .home-hero-card-overlay {
        inset: auto 12px 14px;
        min-height: 94px;
        padding: 20px 20px 20px 24px;
        border-radius: 16px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 32px;
        align-items: center;
        gap: 16px;
        background: rgba(51,51,51,.3);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .home-hero-card-text {
        margin: 0;
        color: #fff;
        font-size: 16px;
        line-height: 1.4;
        font-weight: 400;
        letter-spacing: 0;
    }

    .home-hero-play-btn {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: #fff;
    }

    .home-hero-play-btn svg {
        width: 11px;
        height: 12px;
        margin-left: 2px;
    }

    .home-button-arrow {
        width: 16px;
        height: 16px;
        font-size: 16px;
        line-height: 1;
        transform: translateY(-1px);
    }

    .home-logos-strip-wrapper {
        margin-top: 48px;
        padding: 0 24px;
        border-top: 0;
        border-bottom: 1px solid rgba(255,255,255,.16);
    }

    .home-logos-strip {
        height: 64px;
        max-width: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .home-logos-marquee {
        gap: 24px;
        min-width: max-content;
        animation-duration: 18s;
    }

    .home-logos-track {
        gap: 24px;
        padding-right: 0;
    }

    .home-logos-strip .logo-item,
    .home-logos-strip > span,
    .home-logos-strip > a {
        min-height: 64px;
    }

    .home-logos-strip .logo-item img,
    .home-logos-strip > span img,
    .home-logos-strip > a img {
        max-height: var(--home-logo-max-h, 30px);
        opacity: .9;
    }

    .home-services-section {
        min-height: 724px;
        margin: 0;
        padding: 48px 0 47px;
        overflow: hidden;
        background-position: center -716px;
    }

    .home-services-section::before {
        display: none;
    }

    .home-services-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: none;
        margin: 0;
    }

    .home-services-left {
        display: contents;
    }

    .home-services-label,
    .home-services-title,
    .home-services-cta {
        margin-left: 16px;
        margin-right: 16px;
    }

    .home-services-label {
        order: 1;
        margin-bottom: 12px;
        color: #fff;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }

    .home-services-title {
        order: 2;
        max-width: 343px;
        margin-bottom: 32px;
        color: #fff;
        font-size: 32px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: 0;
    }

    .home-services-grid {
        order: 3;
        display: flex;
        gap: 20px;
        width: 100%;
        padding: 0 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: none;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .home-services-grid::-webkit-scrollbar {
        display: none;
    }

    .service-card,
    .service-card:nth-child(2),
    .service-card:nth-child(4),
    .service-card:nth-child(2):hover,
    .service-card:nth-child(4):hover {
        position: relative;
        flex: 0 0 280px;
        width: 280px;
        min-width: 280px;
        height: 210px;
        min-height: 210px;
        padding: 32px;
        border: 0;
        border-radius: 16px;
        scroll-snap-align: none;
        background: #fff;
        color: #222;
        transform: none;
    }

    .service-card.featured,
    .service-card.featured:hover,
    .service-card.featured:focus-visible,
    .service-card.dark,
    .service-card.dark:hover,
    .service-card.dark:focus-visible {
        background: #fff;
        color: #222;
        border: 0;
        transform: none;
    }

    .service-card-icon {
        width: 40px;
        height: 40px;
        margin: 0 0 24px;
        background: center / contain no-repeat;
    }

    .service-card-icon svg {
        display: none;
    }

    .service-card:nth-child(1) .service-card-icon { background-image: url('../img/home-service-consulting-icon.svg'); }
    .service-card:nth-child(2) .service-card-icon { background-image: url('../img/home-service-ai-icon.svg'); }
    .service-card:nth-child(3) .service-card-icon { background-image: url('../img/home-service-teams-icon.svg'); }
    .service-card:nth-child(4) .service-card-icon { background-image: url('../img/home-service-product-icon.svg'); }

    .service-card-title,
    .service-card.featured .service-card-title,
    .service-card.featured:hover .service-card-title,
    .service-card.featured:focus-visible .service-card-title,
    .service-card.dark .service-card-title,
    .service-card.dark:hover .service-card-title,
    .service-card.dark:focus-visible .service-card-title {
        margin: 0;
        color: #222;
        font-size: 27px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: 0;
    }

    .service-card.featured .service-card-desc,
    .service-card.featured:hover .service-card-desc,
    .service-card.featured:focus-visible .service-card-desc {
        display: block;
        max-height: none;
        margin: 24px 0 0;
        opacity: 1;
        color: #222;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 400;
        letter-spacing: 0;
    }

    .service-card.dark .service-card-desc,
    .service-card.dark:hover .service-card-desc,
    .service-card.dark:focus-visible .service-card-desc {
        display: none;
    }

    .service-card-arrow,
    .service-card.dark .service-card-arrow,
    .service-card.dark:hover .service-card-arrow,
    .service-card.dark:focus-visible .service-card-arrow {
        opacity: 0;
        transform: none;
        pointer-events: none;
    }

    .service-card.featured .service-card-arrow,
    .service-card.featured:hover .service-card-arrow,
    .service-card.featured:focus-visible .service-card-arrow {
        top: 32px;
        right: 32px;
        width: 40px;
        height: 40px;
        background: #f0eff8;
        opacity: 1;
        transform: none;
    }

    .home-services-cta {
        order: 4;
        width: calc(100% - 32px);
        max-width: 343px;
        height: 48px;
        min-height: 48px;
        margin-top: 48px;
        padding: 0 24px;
        justify-content: center;
        gap: 10px;
        border: 1px solid #fff;
        border-radius: 999px;
        background: transparent;
        color: #fff;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 500;
    }
}

/* Home mobile remaining sections pass: only the 375px layout, never desktop. */
@media (max-width: 768px) {
    .home-services-section {
        min-height: 780px;
    }

    .service-card,
    .service-card:nth-child(2),
    .service-card:nth-child(4),
    .service-card:nth-child(2):hover,
    .service-card:nth-child(4):hover {
        height: 248px;
        min-height: 248px;
    }

    .service-card.featured .service-card-desc,
    .service-card.featured:hover .service-card-desc,
    .service-card.featured:focus-visible .service-card-desc,
    .service-card.dark .service-card-desc,
    .service-card.dark:hover .service-card-desc,
    .service-card.dark:focus-visible .service-card-desc {
        display: block;
        max-height: none;
        margin: 18px 0 0;
        opacity: 1;
        color: #222;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 400;
        letter-spacing: 0;
    }

    .service-card-arrow,
    .service-card.dark .service-card-arrow,
    .service-card.dark:hover .service-card-arrow,
    .service-card.dark:focus-visible .service-card-arrow,
    .service-card.featured .service-card-arrow,
    .service-card.featured:hover .service-card-arrow,
    .service-card.featured:focus-visible .service-card-arrow {
        top: 32px;
        right: 32px;
        width: 40px;
        height: 40px;
        background: #f0eff8;
        opacity: 1;
        transform: none;
        pointer-events: none;
    }

    .home-services-cta {
        margin-top: 36px;
    }

    .home-section-header,
    .home-events-header,
    .home-blog-header {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .home-section-title,
    .home-events-title,
    .home-blog-title {
        width: auto;
        max-width: 343px;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .home-work-section {
        padding-top: 48px;
    }

    .home-section-header {
        margin-bottom: 32px;
    }

    .home-events-header,
    .home-blog-header {
        margin-bottom: 24px;
    }

    .home-about-section {
        padding: 48px 16px 54px;
        border-top: 1px solid #e7e3ef;
        background: #fff;
    }

    .home-about-left,
    .home-about-right {
        width: 100%;
        border-radius: 14px;
    }

    /* Figma mobile: about-left card is 468 tall (photo + headline + CTA). */
    .home-about-left {
        min-height: 468px;
        padding: 24px 18px;
    }

    .home-about-btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        padding: 0 24px;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 500;
    }

    .home-about-right {
        background: #f3f0fa;
        border: 0;
        padding: 24px 18px 24px;
        min-height: 0;
    }

    .home-about-tagline {
        margin: 0 0 24px;
        color: #171727;
        font-size: 18px;
        line-height: 1.18;
        font-weight: 500;
        letter-spacing: 0;
    }

    .home-stats-grid {
        gap: 24px 20px;
        padding-top: 24px;
    }

    .home-stat-number {
        font-size: 30px;
        line-height: 1;
        font-weight: 600;
    }

    .home-events-title,
    .home-blog-title {
        font-size: 32px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: 0;
    }

    .home-cta-section {
        padding: 0 16px 32px;
        background: #f3f2f8;
    }

    .home-cta-inner {
        width: 100%;
        max-width: 343px;
        margin: 0 auto;
    }

    .home-cta-mascot {
        width: 100%;
        height: 258px;
        margin: 0 0 0;
        border-radius: 16px 16px 0 0;
        background: #eaf6ff;
        overflow: hidden;
    }

    .home-cta-mascot img,
    .home-cta-mascot video,
    .home-cta-mascot-svg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        transform: none;
    }

    /* Figma mobile CTA — Reverted to sleek purple/blue gradient with white text/buttons */
    .home-cta-card {
        width: 100%;
        min-height: 248px;
        margin: 0;
        padding: 32px 24px 24px;
        border-radius: 0 0 16px 16px;
        background: linear-gradient(140deg, #2A1878 0%, #4B23B0 100%);
        display: flex;
        flex-direction: column;
        gap: 24px;
        color: #fff;
    }

    /* Figma: Headline/XL/Medium — Onest 32/500/lh:1.2/ls:-1px */
    .home-cta-title {
        max-width: none;
        margin: 0;
        color: #fff;
        font-size: 32px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -1px;
    }

    /* Figma: Body/M/Regular — Onest 16/400/lh:1.4 */
    .home-cta-desc {
        max-width: none;
        margin: 0;
        color: rgba(255, 255, 255, 0.72);
        font-size: 16px;
        line-height: 1.4;
        font-weight: 400;
        opacity: 1;
    }

    /* Figma: dark pill — bg #fff, purple text, Onest Medium 14, h-48 */
    .home-cta-btn {
        width: 100%;
        height: 48px;
        min-height: 48px;
        margin-top: auto;
        padding: 16px 20px 16px 24px;
        justify-content: center;
        border: 0;
        border-radius: 500px;
        background: #fff;
        color: #2A1878;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 500;
    }
    .home-cta-btn:hover {
        background: rgba(255, 255, 255, 0.9);
        color: #2A1878;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * FINAL service-card hover override — authoritative (placed last so it wins
 * over the dozens of stacked, conflicting service-card rules above).
 * Fixes three issues on .home-services-grid:
 *   1. Arrow = 40×40 chip pinned top-right on EVERY card incl. Consulting
 *      (a prior rule let the featured arrow stretch as a flex item).
 *   2. Desc fully visible on hover — cards made tall enough for a 2-line
 *      title (AI) + desc; desc takes natural height (was flex:1 → squished).
 *   3. Icon recolours white → per-card accent (purple/blue/green/red); the
 *      icon is a masked <div>, so the visible colour is its `background`.
 * ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* per-card accent: purple · blue · green · red */
    .home-services-grid .service-card:nth-child(1) { --svc-accent: #6d44b7; }
    .home-services-grid .service-card:nth-child(2) { --svc-accent: #2563eb; }
    .home-services-grid .service-card:nth-child(3) { --svc-accent: #10b981; }
    .home-services-grid .service-card:nth-child(4) { --svc-accent: #dc2626; }

    /* Taller cards so icon + 2-line title + desc all fit on hover */
    .home-services-grid { grid-auto-rows: 232px !important; }
    .home-services-grid .service-card,
    .home-services-grid .service-card:nth-child(2),
    .home-services-grid .service-card:nth-child(4),
    .home-services-grid .service-card:hover,
    .home-services-grid .service-card:focus-visible {
        height: 232px !important;
        min-height: 232px !important;
    }

    /* Inner layout: icon top, title+desc bottom-grouped (title lifts on hover) */
    .home-services-grid .service-card > div {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .home-services-grid .service-card > div > .service-card-icon { margin-bottom: auto !important; }
    .home-services-grid .service-card > div > .service-card-title { margin-top: 0 !important; }

    /* ISSUE 3 — icon recolour to per-card accent on hover (masked div bg) */
    .home-services-grid .service-card:hover .service-card-icon,
    .home-services-grid .service-card:focus-visible .service-card-icon {
        background: var(--svc-accent) !important;
    }

    /* ISSUE 2 — desc hidden by default, fully visible on hover (natural height) */
    .home-services-grid .service-card .service-card-desc {
        display: block !important;
        flex: 0 0 auto !important;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin: 0 !important;
        color: var(--hp-grey, #5C5C5C);
        transition: max-height .25s ease, opacity .25s ease, margin .25s ease;
    }
    .home-services-grid .service-card:hover .service-card-desc,
    .home-services-grid .service-card:focus-visible .service-card-desc {
        max-height: 96px !important;
        opacity: 1 !important;
        margin: 6px 0 0 !important;
    }

    /* ISSUE 1 — arrow = 40×40 top-right chip on ALL cards, hover-only, no bg */
    .home-services-grid .service-card .service-card-arrow {
        position: absolute !important;
        top: 24px !important;
        right: 24px !important;
        left: auto !important;
        bottom: auto !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        background: transparent !important;
        opacity: 0;
        transform: scale(.9);
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
    }
    .home-services-grid .service-card:hover .service-card-arrow,
    .home-services-grid .service-card:focus-visible .service-card-arrow {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}

/* Home desktop: Work feed → About separator.
 * Figma has a full-width hairline after the Work carousel footer, then the
 * About cards start after one measured section gap. Without this override the
 * shared feed's 120px bottom margin stacks with About's 120px top padding. */
@media (min-width: 1101px) {
    body.home .sl-feed--case {
        margin-bottom: 48px;
    }

    body.home .sl-feed--case + .home-about-section {
        border-top: 1px solid #e7e3ef;
        padding-top: 96px;
        padding-bottom: 120px;
    }

    body.home .sl-feed--event + .sl-feed--post {
        margin-top: 216px;
    }
}