/* /Components/AnchorNavigation.razor.rz.scp.css */
[id][b-0sajmiw82p] {
    scroll-margin-top: 5rem; /* This will adjust the distance between the top of the anchor when scrolling to it */
}
/* /Components/BioCard.razor.rz.scp.css */
/* Flex-column layout so the LinkedIn CTA always lands at the bottom
   of every card regardless of bio length. */
.bio-card[b-vn9p5vmnwc] {
    transition: transform 320ms ease-out, box-shadow 320ms ease-out;
}

.bio-card:hover[b-vn9p5vmnwc] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.bio-card__body[b-vn9p5vmnwc] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bio-card__bio[b-vn9p5vmnwc] {
    flex: 1 1 auto;
}

.bio-card__cta[b-vn9p5vmnwc] {
    margin-top: auto;
    padding-top: 1rem;
}
/* /Components/ClientImpactSection.razor.rz.scp.css */
/* =============================================
   ClientImpactSection — static logo proof grid
   ============================================= */

.client-proof[b-yk2f2dlfyz] {
    padding: clamp(4rem, 7vw, 6rem) 0;
    background: var(--surface-sheen-bg,
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 30%),
        linear-gradient(180deg, #141F34 0%, #121C2E 100%));
    position: relative;
    overflow: hidden;
    /* Match Phase B handoff language */
    box-shadow: inset 0 48px 40px -28px rgba(5, 12, 26, 0.45);
}

.client-proof[b-yk2f2dlfyz]::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -10%;
    height: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 70% 60% at 50% 100%,
        rgba(63, 177, 115, 0.12) 0%,
        transparent 70%
    );
}

.client-proof > *[b-yk2f2dlfyz] {
    position: relative;
    z-index: 1;
}

.client-proof__lead[b-yk2f2dlfyz] {
    max-width: 56ch;
    margin: 1rem auto 0;
    color: var(--ink-500);
    font-size: 1.05rem;
    line-height: 1.55;
}

/* 8 featured clients → 4×2 on desktop (no orphan last row) */
.client-proof__grid[b-yk2f2dlfyz] {
    list-style: none;
    padding: 0;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    max-width: 960px;
}

.client-proof__cell[b-yk2f2dlfyz] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Less padding so wordmarks can read larger */
    padding: 0.85rem 0.75rem;
    border-radius: 14px;
    aspect-ratio: 16 / 9;
    /* Scoped CSS wins over site.css — pin LIGHT plates here */
    background: linear-gradient(165deg, #ffffff 0%, #f4f8fc 50%, #e8f0f8 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 10px 28px rgba(0, 0, 0, 0.28) !important;
}

.client-proof__cell:hover[b-yk2f2dlfyz] {
    background: linear-gradient(165deg, #ffffff 0%, #f7fafc 55%, #eef4fa 100%) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
}

/* Wordmarks need real size — 56px was too small to read Ball/Dow/etc. */
.client-proof__cell img[b-yk2f2dlfyz] {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 78px;
    object-fit: contain;
    object-position: center;
    filter: none !important;
    opacity: 1 !important;
}

@media (max-width: 991px) {
    .client-proof__grid[b-yk2f2dlfyz] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: none;
    }
}

@media (max-width: 767px) {
    .client-proof__grid[b-yk2f2dlfyz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .client-proof__cell[b-yk2f2dlfyz] {
        padding: 0.7rem 0.55rem;
    }
    .client-proof__cell img[b-yk2f2dlfyz] {
        max-height: 58px;
    }
}
/* /Components/Diagrams/SnapProcessDiagram.razor.rz.scp.css */
.snap-diagram[b-z97007liww] {
    margin: 0 auto;
    max-width: 1240px;
}

/* Give the ring more width; detail panel mid-size (between full and tiny) */
.snap-diagram__layout[b-z97007liww] {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(240px, 320px);
    gap: 1.1rem 1.35rem;
    align-items: center;
}

.snap-diagram__stage[b-z97007liww] {
    position: relative;
    outline: none;
    border-radius: 16px;
    min-width: 0;
}

.snap-diagram__stage:focus-visible[b-z97007liww] {
    box-shadow: 0 0 0 2px rgba(126, 226, 158, 0.65);
}

.snap-diagram__svg[b-z97007liww] {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

/* Animated dash crawl on feedback strokes */
.snap-fb-stroke[b-z97007liww] {
    animation: snap-fb-dash-b-z97007liww 1.6s linear infinite;
}

.snap-fb-stroke--rev[b-z97007liww] {
    animation-direction: reverse;
    animation-duration: 1.9s;
}

@keyframes snap-fb-dash-b-z97007liww {
    to {
        stroke-dashoffset: -36;
    }
}

@media (prefers-reduced-motion: reduce) {
    .snap-fb-stroke[b-z97007liww] {
        animation: none;
    }
}

.snap-diagram__hits[b-z97007liww] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.snap-diagram__hit[b-z97007liww] {
    position: absolute;
    width: 8%;
    height: 11%;
    transform: translate(-50%, -50%);
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    z-index: 3;
}

.snap-diagram__hit:hover[b-z97007liww] {
    box-shadow: 0 0 0 2px rgba(110, 176, 232, 0.45);
}

.snap-diagram__hit:focus-visible[b-z97007liww] {
    outline: 2px solid #7ee29e;
    outline-offset: 3px;
}

.snap-diagram__hit.is-active[b-z97007liww] {
    box-shadow: 0 0 0 2px rgba(126, 226, 158, 0.55);
}

/* Side panel — mid-size; does not stretch full diagram height */
.snap-diagram__panel[b-z97007liww] {
    min-width: 0;
    max-width: 320px;
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: 16px;
    background: rgba(10, 18, 32, 0.88);
    border: 1px solid rgba(110, 176, 232, 0.28);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.snap-diagram__panel-head[b-z97007liww] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.snap-diagram__panel-num[b-z97007liww] {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #0f1b2d;
    background: linear-gradient(135deg, #7ee29e 0%, #6eb0e8 100%);
}

.snap-diagram__panel-kicker[b-z97007liww] {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(126, 226, 158, 0.9);
}

.snap-diagram__panel-title[b-z97007liww] {
    margin: 0;
    font-family: Poppins, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: #fff;
    line-height: 1.3;
}

.snap-diagram__panel-text[b-z97007liww] {
    margin: 0 0 0.75rem;
    color: rgba(232, 238, 244, 0.9);
    font-size: 0.9rem;
    line-height: 1.5;
}

.snap-diagram__panel-list[b-z97007liww] {
    margin: 0 0 0.85rem;
    padding-left: 1.1rem;
    color: rgba(199, 207, 218, 0.95);
    font-size: 0.86rem;
    line-height: 1.48;
}

.snap-diagram__panel-list li[b-z97007liww] {
    margin-bottom: 0.3rem;
}

.snap-diagram__panel-list li[b-z97007liww]::marker {
    color: #7ee29e;
}

.snap-diagram__panel-loop[b-z97007liww] {
    margin: 0;
    margin-top: 0.3rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(126, 226, 158, 0.25);
    color: rgba(232, 238, 244, 0.88);
    font-size: 0.82rem;
    line-height: 1.42;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.6rem;
}

.snap-diagram__panel-loop-badge[b-z97007liww] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.78rem;
    color: #7ee29e;
    border: 1px solid rgba(126, 226, 158, 0.5);
    background: rgba(63, 177, 115, 0.18);
}

.snap-diagram__panel-hint[b-z97007liww] {
    margin: 0;
    margin-top: 0.3rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(199, 207, 218, 0.65);
    font-size: 0.78rem;
}

@media (max-width: 991px) {
    .snap-diagram__layout[b-z97007liww] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .snap-diagram__panel[b-z97007liww] {
        max-width: none;
        align-self: stretch;
    }
}
/* /Components/Diagrams/SupplyChainDesignDiagram.razor.rz.scp.css */
.scd-diagram[b-fsind7vtnq] {
    width: 100%;
    height: auto;
    max-width: 520px;
    display: block;
    margin: 0 auto;
}

/* Background dot grid — visible enough to anchor the diagram */
.scd-diagram__grid-dot[b-fsind7vtnq] {
    fill: var(--ink-300, #c8cfd9);
}

/* OPTIMAL edges — always visible, brand-primary blue */
.scd-diagram__edge[b-fsind7vtnq] {
    stroke-linecap: round;
    fill: none;
}

.scd-diagram__edge--optimal[b-fsind7vtnq] {
    stroke: var(--brand-primary, #1F6FB2);
    stroke-width: 1.6;
    stroke-opacity: 0.7;
}

/* SCENARIO edges — flicker in/out, suggests "evaluating alternatives" */
.scd-diagram__edge--scenario[b-fsind7vtnq] {
    stroke: var(--brand-accent, #3FB173);
    stroke-width: 1.2;
    stroke-opacity: 0;
    stroke-dasharray: 4 3;
    animation: scd-edge-flicker-b-fsind7vtnq 8s ease-in-out infinite;
}

/* Stagger so multiple scenarios fade in/out at offset times */
.scd-diagram__edge--scenario.s1[b-fsind7vtnq] { animation-delay: 0s;    }
.scd-diagram__edge--scenario.s2[b-fsind7vtnq] { animation-delay: 1.3s;  }
.scd-diagram__edge--scenario.s3[b-fsind7vtnq] { animation-delay: 2.6s;  }
.scd-diagram__edge--scenario.s4[b-fsind7vtnq] { animation-delay: 3.9s;  }
.scd-diagram__edge--scenario.s5[b-fsind7vtnq] { animation-delay: 5.2s;  }
.scd-diagram__edge--scenario.s6[b-fsind7vtnq] { animation-delay: 6.5s;  }

@keyframes scd-edge-flicker-b-fsind7vtnq {
    0%        { stroke-opacity: 0;   }
    5%, 30%   { stroke-opacity: 0.55; }
    40%, 100% { stroke-opacity: 0;   }
}

/* Nodes */
.scd-diagram__node[b-fsind7vtnq] {
    stroke: #ffffff;
    stroke-width: 1.5;
}

.scd-diagram__node--factory[b-fsind7vtnq] {
    fill: var(--brand-primary, #1F6FB2);
}

.scd-diagram__node--hub[b-fsind7vtnq] {
    fill: var(--brand-accent, #3FB173);
    animation: scd-hub-pulse-b-fsind7vtnq 3.4s ease-in-out infinite;
}

.scd-diagram__node--endpoint[b-fsind7vtnq] {
    fill: var(--ink-500, #5b6678);
}

@keyframes scd-hub-pulse-b-fsind7vtnq {
    0%, 100% { fill-opacity: 0.85; }
    50%      { fill-opacity: 1;    }
}

/* Accessibility — respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    .scd-diagram__edge--scenario[b-fsind7vtnq] {
        animation: none;
        stroke-opacity: 0.3;
    }
    .scd-diagram__node--hub[b-fsind7vtnq] { animation: none; }
}
/* /Components/EcosystemDepthSection.razor.rz.scp.css */
/* =============================================
   EcosystemDepthSection — cinema stage on deep surface
   (no stock photo; abstract orbs + faint grid for depth)
   ============================================= */

.ecosystem-depth[b-wscmqz6b9o] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.75rem, 7vw, 5.75rem) 0;
    color: var(--ink-900);
}

/* Soft abstract atmosphere — not a photo */
.ecosystem-depth__atmosphere[b-wscmqz6b9o] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ecosystem-depth__orb[b-wscmqz6b9o] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
}

.ecosystem-depth__orb--a[b-wscmqz6b9o] {
    width: min(520px, 55vw);
    height: min(520px, 55vw);
    top: -18%;
    right: 5%;
    background: rgba(31, 111, 178, 0.28);
}

.ecosystem-depth__orb--b[b-wscmqz6b9o] {
    width: min(420px, 48vw);
    height: min(420px, 48vw);
    bottom: -22%;
    left: 8%;
    background: rgba(63, 177, 115, 0.16);
}

.ecosystem-depth__grid[b-wscmqz6b9o] {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
}

.ecosystem-depth__container[b-wscmqz6b9o] {
    position: relative;
    z-index: 1;
}

/* Shared stage: copy + media as one object */
.ecosystem-depth__stage[b-wscmqz6b9o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: stretch;
    border-radius: clamp(16px, 2vw, 22px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%),
        linear-gradient(180deg, rgba(18, 30, 50, 0.96) 0%, rgba(12, 20, 36, 0.98) 100%);
    box-shadow:
        0 28px 70px -30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ecosystem-depth__copy[b-wscmqz6b9o] {
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.ecosystem-depth__copy[b-wscmqz6b9o]::after {
    content: "";
    position: absolute;
    top: 8%;
    right: 0;
    bottom: 8%;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(8, 14, 26, 0.35));
    z-index: 2;
}

.ecosystem-depth__lead[b-wscmqz6b9o] {
    margin: 1.15rem 0 0;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink-500);
    max-width: 38rem;
}

.ecosystem-depth__lead strong[b-wscmqz6b9o] {
    color: var(--ink-900);
    font-weight: 700;
}

.ecosystem-depth__media[b-wscmqz6b9o] {
    position: relative;
    min-height: clamp(300px, 44vw, 480px);
    background: #060c16;
    isolation: isolate;
}

.ecosystem-depth__media-glow[b-wscmqz6b9o] {
    position: absolute;
    inset: -15% -8% -15% -25%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 60% at 70% 40%, rgba(31, 111, 178, 0.30) 0%, transparent 70%),
        radial-gradient(ellipse 40% 45% at 25% 85%, rgba(63, 177, 115, 0.14) 0%, transparent 65%);
}

.ecosystem-depth__media[b-wscmqz6b9o]  .video-player,
.ecosystem-depth__media .video-player[b-wscmqz6b9o] {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: inherit;
}

.ecosystem-depth__media[b-wscmqz6b9o]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(64px, 11%);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(12, 20, 36, 0.45) 0%, transparent 100%);
}

.ecosystem-depth .section-title[b-wscmqz6b9o] {
    line-height: 1.2;
}

@media (max-width: 991.98px) {
    .ecosystem-depth__stage[b-wscmqz6b9o] {
        grid-template-columns: 1fr;
    }

    .ecosystem-depth__copy[b-wscmqz6b9o] {
        padding: 1.65rem 1.25rem 1.35rem;
        order: 1;
    }

    .ecosystem-depth__copy[b-wscmqz6b9o]::after {
        display: none;
    }

    .ecosystem-depth__media[b-wscmqz6b9o] {
        order: 0;
        min-height: min(56vw, 340px);
    }

    .ecosystem-depth__media[b-wscmqz6b9o]::before {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: 48px;
        background: linear-gradient(0deg, rgba(12, 20, 36, 0.65) 0%, transparent 100%);
    }

    .ecosystem-depth .section-title[b-wscmqz6b9o] {
        font-size: clamp(1.65rem, 5vw, 2.1rem);
    }
}
/* /Components/HeaderSearch.razor.rz.scp.css */
/* Trigger button styles only. The dialog (backdrop + panel + results)
   lives in HeaderSearchDialog.razor / .razor.css so its DOM can sit
   outside the navbar's stacking context and actually cover the page. */
.header-search-trigger[b-94fsa82n16] {
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.header-search-trigger:hover[b-94fsa82n16],
.header-search-trigger:focus[b-94fsa82n16] {
    color: var(--brand-primary, #1F6FB2);
    text-decoration: none;
}
/* /Components/HeaderSearchDialog.razor.rz.scp.css */
.header-search-backdrop[b-cpve0pe1j0] {
    position: fixed;
    inset: 0;
    background: rgba(5, 12, 26, 0.72);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
            backdrop-filter: blur(8px) saturate(140%);
    z-index: 1080;
    animation: header-search-fade-in-b-cpve0pe1j0 180ms ease-out;
}

.header-search-panel[b-cpve0pe1j0] {
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, calc(100vw - 2rem));
    max-height: calc(100vh - 7rem);
    display: flex;
    flex-direction: column;
    background: var(--surface-elevated, var(--surface-default));
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg, 1rem);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 1085;
    overflow: hidden;
    animation: header-search-slide-in-b-cpve0pe1j0 220ms cubic-bezier(.22, 1, .36, 1);
}

/* Brand-gradient hairline across the top of the panel. */
.header-search-panel[b-cpve0pe1j0]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    z-index: 1;
}

.header-search-input-row[b-cpve0pe1j0] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ink-200);
}

.header-search-input-row > i:first-child[b-cpve0pe1j0] {
    font-size: 1.25rem;
    color: var(--brand-primary);
}

.header-search-input[b-cpve0pe1j0] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.125rem;
    font-weight: 500;
    background: transparent;
    padding: 0.35rem 0;
    color: var(--ink-900);
}

.header-search-input[b-cpve0pe1j0]::placeholder {
    color: var(--ink-500);
    font-weight: 400;
}

.header-search-results[b-cpve0pe1j0] {
    overflow-y: auto;
    flex: 1;
    min-height: 3rem;
    max-height: calc(100vh - 16rem);
}

.header-search-result[b-cpve0pe1j0] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.5rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--ink-200);
    transition: background-color 120ms ease-out, padding-left 160ms var(--ease-out-quart);
    position: relative;
}

.header-search-result[b-cpve0pe1j0]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-accent));
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 160ms var(--ease-out-quart);
}

.header-search-result:last-child[b-cpve0pe1j0] {
    border-bottom: none;
}

.header-search-result:hover[b-cpve0pe1j0],
.header-search-result.active[b-cpve0pe1j0] {
    background-color: rgba(31, 111, 178, 0.12);
    color: inherit;
    text-decoration: none;
    padding-left: 1.65rem;
}

.header-search-result:hover[b-cpve0pe1j0]::before,
.header-search-result.active[b-cpve0pe1j0]::before {
    transform: scaleY(1);
}

.header-search-kind[b-cpve0pe1j0] {
    flex-shrink: 0;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-transform: capitalize;
    min-width: 4.5rem;
    text-align: center;
}

.header-search-text[b-cpve0pe1j0] {
    flex: 1;
    min-width: 0;
}

.header-search-text .text-muted[b-cpve0pe1j0] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.header-search-footer[b-cpve0pe1j0] {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--ink-200);
    background: rgba(0, 0, 0, 0.22);
    font-size: 0.78rem;
    color: var(--ink-500);
}

.header-search-footer kbd[b-cpve0pe1j0] {
    background: var(--surface-muted);
    color: var(--ink-700);
    border: 1px solid var(--ink-200);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.72rem;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    margin-right: 0.3rem;
}

@keyframes header-search-fade-in-b-cpve0pe1j0 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes header-search-slide-in-b-cpve0pe1j0 {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0);    }
}

@media (max-width: 576px) {
    .header-search-panel[b-cpve0pe1j0] {
        top: 4rem;
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 5rem);
    }
}
/* /Components/LocationsMap.razor.rz.scp.css */
/* Locations maps — two region outlines with a green pin per team member.
   --loc-pin is the brand accent green; tweak in one place if the brand green
   needs to shift. */
.loc-maps[b-2uxyebg5rq] {
    --loc-pin: #3FB173;
    /* Slightly cooler land so maps sit on dark page cards without
       looking like leftover light-theme paste-ins. */
    --loc-land: #3a4f68;
    --loc-land-stroke: #5a7190;
}

.loc-map[b-2uxyebg5rq] {
    height: 100%;
    margin: 0;
    padding: 1.5rem 1.5rem 1.25rem;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, transparent 45%),
        var(--surface-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

.loc-map__title[b-2uxyebg5rq] {
    font: var(--type-heading-md);
    color: var(--ink-900);
    margin-bottom: 1rem;
    text-align: center;
}

.loc-map__frame[b-2uxyebg5rq] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loc-map__svg[b-2uxyebg5rq] {
    width: 100%;
    height: auto;
    max-height: 340px;
    /* Clip to the viewBox so nothing (geometry or pin halos) can spill
       out of the card the way Scandinavia used to. */
    overflow: hidden;
}

.loc-map__land[b-2uxyebg5rq] {
    fill: var(--loc-land);
    stroke: var(--loc-land-stroke);
    stroke-width: 1;
    stroke-linejoin: round;
}

/* Lakes are punched out of the land via SVG <mask> in the markup
   (fill black in the mask). No separate lake fill — the map card
   shows through, so water stays transparent. */

.loc-map__pin-dot[b-2uxyebg5rq] {
    fill: var(--loc-pin);
    stroke: #ffffff;
    stroke-width: 1.5;
}

/* The dot and its pulsing halo are decorative — keep them out of hit-testing
   so the animation can't make the hover target flicker. A static, invisible
   circle gives a reliably-large area to hover the tiny dots. */
.loc-map__pin-dot[b-2uxyebg5rq],
.loc-map__pin-halo[b-2uxyebg5rq],
.loc-map__pin-label[b-2uxyebg5rq] {
    pointer-events: none;
}

.loc-map__pin-hit[b-2uxyebg5rq] {
    fill: transparent;
    pointer-events: all;
    cursor: default;
}

/* On-map label shown instantly on hover (no native-tooltip delay).
   Sizes are in SVG user units (viewBox), not CSS px — Europe’s larger
   frame made 22u read tiny; bump defaults and scale Europe further. */
.loc-map__pin-label[b-2uxyebg5rq] {
    font-family: var(--font-sans, "Inter", system-ui, sans-serif);
    font-size: 32px;
    font-weight: 600;
    fill: #F3F6FB;
    paint-order: stroke;
    stroke: #0B1424;
    stroke-width: 5px;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 120ms var(--ease-standard, ease);
    pointer-events: none;
}

/* Europe silhouette is wider/taller in viewBox space — labels need more size. */
.loc-map__svg--europe .loc-map__pin-label[b-2uxyebg5rq] {
    font-size: 48px;
    stroke-width: 7px;
    font-weight: 700;
}

.loc-map__svg--us .loc-map__pin-label[b-2uxyebg5rq] {
    font-size: 36px;
    stroke-width: 6px;
}

.loc-map__pin:hover .loc-map__pin-label[b-2uxyebg5rq],
.loc-map__pin:focus-within .loc-map__pin-label[b-2uxyebg5rq] {
    opacity: 1;
}

.loc-map__pin-halo[b-2uxyebg5rq] {
    fill: var(--loc-pin);
    opacity: 0.25;
    transform-box: fill-box;
    transform-origin: center;
    animation: locPinPulse-b-2uxyebg5rq 2.6s ease-out infinite;
}

/* Stagger the halos a little so they don't throb in lockstep. */
.loc-map__pin:nth-child(3n) .loc-map__pin-halo[b-2uxyebg5rq] { animation-delay: 0.6s; }
.loc-map__pin:nth-child(3n + 1) .loc-map__pin-halo[b-2uxyebg5rq] { animation-delay: 1.2s; }

@keyframes locPinPulse-b-2uxyebg5rq {
    0%   { transform: scale(0.5); opacity: 0.35; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .loc-map__pin-halo[b-2uxyebg5rq] { animation: none; opacity: 0.2; }
}
/* /Components/PageHeader.razor.rz.scp.css */
/* =============================================
   PageHeader Component Styles
   ============================================= */

/* ── NORMAL HERO (non-compact pages) ──
   Default interior height is ~70vh of CONTENT plus the navbar overlap.
   The min-height adds --navbar-height to the visual target so the
   padding-top reservation doesn't eat into the visible content area
   — without that, padding-top would shrink the headline's available
   space by ~86px, making heroes feel cropped. */
.page-header[b-5n5wtkur7q] {
    position: relative;
    min-height: calc(70vh + var(--navbar-height));
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-top: var(--navbar-height);
}

/* The full-screen treatment is reserved for the landing page video hero */
.page-header.page-header--video[b-5n5wtkur7q] {
    min-height: calc(92vh + var(--navbar-height));
}

    .page-header[b-5n5wtkur7q]  .page-header-image,
    .page-header .page-header-image[b-5n5wtkur7q] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .page-header[b-5n5wtkur7q]  .page-header-video,
    .page-header .page-header-video[b-5n5wtkur7q] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    /* Parallax background — opt-in via EnableParallax="true" on PageHeader.
       Uses background-attachment: fixed for the classic "fixed window"
       parallax effect: image stays anchored to the viewport as the hero
       container scrolls past. Pure CSS, no JS. */
    .page-header[b-5n5wtkur7q]  .page-header-bg--parallax,
    .page-header .page-header-bg--parallax[b-5n5wtkur7q] {
        position: absolute;
        inset: 0;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        z-index: 0;
    }

    /* iOS Safari + some mobile browsers don't honor background-attachment:
       fixed. Fall back to a normal cover background in that case so the
       hero still renders, just without the parallax. */
    @supports (-webkit-touch-callout: none) {
        .page-header[b-5n5wtkur7q]  .page-header-bg--parallax,
        .page-header .page-header-bg--parallax[b-5n5wtkur7q] {
            background-attachment: scroll;
        }
    }

    /* Plain hero — no media element, just brand-tinted dark gradient
       with subtle corner glows. For pages where stock photography would
       fight the message and no real image is available yet. */
    .page-header.page-header--plain[b-5n5wtkur7q] {
        background: var(--dark-band-bg);
        min-height: calc(60vh + var(--navbar-height));
    }

    .page-header.dark.page-header--plain[b-5n5wtkur7q] {
        min-height: calc(62vh + var(--navbar-height));
    }

    .page-header.page-header--plain .container .row[b-5n5wtkur7q] {
        min-height: 60vh;
    }

    /* World routes hero: same background treatment as network,
       different canvas animation drawn over it. */
    .page-header[b-5n5wtkur7q]  .page-header-world-routes,
    .page-header .page-header-world-routes[b-5n5wtkur7q] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: var(--dark-band-bg);
    }

    .page-header.page-header--world-routes[b-5n5wtkur7q] {
        min-height: calc(68vh + var(--navbar-height));
    }

    .page-header.dark.page-header--world-routes[b-5n5wtkur7q] {
        min-height: calc(72vh + var(--navbar-height));
    }

    .page-header.page-header--world-routes .container .row[b-5n5wtkur7q] {
        min-height: 68vh;
    }

    /* Profit Network hero: Three.js overhead supply network (or corridor fallback). */
    .page-header[b-5n5wtkur7q]  .page-header-pipeline,
    .page-header .page-header-pipeline[b-5n5wtkur7q] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        display: block;
        background: var(--dark-band-bg);
    }

    /* Atmosphere only — copy primary in left ~35%; network owns right ~65%. */
    .page-header.page-header--pipeline[b-5n5wtkur7q]::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            90deg,
            rgba(5, 12, 26, 0.92) 0%,
            rgba(5, 12, 26, 0.72) 18%,
            rgba(5, 12, 26, 0.38) 32%,
            rgba(5, 12, 26, 0.12) 42%,
            transparent 52%
        );
    }

    .page-header.page-header--pipeline[b-5n5wtkur7q] {
        min-height: calc(68vh + var(--navbar-height));
    }

    .page-header.dark.page-header--pipeline[b-5n5wtkur7q] {
        min-height: calc(72vh + var(--navbar-height));
    }

    .page-header.page-header--pipeline .container .row[b-5n5wtkur7q] {
        min-height: 68vh;
    }

    /* Let pointer events hit the WebGL canvas (KPI icons) on the right;
       only real controls on the left copy capture clicks. */
    .page-header.page-header--pipeline > .container[b-5n5wtkur7q] {
        pointer-events: none;
    }
    .page-header.page-header--pipeline > .container a[b-5n5wtkur7q],
    .page-header.page-header--pipeline > .container button[b-5n5wtkur7q],
    .page-header.page-header--pipeline > .container .btn[b-5n5wtkur7q] {
        pointer-events: auto;
    }

    /* Network hero: animated canvas as background. Sits in the same
       layer as image/video and inherits the dark hero's fade mask. */
    .page-header[b-5n5wtkur7q]  .page-header-network,
    .page-header .page-header-network[b-5n5wtkur7q] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: var(--dark-band-bg);
    }

    /* Network variant is compact — shorter than full image/video heroes
       since there's less visual "weight" to fill. Still gives the title
       room and stays under the fold on most screens. */
    .page-header.page-header--network[b-5n5wtkur7q] {
        min-height: calc(68vh + var(--navbar-height));
    }

    .page-header.dark.page-header--network[b-5n5wtkur7q] {
        min-height: calc(72vh + var(--navbar-height));
    }

    .page-header.page-header--network .container .row[b-5n5wtkur7q] {
        min-height: 68vh;
    }

    .page-header .page-header-overlay[b-5n5wtkur7q] {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 60%);
        z-index: 1;
    }

    .page-header.light .page-header-overlay[b-5n5wtkur7q] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%);
    }

    /* Busy team / photo heroes: dark left veil under copy; photo stays open on the right */
    .page-header.page-header--strong-overlay .page-header-overlay[b-5n5wtkur7q] {
        background:
            linear-gradient(90deg,
                rgba(8, 16, 32, 0.82) 0%,
                rgba(8, 16, 32, 0.55) 38%,
                rgba(8, 16, 32, 0.18) 62%,
                rgba(8, 16, 32, 0.05) 100%),
            linear-gradient(180deg,
                rgba(8, 16, 32, 0.25) 0%,
                transparent 45%,
                rgba(8, 16, 32, 0.35) 100%);
    }

    .page-header.page-header--strong-overlay .page-header-headline[b-5n5wtkur7q],
    .page-header.page-header--strong-overlay .page-header-subheadline[b-5n5wtkur7q] {
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.55),
            0 4px 28px rgba(0, 0, 0, 0.45);
    }

    /* Careers team hero only (StrongOverlay): vertical lift for cover fill.
       Horizontal framing stays as in the original asset (no pan / re-crop). */
    .page-header.page-header--strong-overlay[b-5n5wtkur7q]  .page-header-image,
    .page-header.page-header--strong-overlay .page-header-image[b-5n5wtkur7q] {
        object-fit: cover;
        object-position: center 35%;
        top: -50px;
        height: calc(100% + 50px);
        image-rendering: auto;
    }

    /* Dark heros sit above the next section in stacking order, and the
       video/image fades to transparent at the bottom so the section
       behind shows through. */
    .page-header.dark[b-5n5wtkur7q] {
        z-index: 2;
    }

    /* Dark interior heroes (About, Services, etc.) — shorter stage only.
       Type scale is shared with Home (one brand voice); only height differs. */
    .page-header.dark[b-5n5wtkur7q] {
        min-height: calc(62vh + var(--navbar-height));
        height: auto;
    }

    /* Home video ONLY — full viewport. Never inherit onto About/image. */
    .page-header.dark.page-header--video[b-5n5wtkur7q] {
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        align-items: center;
        box-sizing: border-box;
    }

    .page-header.dark.page-header--video .container[b-5n5wtkur7q] {
        margin-top: 0;
        transform: translateY(20px);
    }

    @media (max-width: 991.98px) {
        .page-header.dark.page-header--video .container[b-5n5wtkur7q] {
            transform: translateY(20px);
        }
    }

    .page-header.dark[b-5n5wtkur7q]  .page-header-video,
    .page-header.dark .page-header-video[b-5n5wtkur7q],
    .page-header.dark[b-5n5wtkur7q]  .page-header-image,
    .page-header.dark .page-header-image[b-5n5wtkur7q],
    .page-header.dark[b-5n5wtkur7q]  .page-header-network,
    .page-header.dark .page-header-network[b-5n5wtkur7q],
    .page-header.dark[b-5n5wtkur7q]  .page-header-world-routes,
    .page-header.dark .page-header-world-routes[b-5n5wtkur7q],
    .page-header.dark[b-5n5wtkur7q]  .page-header-pipeline,
    .page-header.dark .page-header-pipeline[b-5n5wtkur7q],
    .page-header.dark[b-5n5wtkur7q]  .page-header-bg--parallax,
    .page-header.dark .page-header-bg--parallax[b-5n5wtkur7q] {
        -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1)    68%,
            rgba(0, 0, 0, 0.96) 74%,
            rgba(0, 0, 0, 0.88) 80%,
            rgba(0, 0, 0, 0.72) 86%,
            rgba(0, 0, 0, 0.48) 91%,
            rgba(0, 0, 0, 0.22) 96%,
            rgba(0, 0, 0, 0)    100%
        );
                mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1)    68%,
            rgba(0, 0, 0, 0.96) 74%,
            rgba(0, 0, 0, 0.88) 80%,
            rgba(0, 0, 0, 0.72) 86%,
            rgba(0, 0, 0, 0.48) 91%,
            rgba(0, 0, 0, 0.22) 96%,
            rgba(0, 0, 0, 0)    100%
        );
    }

    /* Suppress any focus/selection outline on the headline that
       browsers occasionally draw after click. */
    .page-header .page-header-headline[b-5n5wtkur7q],
    .page-header .page-header-headline:focus[b-5n5wtkur7q],
    .page-header .page-header-headline:focus-visible[b-5n5wtkur7q],
    .page-header .page-header-headline span[b-5n5wtkur7q] {
        outline: none !important;
    }

    .page-header .container[b-5n5wtkur7q] {
        z-index: 2;
    }

    .page-header .page-header-headline[b-5n5wtkur7q] {
        font-size: clamp(3rem, 7vw, 5.5rem);
        line-height: 1.05;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        font-weight: 800;
    }

    .page-header .page-header-subheadline[b-5n5wtkur7q] {
        font-size: clamp(1.3rem, 3vw, 1.9rem);
        max-width: 680px;
    }

    /* Hero copy on media (video/image/canvas): always true white.
       Bootstrap .text-white was accidentally remapped when --bs-white
       pointed at the dark surface — pin here so it cannot regress. */
    .page-header.dark .page-header-headline[b-5n5wtkur7q],
    .page-header.dark .page-header-subheadline[b-5n5wtkur7q],
    .page-header.dark .page-header-headline.text-white[b-5n5wtkur7q],
    .page-header.dark .page-header-subheadline.text-white[b-5n5wtkur7q] {
        color: #ffffff !important;
    }

    .page-header.light .page-header-headline[b-5n5wtkur7q],
    .page-header.light .page-header-subheadline[b-5n5wtkur7q],
    .page-header.light .page-header-headline.text-dark[b-5n5wtkur7q],
    .page-header.light .page-header-subheadline.text-dark[b-5n5wtkur7q] {
        color: #0B1220 !important;
        text-shadow: none;
    }

    .page-header .btn[b-5n5wtkur7q] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
    }

    .page-header .btn-primary[b-5n5wtkur7q] {
        background: #51B067;
        border: none;
    }

        .page-header .btn-primary:hover[b-5n5wtkur7q] {
            background: rgb(67, 149, 86);
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(81, 176, 103, 0.4);
        }

/* Animation */
@keyframes gradient-shift-b-5n5wtkur7q {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* About fishbowl stage — real <img object-fit:cover> fills the hero the
   same way CSS cover does. The blink socket is position:absolute in that
   stage using the same cover math, so it stays on the eye at every size. */
.page-header-fish-stage[b-5n5wtkur7q] {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.page-header-fish-img[b-5n5wtkur7q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Same soft bottom fade as other dark media heroes */
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 1)    68%,
        rgba(0, 0, 0, 0.96) 74%,
        rgba(0, 0, 0, 0.88) 80%,
        rgba(0, 0, 0, 0.72) 86%,
        rgba(0, 0, 0, 0.48) 91%,
        rgba(0, 0, 0, 0.22) 96%,
        rgba(0, 0, 0, 0)    100%
    );
            mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 1)    68%,
        rgba(0, 0, 0, 0.96) 74%,
        rgba(0, 0, 0, 0.88) 80%,
        rgba(0, 0, 0, 0.72) 86%,
        rgba(0, 0, 0, 0.48) 91%,
        rgba(0, 0, 0, 0.22) 96%,
        rgba(0, 0, 0, 0)    100%
    );
}

/* Socket over the pupil — absolute within the stage (NOT position:fixed) */
.page-header-fish-blink[b-5n5wtkur7q] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    border-radius: 50%;
    background: transparent;
    /* Hidden until JS places over the eye (lid is absolute on the stage,
       so it scrolls with the fish — no scroll gating required). */
    visibility: hidden;
    transform: translate(-50%, -50%); /* center socket on eye point */
}

.page-header-fish-blink.is-ready.is-visible[b-5n5wtkur7q] {
    visibility: visible;
}

/* Orange upper lid — drops from top of socket */
.page-header-fish-blink[b-5n5wtkur7q]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 48% 48%;
    background:
        linear-gradient(
            180deg,
            #c46828 0%,
            #a84a18 32%,
            #8f3a12 65%,
            #6e2c0c 90%,
            #4a1c08 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(200, 120, 60, 0.25),
        inset 0 -2px 3px rgba(30, 10, 2, 0.4);
    transform: translate3d(0, -110%, 0);
    will-change: transform;
}

.page-header-fish-blink.is-blinking[b-5n5wtkur7q]::after {
    animation: fish-eye-blink-once-b-5n5wtkur7q 0.32s ease-in-out forwards;
}

@keyframes fish-eye-blink-once-b-5n5wtkur7q {
    0% {
        transform: translate3d(0, -110%, 0);
    }
    35% {
        transform: translate3d(0, 0, 0);
    }
    55% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -110%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-header-fish-blink[b-5n5wtkur7q] {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .page-header-fish-blink[b-5n5wtkur7q] {
        display: none !important;
    }
}

/* ── COMPACT MODE (Resources page only) ── */
.page-header.page-header-compact[b-5n5wtkur7q] {
    min-height: auto !important;
    background: none;
    overflow: visible;
    display: block;
}

/* Compact image - 100% width, zero whitespace, flat edges, 400px tall */
.page-header-image-compact[b-5n5wtkur7q] {
    width: 100% !important;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
}

/* Text in compact mode */
.page-header.page-header-compact h1[b-5n5wtkur7q] {
    font-size: 2.75rem;
    line-height: 1.1;
}

.page-header.page-header-compact .lead[b-5n5wtkur7q] {
    font-size: 1.25rem;
}

/* Responsive — interior heroes stay compact; only Home video is tall */
@media (max-width: 991.98px) {
    .page-header.dark:not(.page-header--video)[b-5n5wtkur7q] {
        min-height: calc(52vh + var(--navbar-height));
    }

    .page-header.dark.page-header--video[b-5n5wtkur7q] {
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
    }

    .page-header-image-compact[b-5n5wtkur7q] {
        height: 320px;
    }
}
/* /Components/ProtectedPhone.razor.rz.scp.css */
.protected-phone[b-men0koyew0] {
    display: inline-block;
    height: 1.35em;
    width: auto;
    vertical-align: -0.3em;
    overflow: visible;
}

.protected-phone text[b-men0koyew0] {
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    fill: currentColor;
}
/* /Components/ProtectedPhrase.razor.rz.scp.css */
/* Real text + flex order — must match surrounding type (no SVG metrics). */
.protected-phrase[b-eghyi0l21l] {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: baseline;
    white-space: nowrap;
    font: inherit;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.protected-phrase__g[b-eghyi0l21l] {
    display: inline-block;
    font: inherit;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
    line-height: inherit;
}

/* Glyph via CSS content — invisible to text-node scrapers, same look */
.protected-phrase__g--css[b-eghyi0l21l]::before {
    content: attr(data-c);
    font: inherit;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
    line-height: inherit;
}

/* Zero-width decoys — no layout footprint */
.protected-phrase__z[b-eghyi0l21l] {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

/* Headings: stay bold with section titles */
.protected-phrase--heading[b-eghyi0l21l],
.protected-phrase--heading .protected-phrase__g[b-eghyi0l21l],
.protected-phrase--heading .protected-phrase__g--css[b-eghyi0l21l]::before {
    font-weight: 700;
}
/* /Components/ResourceFilters.razor.rz.scp.css */
.card[b-mwe6j7o1fy] {
    transition: box-shadow 0.2s ease;
}

    .card:hover[b-mwe6j7o1fy] {
        box-shadow: var(--shadow-md, 0 10px 28px rgba(0, 0, 0, 0.38));
    }

.list-group-item[b-mwe6j7o1fy] {
    transition: all 0.2s ease;
}

    .list-group-item:hover[b-mwe6j7o1fy] {
        background-color: var(--surface-muted);
        transform: translateX(8px); /* no layout jump */
    }

.accordion-button[b-mwe6j7o1fy] {
    background-color: transparent;
    color: inherit;
}

    .accordion-button:not(.collapsed)[b-mwe6j7o1fy] {
        background-color: var(--surface-muted);
        color: var(--brand-primary, #1F6FB2);
    }

.accordion-body .badge[b-mwe6j7o1fy] {
    font-size: 0.75rem;
}
/* /Components/SectionNav.razor.rz.scp.css */
/* Section nav rail — sticky vertical dots on the right edge.
   Default: dots only. Label for the active section stays visible.
   Other labels appear one-at-a-time on that item's hover/focus.
   Hidden on small screens.

   Labels sit to the LEFT of the dots. A transparent ::before bridge
   spans the gap so the pointer can move from dot → label without
   leaving :hover (labels used to vanish mid-travel). */
.section-nav[b-y52tfn8j9p] {
    position: fixed;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    /* Extra hit padding so dots are easy to aim without expanding the layout */
    padding: 0.5rem 0.35rem;
}

.section-nav__list[b-y52tfn8j9p] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: flex-end;
}

.section-nav__item[b-y52tfn8j9p] {
    position: relative;
}

.section-nav__link[b-y52tfn8j9p] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hit box around the dot — still narrow so scrollbar stays free */
    width: 28px;
    height: 28px;
    text-decoration: none;
    padding: 0;
    color: inherit;
}

/*
  Invisible hover bridge: extends left from the link over the gap and
  the label zone. Hovering this counts as hovering the link, so the
  label stays open while the pointer travels onto the text.
*/
.section-nav__link[b-y52tfn8j9p]::before {
    content: "";
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translateY(-50%);
    width: 15rem;
    height: 2.5rem;
    z-index: 0;
}

.section-nav__dot[b-y52tfn8j9p] {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink-300);
    border: 2px solid transparent;
    transition: background 200ms ease-out,
                transform 200ms ease-out,
                box-shadow 200ms ease-out;
}

.section-nav__label[b-y52tfn8j9p] {
    position: absolute;
    /* Slightly tighter to the dot; bridge still covers any residual gap */
    right: calc(100% + 0.4rem);
    top: 50%;
    transform: translate(4px, -50%);
    z-index: 2;
    font-size: 0.82rem;
    font-weight: 500;
    /* ink-900 is light text in this design system */
    color: var(--ink-900);
    background: rgba(22, 38, 63, 0.94);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    padding: 0.4rem 0.95rem;
    border-radius: var(--radius-pill, 999px);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out, transform 180ms ease-out;
    min-width: 0;
    max-width: none;
}

/* Reveal on item/link hover or keyboard focus — keep clickable */
.section-nav__item:hover .section-nav__label[b-y52tfn8j9p],
.section-nav__link:hover .section-nav__label[b-y52tfn8j9p],
.section-nav__link:focus-visible .section-nav__label[b-y52tfn8j9p] {
    opacity: 1;
    transform: translate(0, -50%);
    pointer-events: auto;
}

.section-nav__item:hover .section-nav__dot[b-y52tfn8j9p],
.section-nav__link:hover .section-nav__dot[b-y52tfn8j9p] {
    background: var(--brand-accent);
    transform: scale(1.25);
}

/* Active section in view — keep its label visible */
.section-nav__link.is-active .section-nav__dot[b-y52tfn8j9p] {
    background: var(--brand-primary);
    transform: scale(1.4);
    box-shadow: 0 0 0 4px rgba(31, 111, 178, 0.18);
}

.section-nav__link.is-active .section-nav__label[b-y52tfn8j9p] {
    opacity: 1;
    transform: translate(0, -50%);
    color: #fff;
    border-color: rgba(110, 176, 232, 0.55);
    background: rgba(31, 111, 178, 0.35);
    pointer-events: auto;
}

/* When active is also hovered, keep accent readable */
.section-nav__item:hover .section-nav__link.is-active .section-nav__dot[b-y52tfn8j9p],
.section-nav__link.is-active:hover .section-nav__dot[b-y52tfn8j9p] {
    background: var(--brand-accent);
}

/* Hide on tablet & smaller */
@media (max-width: 991px) {
    .section-nav[b-y52tfn8j9p] {
        display: none;
    }
}
/* /Components/ServiceSection.razor.rz.scp.css */
.parallax-bg[b-hy8rd6bt0l] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(5px) brightness(0.8); /* Subtle overlay effect */
    transform: translateY(0); /* For parallax JS */
    z-index: 1;
}

.benefit-card[b-hy8rd6bt0l], .resource-card[b-hy8rd6bt0l] {
    transition: transform 0.3s ease;
}

    .benefit-card:hover[b-hy8rd6bt0l], .resource-card:hover[b-hy8rd6bt0l] {
        transform: scale(1.05);
    }

.quote-card[b-hy8rd6bt0l] {
    border-left: 5px solid var(--primary);
}
/* /Components/ToolkitTabs.razor.rz.scp.css */
.nav-tabs .nav-link[b-z6rrt667z8] {
    font-weight: 600;
    color: var(--ink-700);
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
}

    .nav-tabs .nav-link:hover[b-z6rrt667z8] {
        color: var(--ink-900);
        border-bottom-color: var(--ink-300);
    }

    .nav-tabs .nav-link.active[b-z6rrt667z8] {
        border-bottom-color: var(--brand-primary, var(--primary));
        color: var(--brand-primary, var(--primary));
        background: transparent;
    }

.nav-tabs[b-z6rrt667z8] {
    border-bottom-color: var(--ink-200);
}

.toolkit-tabs .card[b-z6rrt667z8] {
    transition: transform 0.3s ease;
}

    .toolkit-tabs .card:hover[b-z6rrt667z8] {
        transform: translateY(-4px);
    }
/* /Components/VideoPlayer.razor.rz.scp.css */
/* =============================================
   VideoPlayer — poster-gated stream
   ============================================= */

.video-player[b-8kmzjt33jg] {
    width: 100%;
    height: 100%;
}

.video-player__frame[b-8kmzjt33jg] {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0a1220;
}

.video-player--card .video-player__frame[b-8kmzjt33jg] {
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(0, 0, 0, 0.18));
    border: 1px solid rgba(15, 27, 45, 0.08);
    transition: transform var(--duration-short, 200ms) var(--ease-out-quart, ease),
                box-shadow var(--duration-short, 200ms) var(--ease-out-quart, ease);
}

.video-player--card .video-player__frame:hover[b-8kmzjt33jg] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.22));
}

.video-player--fill[b-8kmzjt33jg] {
    display: flex;
    flex-direction: column;
}

.video-player--fill .video-player__frame[b-8kmzjt33jg] {
    flex: 1;
    min-height: 280px;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--ink-200, #d5dde8);
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(0, 0, 0, 0.08));
}

.video-player--bare .video-player__frame[b-8kmzjt33jg] {
    border-radius: 0;
    box-shadow: none;
    border: 0;
}

/* Cinema: fills parent stage; no card chrome — media is the architecture */
.video-player--cinema[b-8kmzjt33jg] {
    height: 100%;
    min-height: inherit;
}

.video-player--cinema .video-player__frame[b-8kmzjt33jg] {
    height: 100%;
    min-height: clamp(280px, 42vw, 480px);
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.video-player__frame[role="button"][b-8kmzjt33jg] {
    cursor: pointer;
}

.video-player__frame[role="button"]:focus-visible[b-8kmzjt33jg] {
    outline: 2px solid var(--brand-primary, #5188B0);
    outline-offset: 3px;
}

.video-player__frame--playing[b-8kmzjt33jg] {
    cursor: default;
}

.video-player__poster[b-8kmzjt33jg],
.video-player__video[b-8kmzjt33jg],
.video-player__iframe[b-8kmzjt33jg] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-player__poster[b-8kmzjt33jg] {
    object-fit: cover;
}

.video-player__video[b-8kmzjt33jg] {
    object-fit: contain;
    background: #000;
}

/* Bottom vignette — ties caption + play into the frame */
.video-player__scrim[b-8kmzjt33jg] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(6, 12, 24, 0.25) 40%,
        rgba(6, 12, 24, 0.82) 100%
    );
}

/* Default: centered disc */
.video-player__play[b-8kmzjt33jg] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0B1220;
    z-index: 2;
    pointer-events: none;
    transition: transform var(--duration-short, 200ms) var(--ease-out-quart, ease),
                background var(--duration-instant, 120ms) var(--ease-standard, ease);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.video-player__frame:hover .video-player__play[b-8kmzjt33jg] {
    transform: translate(-50%, -50%) scale(1.08);
    background: #ffffff;
}

.video-player__play .bi[b-8kmzjt33jg] {
    font-size: 1.75rem;
    margin-left: 4px;
}

/* Cinema: brand pill on the media (not a floating center badge) */
.video-player--cinema .video-player__play[b-8kmzjt33jg] {
    top: auto;
    left: 1.25rem;
    bottom: 1.25rem;
    transform: none;
    width: auto;
    height: auto;
    min-height: 48px;
    padding: 0.55rem 1.15rem 0.55rem 0.95rem;
    border-radius: 999px;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.video-player--cinema .video-player__frame:hover .video-player__play[b-8kmzjt33jg] {
    transform: translateY(-2px);
    background: #fff;
}

.video-player--cinema .video-player__play .bi[b-8kmzjt33jg] {
    font-size: 1.25rem;
    margin-left: 2px;
    color: var(--brand-primary-strong, #1f6fb2);
}

.video-player__play-label[b-8kmzjt33jg] {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: #0B1220;
}

/* Caption lives ON the poster (cinema) */
.video-player__caption[b-8kmzjt33jg] {
    position: absolute;
    right: 1.25rem;
    bottom: 1.35rem;
    left: auto;
    z-index: 2;
    margin: 0;
    max-width: min(50%, 16rem);
    text-align: right;
    font-size: 0.85rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
    pointer-events: none;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.video-player__placeholder[b-8kmzjt33jg] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    background: var(--dark-band-bg, #0f1b2d);
}

.video-player__placeholder i[b-8kmzjt33jg] {
    font-size: 3rem;
    color: var(--brand-accent, #3fb173);
    margin-bottom: 0.5rem;
}

.video-player__placeholder-title[b-8kmzjt33jg] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0;
    color: #fff;
}

.video-player__placeholder-hint[b-8kmzjt33jg] {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
}

.video-player__soon[b-8kmzjt33jg] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0.35) 0%, rgba(11, 18, 32, 0.55) 100%);
    color: #fff;
    z-index: 2;
    pointer-events: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.video-player__soon i[b-8kmzjt33jg] {
    font-size: 2.5rem;
    color: var(--brand-accent, #3fb173);
}

.video-player__credit[b-8kmzjt33jg] {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
    color: var(--ink-500);
    line-height: 1.4;
}

@media (max-width: 575.98px) {
    .video-player--cinema .video-player__caption[b-8kmzjt33jg] {
        max-width: 55%;
        font-size: 0.78rem;
        bottom: 1rem;
        right: 1rem;
    }

    .video-player--cinema .video-player__play[b-8kmzjt33jg] {
        left: 1rem;
        bottom: 1rem;
        padding: 0.45rem 0.95rem 0.45rem 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-player--card .video-player__frame[b-8kmzjt33jg],
    .video-player--card .video-player__frame:hover[b-8kmzjt33jg],
    .video-player__play[b-8kmzjt33jg],
    .video-player__frame:hover .video-player__play[b-8kmzjt33jg],
    .video-player--cinema .video-player__frame:hover .video-player__play[b-8kmzjt33jg] {
        transition: none;
        transform: none;
    }

    .video-player__frame:hover .video-player__play[b-8kmzjt33jg] {
        transform: translate(-50%, -50%);
    }

    .video-player--cinema .video-player__frame:hover .video-player__play[b-8kmzjt33jg] {
        transform: none;
    }
}
/* /Components/VisualSplitSection.razor.rz.scp.css */
.visual-split[b-s9lgee7rxh] {
    position: relative;
    overflow: hidden;
}

    .visual-split[b-s9lgee7rxh]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--light-map) center/cover no-repeat; /* passed from site.css */
        opacity: 0.07;
        z-index: 0;
        pointer-events: none;
    }

    .visual-split .container[b-s9lgee7rxh] {
        position: relative;
        z-index: 1;
    }
/* /Components/WhyChoose.razor.rz.scp.css */
.why-choose[b-d351vf2aeb] {
  position: relative;
  overflow: hidden;
  background: var(--dark-band-bg, linear-gradient(to bottom, #000000, #001020));
  color: var(--dark-band-fg, white);
}
.why-choose[b-d351vf2aeb]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(31, 111, 178, 0.08);
  z-index: 0;
  pointer-events: none;
}
.why-choose #particle-canvas[b-d351vf2aeb] {
  position: absolute;
  inset: 0;
  opacity: 0.75;
  z-index: 0;
}
.why-choose .container[b-d351vf2aeb] {
  position: relative;
  z-index: 1;
  padding: 5rem 1rem;
}
.why-choose .section-title[b-d351vf2aeb] {
  color: #f0f9ff;
}
.why-choose .card[b-d351vf2aeb] {
  background: rgba(30, 30, 30, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}
.why-choose .card .card-body[b-d351vf2aeb] {
  color: #ffffff;
}
.why-choose .card h5[b-d351vf2aeb] {
  color: #ffffff;
}
.why-choose .card .bi[b-d351vf2aeb] {
  color: #cccccc;
}
.why-choose .card:hover[b-d351vf2aeb] {
  transform: translateY(-8px);
}
.why-choose .card:hover .bi[b-d351vf2aeb] {
  color: rgb(64.3241106719, 141.6758893281, 82.2371541502) !important;
}
/* /Layout/Footer.razor.rz.scp.css */
.footer[b-1g2pj6rttw] {
    position: relative;
    background: var(--dark-band-bg-plain);
    color: var(--dark-band-fg);
}

/* Top accent stripe — uses the same gradient as the CTA above it
   to create a visual handoff from CTA into footer. */
.footer__accent[b-1g2pj6rttw] {
    height: 4px;
    width: 100%;
    background: var(--gradient);
}

/* Footer brand: the colored molecule mark only. The black "profit"
   wordmark dies on the dark band and the light logo is off-limits, so we
   show just the symbol — "Profit Point Inc." already reads in the
   copyright line below. logo-mark.png is the molecule extracted from
   logo.png (tools: sharp), transparent, so it sits on the dark band. */
.footer__logo[b-1g2pj6rttw] {
    height: 60px;
    width: auto;
    display: block;
}

.footer__tagline[b-1g2pj6rttw] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 28ch;
    margin-bottom: 0;
}

.footer__heading[b-1g2pj6rttw] {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.1rem;
    padding-bottom: 0.55rem;
    position: relative;
}

.footer__heading[b-1g2pj6rttw]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--brand-accent);
    border-radius: 2px;
}

.footer__list[b-1g2pj6rttw] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__list li[b-1g2pj6rttw] {
    margin-bottom: 0.5rem;
}

.footer__list a[b-1g2pj6rttw] {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 200ms ease-out;
}

.footer__list a:hover[b-1g2pj6rttw] {
    color: var(--brand-accent);
}

.footer__address[b-1g2pj6rttw] {
    color: rgba(255, 255, 255, 0.72);
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0.75rem;
}

.footer__contact[b-1g2pj6rttw] {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 200ms ease-out;
}

.footer__contact:hover[b-1g2pj6rttw] {
    color: var(--brand-accent);
}

.footer__cta[b-1g2pj6rttw] {
    display: inline-flex;
    align-items: center;
    color: var(--brand-accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 200ms ease-out, transform 200ms ease-out;
}

.footer__cta:hover[b-1g2pj6rttw] {
    color: #ffffff;
    transform: translateX(2px);
}

.footer__cta i[b-1g2pj6rttw] {
    transition: transform 200ms ease-out;
}

.footer__cta:hover i[b-1g2pj6rttw] {
    transform: translateX(2px);
}

.footer__divider[b-1g2pj6rttw] {
    height: 1px;
    background: linear-gradient(90deg,
                                transparent 0%,
                                rgba(255, 255, 255, 0.14) 50%,
                                transparent 100%);
    margin: 2.5rem 0 1.5rem;
}

.footer__copyright[b-1g2pj6rttw] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
}

.footer__soc-badge[b-1g2pj6rttw] {
    transition: transform 200ms ease-out;
}

.footer__soc-badge:hover[b-1g2pj6rttw] {
    transform: scale(1.04);
}

@media (max-width: 767px) {
    .footer__divider[b-1g2pj6rttw] {
        margin: 2rem 0 1.25rem;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Equal-width nav items so the bar reads as a clean row of tabs
   instead of a ragged list. Only applied on desktop (lg+); on mobile
   the collapsed nav stacks vertically and width-equalization is
   counterproductive. */
@media (min-width: 992px) {
    .nav-item--equal[b-762p6n4o2i] {
        flex: 0 0 auto;
        min-width: 96px;
        text-align: center;
    }

    .nav-item--equal[b-762p6n4o2i]  .nav-link,
    .nav-item--equal .nav-link[b-762p6n4o2i] {
        width: 100%;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}
/* /Pages/About.razor.rz.scp.css */
/* /about — page-specific layout.
   Global utilities (.reveal, .delay-N, .parallax-bg, generic .card
   hover, .video-wrapper, .pattern--*) now live in site.css. This file
   only contains layout/decoration unique to the About page. */

/* Anchor offset so section tops don't butt against the nav on scroll */
#why[b-lorwpy0jfw], #from-the-team[b-lorwpy0jfw], #team[b-lorwpy0jfw], #partners[b-lorwpy0jfw], #locations[b-lorwpy0jfw], #careers[b-lorwpy0jfw] {
    scroll-margin-top: 80px;
}


/* 1. Who we are — narrative + principles section */
.about-narrative[b-lorwpy0jfw] {
    position: relative;
    padding: clamp(5rem, 9vw, 7rem) 0;
    background: var(--surface-alt-bg,
        radial-gradient(circle at 90% 0%,  rgba(31, 111, 178, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 0%  90%, rgba(63, 177, 115, 0.10) 0%, transparent 40%),
        linear-gradient(180deg, #101C30 0%, #121E32 100%));
    overflow: hidden;
}

/* Page-specific tuning for the .pattern.pattern--dots layer in the
   narrative section. The shape, mask, and base behavior come from
   site.css; this just sets the size and tone to match the section. */
.about-narrative__pattern[b-lorwpy0jfw] {
    --pattern-size: 26px;
    --pattern-color: var(--ink-300);
    --pattern-opacity: 0.5;
}

/* Principles callout — replaces the fabricated pull-quote */
.about-principles[b-lorwpy0jfw] {
    position: relative;
    isolation: isolate;
    padding: 2rem 1.75rem;
    background: linear-gradient(135deg,
        rgba(31, 111, 178, 0.14) 0%,
        rgba(63, 177, 115, 0.12) 100%);
    border-left: 4px solid var(--brand-accent);
    border-radius: var(--radius-md, 0.75rem);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 4px solid var(--brand-accent);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

/* Cursor dots spotlight — different from Tech grid / Services hex */
.about-principles__pattern[b-lorwpy0jfw] {
    z-index: 0;
    --pattern-size: 16px;
    --pattern-color: rgba(110, 176, 232, 0.45);
    --pattern-opacity: 0.95;
    --pattern-dot-size: 1.15px;
    -webkit-mask-image: radial-gradient(
        200px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.7) 40%,
        transparent 72%
    );
            mask-image: radial-gradient(
        200px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.7) 40%,
        transparent 72%
    );
}

.about-principles__body[b-lorwpy0jfw] {
    position: relative;
    z-index: 1;
}

.about-principles__title[b-lorwpy0jfw] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
    margin-bottom: 1.5rem;
}

.about-principles__list[b-lorwpy0jfw] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.about-principles__list li[b-lorwpy0jfw] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.about-principles__list i[b-lorwpy0jfw] {
    color: var(--brand-accent);
    font-size: 1.35rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.about-principles__list strong[b-lorwpy0jfw] {
    display: block;
    color: var(--ink-900);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.about-principles__list p[b-lorwpy0jfw] {
    color: var(--ink-500);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}


/* 2. Team — editorial alternating rows */
.about-team[b-lorwpy0jfw] {
    position: relative;
    background: var(--surface-cool-bg,
        radial-gradient(circle at 5% 30%, rgba(31, 111, 178, 0.14) 0%, transparent 40%),
        radial-gradient(circle at 95% 80%, rgba(63, 177, 115, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #0C172C 0%, #0E1A30 100%));
    color: var(--ink-900);
}

.about-team__list[b-lorwpy0jfw] {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 5vw, 5rem);
    margin-top: 1rem;
    position: relative;
    /* Leave room on the left for the rail + oversized ordinal. */
    padding-left: clamp(3.5rem, 8vw, 7rem);
}

/* ── Ledger rail ──────────────────────────────────────────────────
   Thin vertical line running the full height of the team list. The
   gradient-filled fill child grows downward in sync with scroll
   progress (driven by initTeamLedger in site.js).
   Ticks are CHILDREN of the rail (not of each row), so they sit on
   the rail's X column by definition. The rail itself paints below the
   rows so its background tint never overlaps row content, but the
   tick (z-index: 3) paints above the rail-fill so the dot stays
   visible after the fill arrives. */
.about-team__rail[b-lorwpy0jfw] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(0.6rem, 1.6vw, 1.25rem);
    transform: translateX(-50%);
    width: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    z-index: 4;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.about-team__rail-fill[b-lorwpy0jfw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-accent));
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(31, 111, 178, 0.35);
    transition: none;
    will-change: height;
    z-index: 1;
}

.about-team__row[b-lorwpy0jfw] {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    position: relative;
}

/* Prevent bios vanishing when Blazor re-renders and GSAP drops .active */
.about-team .about-team__row.reveal[b-lorwpy0jfw] {
    opacity: 1;
    transform: none;
}

.about-team__photo-wrap[b-lorwpy0jfw],
.about-team__body[b-lorwpy0jfw] {
    position: relative;
    z-index: 1;
}

/* Tick mark — lives inside .about-team__rail, NOT inside each row.
   That guarantees X is always centered on the rail's 3px column. JS
   pins each tick to the vertical center of .about-team__name so the
   dot lines up with the bio title / name heading.

   Default state is a HOLLOW disc — white with a grey border, like a
   ledger node waiting to be filled. When the rail-fill reaches the
   dot (.active class), it fills with brand blue and gets a soft
   blue halo + drop-shadow. The `.popping` class fires a one-shot
   blue expansion ring on top of that; JS re-applies `.popping` on
   every crossing so it replays scrolling up *and* down. */
.about-team__tick[b-lorwpy0jfw] {
    position: absolute;
    left: 50%;
    /* `top` is set inline by JS — kept here as a safe default. */
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* Hollow-feeling node on the dark rail */
    background: var(--ink-300);
    border: 3px solid rgba(12, 23, 44, 0.95);
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.45);
    transition:
        background var(--duration-short) var(--ease-out-quart),
        border-color var(--duration-short) var(--ease-out-quart),
        transform var(--duration-short) var(--ease-out-quart),
        box-shadow var(--duration-short) var(--ease-out-quart);
    z-index: 3;
}

.about-team__tick.active[b-lorwpy0jfw] {
    background: var(--brand-primary);
    border-color: rgba(12, 23, 44, 0.95);
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow:
        0 0 0 1px rgba(31, 111, 178, 0.65),
        0 0 18px rgba(31, 111, 178, 0.70),
        0 2px 10px rgba(31, 111, 178, 0.45);
}

/* Local "explosion" — blue ring scales out from the tick's own
   center and fades. Driven by `.popping` (re-applied per crossing)
   instead of `.active` so it replays on every pass, not only the
   first one. */
.about-team__tick-ring[b-lorwpy0jfw] {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--brand-primary);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
}

.about-team__tick.popping .about-team__tick-ring[b-lorwpy0jfw] {
    animation: team-tick-explode-b-lorwpy0jfw 900ms var(--ease-out-quart) forwards;
}

@keyframes team-tick-explode-b-lorwpy0jfw {
    0%   { transform: scale(0.4); opacity: 0; }
    30%  { transform: scale(1); opacity: 0.85; }
    100% { transform: scale(4); opacity: 0; }
}

/* ── Soft shimmer (replaces the old expanding curved shockwave) ─
   Slow diagonal sheen when a bio is reached. Clipped to the card.
   JS toggles `.shocking` with a cooldown so it can re-fire without thrash. */
.about-team__shockwave[b-lorwpy0jfw] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    border-radius: var(--radius-lg);
}

.about-team__shockwave-ring[b-lorwpy0jfw] {
    position: absolute;
    top: -30%;
    left: 0;
    width: 42%;
    height: 160%;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 32%,
        rgba(110, 193, 255, 0.14) 46%,
        rgba(126, 226, 158, 0.12) 52%,
        rgba(255, 255, 255, 0.05) 58%,
        transparent 72%
    );
    transform: translateX(-130%) skewX(-16deg);
    opacity: 0;
    pointer-events: none;
    filter: blur(0.5px);
}

.about-team__row.shocking .about-team__shockwave-ring[b-lorwpy0jfw] {
    /* No delay — sheen is already on-card at frame 0 of the animation */
    animation: team-glisten-b-lorwpy0jfw 2.2s linear forwards;
    animation-delay: 0s;
}

@keyframes team-glisten-b-lorwpy0jfw {
    /* Peak of the sheen starts at the left edge of the card (not off-screen),
       so activation is visible the same moment the rail hits the dot. */
    0% {
        transform: translateX(-50%) skewX(-16deg);
        opacity: 0.9;
    }
    55% {
        opacity: 0.45;
    }
    100% {
        transform: translateX(280%) skewX(-16deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-team__row.shocking .about-team__shockwave-ring[b-lorwpy0jfw] {
        animation: none;
        opacity: 0;
    }
}

/* Currently-focused row (scroll-driven) — the "card" behind each
   member. Green hairline on the left, elevated plate, clips the
   shockwave. .focused is toggled by initTeamLedger on the row nearest
   viewport center. */
.about-team__row[b-lorwpy0jfw] {
    position: relative;
    border-radius: var(--radius-lg);
    padding: clamp(1.15rem, 2.5vw, 1.85rem) clamp(1rem, 2vw, 1.75rem);
    /* Unfocused: transparent so the section shows through */
    background: transparent;
    border: 1px solid transparent;
    border-left: 4px solid transparent; /* reserve space so layout doesn't jump */
    transition:
        background var(--duration-long) var(--ease-out-quart),
        box-shadow var(--duration-long) var(--ease-out-quart),
        border-color var(--duration-long) var(--ease-out-quart);
}

/* Must clearly separate from the cool team band (#0C172C / #0E1A30).
   Use a lighter elevated plate + solid green left edge (not only inset
   shadow, which can vanish under some compositing/hot-reload cases). */
.about-team__row.focused[b-lorwpy0jfw] {
    background: linear-gradient(115deg,
        #1a3358 0%,
        #162a48 42%,
        #13243e 100%) !important;
    border: 1px solid rgba(120, 170, 220, 0.28) !important;
    border-left: 4px solid var(--brand-accent, #3FB173) !important;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.50),
        0 0 0 1px rgba(63, 177, 115, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}


@media (prefers-reduced-motion: reduce) {
    /* Show the ledger fully drawn and all dots blue immediately so
       reduced-motion users still get the structure without scroll-
       driven animation. No explosion / shockwave animations fire. */
    .about-team__rail-fill[b-lorwpy0jfw] { height: 100% !important; }
    .about-team__tick[b-lorwpy0jfw] {
        background: var(--brand-primary);
        transform: translate(-50%, -50%) scale(1.3);
    }
    .about-team__tick-ring[b-lorwpy0jfw],
    .about-team__shockwave-ring[b-lorwpy0jfw] {
        animation: none !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
}

.about-team__row--right[b-lorwpy0jfw] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
}

.about-team__row--right .about-team__photo-wrap[b-lorwpy0jfw] {
    order: 2;
}

.about-team__row--right .about-team__body[b-lorwpy0jfw] {
    order: 1;
}

.about-team__photo-wrap[b-lorwpy0jfw] {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-lg, 1rem);
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(31, 111, 178, 0.22) 0%,
        rgba(63, 177, 115, 0.14) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--shadow-md);
    transition: transform 320ms ease-out, box-shadow 320ms ease-out, border-color 320ms ease-out;
}

.about-team__row:hover .about-team__photo-wrap[b-lorwpy0jfw],
.about-team__row.focused .about-team__photo-wrap[b-lorwpy0jfw] {
    transform: translateY(-4px);
    border-color: rgba(31, 111, 178, 0.50);
    box-shadow: var(--shadow-hover, var(--shadow-lg));
}

/* Hard fence: light partner-logo plate rules must never paint team photos */
.about-team__photo-wrap[b-lorwpy0jfw],
.about-team__photo-wrap:hover[b-lorwpy0jfw],
.about-team__row.focused .about-team__photo-wrap[b-lorwpy0jfw] {
    background: linear-gradient(135deg,
        rgba(31, 111, 178, 0.22) 0%,
        rgba(63, 177, 115, 0.14) 100%) !important;
}

.about-team__photo-wrap[b-lorwpy0jfw]  .about-team__photo,
.about-team__photo-wrap .about-team__photo[b-lorwpy0jfw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.about-team__name[b-lorwpy0jfw] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    color: var(--ink-900);
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.about-team__title[b-lorwpy0jfw] {
    color: var(--brand-primary);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.about-team__bio[b-lorwpy0jfw] {
    color: var(--ink-700);
    font-size: 1.02rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    max-width: 64ch;
}

.about-team__linkedin[b-lorwpy0jfw] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-pill, 999px);
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    transition: background 200ms ease-out, color 200ms ease-out, transform 200ms ease-out;
}

.about-team__linkedin:hover[b-lorwpy0jfw] {
    background: var(--brand-primary);
    color: #ffffff;
    transform: translateX(2px);
}

/* Stack vertically on smaller screens */
@media (max-width: 767px) {
    .about-team__list[b-lorwpy0jfw] {
        padding-left: 2rem;
    }

    .about-team__rail[b-lorwpy0jfw] {
        left: 0.4rem;
    }

    .about-team__row[b-lorwpy0jfw],
    .about-team__row--right[b-lorwpy0jfw] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .about-team__row--right .about-team__photo-wrap[b-lorwpy0jfw],
    .about-team__row--right .about-team__body[b-lorwpy0jfw] {
        order: initial;
    }

    .about-team__photo-wrap[b-lorwpy0jfw] {
        max-width: 240px;
        margin: 0 auto;
    }

    /* Tick stays on the rail (positioned by JS from its row); no
       mobile override needed. The shockwave's positioning + clip-
       path works at any viewport width, so no mobile override
       needed for it either. */
}

/* 2. By the numbers — light-tinted stat band.
   Reworked from dark to light to break the dark-light-dark-light
   rhythm on /about. Same "DNA" as the unified dark band (corner
   blue + green glows over a base) but with very low opacity tints
   on white — the section reads as part of the brand without
   demanding the dark-band's weight. */
.about-stats[b-lorwpy0jfw] {
    position: relative;
    background: var(--surface-sheen-bg,
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 32%),
        radial-gradient(120% 70% at 15% 0%, rgba(31, 111, 178, 0.14) 0%, transparent 55%),
        radial-gradient(120% 70% at 85% 100%, rgba(63, 177, 115, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #141F34 0%, #121C2E 100%));
    color: var(--ink-900);
    padding: clamp(4rem, 7vw, 6rem) 0;
    overflow: hidden;
}

.about-stats__glow[b-lorwpy0jfw] {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.18;
    pointer-events: none;
}

.about-stats__glow--a[b-lorwpy0jfw] {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -120px;
    background: radial-gradient(circle, var(--brand-primary) 0%, transparent 70%);
}

.about-stats__glow--b[b-lorwpy0jfw] {
    width: 420px;
    height: 420px;
    bottom: -120px;
    right: -120px;
    background: radial-gradient(circle, var(--brand-accent) 0%, transparent 70%);
}

.about-stats__grid[b-lorwpy0jfw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.about-stats__item[b-lorwpy0jfw] {
    text-align: center;
    padding: 1.5rem 1rem;
}

.about-stats__value[b-lorwpy0jfw] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 3.6rem);
    line-height: 1;
    /* Fallback color (used by browsers that don't support
       background-clip: text). Switched from white to ink-900 so the
       digit is legible on the new light background if the gradient
       text-fill fails. */
    color: var(--ink-900);
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-stats__value--text[b-lorwpy0jfw] {
    font-size: clamp(2rem, 4vw, 2.8rem);
}

.about-stats__value span[b-lorwpy0jfw] {
    color: var(--brand-accent);
    font-size: 0.7em;
    -webkit-text-fill-color: var(--brand-accent);
    margin-left: 0.1rem;
}

.about-stats__label[b-lorwpy0jfw] {
    color: var(--ink-500);
    font-size: 0.95rem;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .about-stats__grid[b-lorwpy0jfw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* 3. Partners section
   Band gradient: .about-partners-band in site.css (SectionWrapper root). */
.about-partners__values[b-lorwpy0jfw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, transparent 48%),
        linear-gradient(135deg, rgba(31, 111, 178, 0.12) 0%, rgba(63, 177, 115, 0.08) 100%),
        var(--surface-elevated);
    border: 1px solid rgba(110, 193, 255, 0.14);
    border-radius: var(--radius-md, 0.75rem);
    box-shadow: var(--shadow-sm);
}

.about-partners__value-row[b-lorwpy0jfw] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    color: var(--ink-700);
    font-size: 0.98rem;
    line-height: 1.5;
}

.about-partners__value-row i[b-lorwpy0jfw] {
    color: var(--brand-accent);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.about-partners__group-title[b-lorwpy0jfw] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--ink-900);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.about-partners__group-title i[b-lorwpy0jfw] {
    color: var(--brand-primary);
}

.about-partners__group-lead[b-lorwpy0jfw] {
    color: var(--ink-500);
    font-size: 0.98rem;
    margin-bottom: 1.5rem;
    max-width: 64ch;
}

.about-partners__cta[b-lorwpy0jfw] {
    background: linear-gradient(135deg,
        rgba(31, 111, 178, 0.14) 0%,
        rgba(63, 177, 115, 0.10) 100%);
    border: 1px solid rgba(110, 193, 255, 0.16);
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--radius-md, 0.75rem);
    padding: 1.5rem 1.75rem;
}


/* 3a. Partners grid — fixed tile size so 2 consulting partners don't
   stretch into oversized slabs across a 6-col track. */
.about-partners__grid[b-lorwpy0jfw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
    gap: 1rem;
    align-items: stretch;
    justify-content: start;
}

/* Only under #partners — never bleed into .about-team */
#partners .about-partners__cell[b-lorwpy0jfw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.35rem 1.1rem;
    border-radius: 14px;
    aspect-ratio: 16 / 10;
    min-height: 96px;
    background: linear-gradient(165deg, #ffffff 0%, #f4f8fc 50%, #e8f0f8 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 10px 28px rgba(0, 0, 0, 0.28) !important;
}

#partners .about-partners__cell:hover[b-lorwpy0jfw] {
    background: linear-gradient(165deg, #ffffff 0%, #f7fafc 55%, #eef4fa 100%) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
}

#partners .about-partners__cell img[b-lorwpy0jfw] {
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
    filter: none !important;
    opacity: 1 !important;
}

/* Text fallback when a partner has no logo asset yet — dark on light plate */
.about-partners__placeholder[b-lorwpy0jfw] {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: center;
    color: #0B1220;
    letter-spacing: -0.01em;
    max-width: 12ch;
}

@media (max-width: 479px) {
    .about-partners__grid[b-lorwpy0jfw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-partners__cell img[b-lorwpy0jfw] { max-height: 44px; }
}


/* 4. Locations — office cards on ambient background */
.about-locations[b-lorwpy0jfw] {
    position: relative;
    background: var(--surface-warm-bg,
        radial-gradient(circle at 50% 0%, rgba(31, 111, 178, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(63, 177, 115, 0.10) 0%, transparent 45%),
        linear-gradient(180deg, #0C161F 0%, #0E1A24 100%));
}

.about-office[b-lorwpy0jfw] {
    position: relative;
    height: 100%;
    padding: 2rem 1.75rem;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, transparent 45%),
        var(--surface-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 1rem);
    text-align: center;
    overflow: hidden;
    transition: transform 320ms ease-out, box-shadow 320ms ease-out, border-color 320ms ease-out;
}

.about-office:hover[b-lorwpy0jfw] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover, var(--shadow-md));
    border-color: rgba(31, 111, 178, 0.45);
}

/* Per-location background silhouette. The outline is the real country
   shape, extracted from countries-110m.json (Natural Earth) by
   tools/extract-country-svg.js and saved to /images/locations/. We
   use mask-image so the SVG owns SHAPE only and CSS owns COLOR via
   background-color — that lets the brand tint the silhouette without
   editing the source file. */
.about-office--us[b-lorwpy0jfw]::before,
.about-office--nl[b-lorwpy0jfw]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--brand-primary);
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center 58%;
            mask-position: center 58%;
    -webkit-mask-size: 82% auto;
            mask-size: 82% auto;
}

/* Real US (contiguous-48) outline extracted from Natural Earth */
.about-office--us[b-lorwpy0jfw]::before {
    -webkit-mask-image: url("/images/locations/us.svg");
            mask-image: url("/images/locations/us.svg");
}

/* Real Netherlands outline extracted from Natural Earth */
.about-office--nl[b-lorwpy0jfw]::before {
    -webkit-mask-image: url("/images/locations/netherlands.svg");
            mask-image: url("/images/locations/netherlands.svg");
    -webkit-mask-size: 55% auto;
            mask-size: 55% auto;
}

/* The flag, name, role and address need to sit ABOVE the silhouette. */
.about-office > *[b-lorwpy0jfw] {
    position: relative;
    z-index: 1;
}

.about-office__flag[b-lorwpy0jfw] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(11, 18, 32, 0.20),
                0 0 0 1px rgba(11, 18, 32, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    line-height: 1;
}

.about-office__country[b-lorwpy0jfw] {
    line-height: 1;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

.about-office__name[b-lorwpy0jfw] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--ink-900);
    margin-bottom: 0.15rem;
}

.about-office__role[b-lorwpy0jfw] {
    color: var(--brand-primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.about-office__address[b-lorwpy0jfw] {
    color: var(--ink-700);
    font-style: normal;
    line-height: 1.6;
    margin: 0;
}


/* 5. Careers callout — dark band so it doesn't get skipped on scroll.
   Same family as the Services Framework section + Contact slab. */
.about-careers[b-lorwpy0jfw] {
    position: relative;
    background: var(--dark-band-bg);
    color: var(--dark-band-fg);
    padding: clamp(4rem, 7vw, 5.5rem) 0;
    overflow: hidden;
    isolation: isolate;
}

.about-careers__glow[b-lorwpy0jfw] {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
}

.about-careers__glow--a[b-lorwpy0jfw] {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, var(--brand-primary) 0%, transparent 70%);
    opacity: 0.55;
}

.about-careers__glow--b[b-lorwpy0jfw] {
    width: 360px;
    height: 360px;
    bottom: -100px;
    right: -100px;
    background: radial-gradient(circle, var(--brand-accent) 0%, transparent 70%);
    opacity: 0.45;
}

.about-careers__title[b-lorwpy0jfw] {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0.75rem 0 1rem;
}

.about-careers__lead[b-lorwpy0jfw] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 60ch;
    margin: 0;
}
/* ── About cinema stage (Alan video) — same pattern as Services ─ */
.about-video[b-lorwpy0jfw] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.75rem, 7vw, 5.75rem) 0;
    color: var(--ink-900);
}
.about-video__atmosphere[b-lorwpy0jfw] { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.about-video__orb[b-lorwpy0jfw] { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; }
.about-video__orb--a[b-lorwpy0jfw] {
    width: min(520px, 55vw); height: min(520px, 55vw); top: -18%; right: 5%;
    background: rgba(31, 111, 178, 0.28);
}
.about-video__orb--b[b-lorwpy0jfw] {
    width: min(420px, 48vw); height: min(420px, 48vw); bottom: -22%; left: 8%;
    background: rgba(63, 177, 115, 0.16);
}
.about-video__grid[b-lorwpy0jfw] {
    position: absolute; inset: 0; opacity: 0.04;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
}
.about-video__container[b-lorwpy0jfw] { position: relative; z-index: 1; }
.about-video__stage[b-lorwpy0jfw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: stretch;
    border-radius: clamp(16px, 2vw, 22px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%),
        linear-gradient(180deg, rgba(18, 30, 50, 0.96) 0%, rgba(12, 20, 36, 0.98) 100%);
    box-shadow: 0 28px 70px -30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.about-video__copy[b-lorwpy0jfw] {
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
    display: flex; flex-direction: column; justify-content: center;
    position: relative; z-index: 1;
}
.about-video__copy[b-lorwpy0jfw]::after {
    content: "";
    position: absolute; top: 8%; right: 0; bottom: 8%; width: 40px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(8, 14, 26, 0.35));
    z-index: 2;
}
.about-video__copy .section-title[b-lorwpy0jfw] { color: #fff; }
.about-video__lead[b-lorwpy0jfw] {
    margin: 1.15rem 0 0; font-size: 1.08rem; line-height: 1.6;
    color: rgba(255, 255, 255, 0.78); max-width: 38rem;
}
.about-video__body[b-lorwpy0jfw] {
    margin: 0.9rem 0 0; font-size: 1.02rem; line-height: 1.6;
    color: rgba(255, 255, 255, 0.68); max-width: 38rem;
}
.about-video__media[b-lorwpy0jfw] {
    position: relative; min-height: clamp(300px, 44vw, 480px);
    background: #060c16; isolation: isolate;
}
.about-video__media-glow[b-lorwpy0jfw] {
    position: absolute; inset: -15% -8% -15% -25%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 55% 60% at 70% 40%, rgba(31, 111, 178, 0.30) 0%, transparent 70%),
        radial-gradient(ellipse 40% 45% at 25% 85%, rgba(63, 177, 115, 0.14) 0%, transparent 65%);
}
.about-video__media[b-lorwpy0jfw]  .video-player,
.about-video__media .video-player[b-lorwpy0jfw] {
    position: relative; z-index: 1; height: 100%; min-height: inherit;
}
.about-video__media[b-lorwpy0jfw]::before {
    content: "";
    position: absolute; top: 0; left: 0; bottom: 0; width: min(64px, 11%);
    z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(12, 20, 36, 0.45) 0%, transparent 100%);
}
@media (max-width: 991px) {
    .about-video__stage[b-lorwpy0jfw] { grid-template-columns: 1fr; }
    .about-video__copy[b-lorwpy0jfw]::after { display: none; }
    .about-video__media[b-lorwpy0jfw] { min-height: clamp(240px, 56vw, 380px); }
    .about-video__media[b-lorwpy0jfw]::before { display: none; }
}
/* /Pages/CareerDetail.razor.rz.scp.css */
/* =============================================
   /career/{slug} — individual posting detail page
   ============================================= */

/* ── Hero (dark, same family as /careers and /contact) ─────── */
/* `padding-top` is split out with !important to beat site.css's
   `main > *:first-child:not(.page-header)` global rule, which is
   (0,0,2,1) specificity and otherwise overrides the scoped class
   selector — same situation as the Contact page. */
.career-detail__hero[b-3mwj24kf0b] {
    position: relative;
    background: var(--dark-band-bg);
    color: var(--dark-band-fg);
    padding: 0 0 clamp(3rem, 6vw, 5rem);
    padding-top: calc(var(--navbar-height) + clamp(1rem, 2.5vw, 2rem)) !important;
    overflow: hidden;
    isolation: isolate;
}

.career-detail__glow[b-3mwj24kf0b] {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
}

.career-detail__glow--a[b-3mwj24kf0b] {
    width: 520px;
    height: 520px;
    top: -160px;
    left: -120px;
    background: radial-gradient(circle, var(--brand-primary) 0%, transparent 70%);
    opacity: 0.50;
}

.career-detail__glow--b[b-3mwj24kf0b] {
    width: 380px;
    height: 380px;
    bottom: -100px;
    right: -100px;
    background: radial-gradient(circle, var(--brand-accent) 0%, transparent 70%);
    opacity: 0.40;
}

.career-detail__back[b-3mwj24kf0b] {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    transition: color var(--duration-short) var(--ease-out-quart);
}

.career-detail__back:hover[b-3mwj24kf0b] {
    color: var(--brand-accent);
}

.career-detail__title[b-3mwj24kf0b] {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0.75rem 0 1.5rem;
    max-width: 24ch;
}

.career-detail__meta[b-3mwj24kf0b] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
}

.career-detail__meta-item[b-3mwj24kf0b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.career-detail__meta-item i[b-3mwj24kf0b] {
    color: var(--brand-accent);
}

.career-detail__hero-cta[b-3mwj24kf0b] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Body content ──────────────────────────────────────────── */
.career-detail[b-3mwj24kf0b] {
    position: relative;
}

.career-detail__intro[b-3mwj24kf0b] {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--ink-700);
    margin-bottom: 2.5rem;
    max-width: 68ch;
}

.career-detail__block[b-3mwj24kf0b] {
    margin-bottom: 2.5rem;
}

.career-detail__heading[b-3mwj24kf0b] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink-900);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--brand-accent);
    display: inline-block;
}

.career-detail__list[b-3mwj24kf0b] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.career-detail__list li[b-3mwj24kf0b] {
    color: var(--ink-700);
    font-size: 1rem;
    line-height: 1.6;
    padding-left: 1.5rem;
    position: relative;
}

.career-detail__list li[b-3mwj24kf0b]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-primary);
}

.career-detail__close[b-3mwj24kf0b] {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ink-200);
}

.career-detail__close-text[b-3mwj24kf0b] {
    color: var(--ink-700);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
    max-width: 60ch;
}

/* ── Sidebar (sticky on lg screens) ────────────────────────── */
/* Uses the plain dark gradient — full --dark-band-bg with corner
   glows would look strange on a small card. */
.career-detail__sidebar[b-3mwj24kf0b] {
    background: var(--dark-band-bg-plain);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    color: var(--dark-band-fg);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.career-detail__sidebar[b-3mwj24kf0b]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

@media (min-width: 992px) {
    .career-detail__sidebar[b-3mwj24kf0b] {
        position: sticky;
        top: calc(var(--navbar-height) + 1.5rem);
    }
}

.career-detail__sidebar-title[b-3mwj24kf0b] {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}

.career-detail__sidebar-list[b-3mwj24kf0b] {
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.career-detail__sidebar-list > div[b-3mwj24kf0b] {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.career-detail__sidebar-list > div:last-child[b-3mwj24kf0b] {
    border-bottom: none;
    padding-bottom: 0;
}

.career-detail__sidebar-list dt[b-3mwj24kf0b] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
}

.career-detail__sidebar-list dd[b-3mwj24kf0b] {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0;
}

.career-detail__sidebar-cta[b-3mwj24kf0b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin-bottom: 1rem;
    transition: transform var(--duration-short) var(--ease-out-quart);
}

.career-detail__sidebar-cta:hover[b-3mwj24kf0b] {
    color: #fff;
    transform: translateY(-2px);
}

.career-detail__sidebar-note[b-3mwj24kf0b] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
}

/* ── Not-found state ─────────────────────────────────────── */
.career-detail__notfound[b-3mwj24kf0b] {
    position: relative;
    background: var(--dark-band-bg);
    color: var(--dark-band-fg);
    padding: calc(var(--navbar-height) + clamp(4rem, 8vw, 6rem)) 0 clamp(4rem, 8vw, 6rem);
    text-align: center;
}

.career-detail__notfound-title[b-3mwj24kf0b] {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0.75rem 0 1.5rem;
}

.career-detail__notfound-lead[b-3mwj24kf0b] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 50ch;
    margin: 0 auto 2rem;
}

.career-detail__notfound-cta[b-3mwj24kf0b] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.career-detail__loading[b-3mwj24kf0b] {
    background: var(--dark-band-bg);
    color: rgba(255, 255, 255, 0.6);
    padding: calc(var(--navbar-height) + 4rem) 0 4rem;
    text-align: center;
}
/* /Pages/Careers.razor.rz.scp.css */
/* =============================================
   /careers — The Bench
   ============================================= */

/* ── 2. Tenets section ──────────────────────────────────────── */
.careers-tenets[b-myua7ont5p] {
    position: relative;
    background: var(--surface-cool-bg);
    color: var(--ink-900);
}

.careers-ledger[b-myua7ont5p] {
    background: var(--surface-alt-bg);
    color: var(--ink-900);
}

.careers-tenets__list[b-myua7ont5p] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.careers-tenets__list li[b-myua7ont5p] {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 1.5rem;
    align-items: start;
}

.careers-tenets__num[b-myua7ont5p] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    color: rgba(31, 111, 178, 0.18);
    letter-spacing: -0.02em;
}

.careers-tenets__title[b-myua7ont5p] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--ink-900);
    margin: 0 0 0.5rem;
}

.careers-tenets__text[b-myua7ont5p] {
    color: var(--ink-700);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 56ch;
}

/* Expectations aside — sits next to the tenets list */
.careers-expect[b-myua7ont5p] {
    padding: 1.75rem 1.5rem;
    background: linear-gradient(135deg,
        rgba(31, 111, 178, 0.07) 0%,
        rgba(63, 177, 115, 0.07) 100%);
    border-left: 4px solid var(--brand-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.careers-expect__title[b-myua7ont5p] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
    margin: 0 0 1.25rem;
}

.careers-expect__list[b-myua7ont5p] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.careers-expect__list li[b-myua7ont5p] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--ink-700);
    font-size: 0.95rem;
    line-height: 1.5;
}

.careers-expect__list i[b-myua7ont5p] {
    color: var(--brand-accent);
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: 0.18rem;
}

/* ── 3. Open roles (dark band, data-driven) ──────────────────── */
.careers-roles[b-myua7ont5p] {
    position: relative;
    background: var(--dark-band-bg);
    color: var(--dark-band-fg);
    padding: clamp(5rem, 9vw, 7rem) 0;
    overflow: hidden;
    isolation: isolate;
    scroll-margin-top: var(--navbar-height);
}

.careers-roles__glow[b-myua7ont5p] {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
}

.careers-roles__glow--a[b-myua7ont5p] {
    width: 460px;
    height: 460px;
    top: -120px;
    left: -120px;
    background: radial-gradient(circle, var(--brand-primary) 0%, transparent 70%);
    opacity: 0.45;
}

.careers-roles__glow--b[b-myua7ont5p] {
    width: 460px;
    height: 460px;
    bottom: -120px;
    right: -120px;
    background: radial-gradient(circle, var(--brand-accent) 0%, transparent 70%);
    opacity: 0.40;
}

.careers-roles__lead[b-myua7ont5p] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.1rem;
    line-height: 1.55;
    max-width: 60ch;
}

.careers-roles__state[b-myua7ont5p] {
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    padding: 2.5rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
}

.careers-roles__state-link[b-myua7ont5p] {
    color: var(--brand-accent);
    text-decoration: none;
    font-weight: 500;
}

.careers-roles__state-link:hover[b-myua7ont5p] {
    text-decoration: underline;
}

/* Role card — clickable card on the dark band. */
.careers-role-card[b-myua7ont5p] {
    height: 100%;
    padding: 1.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition:
        transform var(--duration-short) var(--ease-out-quart),
        border-color var(--duration-short) var(--ease-out-quart),
        background var(--duration-short) var(--ease-out-quart);
}

.careers-role-card:hover[b-myua7ont5p] {
    transform: translateY(-4px);
    border-color: var(--brand-accent);
    background: rgba(255, 255, 255, 0.08);
}

.careers-role-card__meta[b-myua7ont5p] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.careers-role-card__type[b-myua7ont5p] {
    background: rgba(63, 177, 115, 0.18);
    color: var(--brand-accent);
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.7rem;
}

.careers-role-card__location[b-myua7ont5p] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.careers-role-card__location i[b-myua7ont5p] {
    color: var(--brand-accent);
}

.careers-role-card__title[b-myua7ont5p] {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.2;
    margin: 0;
}

.careers-role-card__summary[b-myua7ont5p] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    flex-grow: 1;
}

.careers-role-card__cta[b-myua7ont5p] {
    color: var(--brand-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap var(--duration-short) var(--ease-out-quart);
}

.careers-role-card__cta:hover[b-myua7ont5p] {
    color: #fff;
    gap: 0.7rem;
}

/* ── 4. Ledger (Year-one / Won't-ask) ───────────────────────── */
.careers-ledger[b-myua7ont5p] {
    position: relative;
}

.careers-ledger__col[b-myua7ont5p] {
    height: 100%;
    padding: 1.75rem;
    background: var(--surface-default);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--duration-short) var(--ease-out-quart),
        box-shadow var(--duration-short) var(--ease-out-quart);
}

.careers-ledger__col:hover[b-myua7ont5p] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.careers-ledger__col--positive[b-myua7ont5p] {
    border-top: 4px solid var(--brand-accent);
}

.careers-ledger__col--negative[b-myua7ont5p] {
    border-top: 4px solid var(--ink-500);
}

.careers-ledger__header[b-myua7ont5p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ink-200);
}

.careers-ledger__header i[b-myua7ont5p] {
    font-size: 1.4rem;
}

.careers-ledger__col--positive .careers-ledger__header i[b-myua7ont5p] {
    color: var(--brand-accent);
}

.careers-ledger__col--negative .careers-ledger__header i[b-myua7ont5p] {
    color: var(--ink-500);
}

.careers-ledger__header h3[b-myua7ont5p] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink-900);
    margin: 0;
}

.careers-ledger__list[b-myua7ont5p] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.careers-ledger__list li[b-myua7ont5p] {
    color: var(--ink-700);
    font-size: 0.95rem;
    line-height: 1.55;
    padding-left: 1rem;
    position: relative;
}

.careers-ledger__list li[b-myua7ont5p]::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--ink-300);
}

.careers-ledger__col--positive .careers-ledger__list li[b-myua7ont5p]::before {
    color: var(--brand-accent);
}

/* ── 5. Reach out band ──────────────────────────────────────── */
.careers-reach[b-myua7ont5p] {
    position: relative;
    background: var(--dark-band-bg);
    color: var(--dark-band-fg);
    padding: clamp(5rem, 9vw, 7rem) 0;
    overflow: hidden;
    isolation: isolate;
}

.careers-reach__glow[b-myua7ont5p] {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(31, 111, 178, 0.35) 0%,
        rgba(63, 177, 115, 0.18) 50%,
        transparent 75%);
    filter: blur(140px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.careers-reach__lead[b-myua7ont5p] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 60ch;
    margin: 1.5rem auto 2.5rem;
}

.careers-reach__cta[b-myua7ont5p] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* ── Culture cinema stage (homepage ecosystem pattern) ──────── */
.careers-culture[b-myua7ont5p] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.75rem, 7vw, 5.75rem) 0;
    color: var(--ink-900);
}

.careers-culture__atmosphere[b-myua7ont5p] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.careers-culture__orb[b-myua7ont5p] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
}

.careers-culture__orb--a[b-myua7ont5p] {
    width: min(520px, 55vw);
    height: min(520px, 55vw);
    top: -18%;
    right: 5%;
    background: rgba(31, 111, 178, 0.28);
}

.careers-culture__orb--b[b-myua7ont5p] {
    width: min(420px, 48vw);
    height: min(420px, 48vw);
    bottom: -22%;
    left: 8%;
    background: rgba(63, 177, 115, 0.16);
}

.careers-culture__grid[b-myua7ont5p] {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
}

.careers-culture__container[b-myua7ont5p] {
    position: relative;
    z-index: 1;
}

.careers-culture__stage[b-myua7ont5p] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: stretch;
    border-radius: clamp(16px, 2vw, 22px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%),
        linear-gradient(180deg, rgba(18, 30, 50, 0.96) 0%, rgba(12, 20, 36, 0.98) 100%);
    box-shadow:
        0 28px 70px -30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.careers-culture__copy[b-myua7ont5p] {
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.careers-culture__copy[b-myua7ont5p]::after {
    content: "";
    position: absolute;
    top: 8%;
    right: 0;
    bottom: 8%;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(8, 14, 26, 0.35));
    z-index: 2;
}

.careers-culture__copy .section-title[b-myua7ont5p] {
    color: #fff;
}

.careers-culture__list[b-myua7ont5p] {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 38rem;
}

.careers-culture__list li[b-myua7ont5p] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.02rem;
    line-height: 1.55;
    padding-left: 1.1rem;
    position: relative;
}

.careers-culture__list li[b-myua7ont5p]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--brand-accent);
    box-shadow: 0 0 10px rgba(63, 177, 115, 0.55);
}

.careers-culture__media[b-myua7ont5p] {
    position: relative;
    min-height: clamp(300px, 44vw, 480px);
    background: #060c16;
    isolation: isolate;
}

.careers-culture__media-glow[b-myua7ont5p] {
    position: absolute;
    inset: -10% -5% auto auto;
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 111, 178, 0.35) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.careers-culture__media .video-player[b-myua7ont5p] {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: inherit;
}

@media (max-width: 991px) {
    .careers-culture__stage[b-myua7ont5p] {
        grid-template-columns: 1fr;
    }

    .careers-culture__copy[b-myua7ont5p]::after {
        display: none;
    }

    .careers-culture__media[b-myua7ont5p] {
        min-height: clamp(240px, 56vw, 380px);
    }
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 767px) {
    .careers-tenets__list li[b-myua7ont5p] {
        grid-template-columns: 3rem 1fr;
        gap: 1rem;
    }

    .careers-tenets__num[b-myua7ont5p] {
        font-size: 2rem;
    }

    .careers-bench__card[b-myua7ont5p] {
        padding: 1.5rem;
    }
}
/* /Pages/Contact.razor.rz.scp.css */
/* =============================================
   /contact — Stacked Slab
   One continuous dark canvas top-to-bottom. The form sits on it
   as a glass-frosted card, with a colophon-style info rail to the
   right. No left/right split, no traditional hero — the section
   IS the contact experience.
   ============================================= */
/* `!important` here is intentional: site.css line 244 has a
   `main > *:first-child:not(.page-header)` rule that sets
   padding-top to JUST `var(--navbar-height)` (86px) on every page's
   first section. Its specificity (0,0,2,1) outranks a plain class
   selector (0,0,2,0 even with Blazor's scoped-CSS attribute), which
   is why every previous attempt to add top breathing room to /contact
   was silently overridden. `!important` is the unambiguous override. */
.contact-slab[b-coedcmwusl] {
    position: relative;
    min-height: 100vh;
    /* Tighter top so the form sits higher under the nav (was +3–7rem). */
    padding-top: calc(var(--navbar-height) + clamp(1.25rem, 3.5vw, 2.75rem)) !important;
    padding-bottom: clamp(7rem, 12vw, 11rem);
    background: var(--dark-band-bg);
    color: var(--dark-band-fg);
    overflow: hidden;
    isolation: isolate;
}

/* Animated network canvas — drawn full-section behind everything.
   z-index: 0 puts it above the slab's gradient base but below the
   glows + content. Initialized via initNetworkHero in Contact.razor. */
.contact-slab__network[b-coedcmwusl] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Corner brand glows — sit above the network so the colored haze
   reads on top of the line art. */
.contact-slab__glow[b-coedcmwusl] {
    position: absolute;
    border-radius: 50%;
    filter: blur(160px);
    pointer-events: none;
    z-index: 0;
}

.contact-slab__glow--a[b-coedcmwusl] {
    width: 560px;
    height: 560px;
    top: -180px;
    left: -120px;
    background: radial-gradient(circle, var(--brand-primary) 0%, transparent 70%);
    opacity: 0.55;
}

.contact-slab__glow--b[b-coedcmwusl] {
    width: 420px;
    height: 420px;
    bottom: -120px;
    right: -100px;
    background: radial-gradient(circle, var(--brand-accent) 0%, transparent 70%);
    opacity: 0.45;
}

/* ── Layout grid ──────────────────────────────────────────────────
   Two columns: form (flex) + colophon rail (240px). Header sits in
   the form column above the form card; the rail spans full height
   beside both. */
.contact-slab__inner[b-coedcmwusl] {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: clamp(1rem, 2vw, 1.75rem);
}

/* ── Header (col 1, row 1) ────────────────────────────────────── */
.contact-slab__header[b-coedcmwusl] {
    grid-column: 1;
    grid-row: 1;
    max-width: 720px;
}

.contact-slab__title[b-coedcmwusl] {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 0.85rem;
}

.contact-slab__lead[b-coedcmwusl] {
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.55;
    margin: 0;
    max-width: 56ch;
}

/* ── Form card (col 1, row 2) ─────────────────────────────────── */
.contact-slab__form-card[b-coedcmwusl] {
    grid-column: 1;
    grid-row: 2;
    /* Lifted glass — light enough to read against the dark network bg */
    background:
        linear-gradient(165deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.06) 45%,
            rgba(31, 111, 178, 0.08) 100%),
        rgba(28, 46, 72, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.40),
        0 10px 20px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
    position: relative;
    overflow: hidden;
}

/* Brand-gradient hairline along the top of the card — same accent
   that ties the search dialog, footer top-stripe, and CTA section
   into one family. */
.contact-slab__form-card[b-coedcmwusl]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

/* Form labels — uppercase tracked, in a translucent white so they
   read as "on-dark" labels rather than the default body color. */
.contact-slab__form-card[b-coedcmwusl]  .form-label,
.contact-slab__form-card .form-label[b-coedcmwusl] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 0.35rem;
}

/* Inputs — slightly lifted wells inside the form card */
.contact-slab__form-card[b-coedcmwusl]  .form-control,
.contact-slab__form-card .form-control[b-coedcmwusl] {
    background: rgba(12, 24, 44, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #F3F6FB;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: background 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.contact-slab__form-card[b-coedcmwusl]  .form-control:focus,
.contact-slab__form-card .form-control:focus[b-coedcmwusl] {
    background: rgba(16, 32, 56, 0.75);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(31, 111, 178, 0.35);
    outline: none;
    color: #F3F6FB;
}

.contact-slab__form-card[b-coedcmwusl]  .form-control::placeholder,
.contact-slab__form-card .form-control[b-coedcmwusl]::placeholder {
    color: rgba(199, 207, 218, 0.65);
}

/* Turnstile widget inset on a darker patch so its iframe doesn't
   clash with the glass surface. */
.contact-slab__turnstile[b-coedcmwusl] {
    display: inline-block;
}

/* ── Info rail (col 2, spans both rows) ───────────────────────── */
.contact-slab__rail[b-coedcmwusl] {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    padding-top: clamp(2rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Info-rail items are full glass-card boxes (not just a left border)
   so they read against the animated network background. Each box has
   a backdrop-blur surface, soft border, and brand-accent left rail
   that gets brighter on hover. */
.contact-slab__rail-item[b-coedcmwusl] {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.06) 100%),
        rgba(30, 48, 74, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 3px solid var(--brand-accent, #3FB173);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    -webkit-backdrop-filter: blur(14px) saturate(160%);
            backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition:
        background var(--duration-short) var(--ease-out-quart),
        border-color var(--duration-short) var(--ease-out-quart),
        transform var(--duration-short) var(--ease-out-quart),
        box-shadow var(--duration-short) var(--ease-out-quart);
}

.contact-slab__rail-item:hover[b-coedcmwusl] {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.08) 100%),
        rgba(36, 56, 86, 0.82);
    border-left-color: var(--brand-accent);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateX(2px);
}

.contact-slab__rail-label[b-coedcmwusl] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.58);
    margin-bottom: 0.4rem;
}

.contact-slab__rail-value[b-coedcmwusl] {
    color: #fff;
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

.contact-slab__rail[b-coedcmwusl]  .protected-phone,
.contact-slab__rail .protected-phone[b-coedcmwusl] {
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .contact-slab[b-coedcmwusl] {
        padding-bottom: clamp(4rem, 8vw, 7rem);
    }

    .contact-slab__inner[b-coedcmwusl] {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }

    .contact-slab__header[b-coedcmwusl],
    .contact-slab__form-card[b-coedcmwusl],
    .contact-slab__rail[b-coedcmwusl] {
        grid-column: 1;
        grid-row: auto;
    }

    .contact-slab__rail[b-coedcmwusl] {
        padding-top: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 2rem;
    }
}

@media (max-width: 575px) {
    .contact-slab__rail[b-coedcmwusl] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Resources/Index.razor.rz.scp.css */
/* =============================================
   /resources — listing page styles
   ============================================= */

/* Snap target for the auto-scroll-on-revisit + pagination scroll. Leaves
   breathing room above the search bar so the section doesn't butt
   directly against the nav. */
#resources-list[b-jb3j4wyul3] {
    scroll-margin-top: 80px;
}

.resources-section[b-jb3j4wyul3] {
    background: var(--surface-cool-bg);
    color: var(--ink-900);
}


/* In-page search + sort toolbar — sits above the filter pills.
   The search input filters the LIST below as you type (title + excerpt).
   It does NOT navigate; the nav-bar search handles cross-site navigation. */
.resources-tools[b-jb3j4wyul3] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.resources-tools__search[b-jb3j4wyul3] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.resources-tools__search-icon[b-jb3j4wyul3] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-500);
    pointer-events: none;
    font-size: 0.95rem;
}

.resources-tools__input[b-jb3j4wyul3] {
    width: 100%;
    padding: 0.7rem 2.5rem 0.7rem 2.6rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-default);
    font-size: 0.95rem;
    color: var(--ink-900);
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.resources-tools__input:focus[b-jb3j4wyul3] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(31, 111, 178, 0.12);
}

.resources-tools__input[b-jb3j4wyul3]::placeholder {
    color: var(--ink-500);
}

/* Reset native search-input clear button (we use our own) */
.resources-tools__input[b-jb3j4wyul3]::-webkit-search-cancel-button {
    display: none;
}

.resources-tools__clear[b-jb3j4wyul3] {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: var(--ink-200);
    color: var(--ink-700);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    transition: background 200ms ease-out;
}

.resources-tools__clear:hover[b-jb3j4wyul3] {
    background: var(--ink-300);
}

.resources-tools__sort[b-jb3j4wyul3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.resources-tools__sort-label[b-jb3j4wyul3] {
    color: var(--ink-500);
    font-size: 0.88rem;
    margin: 0;
}

.resources-tools__sort-select[b-jb3j4wyul3] {
    padding: 0.55rem 2rem 0.55rem 0.85rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-default);
    color: var(--ink-900);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%235b6678' d='M6 8.5L1.5 4h9z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 10px;
}

.resources-tools__sort-select:focus[b-jb3j4wyul3] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(31, 111, 178, 0.12);
}

@media (max-width: 575px) {
    .resources-tools[b-jb3j4wyul3] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .resources-tools__sort[b-jb3j4wyul3] {
        justify-content: flex-end;
    }
}


/* Filter pill bar — replaces the old sidebar */
.resources-filters[b-jb3j4wyul3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ink-200);
}

.resources-filters__count[b-jb3j4wyul3] {
    margin-left: auto;
    color: var(--ink-500);
    font-size: 0.88rem;
    white-space: nowrap;
}

.resources-filter[b-jb3j4wyul3] {
    background: transparent;
    border: 1px solid var(--ink-200);
    color: var(--ink-700);
    padding: 0.55rem 1.3rem;
    border-radius: var(--radius-pill, 999px);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 200ms ease-out,
                border-color 200ms ease-out,
                color 200ms ease-out,
                transform 200ms ease-out;
}

.resources-filter:hover[b-jb3j4wyul3] {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.resources-filter.active[b-jb3j4wyul3] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

.resources-filter.active:hover[b-jb3j4wyul3] {
    background: var(--brand-primary-strong);
    border-color: var(--brand-primary-strong);
    color: #ffffff;
}


/* Type badge — small accent label */
.resource-type-badge[b-jb3j4wyul3] {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: rgba(63, 177, 115, 0.12);
    color: var(--brand-accent-strong);
    border-radius: var(--radius-sm, 0.375rem);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    width: fit-content;
}


/* Featured card — page 1 hero piece */
.resource-featured[b-jb3j4wyul3] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 1rem);
    overflow: hidden;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
        var(--surface-elevated);
    transition: transform 320ms ease-out, box-shadow 320ms ease-out, border-color 320ms ease-out;
}

.resource-featured:hover[b-jb3j4wyul3] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover, var(--shadow-lg));
    border-color: rgba(31, 111, 178, 0.45);
}

.resource-featured__inner[b-jb3j4wyul3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    text-decoration: none;
    color: inherit;
}

.resource-featured__media[b-jb3j4wyul3] {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-muted);
}

.resource-featured__media[b-jb3j4wyul3]  .resource-featured__img,
.resource-featured__media .resource-featured__img[b-jb3j4wyul3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease-out;
}

.resource-featured:hover .resource-featured__img[b-jb3j4wyul3] {
    transform: scale(1.03);
}

.resource-featured__body[b-jb3j4wyul3] {
    padding: 2.5rem 2.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.resource-featured__title[b-jb3j4wyul3] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    line-height: 1.2;
    color: var(--ink-900);
    margin-bottom: 0.75rem;
}

.resource-featured__meta[b-jb3j4wyul3] {
    color: var(--ink-500);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.resource-featured__meta-sep[b-jb3j4wyul3] {
    margin: 0 0.5rem;
    color: var(--ink-300);
}

.resource-featured__author[b-jb3j4wyul3] {
    color: var(--brand-primary);
    font-weight: 500;
}

.resource-featured__excerpt[b-jb3j4wyul3] {
    color: var(--ink-700);
    font-size: 1.05rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
}

.resource-featured__cta[b-jb3j4wyul3] {
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 1rem;
    transition: transform 200ms ease-out;
}

.resource-featured:hover .resource-featured__cta[b-jb3j4wyul3] {
    transform: translateX(3px);
}

/* Featured stacks vertically on tablets and below */
@media (max-width: 991px) {
    .resource-featured__inner[b-jb3j4wyul3] {
        grid-template-columns: 1fr;
    }

    .resource-featured__media[b-jb3j4wyul3] {
        aspect-ratio: 16 / 9;
    }

    .resource-featured__body[b-jb3j4wyul3] {
        padding: 2rem 1.5rem;
    }
}


/* Pagination */
.resources-pagination[b-jb3j4wyul3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.resources-pagination__status[b-jb3j4wyul3] {
    color: var(--ink-500);
    font-size: 0.95rem;
}

@media (max-width: 575px) {
    .resources-pagination[b-jb3j4wyul3] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}
/* /Pages/Services.razor.rz.scp.css */
/* /services — page-specific layout.
   Global utilities (.reveal, .delay-N, .parallax-bg, generic .card
   hover, .video-wrapper, .pattern--*) now live in site.css. This file
   only contains layout/decoration unique to the Services page. */

/* Anchor offset so section tops don't butt against the nav on scroll */
#approach[b-dddfbk0bu8],
#framework[b-dddfbk0bu8],
#profit-network[b-dddfbk0bu8],
#supply-chain-design[b-dddfbk0bu8],
#supply-chain-optimization[b-dddfbk0bu8],
#supply-chain-technology-integration[b-dddfbk0bu8] {
    scroll-margin-top: 80px;
}


/* 1. Approach pillars */
.services-approach[b-dddfbk0bu8] {
    background: var(--surface-cool-bg, var(--surface-default));
    color: var(--ink-900);
}

.services-approach__pillar[b-dddfbk0bu8] {
    height: 100%;
    padding: 1.75rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md, 0.75rem);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, transparent 45%),
        var(--surface-elevated, var(--surface-muted));
    transition: transform 320ms ease-out, box-shadow 320ms ease-out, border-color 320ms ease-out, background 320ms ease-out;
}

.services-approach__pillar:hover[b-dddfbk0bu8] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover, var(--shadow-md));
    border-color: rgba(31, 111, 178, 0.45);
    background:
        linear-gradient(165deg, rgba(31, 111, 178, 0.12) 0%, transparent 50%),
        #1E3350;
}

.services-approach__icon[b-dddfbk0bu8] {
    font-size: 2rem;
    color: var(--brand-primary);
    margin-bottom: 0.75rem;
    line-height: 1;
}


/* 2. Service bands — full-bleed photo with darkened gradient overlay */
.services-band[b-dddfbk0bu8] {
    padding: clamp(4rem, 7vw, 6rem) 0;
}

.services-band--photo[b-dddfbk0bu8] {
    position: relative;
    color: #fff;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 7rem) 0;
    min-height: 620px;
    display: flex;
    align-items: center;
}

/* Image sits behind everything; using <img> instead of background-image
   so we get native loading="lazy" + decoding="async" hints. */
.services-band__bg[b-dddfbk0bu8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.services-band__overlay[b-dddfbk0bu8] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Content on the left — gradient darkens from the left */
.services-band__overlay--left[b-dddfbk0bu8] {
    background: linear-gradient(90deg,
        rgba(5, 9, 18, 0.94) 0%,
        rgba(5, 9, 18, 0.88) 35%,
        rgba(5, 9, 18, 0.55) 65%,
        rgba(5, 9, 18, 0.10) 100%);
}

/* Content on the right — gradient mirrored */
.services-band__overlay--right[b-dddfbk0bu8] {
    background: linear-gradient(270deg,
        rgba(5, 9, 18, 0.94) 0%,
        rgba(5, 9, 18, 0.88) 35%,
        rgba(5, 9, 18, 0.55) 65%,
        rgba(5, 9, 18, 0.10) 100%);
}

.services-band__content[b-dddfbk0bu8] {
    position: relative;
    z-index: 1;
}

.services-band__title[b-dddfbk0bu8] {
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.services-band__lead[b-dddfbk0bu8] {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.2rem;
}

.services-band__body[b-dddfbk0bu8] {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
}

.services-band__subhead[b-dddfbk0bu8] {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--brand-accent);
}

.services-band__list[b-dddfbk0bu8] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services-band__list li[b-dddfbk0bu8] {
    padding: 0.45rem 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
}

.services-band__list i[b-dddfbk0bu8] {
    color: var(--brand-accent);
    flex-shrink: 0;
    margin-top: 0.35rem;
    font-size: 0.95rem;
}

/* On mobile the gradient covers the whole band vertically so text stays
   readable across the full image width */
@media (max-width: 991px) {
    .services-band__overlay--left[b-dddfbk0bu8],
    .services-band__overlay--right[b-dddfbk0bu8] {
        background: linear-gradient(180deg,
            rgba(5, 9, 18, 0.35) 0%,
            rgba(5, 9, 18, 0.85) 45%,
            rgba(5, 9, 18, 0.95) 100%);
    }

    .services-band--photo[b-dddfbk0bu8] {
        min-height: 540px;
        padding: clamp(4rem, 12vw, 6rem) 0;
    }
}


/* 3. Framework — dark how-we-deliver section */
.services-framework[b-dddfbk0bu8] {
    position: relative;
    background: var(--dark-band-bg);
    color: var(--ink-0);
    padding: clamp(5rem, 9vw, 7rem) 0;
    overflow: hidden;
}

.services-framework__glow[b-dddfbk0bu8] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    pointer-events: none;
}

.services-framework__glow--a[b-dddfbk0bu8] {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -120px;
    background: radial-gradient(circle, var(--brand-primary) 0%, transparent 70%);
}

.services-framework__glow--b[b-dddfbk0bu8] {
    width: 420px;
    height: 420px;
    bottom: -120px;
    right: -120px;
    background: radial-gradient(circle, var(--brand-accent) 0%, transparent 70%);
}

.services-framework__heading[b-dddfbk0bu8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem 1rem;
}

.services-framework__tagline[b-dddfbk0bu8] {
    margin: 0;
    font-family: Poppins, system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
}

.services-framework__lead[b-dddfbk0bu8] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 64ch;
}

.services-framework__lead em[b-dddfbk0bu8] {
    color: var(--brand-accent);
    font-style: normal;
    font-weight: 600;
}

.services-framework__steps[b-dddfbk0bu8] {
    list-style: none;
    padding: 0;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
}

.services-framework__step[b-dddfbk0bu8] {
    position: relative;
    padding: 1.75rem 1.5rem;
    background: rgba(30, 30, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md, 0.75rem);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 320ms ease-out, border-color 320ms ease-out;
}

.services-framework__step:hover[b-dddfbk0bu8] {
    transform: translateY(-4px);
    border-color: var(--brand-accent);
}

.services-framework__num[b-dddfbk0bu8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
}

.services-framework__step-title[b-dddfbk0bu8] {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.services-framework__step-text[b-dddfbk0bu8] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 991px) {
    .services-framework__steps[b-dddfbk0bu8] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .services-framework__steps[b-dddfbk0bu8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* 4. Profit Network — featured capability section */
.services-pn[b-dddfbk0bu8] {
    padding: clamp(5rem, 8vw, 7rem) 0;
    background: var(--surface-alt-bg);
    position: relative;
}

.services-pn__stats[b-dddfbk0bu8] {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%),
        var(--surface-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 1rem);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.services-pn__stats[b-dddfbk0bu8]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
}

.services-pn__stats-heading[b-dddfbk0bu8] {
    color: var(--brand-primary);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.services-pn__stat[b-dddfbk0bu8] {
    padding: 1rem 0;
    border-bottom: 1px solid var(--ink-200);
}

.services-pn__stat--last[b-dddfbk0bu8],
.services-pn__stat:last-child[b-dddfbk0bu8] {
    border-bottom: 0;
    padding-bottom: 0;
}

.services-pn__stat:first-of-type[b-dddfbk0bu8] {
    padding-top: 0;
}

.services-pn__stat-value[b-dddfbk0bu8] {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--brand-primary);
    margin-bottom: 0.3rem;
}

.services-pn__stat-value span[b-dddfbk0bu8] {
    color: var(--brand-accent);
    font-size: 1.5rem;
    margin-left: 0.15rem;
}

.services-pn__stat-label[b-dddfbk0bu8] {
    color: var(--ink-500);
    font-size: 0.95rem;
    line-height: 1.4;
}

.services-pn__capabilities[b-dddfbk0bu8] {
    margin-top: 1rem;
}

.services-pn__cap[b-dddfbk0bu8] {
    height: 100%;
    padding: 1.5rem;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%),
        var(--surface-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md, 0.75rem);
    transition: transform 320ms ease-out, box-shadow 320ms ease-out, border-color 320ms ease-out;
}

.services-pn__cap:hover[b-dddfbk0bu8] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover, var(--shadow-md));
    border-color: rgba(63, 177, 115, 0.45);
}

.services-pn__cap-icon[b-dddfbk0bu8] {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--brand-accent);
    margin-bottom: 0.75rem;
    line-height: 1;
}

.services-pn__callout[b-dddfbk0bu8] {
    background: linear-gradient(135deg, rgba(31, 111, 178, 0.05) 0%, rgba(63, 177, 115, 0.05) 100%);
    border: 1px solid var(--ink-200);
    border-left: 4px solid var(--brand-accent);
    border-radius: var(--radius-md, 0.75rem);
    padding: 1.75rem;
}


/* 5. Proof — two zones only: quote block + one byline row. */
.services-proof[b-dddfbk0bu8] {
    padding: clamp(4rem, 7vw, 6rem) 0 clamp(5rem, 9vw, 7.5rem);
    background: var(--surface-deep-bg, var(--surface-default));
    color: var(--ink-900);
}

/* Own opacity fully — never use global .reveal here (GSAP + Blazor class
   re-render fights leave the quote stuck at opacity 0). */
.services-proof__quote[b-dddfbk0bu8] {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.services-proof__quote.is-visible[b-dddfbk0bu8] {
    opacity: 1;
    transform: translateY(0);
}

.services-proof__quote.is-fading[b-dddfbk0bu8] {
    opacity: 0;
    transform: translateY(0.35rem);
}

@media (prefers-reduced-motion: reduce) {
    .services-proof__quote[b-dddfbk0bu8] {
        transition: none;
    }

    .services-proof__quote.is-fading[b-dddfbk0bu8] {
        transform: none;
    }
}

.services-proof__body[b-dddfbk0bu8] {
    margin: 0 auto 1.75rem;
    max-width: 52rem;
}

.services-proof__mark[b-dddfbk0bu8] {
    display: block;
    font-size: 3rem;
    color: var(--brand-accent);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.services-proof__text[b-dddfbk0bu8] {
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    line-height: 1.5;
    font-weight: 500;
    color: var(--ink-900);
    font-style: italic;
    margin: 0;
}

/* Single byline row: [logo plate] [photo] name / title */
.services-proof__byline[b-dddfbk0bu8] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.85rem 1rem;
    width: 100%;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* White rectangle plate — logos are white-bg assets.
   Taller than the early pill so it balances the 88px photo; stays landscape. */
.services-proof__logo[b-dddfbk0bu8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    min-width: 8.5rem;
    max-width: 11rem;
    min-height: 4.25rem;
    padding: 0.9rem 1.35rem;
    border-radius: 14px;
    background: linear-gradient(165deg, #ffffff 0%, #f4f8fc 50%, #e8f0f8 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 8px 22px rgba(0, 0, 0, 0.26) !important;
}

.services-proof__logo img[b-dddfbk0bu8] {
    display: block;
    max-width: 8.5rem;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none !important;
    opacity: 1 !important;
}

.services-proof__org[b-dddfbk0bu8] {
    flex-shrink: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-accent, #3fb173);
    letter-spacing: 0.02em;
}

.services-proof__photo[b-dddfbk0bu8] {
    display: block;
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 3px solid rgba(63, 177, 115, 0.55);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.services-proof__meta[b-dddfbk0bu8] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.12rem;
    min-width: 0;
    max-width: 18rem;
}

.services-proof__name[b-dddfbk0bu8] {
    font-family: Poppins, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffffff;
    line-height: 1.3;
}

.services-proof__role[b-dddfbk0bu8] {
    font-size: 0.88rem;
    line-height: 1.4;
    color: rgba(199, 207, 218, 0.88);
}

@media (max-width: 575px) {
    .services-proof__byline[b-dddfbk0bu8] {
        flex-direction: column;
        text-align: center;
        gap: 0.85rem;
    }

    .services-proof__meta[b-dddfbk0bu8] {
        align-items: center;
        max-width: 20rem;
    }
}

/* SNAP step cards under circular diagram */
.services-snap-steps[b-dddfbk0bu8] {
    margin-top: 0.5rem;
}

.services-snap-step[b-dddfbk0bu8] {
    height: 100%;
    padding: 1.5rem 1.35rem;
    background: rgba(30, 30, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md, 0.75rem);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.services-snap-step__num[b-dddfbk0bu8] {
    display: inline-block;
    color: var(--brand-accent);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.services-snap-step__title[b-dddfbk0bu8] {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.services-snap-step__text[b-dddfbk0bu8] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

/* Featured video — homepage cinema stage (copy left + player right) */
.services-video[b-dddfbk0bu8] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.75rem, 7vw, 5.75rem) 0;
    color: var(--ink-900);
}

.services-video__atmosphere[b-dddfbk0bu8] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.services-video__orb[b-dddfbk0bu8] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
}

.services-video__orb--a[b-dddfbk0bu8] {
    width: min(520px, 55vw);
    height: min(520px, 55vw);
    top: -18%;
    right: 5%;
    background: rgba(31, 111, 178, 0.28);
}

.services-video__orb--b[b-dddfbk0bu8] {
    width: min(420px, 48vw);
    height: min(420px, 48vw);
    bottom: -22%;
    left: 8%;
    background: rgba(63, 177, 115, 0.16);
}

.services-video__grid[b-dddfbk0bu8] {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
}

.services-video__container[b-dddfbk0bu8] {
    position: relative;
    z-index: 1;
}

.services-video__stage[b-dddfbk0bu8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: stretch;
    border-radius: clamp(16px, 2vw, 22px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%),
        linear-gradient(180deg, rgba(18, 30, 50, 0.96) 0%, rgba(12, 20, 36, 0.98) 100%);
    box-shadow:
        0 28px 70px -30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.services-video__copy[b-dddfbk0bu8] {
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.services-video__copy[b-dddfbk0bu8]::after {
    content: "";
    position: absolute;
    top: 8%;
    right: 0;
    bottom: 8%;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(8, 14, 26, 0.35));
    z-index: 2;
}

.services-video__copy .section-title[b-dddfbk0bu8] {
    color: #fff;
}

.services-video__lead[b-dddfbk0bu8] {
    margin: 1.15rem 0 0;
    font-size: 1.08rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    max-width: 38rem;
}

.services-video__body[b-dddfbk0bu8] {
    margin: 0.9rem 0 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    max-width: 38rem;
}

.services-video__media[b-dddfbk0bu8] {
    position: relative;
    min-height: clamp(300px, 44vw, 480px);
    background: #060c16;
    isolation: isolate;
}

.services-video__media-glow[b-dddfbk0bu8] {
    position: absolute;
    inset: -15% -8% -15% -25%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 60% at 70% 40%, rgba(31, 111, 178, 0.30) 0%, transparent 70%),
        radial-gradient(ellipse 40% 45% at 25% 85%, rgba(63, 177, 115, 0.14) 0%, transparent 65%);
}

.services-video__media[b-dddfbk0bu8]  .video-player,
.services-video__media .video-player[b-dddfbk0bu8] {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: inherit;
}

.services-video__media[b-dddfbk0bu8]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(64px, 11%);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(12, 20, 36, 0.45) 0%, transparent 100%);
}

@media (max-width: 991px) {
    .services-video__stage[b-dddfbk0bu8] {
        grid-template-columns: 1fr;
    }

    .services-video__copy[b-dddfbk0bu8]::after {
        display: none;
    }

    .services-video__media[b-dddfbk0bu8] {
        min-height: clamp(240px, 56vw, 380px);
    }

    .services-video__media[b-dddfbk0bu8]::before {
        display: none;
    }
}
/* /Pages/Technology.razor.rz.scp.css */
/* Technology page — bespoke styling for the Profit Network story.
   Namespaced tech-* so it doesn't collide with the (now-removed) services-pn
   or the about-partners styles that still live on their own pages. */

/* ── 1. Technology intro — narrative + product panel (not twin cards) ─
   Pulls slightly under the hero fade so the handoff isn’t a hard black cut. */
.tech-intro[b-lfqf8va358] {
    background: var(--surface-cool-bg);
    color: var(--ink-900);
    position: relative;
    z-index: 1;
    margin-top: -2.5rem;
    padding-top: calc(var(--section-default, 5rem) + 1.5rem);
}

.tech-intro__split[b-lfqf8va358] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem 3.5rem;
    align-items: center;
}

@media (min-width: 992px) {
    .tech-intro__split[b-lfqf8va358] {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 3rem 4rem;
    }
}

/* Open narrative — sits on the section, no plate, no green edge */
.tech-intro__narrative[b-lfqf8va358] {
    max-width: 36rem;
}

.tech-intro__kicker[b-lfqf8va358] {
    margin: 0 0 0.65rem;
    font: 600 0.78rem/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(110, 176, 232, 0.9);
}

.tech-intro__title[b-lfqf8va358] {
    font: 700 clamp(1.45rem, 2.4vw, 1.85rem)/1.25 Inter, system-ui, sans-serif;
    color: var(--ink-900);
    margin: 0 0 1rem;
}

.tech-intro__text[b-lfqf8va358] {
    color: rgba(199, 207, 218, 0.88);
    line-height: 1.65;
    margin: 0 0 1.35rem;
    font-size: 1.05rem;
}

.tech-intro__bullets[b-lfqf8va358] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tech-intro__bullets li[b-lfqf8va358] {
    position: relative;
    padding-left: 1.35rem;
    color: rgba(199, 207, 218, 0.82);
    line-height: 1.45;
    font-size: 0.98rem;
}

.tech-intro__bullets li[b-lfqf8va358]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(31, 111, 178, 0.2);
}

/* Product panel — the only boxed surface in this section */
.tech-intro__panel[b-lfqf8va358] {
    position: relative;
    isolation: isolate;
    padding: 2rem 2rem 2.15rem;
    border-radius: 22px;
    background:
        linear-gradient(155deg, rgba(63, 177, 115, 0.14) 0%, transparent 45%),
        linear-gradient(180deg, #1c334f 0%, #14283e 100%);
    border: 1px solid rgba(63, 177, 115, 0.28);
    box-shadow:
        0 18px 48px rgba(5, 12, 26, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* Cursor grid spotlight on the Profit Network panel */
.tech-intro__panel-pattern[b-lfqf8va358] {
    z-index: 0;
    --pattern-size: 22px;
    --pattern-color: rgba(110, 176, 232, 0.4);
    --pattern-opacity: 0.95;
    -webkit-mask-image: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.7) 40%,
        transparent 72%
    );
            mask-image: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.7) 40%,
        transparent 72%
    );
}

.tech-intro__panel-body[b-lfqf8va358] {
    position: relative;
    z-index: 1;
}

.tech-intro__panel-rail[b-lfqf8va358] {
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary));
    z-index: 2;
    pointer-events: none;
}

.tech-intro__panel-eyebrow[b-lfqf8va358] {
    margin: 0.35rem 0 0.5rem;
    font: 600 0.75rem/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(126, 226, 158, 0.9);
}

.tech-intro__panel-title[b-lfqf8va358] {
    margin: 0 0 0.85rem;
    font: 800 clamp(1.6rem, 2.6vw, 2rem)/1.15 Inter, system-ui, sans-serif;
    color: #fff;
}

.tech-intro__panel-text[b-lfqf8va358] {
    margin: 0 0 1.5rem;
    color: rgba(199, 207, 218, 0.88);
    line-height: 1.6;
    font-size: 1.02rem;
}

.tech-intro__panel-cta[b-lfqf8va358] {
    font-weight: 600;
}

.tech-intro__panel:hover[b-lfqf8va358] {
    border-color: rgba(63, 177, 115, 0.5);
    box-shadow:
        0 22px 52px rgba(5, 12, 26, 0.42),
        0 0 0 1px rgba(63, 177, 115, 0.12);
}

/* ── 2. What it is — photo-backed band ───────────────────────── */
.tech-pn[b-lfqf8va358] {
    position: relative;
    overflow: hidden;
    padding: 6.5rem 0;
    background: var(--dark-band-bg, #0d2235);
    color: #e8eef4;
}

.tech-pn__bg[b-lfqf8va358] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transform: scale(1.04);
    filter: saturate(0.85) brightness(0.55);
}

.tech-pn__veil[b-lfqf8va358] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(105deg,
            rgba(5, 12, 26, 0.92) 0%,
            rgba(5, 12, 26, 0.78) 42%,
            rgba(5, 12, 26, 0.55) 72%,
            rgba(5, 12, 26, 0.72) 100%),
        linear-gradient(180deg,
            rgba(5, 12, 26, 0.35) 0%,
            transparent 20%,
            transparent 75%,
            rgba(5, 12, 26, 0.55) 100%);
}

.tech-pn .container[b-lfqf8va358] {
    z-index: 2;
}

.tech-pn__glow[b-lfqf8va358] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 1;
}

.tech-pn__glow--a[b-lfqf8va358] {
    width: 480px;
    height: 480px;
    top: -160px;
    left: -120px;
    background: rgba(31, 111, 178, 0.45);
}

.tech-pn__glow--b[b-lfqf8va358] {
    width: 420px;
    height: 420px;
    bottom: -160px;
    right: -100px;
    background: rgba(63, 177, 115, 0.35);
}

.tech-pn__lead[b-lfqf8va358] {
    color: #aebfce;
}

.tech-pn__body[b-lfqf8va358] {
    color: #cdd9e4;
}

.tech-pn__stats[b-lfqf8va358] {
    background: rgba(8, 18, 32, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tech-pn__stats-heading[b-lfqf8va358] {
    font: var(--type-heading-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8fa6ba;
    margin-bottom: 1.5rem;
}

.tech-pn__stat[b-lfqf8va358] {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tech-pn__stat--last[b-lfqf8va358] {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.tech-pn__stat-value[b-lfqf8va358] {
    font: var(--type-display-md);
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 22px rgba(110, 193, 255, 0.4);
}

.tech-pn__stat-value span[b-lfqf8va358] {
    color: #7ee29e;
}

.tech-pn__stat-label[b-lfqf8va358] {
    margin-top: 0.4rem;
    color: #aebfce;
}

/* ── 3. Capabilities — product tiles with GRID cursor spotlight
   (Services uses hexagons; we use pattern--grid so the hover is different).
   Top brand rail + index + icon chip. */
.tech-cap__card[b-lfqf8va358] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1.65rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
        linear-gradient(180deg, #1a2d4a 0%, #15263f 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        var(--shadow-sm);
    transition: transform 280ms ease-out, box-shadow 280ms ease-out,
                border-color 280ms ease-out, background 280ms ease-out;
}

/* Cursor grid layer — fades in under the pointer on hover */
.tech-cap__pattern[b-lfqf8va358] {
    z-index: 0;
    --pattern-size: 22px;
    --pattern-color: rgba(110, 176, 232, 0.42);
    --pattern-opacity: 0.95;
    /* Spotlight mask only — no bottom fade fighting the cursor reveal */
    -webkit-mask-image: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.7) 40%,
        transparent 72%
    );
            mask-image: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.7) 40%,
        transparent 72%
    );
}

.tech-cap__card > *:not(.tech-cap__pattern)[b-lfqf8va358] {
    position: relative;
    z-index: 1;
}

/* Brand rail along the top (primary → accent) — ::after so pattern can use ::before if needed */
.tech-cap__card[b-lfqf8va358]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 1.25rem;
    right: 1.25rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    opacity: 0.85;
    z-index: 2;
    pointer-events: none;
    transition: opacity 280ms ease, left 280ms ease, right 280ms ease;
}

/* Hover lift is driven from the column, not the card itself.
   translateY on the hovered element makes the bottom edge leave the
   pointer → hover off → drop → hover on → flicker (especially on click
   near the bottom). The col’s layout box stays put under the cursor. */
.tech-cap [class*="col-"]:hover > .tech-cap__card[b-lfqf8va358] {
    transform: translateY(-5px);
    border-color: rgba(110, 176, 232, 0.35);
    background:
        linear-gradient(160deg, rgba(31, 111, 178, 0.16) 0%, transparent 48%),
        linear-gradient(180deg, #1f3556 0%, #182b48 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 16px 40px rgba(5, 12, 26, 0.45),
        0 0 0 1px rgba(31, 111, 178, 0.12);
}

.tech-cap [class*="col-"]:hover > .tech-cap__card[b-lfqf8va358]::after {
    opacity: 1;
    left: 0.75rem;
    right: 0.75rem;
}

.tech-cap__card-top[b-lfqf8va358] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.15rem;
}

.tech-cap__index[b-lfqf8va358] {
    font: 600 0.8rem/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.08em;
    color: rgba(199, 207, 218, 0.45);
    transition: color 280ms ease;
}

.tech-cap [class*="col-"]:hover > .tech-cap__card .tech-cap__index[b-lfqf8va358] {
    color: rgba(110, 176, 232, 0.75);
}

.tech-cap__icon[b-lfqf8va358] {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.35rem;
    color: var(--brand-primary);
    background: rgba(31, 111, 178, 0.14);
    border: 1px solid rgba(110, 176, 232, 0.22);
    transition: color 280ms ease, background 280ms ease, border-color 280ms ease,
                transform 280ms ease;
}

.tech-cap [class*="col-"]:hover > .tech-cap__card .tech-cap__icon[b-lfqf8va358] {
    color: var(--brand-accent-strong, #3fb173);
    background: rgba(63, 177, 115, 0.14);
    border-color: rgba(63, 177, 115, 0.35);
    transform: scale(1.05);
}

.tech-cap__title[b-lfqf8va358] {
    font: 700 1.1rem/1.3 Inter, system-ui, sans-serif;
    color: var(--ink-900, #f3f6fb);
    margin: 0 0 0.55rem;
}

.tech-cap__text[b-lfqf8va358] {
    margin: 0;
    flex: 1;
    font: 400 0.95rem/1.55 Inter, system-ui, sans-serif;
    color: rgba(199, 207, 218, 0.82);
}

.tech-cap__callout[b-lfqf8va358] {
    margin-top: 3rem;
    padding: 2rem 2.25rem;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(31, 111, 178, 0.14), rgba(63, 177, 115, 0.12)),
        rgba(26, 43, 69, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    color: #e8eef4;
}

.tech-cap__callout h3[b-lfqf8va358] {
    color: #ffffff;
}

.tech-cap__callout p[b-lfqf8va358],
.tech-cap__callout .text-muted[b-lfqf8va358] {
    color: rgba(199, 207, 218, 0.9) !important;
}

/* ── 4. Technology partners ──────────────────────────────────── */
.tech-partners[b-lfqf8va358] {
    padding: 6rem 0;
    background: var(--surface-sheen-bg, var(--surface-muted));
    color: var(--ink-900);
}

.tech-partners__values[b-lfqf8va358] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tech-partners__value-row[b-lfqf8va358] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    color: var(--ink-700);
}

.tech-partners__value-row i[b-lfqf8va358] {
    color: var(--brand-accent-strong);
    font-size: 1.25rem;
    margin-top: 0.1rem;
    flex: 0 0 auto;
}

.tech-partners__grid[b-lfqf8va358] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

/* Capabilities band — same dark canvas + drifting blue/green orbs as
   the home "Why Profit Point / Built on results" stat-band. */
.tech-cap[b-lfqf8va358] {
    color: var(--ink-900);
    position: relative;
}

.tech-cap--dark[b-lfqf8va358] {
    background: var(--dark-band-bg);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
}

/* Keep host visible so the dark bg doesn't flash on reveal */
.tech-cap--dark.reveal[b-lfqf8va358] {
    opacity: 1;
    transform: none;
}

/* Soft top fade into the dark plane (matches stat-band handoff) */
.tech-cap--dark[b-lfqf8va358]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 140px;
    background: linear-gradient(180deg, var(--dark-band-edge) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.tech-cap__glow[b-lfqf8va358] {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    animation: feature-glow-drift 22s ease-in-out infinite alternate;
}

.tech-cap__glow--a[b-lfqf8va358] {
    top: -15%;
    left: 8%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(110, 193, 255, 0.55) 0%, rgba(110, 193, 255, 0) 70%);
    opacity: 0.55;
}

.tech-cap__glow--b[b-lfqf8va358] {
    bottom: -20%;
    right: 5%;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(63, 177, 115, 0.45) 0%, rgba(63, 177, 115, 0) 70%);
    opacity: 0.55;
    animation-duration: 26s;
    animation-delay: -8s;
}

/* Content above the glow orbs */
.tech-cap--dark > .container[b-lfqf8va358] {
    position: relative;
    z-index: 2;
}

/* Light logo plates — scoped so they cannot pick up dark theme surfaces */
.tech-partners__cell[b-lfqf8va358] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    min-height: 108px;
    border-radius: 14px;
    background: linear-gradient(165deg, #ffffff 0%, #f4f8fc 50%, #e8f0f8 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 10px 28px rgba(0, 0, 0, 0.28) !important;
}

.tech-partners__cell:hover[b-lfqf8va358] {
    background: linear-gradient(165deg, #ffffff 0%, #f7fafc 55%, #eef4fa 100%) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
}

.tech-partners__cell img[b-lfqf8va358] {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
    filter: none !important;
    opacity: 1 !important;
}

@media (max-width: 991.98px) {
    .tech-pn[b-lfqf8va358] { padding: 4rem 0; }
    .tech-partners[b-lfqf8va358] { padding: 4rem 0; }
}