/* _content/DinguSite/Components/Layout/MainLayout.razor.rz.scp.css */
html[b-ftrgn81jsa], body[b-ftrgn81jsa] {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* prevents tiny horizontal scrollbars */
}

.page[b-ftrgn81jsa] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* This app bar only reserves the visual header area. The hanging navigation
   moves into its bounds after scrolling, so the transparent bar must not
   intercept taps meant for those icons. */
.page[b-ftrgn81jsa]  .decorative-appbar {
    pointer-events: none;
}

main[b-ftrgn81jsa] {
    flex: 1;
}

.sidebar[b-ftrgn81jsa] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ftrgn81jsa] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ftrgn81jsa]  a, .top-row[b-ftrgn81jsa]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ftrgn81jsa]  a:hover, .top-row[b-ftrgn81jsa]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ftrgn81jsa]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ftrgn81jsa] {
        justify-content: space-between;
    }

    .top-row[b-ftrgn81jsa]  a, .top-row[b-ftrgn81jsa]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ftrgn81jsa] {
        flex-direction: row;
    }

    .sidebar[b-ftrgn81jsa] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ftrgn81jsa] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ftrgn81jsa]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ftrgn81jsa], article[b-ftrgn81jsa] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-ftrgn81jsa] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ftrgn81jsa] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.page[b-ftrgn81jsa], main[b-ftrgn81jsa], article[b-ftrgn81jsa] {
    background: transparent !important;
}

article[b-ftrgn81jsa] {
    padding: 0 !important;
}


:root[b-ftrgn81jsa] {
    /* MudAppBar heights: 64px default, 48px when Dense="true" */
    --appbar-h: 64px;
}

/* Push main content below the fixed app bar */
.app-main[b-ftrgn81jsa] {
    padding-top: var(--appbar-h);
    min-height: 100vh; /* keeps pages full-height */
    background: transparent; /* let your sky show through */
}

/* Optional: if you ever use Dense="true" on smaller screens */
@media (max-width: 600px) {
    :root[b-ftrgn81jsa] {
        --appbar-h: 56px;
    }
    /* Material guideline (common mobile height) */
}
.site-footer[b-ftrgn81jsa] {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    left: clamp(1rem, 3vw, 3rem);
    bottom: 1.5rem;
    font-size: 0.70rem;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    z-index: 200;
}

.site-footer.solutions-footer[b-ftrgn81jsa] {
    z-index: 5;
}

.footer-icon[b-ftrgn81jsa] {
    display: flex;
    justify-content: flex-start; /* keeps icon left */
}

@media (max-width: 480px) {
    .site-footer[b-ftrgn81jsa] {
        left: 1rem;
        bottom: 1rem;
        font-size: 0.60rem;
    }
}
/* _content/DinguSite/Components/Layout/NavMenu.razor.rz.scp.css */
/* ===== Full-viewport overlay ===== */
.hang-layer[b-a2g8wf6hyi] {
    --x-shift: clamp(-2.8vw, -0.18 * 100vw / 100, 0vw);
    position: fixed;
    inset: 0;
    height: 100vh;
    overflow: visible;
    /* Stay above every page-level character layer (About reaches 1001).
       Keep this below MudBlazor popovers, which begin at 1200. */
    z-index: 1100;
    isolation: isolate;
    pointer-events: none;
    --home-icon-scale: 1;
    /* default nav icon sizing (formerly about-only) */
    --nav-moon-size: clamp(4vw, 3.5vw + 0.7vw, 8vw);
    --home-nav-y: 0px;
    --home-nav-opacity: 1;
    transition: opacity 220ms ease;
}

/* Upsize icons on non-desktop widths */
@media (max-width: 1023.98px) {
    .hang-layer[b-a2g8wf6hyi] {
        --nav-moon-size: clamp(8vw, 7vw + 1.4vw, 16vw);
    }
}

    /* On /about, make it part of the scrolling page instead of a fixed HUD */
    .hang-layer.about-mode[b-a2g8wf6hyi] {
        position: fixed;
        inset: 0;
        height: 100vh; /* match desktop behavior */
        overflow: visible;
    }

    .hang-layer.home[b-a2g8wf6hyi] {
        --home-icon-scale: 1.55;
    }

    /* Keep all five home destinations centered on equal-width navigation slots. */
    .hang-layer.home .saturn-hanger[b-a2g8wf6hyi] {
        --left: 12vw !important;
    }

    .hang-layer.home .moon-hanger[b-a2g8wf6hyi] {
        --left: 31vw !important;
    }

    .hang-layer.home .sun-hanger[b-a2g8wf6hyi] {
        --left: 50vw !important;
    }

    .hang-layer.home .nebula-hanger[b-a2g8wf6hyi] {
        --left: 69vw !important;
    }

    .hang-layer.home .star-hanger[b-a2g8wf6hyi] {
        --left: 88vw !important;
    }

    .hang-layer:not(.about-mode).scrolled[b-a2g8wf6hyi] {
        --home-nav-y: clamp(-72px, -6vh, -36px);
        --home-nav-opacity: 0.92;
    }

    .hang-layer.home.scrolled[b-a2g8wf6hyi] {
        --home-icon-scale: 1.16;
    }

    .hang-layer:not(.home):not(.about-mode).scrolled[b-a2g8wf6hyi] {
        --home-icon-scale: 0.92;
    }

        .hang-layer.scrolled[b-a2g8wf6hyi]::after {
            content: "";
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            height: clamp(118px, 16vh, 190px);
            background: linear-gradient(180deg, #170D40 0%, #1B0B59 64%, rgba(27, 11, 89, 0) 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            opacity: 1;
            pointer-events: none;
            z-index: 0;
        }


/* ===== Hanger position + knobs ===== */
.hanger[b-a2g8wf6hyi] {
    position: absolute;
    left: calc(var(--left) + var(--x-shift, 0px));
    transform: translateX(-50%) translateY(var(--home-nav-y, 0px)); /* treat --left as visual center */
    display: grid;
    justify-items: center;
    overflow: visible;
    /* per-icon knobs (defaults) */
    --icon-w: clamp(36px, 4vw, 64px);
    --home-icon-scale: 1; /* inherited */
    --scale: var(--home-icon-scale);
    --icon-w-final: calc(var(--icon-w) * var(--scale));
    --icon-h-est: var(--icon-w-final); /* approx square icons */
    --icon-half-est: calc(var(--icon-h-est) * 0.5);
    --icon-half: calc(var(--icon-w-final) / 2);
    --drop: 0px; /* how far the dropped icon travels (unscaled) */
    --drop-final: var(--drop);
    --string-ratio: 1.05; /* string length relative to icon width */
    --hook-ratio: 0.22;   /* hook overlap relative to icon width */
    --trim-ratio: 0.18;   /* trims top transparent padding relative to icon width */
    --string-l-final: calc(var(--icon-w-final) * var(--string-ratio));
    --hook-overlap-final: calc(var(--icon-w-final) * var(--hook-ratio));
    --png-trim-top-final: calc(var(--icon-w-final) * var(--trim-ratio)); /* trims PNG's transparent top on drop */
    --string-to-center-final: calc(var(--string-l-final) + var(--icon-half-est));
    --hook-plus-center-final: calc(var(--hook-overlap-final) + var(--icon-half-est));
    --string-offset: 0px; /* per-icon horizontal nudge for string alignment */
    /* derived final targets */
    --mt-final: calc(var(--drop-final) - var(--png-trim-top-final)); /* bob final margin-top  */
    --h-final: calc(var(--string-to-center-final) + var(--drop-final) + var(--png-trim-top-final)); /* string final height to icon center */
    /* bounce fractions scale with the drop distance */
    --bounce-os-frac: 0.06; /* +6% overshoot */
    --bounce-back-frac: 0.03; /* -3% rebound  */
    width: var(--icon-w-final); /* keep string and bob sharing a consistent box */
    opacity: var(--home-nav-opacity, 1);
    z-index: 1;
    transition: transform 280ms ease, opacity 220ms ease, width 280ms ease;
}

/* Base per-icon horizontal string offsets */
.saturn-hanger[b-a2g8wf6hyi] {
    --string-offset: 2px;
}

.moon-hanger[b-a2g8wf6hyi] {
    --string-offset: 12px;
}

.sun-hanger[b-a2g8wf6hyi] {
    --string-offset: 1px;
}

.nebula-hanger[b-a2g8wf6hyi] {
    --string-offset: 3px;
}

.star-hanger[b-a2g8wf6hyi] {
    --string-offset: 5px;
}

/* ===== Pendulum wrapper (rotates string + icon together) ===== */
.pendulum[b-a2g8wf6hyi] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    animation: sway-b-a2g8wf6hyi 3.2s ease-in-out infinite;
}

    /* "Infinite" string above the viewport (doesn't intercept clicks) */
    .pendulum[b-a2g8wf6hyi]::before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -100vh;
        width: 3px;
        height: 100vh;
        background: rgba(255,255,255,.35);
        z-index: 0;
        pointer-events: none;
    }

/* Visible string below the ceiling */
.string[b-a2g8wf6hyi] {
    display: block; /* makes height effective */
    position: static;
    left: auto;
    transform: translateX(var(--string-offset, 0px));
    height: var(--h-final);
    width: 2px;
    background: rgba(255,255,255,.35);
    border-radius: 1px;
    transition: height .9s cubic-bezier(.2,.9,.2,1);
    margin-bottom: calc(var(--hook-plus-center-final) * -1); /* string continues behind icon to its center */
    z-index: 0;
    pointer-events: none; /* never blocks clicks */
}

/* Icon (the bob) */
.bob[b-a2g8wf6hyi] {
    position: relative;
    z-index: 1;
    align-self: center;
    width: calc(var(--icon-w) * var(--home-icon-scale));
    height: auto;
    display: block;
    margin-top: 0;
    transition: margin-top .9s cubic-bezier(.2,.9,.2,1), width 280ms ease, filter 220ms ease;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}

/* Only links can get pointer events */
.icon-link[b-a2g8wf6hyi], .icon-link *[b-a2g8wf6hyi] {
    pointer-events: auto;
}

/* MudNavLink renders its wrapper and anchor in the child component, outside
   this component's CSS-isolation attribute. Restore the full tap target, not
   just the scoped image inside it. */
.hang-layer[b-a2g8wf6hyi]  .mud-nav-item.icon-link,
.hang-layer[b-a2g8wf6hyi]  .mud-nav-item.icon-link > .mud-nav-link,
.hang-layer[b-a2g8wf6hyi]  .mud-nav-item.icon-link .mud-nav-link-text {
    pointer-events: auto;
}

.hang-layer[b-a2g8wf6hyi]  .mud-nav-item.icon-link {
    width: max(44px, var(--icon-w-final));
    height: max(44px, var(--icon-w-final));
    display: grid;
    place-items: center;
}

/* ===== Drop: snap targets (fallback if animations don't run) ===== */
.hanger.dropped .string[b-a2g8wf6hyi] {
    height: var(--h-final);
}

.hanger.dropped .bob[b-a2g8wf6hyi] {
    margin-top: var(--mt-final);
}

/* ===== Bounce + settle around the FINAL position, and damp sway ===== */
.hanger.dropped .bob[b-a2g8wf6hyi] {
    transition: none; /* animation controls it */
    animation: drop-bounce-b-a2g8wf6hyi 900ms cubic-bezier(.2,.9,.2,1) forwards;
}

.hanger.dropped .string[b-a2g8wf6hyi] {
    transition: none;
    animation: string-bounce-b-a2g8wf6hyi 900ms cubic-bezier(.2,.9,.2,1) forwards;
}

/* tiny land+settle around the final spot */
@keyframes drop-bounce-b-a2g8wf6hyi {
    0% {
        margin-top: 0;
    }

    70% {
        margin-top: calc(var(--mt-final) + (var(--drop-final) * var(--bounce-os-frac)));
    }

    85% {
        margin-top: calc(var(--mt-final) - (var(--drop-final) * var(--bounce-back-frac)));
    }

    100% {
        margin-top: var(--mt-final);
    }
}

@keyframes string-bounce-b-a2g8wf6hyi {
    0% {
        height: var(--h-final);
    }

    70% {
        height: calc(var(--h-final) + (var(--drop-final) * var(--bounce-os-frac)));
    }

    85% {
        height: calc(var(--h-final) - (var(--drop-final) * var(--bounce-back-frac)));
    }

    100% {
        height: var(--h-final);
    }
}

/* default sway for non-dropped icons */
@keyframes sway-b-a2g8wf6hyi {
    0% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(-2deg);
    }
}

/* dropped icon eases to zero rotation and stops */
.hanger.dropped .pendulum[b-a2g8wf6hyi] {
    animation: sway-dampen-b-a2g8wf6hyi 2.2s ease-out 0.15s forwards;
}

@keyframes sway-dampen-b-a2g8wf6hyi {
    0% {
        transform: rotate(1.6deg);
    }

    20% {
        transform: rotate(-1.2deg);
    }

    40% {
        transform: rotate(0.8deg);
    }

    60% {
        transform: rotate(-0.5deg);
    }

    80% {
        transform: rotate(0.2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* ===== Kill ripple/focus backgrounds on Mud links (no dark square) ===== */
.hang-layer .mud-link[b-a2g8wf6hyi],
.hang-layer .mud-link:focus[b-a2g8wf6hyi],
.hang-layer .mud-link:active[b-a2g8wf6hyi],
.hang-layer .mud-link:hover[b-a2g8wf6hyi],
.hang-layer .mud-nav-link[b-a2g8wf6hyi],
.hang-layer .mud-nav-link:focus[b-a2g8wf6hyi],
.hang-layer .mud-nav-link:active[b-a2g8wf6hyi],
.hang-layer .mud-nav-link:hover[b-a2g8wf6hyi] {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.hang-layer .mud-ripple[b-a2g8wf6hyi] {
    display: none !important;
}

.hang-layer .icon-link[b-a2g8wf6hyi] {
    -webkit-tap-highlight-color: transparent;
    width: max(44px, var(--icon-w-final));
    height: max(44px, var(--icon-w-final));
    display: grid;
    place-items: center;
}

/* MudNavLink renders an inner anchor and text wrapper with desktop navigation
   spacing. Remove that spacing so link icons and menu-button icons share the
   same visual center and tap-target dimensions. */
.hang-layer[b-a2g8wf6hyi]  .mud-nav-item.icon-link > .mud-nav-link {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    display: grid;
    place-items: center;
    justify-content: center !important;
}

.hang-layer[b-a2g8wf6hyi]  .mud-nav-item.icon-link .mud-nav-link-text {
    width: 100%;
    margin: 0 !important;
    display: grid;
    place-items: center;
}

/* MudMenu uses an inline-flex activator, whose text baseline adds a small
   descender gap to MudTooltip's anchor box. Align it to the top so menu
   tooltips use the same spacing as the three navigation links. */
.hang-layer[b-a2g8wf6hyi]  .mud-tooltip-root > .mud-menu {
    vertical-align: top;
}

.hang-layer .hang-link[b-a2g8wf6hyi] {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
}

.hang-layer .hang-link[b-a2g8wf6hyi]::before,
.hang-layer .hang-link[b-a2g8wf6hyi]::after,
.hang-layer .hang-link .mud-focus-animation[b-a2g8wf6hyi] {
    display: none !important;
}

.hang-layer .hang-link:hover[b-a2g8wf6hyi],
.hang-layer .hang-link:focus[b-a2g8wf6hyi],
.hang-layer .hang-link:active[b-a2g8wf6hyi] {
    background: transparent !important;
    color: inherit !important;
    text-decoration: none !important;
}

.hang-layer a:hover[b-a2g8wf6hyi],
.hang-layer a:focus[b-a2g8wf6hyi],
.hang-layer a:active[b-a2g8wf6hyi] {
    color: inherit !important;
    text-decoration: none !important;
}

:root[b-a2g8wf6hyi] {
    --mud-palette-action-default-hover: transparent !important;
    --mud-palette-primary-hover: transparent !important;
}

@media (max-width: 900px) {
    .hang-layer[b-a2g8wf6hyi] {
        --x-shift: -0.6vw;
        --home-icon-scale: 1;
    }

    .hanger[b-a2g8wf6hyi] {
        --icon-w: clamp(32px, 5vw, 56px);
        --string-ratio: 1.05;
        --hook-ratio: 0.22;
        --trim-ratio: 0.18;
    }

    /* per-icon offsets for narrow viewports */
    .sun-hanger[b-a2g8wf6hyi] {
        --string-offset: 5px; /* base 1px +4px (extra +2px here) */
    }

    .moon-hanger[b-a2g8wf6hyi] {
        --string-offset: 8px; /* base 12px -4px (extra -2px here) */
    }

    .saturn-hanger[b-a2g8wf6hyi] {
        --string-offset: 4px; /* base 2px +2px */
    }
}

@media (max-width: 500px) {
    .sun-hanger[b-a2g8wf6hyi] {
        --string-offset: 7px; /* add another +2px */
    }

    .moon-hanger[b-a2g8wf6hyi] {
        --string-offset: 6px; /* add another -2px */
    }

    .saturn-hanger[b-a2g8wf6hyi] {
        --string-offset: 6px; /* add another +2px */
    }
}

@media (max-width: 640px) {
    .hang-layer[b-a2g8wf6hyi] {
        --x-shift: 0vw;
        --home-icon-scale: 1;
    }

    .hanger[b-a2g8wf6hyi] {
        --icon-w: clamp(30px, 5.5vw, 52px);
        --string-ratio: 1.05;
        --hook-ratio: 0.22;
        --trim-ratio: 0.18;
    }

    .hang-layer:not(.about-mode).scrolled[b-a2g8wf6hyi] {
        --home-nav-y: clamp(-26px, -2.6vh, -16px);
    }

    .hang-layer.scrolled[b-a2g8wf6hyi]::after {
        height: clamp(96px, 13vh, 124px);
    }
}

@media (max-width: 480px) {
    .hang-layer[b-a2g8wf6hyi] {
        --home-icon-scale: 1;
    }

    .hanger[b-a2g8wf6hyi] {
        --icon-w: clamp(28px, 6vw, 48px);
        --string-ratio: 1.05;
        --hook-ratio: 0.22;
        --trim-ratio: 0.18;
    }
}

.hang-layer .mud-nav-item[b-a2g8wf6hyi],
.hang-layer .mud-nav-item:hover[b-a2g8wf6hyi],
.hang-layer .mud-nav-item:focus[b-a2g8wf6hyi],
.hang-layer .mud-nav-item:active[b-a2g8wf6hyi] {
    background: transparent !important;
}

.icon-button-reset[b-a2g8wf6hyi] {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mud-popover[b-a2g8wf6hyi] {
    z-index: 9999 !important;
  
}
/* _content/DinguSite/Components/Pages/About.razor.rz.scp.css */
/* keep the page?s vertical scrollbar width reserved so layout never shifts */
html[b-hicb4dva8t] {
    scrollbar-gutter: stable both-edges;
}

.mud-container[b-hicb4dva8t],
.mud-container-inner[b-hicb4dva8t],
.content-wrap[b-hicb4dva8t] {
    overflow: visible !important;
    position: relative !important;
}


/* Overflow visualization */
.debug-overflow *[b-hicb4dva8t] {
    overflow: visible !important;
    z-index: auto !important;
}


.about-stage[b-hicb4dva8t] {
    position: relative; /* no longer fixed */
    overflow-x: clip; /* keep this if you need to hide horizontal */
    /* let the page (body) handle vertical scrolling */
    --about-card-width: 30vw;
    --about-card-height: 60vh;
    --about-card-padding: 45px;
    --about-string-h: clamp(48vh, 52vh, 56vh);
    --about-string-offset: clamp(-4vh, -2vh, 0vh);
}

.about-stage[b-hicb4dva8t]  .service-card {
    position: relative; /* anchor in-card moon */
    overflow: visible;
}

.content-wrap h2[b-hicb4dva8t] {
    position: relative;
    z-index: 1;
    padding-block: 6dvh;
}

.about-hero[b-hicb4dva8t] {
    display: flex;
    align-items: flex-start;
    gap: 0; /* eliminate gap between moon and text */
    padding-top: clamp(4px, 1vh, 12px);
    margin-bottom: clamp(8px, 1.2vh, 16px);
    padding-left: clamp(12px, 1.8vw, 18px); /* slight nudge */
}

.about-hero-text[b-hicb4dva8t] {
    display: flex;
    align-items: flex-end;
    margin: 0;
}

.about-moon-drop[b-hicb4dva8t] {
    position: relative !important;
    z-index: 1001 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: clamp(44px, 6.5vw, 78px); /* ~5% down from prior */
    pointer-events: none;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: calc(-1 * (var(--about-string-h) - var(--about-string-offset)) + clamp(18px, 1vw, 10px) + clamp(8px, 1.2vw, 14px)); /* pull down by ~half the last push */
    margin-left: clamp(4px, 0.8vw, 10px); /* minimal right shift */
}

.about-string[b-hicb4dva8t] {
    display: block;
    width: 2px;
    height: var(--about-string-h);
    background: rgba(255,255,255,.35);
    border-radius: 1px;
    margin-bottom: clamp(-18px, -1.4vh, -6px);
    animation: string-drop-b-hicb4dva8t 900ms cubic-bezier(.2,.9,.2,1) forwards;
}

.about-moon[b-hicb4dva8t] {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.28));
    transform-origin: 50% 0%;
    animation: moon-drop-card-b-hicb4dva8t 900ms cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes moon-drop-card-b-hicb4dva8t {
    0% {
        transform: translateY(-55%);
        opacity: 0;
    }

    70% {
        transform: translateY(12%);
        opacity: 1;
    }

    85% {
        transform: translateY(-8%);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes string-drop-b-hicb4dva8t {
    0% {
        height: calc(var(--about-string-h) * 0.6);
    }

    100% {
        height: var(--about-string-h);
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-moon[b-hicb4dva8t] {
        animation: none;
        transform: none;
    }

    .about-string[b-hicb4dva8t] {
        animation: none;
    }
}


.about-card-stack[b-hicb4dva8t] {
    margin-top: 5vh;
    flex-wrap: nowrap;
    gap: 0;
}

.about-copy[b-hicb4dva8t] {
    display: grid;
    gap: clamp(0.75rem, 1.4vh, 1rem);
    margin-top: clamp(1rem, 2vh, 1.5rem);
}

[b-hicb4dva8t] .about-copy-title {
    color: #162041 !important;
    font-family: "Nunito", sans-serif;
    font-size: clamp(1.25rem, 1.4vw, 1.6rem);
    font-weight: 800;
    line-height: 1.25;
}

[b-hicb4dva8t] .founder-story-title {
    font-size: clamp(1.8rem, calc(1.5rem + 1.2vw), 2.5rem);
    line-height: 1.1;
}

[b-hicb4dva8t] .service-card {
    padding: var(--about-card-padding);
    border-radius: 20px;
    background: #F9E4AD;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    opacity: .8;
    height: var(--about-card-height);
    width: var(--about-card-width);
    max-width: 100%;
}

/* Keep the dropped crescent above the fixed navigation blur as it travels
   upward. Recreate the first card's translucent finish on its background so
   the card itself does not form an opacity/backdrop stacking context. */
[b-hicb4dva8t] .service-card.mr-14 {
    opacity: 1;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(145deg, rgba(249, 228, 173, 0.78), rgba(229, 207, 143, 0.74)) !important;
}

[b-hicb4dva8t] .card-body {
    font-size: clamp(14px, 1vw + 0.4rem, 20px);
    line-height: 1.6;
    letter-spacing: 0.5px;
    /* Stop hyphenation */
    hyphens: none;
    -webkit-hyphens: none;
    /* Safe wrapping */
    overflow-wrap: break-word;
    word-break: normal;
    /* Avoid Safari "pretty" behavior */
    text-wrap: wrap;
    margin: 0;
    font-family: "Nunito", sans-serif;
    color: black;
    font-weight: 700;
}

.about-copy .card-body[b-hicb4dva8t] {
    font-size: clamp(0.9rem, 0.35vw + 0.7rem, 1rem);
    line-height: 1.5;
}

[b-hicb4dva8t] .card-body-story {
    font-size: clamp(15px, 0.9vw + 0.25rem, 16px);
    line-height: 1.6;
    letter-spacing: 0.5px;
    /* Kill iPad / Safari hyphenation */
    hyphens: none;
    -webkit-hyphens: none;
    /* Safe wrapping without word mutilation */
    overflow-wrap: break-word;
    word-break: normal;
    /* Disable Safari "pretty text" logic */
    text-wrap: wrap;
    margin: 0;
    font-family: "Nunito", sans-serif;
    color: black;
    font-weight: 700;
}

[b-hicb4dva8t] .outline {
    color: black;
    -webkit-text-stroke: 2px black;
    text-stroke: 0px black;
    font-weight: 700;
    font-family: 'nunito';
}

[b-hicb4dva8t] .outline-head {
    color: black;
    -webkit-text-stroke: 1px white;
    text-stroke: 2px white;
    font-weight: 700;
    font-family: 'coiny';
}


/* this class is still on the element, but now does nothing harmful */
.dropcap-space[b-hicb4dva8t] {
    padding-left: 0;
}


.ui-overlay[b-hicb4dva8t] {
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:15vw;
    inset: 0; /* full-viewport overlay */
    pointer-events: none; /* don?t block clicks */
    z-index: 10; /* above cards/background */
}

/* Floaty Luna */
.lunafloat[b-hicb4dva8t] {
    position: absolute; /* was absolute */
    bottom: -4vh; /* keep your placement */
    left: 37vw;
    width: clamp(220px, 32vw, 400px);
    height: auto;
    pointer-events: none;
    will-change: transform, filter;
    transform-origin: 50% 60%;
    animation: luna-float-b-hicb4dva8t 4.8s ease-in-out .6s infinite;
    z-index: 1000 !important;
}

/* gentle hover animation */
@keyframes ship-hover-b-hicb4dva8t {
    0% {
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        transform: translate(-50%, -52%) translateY(-10px);
    }

    100% {
        transform: translate(-50%, -50%) translateY(0);
    }
}

/* optional mobile scaling */
@media (max-width: 640px) {
    .alienship[b-hicb4dva8t] {
        width: clamp(160px, 60vw, 300px);
        top: 45%;
    }
}
@keyframes luna-float-b-hicb4dva8t {
    0% {
        transform: translateY(0) rotate(-0.6deg);
        filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
    }

    50% {
        transform: translateY(-12px) rotate(0.6deg);
        filter: drop-shadow(0 10px 22px rgba(0,0,0,.32));
    }

    100% {
        transform: translateY(0) rotate(-0.6deg);
        filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
    }
}

@media (prefers-reduced-motion: reduce) {
    .lunafloat[b-hicb4dva8t] {
        animation: none !important;
        transform: none !important;
    }
}
/* ========= Mobile fix: stack cards in the exact same position ========= */
@media (max-width: 767.98px) {
    .about-stage[b-hicb4dva8t] {
        --about-string-h: clamp(90vh, 104vh, 118vh);
        /* keep moon position stable while lengthening string (55% lift) */
        --about-string-offset: calc(var(--about-string-h) * 0.45);
    }

    /* Make the stack a clean vertical column */
    [b-hicb4dva8t] .about-card-stack {
        display: flex; /* be explicit */
        flex-direction: column;
        justify-content: flex-start;
        align-items: center; /* center the cards horizontally */
        gap: 3rem; /* space between cards */
        margin-top: 3vh;
    }

    /* Use consistent, centered card width */
    [b-hicb4dva8t] .service-card {
        width: 90vw; /* both cards same width */
        max-width: 480px;
        height: auto; /* let content define height */
    }

    /* Kill the desktop-only extra right margin on the first card */
    [b-hicb4dva8t] .mr-14 {
        margin-right: 0 !important;
    }

    .about-hero[b-hicb4dva8t] {
        justify-content: center;
        padding-left: 0;
    }

    .about-moon-drop[b-hicb4dva8t] {
        width: clamp(59px, 28.5vw, 103px); /* ~5% down from prior */
        margin-top: calc(-1 * var(--about-string-h) - 2vh + clamp(16px, 2vw, 24px) + clamp(12px, 1.8vw, 20px)); /* restore mobile balance */
        margin-left: clamp(6px, 1.4vw, 12px); /* minimal right shift */
    }

    .about-moon[b-hicb4dva8t] {
        /* Avoid iOS Safari compositing the filtered PNG as a square layer. */
        -webkit-filter: none;
        filter: none;
    }

    /* (Optional) tame Luna a bit so she doesn?t visually push the second card */
    .lunafloat[b-hicb4dva8t] {
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: clamp(160px, 55vw, 260px);
        margin: -15vh 0 -1vh; /* negative margin pulls her into the gap */
        z-index: 10;
        pointer-events: none;
    }

    .lunadiv[b-hicb4dva8t] {
        height:10vh;
    }
}
@media (min-width: 768px) and (max-width: 1023.98px) {

    .about-card-stack[b-hicb4dva8t] {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 3rem;
        margin-top: 5vh;
    }

    .about-stage[b-hicb4dva8t] {
        --about-card-width: min(42vw, 420px);
        --about-card-height: auto;
        --about-card-padding: 32px;
    }

    [b-hicb4dva8t] .service-card {
        width: var(--about-card-width);
        height: auto; /* prevent text leaking */
        padding: var(--about-card-padding);
    }

    [b-hicb4dva8t] .mr-14 {
        margin-right: 0 !important; /* we?re using gap instead */
    }

    .about-moon-drop[b-hicb4dva8t] {
        margin-top: calc(-1 * (var(--about-string-h) - var(--about-string-offset)) + clamp(10px, 1.4vw, 24px) + clamp(18px, 2.6vw, 36px)); /* push down more across this band */
        margin-left: clamp(6px, 1.2vw, 14px);
    }

    /* Cat floats in front / between, but relative to the pair of cards */
    .lunafloat[b-hicb4dva8t] {
        position: absolute;
        left: 35%;
        /*transform: translateX(-50%);*/
        bottom: -10vh;
        width: clamp(200px, 28vw, 260px);
        z-index: 1000 !important;
        pointer-events: none;
    }
}

@media (min-width: 1024px) and (max-width: 1242px) {
    .about-hero[b-hicb4dva8t] {
        padding-left: clamp(8px, 1.2vw, 14px);
       /* gap: clamp(6px, 1.2vw, 16px);*/
        transform: translateX(-0.8vw);
    }
    .about-stage[b-hicb4dva8t] {
        --about-card-padding: 25px;
        padding-bottom: calc(clamp(250px, 28vw, 320px) + 1rem);
    }
    

    .about-moon-drop[b-hicb4dva8t] {
        width: clamp(42px, 6.2vw, 71px); /* ~5% down from prior */
        margin-top: calc(-1 * (var(--about-string-h) - var(--about-string-offset)) + clamp(16px, 1.8vw, 22px) + clamp(8px, 2vw, 24px)); /* pull down by ~half the last push */
        margin-left: clamp(6px, 1.2vw, 12px); /* minimal right shift */
    }

    .lunafloat[b-hicb4dva8t] {
        position: absolute;
        left: calc(52% - (clamp(250px, 28vw, 320px) / 2));
        bottom: 0;
        width: clamp(250px, 28vw, 320px);
        z-index: 1000 !important;
        pointer-events: none;
    }
   
}

@media (min-width: 1024px) {
    .about-stage[b-hicb4dva8t] {
        --about-card-height: auto;
    }

    [b-hicb4dva8t] .service-card {
        height: auto;
        padding-bottom: calc(var(--about-card-padding) + 30px);
    }

}

@media (min-width: 1243px){
    .about-stage[b-hicb4dva8t] {
        padding-bottom: calc(clamp(220px, 17vw, 350px) + 1rem);
    }

    .lunafloat[b-hicb4dva8t] {
        position: absolute;
        left: calc(52% - (clamp(200px, 17vw, 350px) / 2));
        bottom: 0;
        width: clamp(200px, 17vw, 350px);
        z-index: 1000 !important;
        pointer-events: none;
    }
    .lunadiv[b-hicb4dva8t] {
        width: 3vw;
    }
}

@media(min-width:1920px){
    .lunafloat[b-hicb4dva8t] {
        position: absolute;
        left: calc(52% - (clamp(250px, 15vw, 350px) / 2));
        bottom: 0;
        width: clamp(250px, 15vw, 350px);
        z-index: 1000 !important;
        pointer-events: none;
    }

}

@media (min-width: 1024px) {
    .about-stage[b-hicb4dva8t] {
        padding-bottom: 0;
    }

    .about-hero[b-hicb4dva8t] {
        padding-left: 0;
        transform: none;
    }

    .about-moon-drop[b-hicb4dva8t] {
        margin-left: 0;
    }

    [b-hicb4dva8t] .about-card-stack {
        display: grid !important;
        grid-template-columns:
            var(--about-card-width)
            clamp(72px, 6vw, 110px)
            var(--about-card-width);
        align-items: stretch;
        justify-content: center;
        gap: 0 !important;
    }

    [b-hicb4dva8t] .mr-14 {
        margin-right: 0 !important;
    }

    .luna-slot[b-hicb4dva8t] {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        min-width: 0;
        position: relative;
        z-index: 10;
        pointer-events: none;
    }

    .lunafloat[b-hicb4dva8t] {
        position: relative;
        left: auto;
        bottom: auto;
        width: clamp(220px, 18vw, 310px);
        max-width: none;
        height: auto;
        margin-bottom: -128px;
        z-index: 10;
    }

    /* Keep copy clear of Luna where she crosses the cards' inner edges. */
    .about-copy .card-body[b-hicb4dva8t] {
        margin-right: clamp(46px, 2.6vw, 50px);
    }

    [b-hicb4dva8t] .service-card:last-child .card-body-story {
        margin-left: 0;
    }

    [b-hicb4dva8t] .founder-story-title {
        margin-top: clamp(32px, calc(2vh + 12px), 38px) !important;
    }
}
/* _content/DinguSite/Components/Pages/Contact.razor.rz.scp.css */
/* Page shell */
.contact-page[b-nfnfthlz5v] {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

[b-nfnfthlz5v] .contact-field input,
[b-nfnfthlz5v] .contact-field textarea {
    font-family: nunito !important;
    font-weight: 800 !important;
    color: black;
}

/* Container spacing – scales with viewport height */
[b-nfnfthlz5v] .contact-container {
    position: relative;
    z-index: 2;
    padding-top: clamp(6rem, 25vh, 11.5rem);
    padding-bottom: clamp(4rem, 12vh, 8rem);
}

/* Title styling (your original inline style moved here) */
[b-nfnfthlz5v] .contact-title {
    color: white;
    font-family: 'Cabin Sketch';
    padding-bottom: 2vh;
    position: relative;
    z-index: 2;
}

/* Form stack: defaults for mobile */
.contact-form-stack[b-nfnfthlz5v] {
    --contact-field-width: 100%;
    --contact-field-height: 3.2rem;
    --contact-textarea-height: 7.5rem;
    --contact-button-height: 3.8rem;
}

/* Make MudBlazor fields/buttons respect our sizes */
[b-nfnfthlz5v] .contact-form-stack .contact-field,
[b-nfnfthlz5v] .contact-form-stack .contact-button {
    width: var(--contact-field-width);
}

[b-nfnfthlz5v] .contact-form-stack .contact-field {
    height: var(--contact-field-height);
    background-color: #F9E4AD;
    opacity: 0.85;
    border-radius: 15px;
    font-family: nunito !important;
    font-weight: 800 !important;
    color: black;
}

[b-nfnfthlz5v] .contact-form-stack .contact-message {
    height: var(--contact-textarea-height);
}

[b-nfnfthlz5v] .contact-form-stack .contact-button {
    min-height: var(--contact-button-height);
    margin-top: 1rem;
    color: #F9E4AD;
    opacity: 0.9;
    border: 2px solid rgba(249, 228, 173, 0.92);
    border-radius: 12px;
    background: rgba(12, 24, 55, 0.34);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    font-family: nunito;
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: none;
    transition: transform 180ms ease,
                color 180ms ease,
                background-color 180ms ease,
                border-color 180ms ease,
                box-shadow 180ms ease,
                opacity 180ms ease;
}

[b-nfnfthlz5v] .contact-form-stack .contact-button .mud-button-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

[b-nfnfthlz5v] .contact-form-stack .contact-button:not(:disabled):hover,
[b-nfnfthlz5v] .contact-form-stack .contact-button:not(:disabled):focus-visible {
    color: #fff4cf;
    opacity: 1;
    background: rgba(22, 36, 76, 0.78);
    border-color: #ffe6a0;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24),
                0 0 14px rgba(255, 214, 102, 0.76),
                0 0 30px rgba(255, 214, 102, 0.38);
    transform: translateY(-2px);
}

[b-nfnfthlz5v] .contact-form-stack .contact-button:not(:disabled):active {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.22),
                0 0 10px rgba(255, 214, 102, 0.56);
}

[b-nfnfthlz5v] .contact-form-stack .contact-button:disabled {
    color: #fff0bd;
    opacity: 1;
    cursor: wait;
    background: rgba(22, 36, 76, 0.76);
    border-color: rgba(255, 230, 160, 0.9);
    box-shadow: 0 0 16px rgba(255, 214, 102, 0.46);
}

[b-nfnfthlz5v] .contact-button-spinner {
    flex: 0 0 auto;
}

/* On bigger screens, constrain and center the form */
@media (min-width: 960px) {
    .contact-form-stack[b-nfnfthlz5v] {
        max-width: 480px;
        margin: 0 auto;
        --contact-field-width: 100%;
        --contact-field-height: 3.2rem;
        --contact-textarea-height: 8.5rem;
        --contact-button-height: 3.8rem;
    }
}

.cat-mail-track[b-nfnfthlz5v] {
    --mail-walk-delay: 1.5s;
    --mail-walk-duration: 14.4s;
    --mail-step-duration: 1.2s;
    --mail-travel-steps: 24;
    position: fixed;
    top: auto;
    bottom: 0;
    right: 6vw;
    width: clamp(220px, 22vw, 290px);
    aspect-ratio: 1;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transform: none;
    /* Each position change lands with the next half of the two-frame walk cycle. */
    animation: cat-mail-walk-to-rocket-b-nfnfthlz5v var(--mail-walk-duration) steps(var(--mail-travel-steps), end) var(--mail-walk-delay) forwards;
    will-change: transform;
}

/* Alternate the two side-looking mail poses while Luna crosses the lunar foreground. */
.cat-mail-walk-cycle[b-nfnfthlz5v],
.cat-mail-walk-frame[b-nfnfthlz5v],
.cat-mail[b-nfnfthlz5v] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: auto;
}

.cat-mail-walk-cycle[b-nfnfthlz5v] {
    opacity: 1;
    z-index: 1;
    animation: cat-mail-hide-walk-b-nfnfthlz5v 1ms linear calc(var(--mail-walk-delay) + var(--mail-walk-duration)) forwards;
}

.cat-mail-walk-frame[b-nfnfthlz5v] {
    opacity: 0;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(255,255,255,0.15));
}

.cat-mail-walk-frame-one[b-nfnfthlz5v] {
    opacity: 1;
    animation: cat-mail-frame-one-b-nfnfthlz5v var(--mail-step-duration) step-end var(--mail-walk-delay) infinite;
}

.cat-mail-walk-frame-two[b-nfnfthlz5v] {
    animation: cat-mail-frame-two-b-nfnfthlz5v var(--mail-step-duration) step-end var(--mail-walk-delay) infinite;
}

.cat-mail-arrived[b-nfnfthlz5v] {
    opacity: 0;
    z-index: 2;
    transform-origin: 50% 60%;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(255,255,255,0.15));
    animation: cat-mail-reveal-b-nfnfthlz5v 1ms linear calc(var(--mail-walk-delay) + var(--mail-walk-duration)) forwards;
    will-change: opacity;
}

@keyframes cat-mail-walk-to-rocket-b-nfnfthlz5v {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100vw + clamp(24rem, 35vw, 35rem)));
    }
}

@keyframes cat-mail-frame-one-b-nfnfthlz5v {
    0%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes cat-mail-frame-two-b-nfnfthlz5v {
    0%, 49.9% { opacity: 0; }
    50%, 100% { opacity: 1; }
}

@keyframes cat-mail-hide-walk-b-nfnfthlz5v {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes cat-mail-reveal-b-nfnfthlz5v {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 959.98px) {
    .contact-form-stack[b-nfnfthlz5v] {
        max-width: 480px;
        margin: 0 auto;
        --contact-field-width: 100%;
        --contact-field-height: 3.2rem;
        --contact-textarea-height: 8.5rem;
        --contact-button-height: 3.8rem;
    }
    .cat-mail-track[b-nfnfthlz5v] {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 6vw;
        width: clamp(220px, 22vw, 290px);
        pointer-events: none;
        z-index: 1;
        opacity: 1;
        transform: none;
    }

}


/* Keep things from shifting horizontally */
:root[b-nfnfthlz5v],
body[b-nfnfthlz5v] {
    overflow-x: hidden;
}

/* StarBackdrop stays in the back */
StarBackdrop[b-nfnfthlz5v] {
    position: fixed;
    inset: 0;
    z-index: 0;
}

/* Moon at the bottom */
.moon-bg[b-nfnfthlz5v] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    object-fit: cover;
    object-position: bottom;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 -6px 24px rgba(0,0,0,.35));
}

@media(min-width:1024px){

    .cat-mail-track[b-nfnfthlz5v] {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 6vw;
        width: clamp(220px, 22vw, 290px);
        pointer-events: none;
        z-index: 1;
        opacity: 1;
        transform: none;
    }

}

@media(min-width:1366px) {

    .cat-mail-track[b-nfnfthlz5v] {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 6vw;
        width: clamp(220px, 22vw, 290px);
        pointer-events: none;
        z-index: 1;
        opacity: 1;
        transform: none;
    }
}

/* Keep Luna decorative without covering the form or its submit action. */
@media (min-width: 960px) {
    .cat-mail-track[b-nfnfthlz5v] {
        right: -3.25rem;
    }
}

@media (max-width: 959.98px) {
    .contact-page[b-nfnfthlz5v] {
        min-height: 1120px;
    }

    [b-nfnfthlz5v] .contact-container {
        padding-bottom: 320px;
    }

    .cat-mail-track[b-nfnfthlz5v] {
        position: fixed;
        top: auto;
        right: -0.75rem;
        bottom: 0;
        width: clamp(165px, 45vw, 200px);
        animation-name: cat-mail-walk-to-rocket-mobile-b-nfnfthlz5v;
    }
}

@keyframes cat-mail-walk-to-rocket-mobile-b-nfnfthlz5v {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100vw + 14rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-nfnfthlz5v] .contact-form-stack .contact-button {
        transition: none;
    }

    [b-nfnfthlz5v] .contact-form-stack .contact-button:not(:disabled):hover,
    [b-nfnfthlz5v] .contact-form-stack .contact-button:not(:disabled):focus-visible,
    [b-nfnfthlz5v] .contact-form-stack .contact-button:not(:disabled):active {
        transform: none;
    }

    .cat-mail-track[b-nfnfthlz5v] {
        animation: none;
        transform: translateX(calc(-100vw + clamp(24rem, 35vw, 35rem)));
    }

    .cat-mail-walk-cycle[b-nfnfthlz5v] {
        display: none;
        animation: none;
    }

    .cat-mail-arrived[b-nfnfthlz5v] {
        opacity: 1;
        animation: none;
    }
}

@media (max-width: 959.98px) and (prefers-reduced-motion: reduce) {
    .cat-mail-track[b-nfnfthlz5v] {
        transform: translateX(calc(-100vw + 14rem));
    }
}
/* _content/DinguSite/Components/Pages/ContactSent.razor.rz.scp.css */
.contact-sent-page[b-ilwvtev3wh] {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    height: 100dvh;
    min-height: 680px;
    display: grid;
    place-items: center;
    padding: clamp(8.5rem, 18vh, 10rem) 1.5rem 2rem;
    overflow: hidden;
}

.contact-sent-card[b-ilwvtev3wh] {
    position: relative;
    z-index: 2;
    width: min(720px, 100%);
    padding: clamp(2rem, 4vw, 2.75rem);
    text-align: center;
    background: linear-gradient(145deg, rgba(16, 23, 54, 0.97), rgba(19, 32, 57, 0.94)) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.contact-sent-card[b-ilwvtev3wh]::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(249, 228, 173, 0.22);
    border-radius: inherit;
    pointer-events: none;
    animation: contact-card-arrival-b-ilwvtev3wh 1.15s ease-out both;
}

.contact-sent-eyebrow[b-ilwvtev3wh] {
    margin: 0 0 0.85rem;
    color: #f9e4ad;
    font: 900 0.86rem/1.2 "Nunito", sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-sent-card h1[b-ilwvtev3wh] {
    margin: 0;
    color: #fff;
    font: 400 clamp(2.25rem, 5vw, 4rem)/1.06 "Cabin Sketch", cursive;
    text-wrap: balance;
}

.contact-sent-message[b-ilwvtev3wh],
.contact-sent-next-step[b-ilwvtev3wh] {
    width: min(590px, 100%);
    margin-inline: auto;
    color: rgba(255, 255, 255, 0.86);
    font-family: "Nunito", sans-serif;
    text-wrap: pretty;
}

.contact-sent-message[b-ilwvtev3wh] {
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    font-weight: 800;
    line-height: 1.65;
}

.contact-sent-next-step[b-ilwvtev3wh] {
    margin-top: 0.8rem;
    margin-bottom: 0;
    font-size: clamp(0.95rem, 1.25vw, 1.05rem);
    font-weight: 650;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.68);
}

.contact-sent-actions[b-ilwvtev3wh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.65rem;
}

.contact-sent-primary[b-ilwvtev3wh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(360px, 100%);
    min-height: 3.5rem;
    color: #f9e4ad;
    border: 3px solid #f9e4ad;
    border-radius: 12px;
    background: transparent;
    font: 900 1.05rem/1.2 "Nunito", sans-serif;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contact-sent-primary:hover[b-ilwvtev3wh],
.contact-sent-primary:focus-visible[b-ilwvtev3wh] {
    color: #101731;
    background: #f9e4ad;
    transform: translateY(-2px);
}

.contact-sent-return[b-ilwvtev3wh] {
    color: rgba(255, 255, 255, 0.78);
    font: 800 0.95rem/1.4 "Nunito", sans-serif;
    text-underline-offset: 0.25rem;
}

.contact-sent-book[b-ilwvtev3wh] {
    color: rgba(255, 255, 255, 0.76);
    font: 800 0.95rem/1.4 "Nunito", sans-serif;
    text-decoration: none;
}

.contact-sent-book span[b-ilwvtev3wh] {
    color: #f9e4ad;
    text-decoration: underline;
    text-decoration-color: rgba(249, 228, 173, 0.52);
    text-underline-offset: 0.25rem;
}

.contact-sent-book:hover[b-ilwvtev3wh],
.contact-sent-book:focus-visible[b-ilwvtev3wh],
.contact-sent-book:hover span[b-ilwvtev3wh],
.contact-sent-book:focus-visible span[b-ilwvtev3wh] {
    color: #fff2c9;
}

.contact-sent-book:focus-visible[b-ilwvtev3wh] {
    outline: 2px solid #f9e4ad;
    outline-offset: 5px;
    border-radius: 4px;
}

.contact-sent-return:hover[b-ilwvtev3wh],
.contact-sent-return:focus-visible[b-ilwvtev3wh] {
    color: #f9e4ad;
}

.rocket-wrapper[b-ilwvtev3wh] {
    position: absolute;
    z-index: 3;
    right: -12rem;
    bottom: 0;
    width: clamp(140px, 12vw, 170px);
    pointer-events: none;
    animation: rocket-course-b-ilwvtev3wh 26s linear infinite;
    will-change: right, bottom, opacity;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
}

.rocket-bank[b-ilwvtev3wh] {
    width: 100%;
    transform-origin: 50% 60%;
    animation: rocket-bank-b-ilwvtev3wh 26s linear infinite;
}

.cat-rocket-sent[b-ilwvtev3wh] {
    display: block;
    width: 100%;
    height: auto;
    animation: rocket-engine-b-ilwvtev3wh 0.24s ease-in-out infinite alternate;
}

@keyframes contact-card-arrival-b-ilwvtev3wh {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 rgba(249, 228, 173, 0);
    }
    48% {
        opacity: 1;
        box-shadow: 0 0 0 6px rgba(249, 228, 173, 0.12), 0 0 42px rgba(249, 228, 173, 0.2);
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 0 rgba(249, 228, 173, 0);
    }
}

@keyframes rocket-course-b-ilwvtev3wh {
    0% { right: -13rem; bottom: 0; opacity: 0; }
    3.08% { right: -8rem; bottom: 8vh; opacity: 1; }
    17.23% { right: 2vw; bottom: 62vh; opacity: 1; }
    20.92% { right: 8vw; bottom: 66vh; opacity: 1; }
    58% { right: 92vw; bottom: 66vh; opacity: 1; }
    61.54%, 100% { right: 112vw; bottom: 66vh; opacity: 0; }
}

@keyframes rocket-bank-b-ilwvtev3wh {
    0%, 17.23% { transform: rotate(45deg); }
    20.92%, 100% { transform: rotate(0deg); }
}

@keyframes rocket-engine-b-ilwvtev3wh {
    from { transform: translate3d(0, -1px, 0) rotate(-0.35deg); }
    to { transform: translate3d(0, 1px, 0) rotate(0.35deg); }
}

@media (max-width: 760px) {
    .contact-sent-page[b-ilwvtev3wh] {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        min-height: 100vh;
        padding: 9rem 1rem 3rem;
        overflow: hidden;
    }

    .contact-sent-card[b-ilwvtev3wh] {
        padding: 1.65rem 1.25rem;
    }

    .rocket-wrapper[b-ilwvtev3wh] {
        position: absolute;
        left: 50%;
        right: auto;
        bottom: 0.25rem;
        width: clamp(165px, 44vw, 180px);
        margin: 0;
        animation: rocket-course-mobile-b-ilwvtev3wh 18s ease-in-out infinite;
    }

    .rocket-bank[b-ilwvtev3wh] {
        animation: rocket-bank-mobile-b-ilwvtev3wh 18s ease-in-out infinite;
    }
}

@keyframes rocket-course-mobile-b-ilwvtev3wh {
    0% { left: 108%; bottom: 0.25rem; opacity: 0; }
    3.56% { left: 72%; bottom: 0.25rem; opacity: 1; }
    15.11% { left: 54%; bottom: 1.25rem; opacity: 1; }
    18.67% { left: 44%; bottom: 1.25rem; opacity: 1; }
    40.89% { left: -48%; bottom: 1.25rem; opacity: 1; }
    44.44%, 100% { left: -58%; bottom: 1.25rem; opacity: 0; }
}

@keyframes rocket-bank-mobile-b-ilwvtev3wh {
    0%, 15.11% { transform: rotate(45deg); }
    18.67%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .contact-sent-card[b-ilwvtev3wh]::before,
    .rocket-wrapper[b-ilwvtev3wh],
    .rocket-bank[b-ilwvtev3wh] {
        animation: none;
    }

    .cat-rocket-sent[b-ilwvtev3wh] {
        animation: none;
    }
}
/* _content/DinguSite/Components/Pages/Landing.razor.rz.scp.css */
/* Container for absolute children */
.landing-container[b-bl57i60wub] {
    position: relative;
    height: 100vh;
    overflow: hidden;
   /* z-index: 0;*/
}

/* Position the moon wrapper (we draw the string on the wrapper) */
.crescent-wrap[b-bl57i60wub] {
    position: absolute;
    top: -200px;
    left: 27vw;
    transform: translateX(-50%);
    animation: dropDown-b-bl57i60wub 2s ease-out forwards;
    animation-delay: 1s;
    z-index: 2; /* above backdrop */
}

    /* Draw the string on the wrapper (pseudo elements work here) */
    .crescent-wrap[b-bl57i60wub]::before {
        content: "";
        position: absolute;
        bottom: 100%; /* anchor at top of moon, extend upward */
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 120vh; /* enough to reach top of viewport */
        background: rgba(255,255,255,0.35);
        border-radius: 2px;
        
        z-index: 1; /* behind the moon image */
    }


/* The moon image itself */
.crescent[b-bl57i60wub] {
    display: block; /* avoid inline-gap quirks */
    width: 200px;
    height: auto; /* keep aspect ratio */
    margin-top: -10px;
}

/* Moon drop animation */
@keyframes dropDown-b-bl57i60wub {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) translateY(350px);
        opacity: 1;
    }
}
/* === Zero-gravity CAT (triple-jump across the moon) === */
.cat[b-bl57i60wub] {
    position: fixed;
    top: 55vh; /* lowered base height by 5% (was 40vh) */
    left: 50vw;
    width: 500px;
    height: auto;
    z-index:92;
    will-change: transform;
    /* Cat actually starts off-screen to the right */
    transform: translate(60vw, 0);
}
.cat--play[b-bl57i60wub] {
    animation: runAcross-b-bl57i60wub 16s linear, bob-b-bl57i60wub 3.5s ease-in-out infinite, slowSpin-b-bl57i60wub 18s linear infinite;
    animation-delay: 1.2s;
}

/* Hold landing animations until interactive render is ready. */
.landing-anim .crescent-wrap[b-bl57i60wub],
.landing-anim .curtain-left[b-bl57i60wub],
.landing-anim .curtain-right[b-bl57i60wub],
.landing-anim .cat--play[b-bl57i60wub] {
    animation-play-state: paused;
}

.landing-anim.landing-anim--play .crescent-wrap[b-bl57i60wub],
.landing-anim.landing-anim--play .curtain-left[b-bl57i60wub],
.landing-anim.landing-anim--play .curtain-right[b-bl57i60wub],
.landing-anim.landing-anim--play .cat--play[b-bl57i60wub] {
    animation-play-state: running;
}


@keyframes runAcross-b-bl57i60wub {
    /* 0% – off-screen right */
    /*0% {
        transform: translate(60vw, 0);*/ /* x = 110vw */
    /*}*/
    /* === Bounce 1 === */
    /* Enter mid-air */
    6% {
        transform: translate(30vw, -20vh); /* x = 80vw */
    }
    /* Land bounce 1 */
    12% {
        transform: translate(20vw, 0); /* x = 70vw */
    }
    /* === Bounce 2 (tight & arced) === */
    /* Start bounce 2, close after landing 1 */
    18% {
        transform: translate(15vw, 0); /* x = 65vw */
    }
    /* Apex bounce 2 – forward + up */
    24% {
        transform: translate(5vw, -25vh); /* x = 55vw */
    }
    /* Land bounce 2 further left */
    30% {
        transform: translate(-3vw, 0); /* x = 47vw */
    }
    /* Continuous run toward main jump – always moving left */
    36% {
        transform: translate(-8vw, 0); /* x = 42vw */
    }
    /* === Bounce 3 (main parabolic jump to the sign) === */
    /* Start of main arc – around tick 7 */
    42% {
        transform: translate(-13vw, 0); /* x = 37vw (start of arc) */
    }
    /* Begin rise toward apex */
    48% {
        transform: translate(-20vw, -30vh); /* mid-rise, x = 32vw */
    }
    /* APEX plateau – higher by 2% (was -25vh → now -27vh) */
    /* We keep the Y the same but slide X a bit for a fat apex */
    /* Slightly right of exact 27vw */
    51% {
        transform: translate(-23vw, -45vh); /* x = 29vw */
    }
    /* Exactly 27vw from the left at full height */
    53% {
        transform: translate(-27vw, -50vh); /* x = 27vw */
    }
    /* Slightly left of that, still at full height */
    55% {
        transform: translate(-28vw, -45vh); /* x = 25vw */
    }
    /* Descend and land further left –
       landing moved another 5vw left: 19vw → 14vw */
    62% {
        transform: translate(-36vw, 0); /* x = 14vw */
    }
    /* Drift away toward exit, still moving left */
    80% {
        transform: translate(-45vw, 0); /* x = 5vw */
    }
    /* Exit off-screen left */
    100% {
        transform: translate(-65vw, 0); /* x = -15vw */
    }
}





/* Subtle up/down bob (still just a tiny float on top of the path) */
@keyframes bob-b-bl57i60wub {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }
}

/* Tiny slow rotation */
@keyframes slowSpin-b-bl57i60wub {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 6deg;
    }
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
     .crescent-wrap[b-bl57i60wub], .cat[b-bl57i60wub], .cat--play[b-bl57i60wub] {
        animation: none !important;
    }
}


.curtain[b-bl57i60wub]{
position:fixed;
z-index:100;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;

}

.stage[b-bl57i60wub] {
position: fixed;
z-index:90;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}

.curtain-left[b-bl57i60wub] {
    position: fixed;
    z-index: 95;
    bottom: 0;
    width: 100%;
    height: 100%;
    animation: open-left-b-bl57i60wub 6s linear forwards;
}

.curtain-right[b-bl57i60wub] {
    position: fixed;
    z-index: 95;
    bottom: 0;
    width: 100%;
    height: 100%;
    animation: open-right-b-bl57i60wub 6s linear forwards;
}

@keyframes open-left-b-bl57i60wub {
    0% {
        transform: translate(0vw, 0);
    }

    100% {
        transform: translate(50vw, 0);
    }
}

@keyframes open-right-b-bl57i60wub {
    0% {
        transform: translate(0vw, 0);
    }

    100% {
        transform: translate(-50vw, 0);
    }
}

/* Responsive scaling */
@media (max-width: 1080px) {
    .crescent-wrap[b-bl57i60wub] {
        top: -160px;
        left: 30vw;
    }

    .crescent-wrap[b-bl57i60wub]::before {
        bottom: 100%;
        height: 130vh;
    }

    .crescent[b-bl57i60wub] {
        width: 160px;
    }

    .cat[b-bl57i60wub] {
        width: 380px;
        top: 60vh;
    }
@keyframes runAcross-b-bl57i60wub {
        /* 0% – off-screen right */
        /*0% {
        transform: translate(60vw, 0);*/ /* x = 110vw */
        /*}*/
        /* === Bounce 1 === */
        /* Enter mid-air */
        6% {
            transform: translate(30vw, -20vh); /* x = 80vw */
        }
        /* Land bounce 1 */
        12% {
            transform: translate(20vw, 0); /* x = 70vw */
        }
        /* === Bounce 2 (tight & arced) === */
        /* Start bounce 2, close after landing 1 */
        18% {
            transform: translate(15vw, 0); /* x = 65vw */
        }
        /* Apex bounce 2 – forward + up */
        24% {
            transform: translate(5vw, -25vh); /* x = 55vw */
        }
        /* Land bounce 2 further left */
        30% {
            transform: translate(-3vw, 0); /* x = 47vw */
        }
        /* Continuous run toward main jump – always moving left */
        36% {
            transform: translate(-8vw, 0); /* x = 42vw */
        }
        /* === Bounce 3 (main parabolic jump to the sign) === */
        /* Start of main arc – around tick 7 */
        42% {
            transform: translate(-13vw, 0); /* x = 37vw (start of arc) */
        }
        /* Begin rise toward apex */
        48% {
            transform: translate(-20vw, -30vh); /* mid-rise, x = 32vw */
        }
        /* APEX plateau – higher by 2% (was -25vh → now -27vh) */
        /* We keep the Y the same but slide X a bit for a fat apex */
        /* Slightly right of exact 27vw */
        51% {
            transform: translate(-25vw, -45vh); /* x = 29vw */
        }
        /* Exactly 27vw from the left at full height */
        53% {
            transform: translate(-30vw, -50vh); /* x = 27vw */
        }
        /* Slightly left of that, still at full height */
        55% {
            transform: translate(-32vw, -47vh); /* x = 25vw */
        }
        /* Descend and land further left –
       landing moved another 5vw left: 19vw → 14vw */
        62% {
            transform: translate(-36vw, 0); /* x = 14vw */
        }
        /* Drift away toward exit, still moving left */
        80% {
            transform: translate(-45vw, 0); /* x = 5vw */
        }
        /* Exit off-screen left */
        100% {
            transform: translate(-65vw, 0); /* x = -15vw */
        }
    }
}

@media (max-width: 768px) {
    .crescent-wrap[b-bl57i60wub] {
        top: -140px;
        left: 32vw;
    }

    .crescent-wrap[b-bl57i60wub]::before {
        bottom: 100%;
        height: 140vh;
    }

    .crescent[b-bl57i60wub] {
        width: 130px;
    }

    .cat[b-bl57i60wub] {
        width: 300px;
        top: 62vh;
    }
.cat[b-bl57i60wub] {
        position: fixed;
        top: 55vh; /* lowered base height by 5% (was 40vh) */
        left: 50vw;
        width: 500px;
        height: auto;
        z-index: 92;
        will-change: transform;
        /* Cat actually starts off-screen to the right */
        transform: translate(60vw, 0);
    }
@keyframes runAcross-b-bl57i60wub {
        /* 0% – off-screen right */
        /*0% {
        transform: translate(60vw, 0);*/ /* x = 110vw */
        /*}*/
        /* === Bounce 1 === */
        /* Enter mid-air */
        6% {
            transform: translate(30vw, -20vh); /* x = 80vw */
        }
        /* Land bounce 1 */
        12% {
            transform: translate(20vw, 0); /* x = 70vw */
        }
        /* === Bounce 2 (tight & arced) === */
        /* Start bounce 2, close after landing 1 */
        18% {
            transform: translate(15vw, 0); /* x = 65vw */
        }
        /* Apex bounce 2 – forward + up */
        24% {
            transform: translate(5vw, -25vh); /* x = 55vw */
        }
        /* Land bounce 2 further left */
        30% {
            transform: translate(-3vw, 0); /* x = 47vw */
        }
        /* Continuous run toward main jump – always moving left */
        36% {
            transform: translate(-8vw, 0); /* x = 42vw */
        }
        /* === Bounce 3 (main parabolic jump to the sign) === */
        /* Start of main arc – around tick 7 */
        42% {
            transform: translate(-13vw, 0); /* x = 37vw (start of arc) */
        }
        /* Begin rise toward apex */
        48% {
            transform: translate(-20vw, -30vh); /* mid-rise, x = 32vw */
        }
        /* APEX plateau – higher by 2% (was -25vh → now -27vh) */
        /* We keep the Y the same but slide X a bit for a fat apex */
        /* Slightly right of exact 27vw */
        51% {
            transform: translate(-23vw, -43vh); /* x = 29vw */
        }
        /* Exactly 27vw from the left at full height */
        53% {
            transform: translate(-25vw, -47vh); /* x = 27vw */
        }
        /* Slightly left of that, still at full height */
        55% {
            transform: translate(-29vw, -43vh); /* x = 25vw */
        }
        /* Descend and land further left –
       landing moved another 5vw left: 19vw → 14vw */
        62% {
            transform: translate(-34vw, 0); /* x = 14vw */
        }
        /* Drift away toward exit, still moving left */
        80% {
            transform: translate(-45vw, 0); /* x = 5vw */
        }
        /* Exit off-screen left */
        100% {
            transform: translate(-65vw, 0); /* x = -15vw */
        }
    }

}

@media (max-width: 480px) {
    .crescent-wrap[b-bl57i60wub] {
        top: -120px;
        left: 34vw;
    }

    .crescent-wrap[b-bl57i60wub]::before {
        bottom: 100%;
        height: 150vh;
    }

    .crescent[b-bl57i60wub] {
        width: 110px;
    }

    .cat[b-bl57i60wub] {
        width: 240px;
        top: 64vh;
    }
}





/* _content/DinguSite/Components/Pages/Projects.razor.rz.scp.css */
.projects-page[b-xz6k79tnd9] {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding: clamp(8.5rem, 20vh, 11rem) 1rem clamp(12rem, 24vh, 17rem);
    overflow: hidden;
}

[b-xz6k79tnd9] .projects-title {
    position: relative;
    z-index: 3;
    margin: 0;
    color: #fff;
    font-family: "Cabin Sketch", cursive;
}

.projects-subheader[b-xz6k79tnd9] {
    position: relative;
    z-index: 3;
    width: min(760px, calc(100% - 2rem));
    margin: 0.75rem auto 0;
    text-align: center;
}

.projects-intro[b-xz6k79tnd9] {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font: 750 clamp(0.95rem, 1.6vw, 1.1rem)/1.5 "Nunito", sans-serif;
}

.projects-demo-link[b-xz6k79tnd9] {
    display: inline-block;
    margin-top: 0.25rem;
    color: #f9e4ad;
    font: 850 clamp(0.95rem, 1.6vw, 1.1rem)/1.5 "Nunito", sans-serif;
    text-underline-offset: 0.2em;
}

.projects-demo-link:hover[b-xz6k79tnd9],
.projects-demo-link:focus-visible[b-xz6k79tnd9] {
    color: #fff0ba;
}

.orbit-container[b-xz6k79tnd9] {
    position: relative;
    z-index: 3;
    width: min(920px, 100%);
    height: clamp(410px, 54vh, 540px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-ring[b-xz6k79tnd9],
.orbit-ring-secondary[b-xz6k79tnd9] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.orbit-ring[b-xz6k79tnd9] {
    width: min(65vw, 600px);
    height: min(34vw, 320px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15), 0 0 40px rgba(255, 255, 255, 0.1);
}

.orbit-ring-secondary[b-xz6k79tnd9] {
    width: min(74vw, 680px);
    height: min(38vw, 350px);
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.sun-core[b-xz6k79tnd9] {
    width: clamp(140px, 13vw, 170px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #f7e3b2;
    box-shadow: 0 0 20px rgba(255, 240, 200, 0.8), 0 0 35px rgba(255, 240, 200, 0.6), 0 0 55px rgba(255, 240, 200, 0.4);
}

.sun-core span[b-xz6k79tnd9] {
    color: #000;
    font: 800 clamp(1.1rem, 1.5vw, 1.3rem)/1 "Nunito", sans-serif;
}

.planet[b-xz6k79tnd9] {
    position: absolute;
    z-index: 2;
    width: clamp(120px, 17vw, 220px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #f9e4ad;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.planet-pm[b-xz6k79tnd9] {
    transform: translate(clamp(-290px, -23vw, -105px), clamp(65px, 8vw, 105px));
}

.planet-crm[b-xz6k79tnd9] {
    transform: translate(clamp(105px, 23vw, 290px), clamp(-105px, -8vw, -65px));
}

.planet:hover[b-xz6k79tnd9],
.planet:focus-visible[b-xz6k79tnd9] {
    filter: brightness(1.06);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32), 0 0 28px rgba(249, 228, 173, 0.52);
}

.planet-pm:hover[b-xz6k79tnd9],
.planet-pm:focus-visible[b-xz6k79tnd9] {
    transform: translate(clamp(-290px, -23vw, -105px), clamp(65px, 8vw, 105px)) translateY(-4px);
}

.planet-crm:hover[b-xz6k79tnd9],
.planet-crm:focus-visible[b-xz6k79tnd9] {
    transform: translate(clamp(105px, 23vw, 290px), clamp(-105px, -8vw, -65px)) translateY(-4px);
}

.planet:focus-visible[b-xz6k79tnd9] {
    outline: 3px solid #f9e4ad;
    outline-offset: 5px;
}

.planet-icon[b-xz6k79tnd9] {
    width: 99%;
    height: 99%;
    object-fit: contain;
    pointer-events: none;
}

.planet-caption[b-xz6k79tnd9] {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 50%;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.4rem 0.35rem;
    border: 1px solid rgba(249, 228, 173, 0.42);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    transform: translateX(-50%);
    background: rgba(14, 25, 49, 0.86);
    color: rgba(255, 255, 255, 0.86);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
    font: 700 clamp(0.68rem, 1.2vw, 0.82rem)/1.2 "Nunito", sans-serif;
    text-align: center;
}

.planet-caption strong[b-xz6k79tnd9] {
    color: #f9e4ad;
    font-weight: 850;
}

.planet:hover .planet-caption[b-xz6k79tnd9],
.planet:focus-visible .planet-caption[b-xz6k79tnd9] {
    border-color: rgba(249, 228, 173, 0.86);
    background: rgba(22, 38, 70, 0.96);
}

.cat-telescope[b-xz6k79tnd9] {
    position: fixed;
    z-index: 4;
    right: clamp(0rem, 6vw, 6rem);
    bottom: clamp(2.5rem, 7vh, 6rem);
    width: clamp(190px, 22vw, 290px);
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
}

.moon-cliff[b-xz6k79tnd9] {
    position: fixed;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

@media (max-width: 700px) {
    .projects-page[b-xz6k79tnd9] {
        padding: 8rem 0.75rem 12rem;
    }

    .orbit-container[b-xz6k79tnd9] {
        height: 500px;
    }

    .orbit-ring[b-xz6k79tnd9] {
        width: 88vw;
        height: 54vw;
    }

    .orbit-ring-secondary[b-xz6k79tnd9] {
        width: 96vw;
        height: 62vw;
    }

    .planet[b-xz6k79tnd9] {
        width: clamp(108px, 31vw, 132px);
    }

    .planet-pm[b-xz6k79tnd9] {
        --planet-x: calc(-1 * clamp(100px, 30vw, 132px));
        --planet-y: clamp(86px, 21vw, 92px);
        transform: translate(var(--planet-x), var(--planet-y));
    }

    .planet-crm[b-xz6k79tnd9] {
        --planet-x: clamp(100px, 30vw, 132px);
        --planet-y: calc(-1 * clamp(86px, 21vw, 92px));
        transform: translate(var(--planet-x), var(--planet-y));
    }

    .planet-pm:hover[b-xz6k79tnd9],
    .planet-pm:focus-visible[b-xz6k79tnd9],
    .planet-crm:hover[b-xz6k79tnd9],
    .planet-crm:focus-visible[b-xz6k79tnd9] {
        transform: translate(var(--planet-x), var(--planet-y)) translateY(-4px);
    }

    .cat-telescope[b-xz6k79tnd9] {
        right: -0.5rem;
        bottom: 2.5rem;
        width: clamp(170px, 49vw, 205px);
    }

    .moon-cliff[b-xz6k79tnd9] {
        left: -12vw;
        right: auto;
        width: 125%;
    }
}

@media (max-width: 360px) {
    .cat-telescope[b-xz6k79tnd9] {
        right: -2.5rem;
        bottom: 1.5rem;
        width: clamp(140px, 45vw, 160px);
    }
}

/* The desktop product orbit is a single composed scene. Removing the unused
   bottom padding keeps it to one viewport and prevents captions from moving
   across the fixed cliff artwork. */
@media (min-width: 1024px) and (min-height: 700px) {
    .projects-page[b-xz6k79tnd9] {
        box-sizing: border-box;
        height: 100dvh;
        min-height: 100dvh;
        padding-bottom: 0;
        overflow: hidden;
    }

    .orbit-container[b-xz6k79tnd9] {
        z-index: 1;
        transform: translateY(-1.5rem);
    }

    .moon-cliff[b-xz6k79tnd9] {
        z-index: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .planet[b-xz6k79tnd9] {
        transition: none;
    }
}
/* _content/DinguSite/Components/Pages/Sales.razor.rz.scp.css */


/* full-bleed container that covers the whole viewport */
.home-stage[b-vjpmtbojrw] {
    --rocket-flight-delay: 0.8s;
    --rocket-flight-dur: 3.5s;
    --rocket-bob-delay: calc(var(--rocket-flight-delay) + var(--rocket-flight-dur));
    --rocket-path-left: 15vw;
    --rocket-path-bottom: 15vh;
    --rocket-path-width: 25vw;
    --rocket-start-x: 60vw;
    --rocket-start-y: 8vh;
    --rocket-start-rot: 12deg;
    --rocket-end-rot: 0deg;
    position: fixed; /* key: ignore layout/content padding */
    inset: 0; /* top/right/bottom/left = 0 */
    overflow: hidden;
    z-index: 0; /* sidebar/nav will remain above if they have higher z-index */
}

/* --- layout for the tagline over the stage --- */

.tagline[b-vjpmtbojrw] {
    position: absolute;
    left: 90%; /* move it back toward the rocket's flight path */
    bottom: 20vh; /* lift slightly above final rocket position */
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    width: 60vw;
    max-width: 95vw;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.35), 0 0 16px rgba(255, 255, 255, 0.25);
}

[b-vjpmtbojrw] .sub-textHome {
    margin: 0;
    color: #fff;
    font-family: cabin sketch;
    font-size: 4vh;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
    overflow: hidden; /* so the mask clip is tidy */
}


/* Flight container (position this like your old .cat-rocket) */
.cat-rocket-path[b-vjpmtbojrw] {
    position: absolute;
    bottom: var(--rocket-path-bottom);
    left: var(--rocket-path-left);
    width: var(--rocket-path-width);
    height: auto;
    will-change: transform, opacity;
    transform: translate3d(var(--rocket-start-x), var(--rocket-start-y), 0) rotate(var(--rocket-start-rot));
    opacity: 0;
    backface-visibility: hidden;
    z-index: 1;
}

/* The image itself only does the gentle bob (no X movement!) */
.cat-rocket[b-vjpmtbojrw] {
    display: block;
    width: 100%;
    height: auto;
    transform: translate3d(0,0,0); /* baseline so bob is purely relative */
    will-change: transform;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
}

/* Run the two animations on different elements */
.cat-rocket--fly[b-vjpmtbojrw] {
    animation: rocket-fly-in-b-vjpmtbojrw var(--rocket-flight-dur) cubic-bezier(.22,.9,.24,1) var(--rocket-flight-delay) both;
}

.cat-rocket[b-vjpmtbojrw] {
    animation: rocket-bob-b-vjpmtbojrw 2.2s ease-in-out var(--rocket-bob-delay) infinite alternate;
}

/* Flight path */
@keyframes rocket-fly-in-b-vjpmtbojrw {
    0% {
        transform: translate3d(var(--rocket-start-x), var(--rocket-start-y), 0) rotate(var(--rocket-start-rot));
        opacity: 0;
        animation-timing-function: cubic-bezier(.18,.85,.28,.99);
    }

    15% {
        opacity: 1;
    }
    /*60% {
        transform: translate3d(8vw, -2vh, 0) rotate(2deg);
        animation-timing-function: cubic-bezier(.33,1,.68,1);
    }*/

    100% {
        transform: translate3d(0,0,0) rotate(var(--rocket-end-rot));
        opacity: 1;
    }
}

/* Extra-smooth bob (sinusoid-ish) */
@keyframes rocket-bob-b-vjpmtbojrw {
    0% {
        transform: translate3d(0, 0vh, 0);
    }

    25% {
        transform: translate3d(0, -0.35vh,0);
    }

    50% {
        transform: translate3d(0, -0.7vh, 0);
    }

    75% {
        transform: translate3d(0, -0.35vh,0);
    }

    100% {
        transform: translate3d(0, 0vh, 0);
    }
}

/* Keep your text mask but make sure it doesn’t perturb layout/compositing */
.reveal-mask[b-vjpmtbojrw] {
    display: inline-block;
    -webkit-mask-image: linear-gradient(90deg, #000 0 0);
    mask-image: linear-gradient(90deg, #000 0 0);
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0;
    contain: paint; /* isolate painting */
    will-change: -webkit-mask-size, mask-size, opacity;
    animation: text-wipe-reveal-b-vjpmtbojrw 1.6s ease-out 2.8s forwards;
}

@keyframes text-wipe-reveal-b-vjpmtbojrw {
    0% {
        -webkit-mask-size: 0% 100%;
        mask-size: 0% 100%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        opacity: 1;
    }
}

[b-vjpmtbojrw] .dingu {
    display: inline-block;
    color: #fff;
    font-family: 'Cabin Sketch';
    font-size: 5rem; /* slightly larger than the 4vh base */
    /* font-weight: regular;*/
    text-shadow: 0 2px 30px rgba(0,0,0,0.7);
    vertical-align: baseline;
    opacity: 1;
}


/* ≥ 480px — small phones / large phones */
@media (min-width: 0px) {

    [b-vjpmtbojrw] .tagline-stack {
        flex-direction: column !important; /* Force vertical layout */
        align-items: center !important; /* Center the text */
        justify-content: center;
        gap: 0.5rem; /* optional: spacing between lines */
    }

    .tagline[b-vjpmtbojrw] {
        left: 50%;
        bottom: 22vh;
        width: 60vw;
        max-width: 75vw;
    }

    [b-vjpmtbojrw] .sub-textHome {
        font-size: 3vh; /* a bit smaller on short viewports */
    }

    [b-vjpmtbojrw] .dingu {
        font-size: 6rem;
        margin-top: -2vh;
    }

    .cat-rocket[b-vjpmtbojrw] {
        width: 275px;
        height: auto;
    }

    .home-stage[b-vjpmtbojrw] {
        /* pull the rocket in a bit on small screens */
        --rocket-path-left: 20vw;
        --rocket-path-bottom: 50vh;
        --rocket-path-width: 35vw;
        --rocket-start-x: 40vw;
        --rocket-start-y: 6vh;
    }
}

/* ≥ 768px — tablets / small landscape */
@media (min-width: 768px) {
    .tagline[b-vjpmtbojrw] {
        left: 55%;
        bottom: 16vh;
        width: 70vw;
        max-width: 75vw;
    }

    [b-vjpmtbojrw] .sub-textHome {
        font-size: 4vh;
    }

    [b-vjpmtbojrw] .dingu {
        font-size: 7rem;
    }

    .home-stage[b-vjpmtbojrw] {
        --rocket-path-left: 30vw;
        --rocket-path-bottom: 40vh;
        --rocket-path-width: 28vw;
        --rocket-start-x: 45vw;
        --rocket-start-y: 7vh;
    }

    .cat-rocket[b-vjpmtbojrw] {
        width: 350px;
        height: auto;
    }
}


/* ≥ 1300px — desktops / large laptops (your “hero” layout) */
@media (min-width: 1300px) {
    [b-vjpmtbojrw] .sub-textHome {
        font-size: 3vh;
    }

    [b-vjpmtbojrw] .dingu {
        font-size: 6rem;
    }

    [b-vjpmtbojrw] .tagline-stack {
        flex-direction: row !important; /* Force vertical layout */
        align-items: center !important; /* Center the text */
        justify-content: center;
        gap: 0.5rem; /* optional: spacing between lines */
    }

    .home-stage[b-vjpmtbojrw] {
        /* basically your original values */
        --rocket-path-left: 15vw;
        --rocket-path-bottom: 35vh;
        --rocket-path-width: 25vw;
        --rocket-start-x: 60vw;
        --rocket-start-y: 8vh;
        --rocket-start-rot: 12deg;
        --rocket-end-rot: 0deg;
    }

    .tagline[b-vjpmtbojrw] {
        position: absolute; /* important: anchor to hero-stage */
        left: calc(var(--rocket-path-left) + 25vw );
        bottom: 35vh;
        transform: none; /* remove -50% centering */
        width: auto;
        max-width: none;
        text-align: left;
        z-index: 2;
    }

    .cat-rocket[b-vjpmtbojrw] {
        width: 350px;
        height: auto;
    }
}

@media (min-width: 1920px) {
    /*.tagline {
        left: 55%;
        bottom:30vh;
        width: 75vw;
        max-width: 90vw;
    }*/

    [b-vjpmtbojrw] .sub-textHome {
        font-size: 5vh;
    }

    [b-vjpmtbojrw] .dingu {
        font-size: 9rem; /* your original large size */
    }

    .home-stage[b-vjpmtbojrw] {
        /* basically your original values */
        --rocket-path-left: 10vw;
        --rocket-path-bottom: 30vh;
        --rocket-path-width: 25vw;
        --rocket-start-x: 60vw;
        --rocket-start-y: 8vh;
        --rocket-start-rot: 12deg;
        --rocket-end-rot: 0deg;
    }

    .tagline[b-vjpmtbojrw] {
        position: absolute;
        left: calc(var(--rocket-path-left) + 20vw );
        bottom: 25vh;
        transform: none;
        width: auto;
        max-width: none;
        text-align: left;
    }

    .cat-rocket[b-vjpmtbojrw] {
        width: 400px;
        height: auto;
    }
}

/*subhero section design*/

.hero-subtitle[b-vjpmtbojrw] {
    margin-top: 6rem;
    color: #F9E4AD;
    font-size: 2rem;
    font-family: nunito;
    font-weight: bold;
    opacity: 0.85;
    text-align: center;
    width: min(1300px, 100%);
    margin: 0 auto 1.5rem auto;
}

.hero-subtitle-secondary[b-vjpmtbojrw] {
    margin-top: 6rem;
    color: white;
    font-size: 1.1rem;
    font-family: nunito;
    font-weight: bold;
    opacity: 0.85;
    text-align: center;
    width: min(1300px, 100%);
    margin: 0 auto 1.5rem auto;
}

.hero-cta[b-vjpmtbojrw] {
    display: flex;
    justify-content: center;
    margin-top: 0;
}

    .hero-cta .primary-btn[b-vjpmtbojrw] {
        margin-top: 1rem;
        padding: 14px 28px;
        font-family: "Nunito";
        font-weight: 800;
        font-size: 20px;
        border-radius: 12px;
        border: 3px solid #F9E4AD;
        width: min(420px, 90%);
        background: transparent;
        color: #F9E4AD;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .hero-cta .primary-btn:hover[b-vjpmtbojrw] {
            background: #e5d3a3;
            color: #0b1b3a;
        }

@media(max-width: 700px) {

    .hero-subtitle[b-vjpmtbojrw] {
        margin-top: 6rem;
        color: #F9E4AD;
        font-size: 1.5rem;
        font-family: nunito;
        font-weight: bold;
        opacity: 0.85;
        text-align: center;
        width: min(1300px, 90%);
        margin: 0 auto 1.5rem auto;
    }

    .hero-subtitle-secondary[b-vjpmtbojrw] {
        margin-top: 6rem;
        color: white;
        font-size: 1rem;
        font-family: nunito;
        font-weight: bold;
        opacity: 0.85;
        text-align: center;
        width: min(1300px, 90%);
        margin: 0 auto 1.5rem auto;
    }
}

 /*mission control section*/

    .home-stage[b-vjpmtbojrw] {
        position: relative;
        min-height: clamp(44rem, 92vh, 58rem);
        min-height: clamp(44rem, 92svh, 58rem);
        width: 100%;
        overflow: hidden;
        margin-bottom: -8rem;
    }

    .mission-scroll[b-vjpmtbojrw] {
        position: relative;
        min-height: auto;
        padding: 2rem 1.5rem 4rem;
        display: flex;
        justify-content: center;
        margin-top: 6rem;
        z-index: 2;
    }

    .mission-inner[b-vjpmtbojrw] {
        width: min(1300px, 100%);
        background: rgba(10, 18, 40, 0.30);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(249, 228, 173, 0.18);
        border-radius: 32px;
        padding: 3rem 2.5rem 3.5rem;
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
    }

    .mission-title[b-vjpmtbojrw],
    .mission-subtitle[b-vjpmtbojrw] {
        text-align: center;
    }

        .mission-title span[b-vjpmtbojrw] {
            color: white !important;
            font-size: clamp(2rem, 4vw, 3.5rem);
            font-family: "Nunito";
            font-weight: 800;
            line-height: 1.15;
            display: block;
            margin-bottom: 0.4rem;
        }

        .mission-subtitle span[b-vjpmtbojrw] {
            margin-top: 1rem;
            color: #e6cf8f !important;
            font-family: "Nunito";
            font-size: clamp(1.3rem, 2vw, 2rem);
            display: block;
            margin-bottom: 2.2rem;
        }

    .mission-steps[b-vjpmtbojrw] {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        gap: 1.75rem;
        align-items: center;
        margin-top: 0.4rem;
    }

    .mission-arrow[b-vjpmtbojrw] {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #e6cf8f;
        opacity: 0.9;
    }

        .mission-arrow .mud-icon-root[b-vjpmtbojrw] {
            font-size: 1.6rem;
        }

    .mission-card[b-vjpmtbojrw] {
        background: rgba(214, 196, 154, 0.96);
        color: #111;
        border-radius: 24px;
        padding: 2.25rem 1.5rem;
        box-shadow: 0 10px 24px rgba(0,0,0,0.18);
        text-align: center;
        margin-top: 1.5rem;
    }

        .mission-card h3[b-vjpmtbojrw] {
            margin: 0 0 0.75rem;
            font-size: 1.8rem;
            font-family: "nunito";
            font-weight: 800;
        }

        .mission-card p[b-vjpmtbojrw] {
            margin: 0;
            font-size: 1rem;
            font-family: "Nunito";
            font-weight: 700;
            line-height: 1.65;
        }

    .mission-icon[b-vjpmtbojrw] {
        font-size: 2rem;
        margin-bottom: 0.9rem;
    }

    .mission-cta[b-vjpmtbojrw] {
        margin-top: 2.5rem;
        text-align: center;
    }

    [b-vjpmtbojrw] .mission-button {
        width: min(420px, 90%);
        height: 54px;
        color: #F9E4AD;
        opacity: 0.9;
        border: solid;
        border-radius: 12px;
        font-family: nunito;
        font-weight: 800;
        font-size: 1.2rem;
        text-transform: none;
    }

    .mission-button:hover[b-vjpmtbojrw] {
        background: rgba(230, 207, 143, 0.08) !important;
        border-color: rgba(230, 207, 143, 1) !important;
    }

    .mission-button:focus[b-vjpmtbojrw],
    .mission-button:active[b-vjpmtbojrw] {
        color: #e6cf8f !important;
        border: 2px solid rgba(230, 207, 143, 0.9) !important;
        background: transparent !important;
    }

    .mission-button:focus-visible[b-vjpmtbojrw] {
        outline: none !important;
        box-shadow: none !important;
    }

    /* CTA */
    .mission-cta[b-vjpmtbojrw] {
        display: flex;
        justify-content: center;
        margin-top: 0;
    }

        .mission-cta .primary-btn[b-vjpmtbojrw] {
            margin-top: 1rem;
            padding: 14px 28px;
            font-family: "Nunito";
            font-weight: 800;
            font-size: 20px;
            border-radius: 12px;
            border: 3px solid #F9E4AD;
            width: min(420px, 90%);
            background: transparent;
            color: #F9E4AD;
            cursor: pointer;
            transition: all 0.2s ease;
        }

            .mission-cta .primary-btn:hover[b-vjpmtbojrw] {
                background: #e5d3a3;
                color: #0b1b3a;
            }


    @keyframes float-b-vjpmtbojrw {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-6px);
        }

        100% {
            transform: translateY(0px);
        }
    }

    .float[b-vjpmtbojrw] {
        animation: float-b-vjpmtbojrw 6s ease-in-out infinite;
    }

    .float-slow[b-vjpmtbojrw] {
        animation: float-b-vjpmtbojrw 10s ease-in-out infinite;
    }

    @media (max-width: 1350px) {
        .mission-steps[b-vjpmtbojrw] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.5rem;
        }

        .mission-arrow[b-vjpmtbojrw] {
            display: none;
        }
    }

    @media (max-width: 700px) {

        .mission-scroll[b-vjpmtbojrw] {
            margin-top: 10rem;
            padding: 1.5rem 1rem 3rem;
        }

        .mission-inner[b-vjpmtbojrw] {
            margin-top: -6rem;
            padding: 2rem 1.25rem 2.5rem;
        }

        .mission-steps[b-vjpmtbojrw] {
            grid-template-columns: 1fr;
            gap: 1.25rem;
        }

        .mission-arrow[b-vjpmtbojrw] {
            display: none;
        }

        .mission-card[b-vjpmtbojrw] {
            text-align: center;
            margin-top: 0.5rem;
            padding: 2rem 1.25rem;
        }
    }


    /*Work Demo Section*/

    .example-scroll[b-vjpmtbojrw] {
        position: relative;
        min-height: auto;
        padding: 2rem 1.5rem 4rem;
        display: flex;
        justify-content: center;
        margin-top: 2rem;
        z-index: 201;
    }

.example-inner[b-vjpmtbojrw] {
    width: min(1300px, 100%);
    background: rgba(10, 18, 40, 0.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(249, 228, 173, 0.18);
    border-radius: 32px;
    padding: 3rem 2.5rem 3.5rem;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
    overflow: visible;
}

    .demo-header span[b-vjpmtbojrw] {
        color: white !important;
        font-size: clamp(2rem, 4vw, 3.5rem);
        font-family: "Nunito";
        font-weight: 800;
        line-height: 1.15;
        display: block;
        margin-bottom: 0.4rem;
    }

    .example-subtitle span[b-vjpmtbojrw] {
        margin-top: 1rem;
        color: #e6cf8f !important;
        font-family: "Nunito";
        font-size: clamp(1.3rem, 2vw, 2rem);
        display: block;
        margin-bottom: 2.2rem;
    }

.case-study-grid[b-vjpmtbojrw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
    margin-top: 3rem;
}

.case-study-card[b-vjpmtbojrw] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.65rem 1.45rem 1.5rem;
    border: 1px solid rgba(249, 228, 173, 0.2);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
    box-shadow: 0 14px 30px rgba(0,0,0,0.16);
    color: white;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.case-study-card[b-vjpmtbojrw]::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -95px;
    top: -95px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 228, 173, 0.18), transparent 68%);
    pointer-events: none;
}

.case-study-card:hover[b-vjpmtbojrw],
.case-study-card:focus-visible[b-vjpmtbojrw] {
    transform: translateY(-6px);
    border-color: rgba(249, 228, 173, 0.55);
    box-shadow: 0 22px 42px rgba(0,0,0,0.28), 0 0 28px rgba(249, 228, 173, 0.08);
    color: white;
}

.case-study-card:focus-visible[b-vjpmtbojrw] {
    outline: 3px solid #f9e4ad;
    outline-offset: 4px;
}

.case-study-orbit[b-vjpmtbojrw] {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(249, 228, 173, 0.65);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(249, 228, 173, 0.05), 0 0 24px rgba(249, 228, 173, 0.16);
}

.case-study-orbit span[b-vjpmtbojrw] {
    color: #f9e4ad;
    font: 800 0.9rem/1 "Nunito";
    letter-spacing: 0.08em;
}

.case-study-label[b-vjpmtbojrw] {
    margin: 0 0 0.6rem;
    color: #f9e4ad;
    font: 800 0.76rem/1.2 "Nunito";
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-study-card h3[b-vjpmtbojrw] {
    margin: 0 0 0.8rem;
    color: white;
    font: 800 clamp(1.35rem, 2vw, 1.75rem)/1.2 "Nunito";
}

.case-study-summary[b-vjpmtbojrw] {
    margin: 0 0 1.25rem;
    color: rgba(255,255,255,0.78);
    font: 700 1rem/1.65 "Nunito";
}

.case-study-proof[b-vjpmtbojrw] {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.case-study-proof strong[b-vjpmtbojrw] {
    color: #f9e4ad;
    font: 800 1.05rem/1.3 "Nunito";
}

.case-study-proof span[b-vjpmtbojrw] {
    color: rgba(255,255,255,0.66);
    font: 700 0.88rem/1.45 "Nunito";
}

.case-study-link[b-vjpmtbojrw] {
    margin-top: 1.2rem;
    color: white;
    font: 800 0.92rem/1.3 "Nunito";
}

.case-study-link span[b-vjpmtbojrw] {
    display: inline-block;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

.case-study-card:hover .case-study-link span[b-vjpmtbojrw],
.case-study-card:focus-visible .case-study-link span[b-vjpmtbojrw] {
    transform: translateX(4px);
}

/* Shared conversion treatment for every Sales CTA. */
.sales-cta-group[b-vjpmtbojrw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(460px, 100%);
}

.hero-cta .primary-btn[b-vjpmtbojrw],
.mission-cta .primary-btn[b-vjpmtbojrw] {
    position: relative;
    margin-top: 1rem;
    width: min(420px, 90%);
    padding: 14px 28px;
    border: 3px solid #f9e4ad;
    border-radius: 12px;
    background: rgba(249, 228, 173, 0.02);
    color: #f9e4ad;
    box-shadow: 0 0 0 rgba(249, 228, 173, 0), inset 0 0 0 rgba(249, 228, 173, 0);
    font: 800 20px/1.25 "Nunito", sans-serif;
    cursor: pointer;
    transition: transform 0.22s ease, color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.sales-cta-book[b-vjpmtbojrw] {
    display: inline-flex;
    gap: 0.32rem;
    margin-top: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font: 750 0.95rem/1.4 "Nunito", sans-serif;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.sales-cta-book span[b-vjpmtbojrw] {
    color: #f9e4ad;
    text-decoration: underline;
    text-decoration-color: rgba(249, 228, 173, 0.5);
    text-underline-offset: 0.24rem;
}

.sales-cta-book:hover[b-vjpmtbojrw],
.sales-cta-book:focus-visible[b-vjpmtbojrw] {
    color: #fff;
    text-shadow: 0 0 14px rgba(249, 228, 173, 0.34);
}

.sales-cta-book:hover span[b-vjpmtbojrw],
.sales-cta-book:focus-visible span[b-vjpmtbojrw] {
    color: #fff2c9;
    text-decoration-color: #fff2c9;
}

.sales-cta-book:focus-visible[b-vjpmtbojrw] {
    outline: 2px solid #f9e4ad;
    outline-offset: 5px;
    border-radius: 4px;
}

.hero-cta .primary-btn:hover[b-vjpmtbojrw],
.mission-cta .primary-btn:hover[b-vjpmtbojrw],
.hero-cta .primary-btn:focus-visible[b-vjpmtbojrw],
.mission-cta .primary-btn:focus-visible[b-vjpmtbojrw] {
    transform: translateY(-3px);
    border-color: #fff2c9;
    background: #f9e4ad;
    color: #0b1b3a;
    box-shadow: 0 0 0 4px rgba(249, 228, 173, 0.1), 0 0 20px rgba(249, 228, 173, 0.52), 0 0 48px rgba(249, 228, 173, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    filter: brightness(1.05);
}

.hero-cta .primary-btn:focus-visible[b-vjpmtbojrw],
.mission-cta .primary-btn:focus-visible[b-vjpmtbojrw] {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
}

.hero-cta .primary-btn:active[b-vjpmtbojrw],
.mission-cta .primary-btn:active[b-vjpmtbojrw] {
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(249, 228, 173, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .hero-cta .primary-btn[b-vjpmtbojrw],
    .mission-cta .primary-btn[b-vjpmtbojrw] {
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .hero-cta .primary-btn:hover[b-vjpmtbojrw],
    .mission-cta .primary-btn:hover[b-vjpmtbojrw],
    .hero-cta .primary-btn:focus-visible[b-vjpmtbojrw],
    .mission-cta .primary-btn:focus-visible[b-vjpmtbojrw] {
        transform: none;
    }
}

.case-study-note[b-vjpmtbojrw] {
    width: min(760px, 100%);
    margin: 2rem auto 0;
    color: rgba(255,255,255,0.58);
    font: 700 0.88rem/1.6 "Nunito";
    text-align: center;
}

@media (max-width: 700px) {
    .example-scroll[b-vjpmtbojrw] {
        margin-top: 6rem;
        padding: 1.5rem 1rem 3rem;
    }

    .example-inner[b-vjpmtbojrw] {
        margin-top: -6rem;
        padding: 2rem 1.25rem 2.5rem;
    }

    .case-study-grid[b-vjpmtbojrw] {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 2rem;
    }

    .case-study-card[b-vjpmtbojrw] {
        padding: 1.4rem 1.25rem;
    }
}

/* Keep Luna and the hero message together as one responsive flight lockup. */
.home-stage[b-vjpmtbojrw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: clamp(0.75rem, 4vw, 4rem);
}

.hero-flight-lockup[b-vjpmtbojrw] {
    display: grid;
    grid-template-columns: clamp(170px, 31vw, 410px) max-content;
    align-items: center;
    width: max-content;
    max-width: 94vw;
    margin: 0 auto;
}

.hero-flight-lockup .cat-rocket-path[b-vjpmtbojrw] {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
}

.hero-flight-lockup .cat-rocket[b-vjpmtbojrw] {
    width: 100%;
}

.hero-flight-lockup .tagline[b-vjpmtbojrw] {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin-left: clamp(-1.25rem, -1vw, 0rem);
    transform: translateY(18%);
    text-align: left;
}

.hero-flight-lockup[b-vjpmtbojrw]  .tagline-stack {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    gap: clamp(0.45rem, 1vw, 1rem);
}

.hero-flight-lockup[b-vjpmtbojrw]  .sub-textHome {
    font-size: clamp(1.15rem, 2.6vw, 2.25rem);
    line-height: 1.05;
    white-space: nowrap;
}

.hero-flight-lockup[b-vjpmtbojrw]  .tagline-kicker {
    font-family: "Nunito", sans-serif;
    font-weight: 750;
    letter-spacing: 0.01em;
}

.hero-flight-lockup[b-vjpmtbojrw]  .dingu {
    margin-top: 0;
    font-size: clamp(3.2rem, 8vw, 7.5rem);
    line-height: 0.95;
}

@media (max-width: 899.98px) {
    .home-stage[b-vjpmtbojrw] {
        min-height: clamp(38rem, 82vh, 52rem);
        min-height: clamp(38rem, 82svh, 52rem);
    }
}

@media (max-width: 600px) {
    .home-stage[b-vjpmtbojrw] {
        min-height: clamp(34rem, 78vh, 46rem);
        min-height: clamp(34rem, 78svh, 46rem);
        padding-inline: 0.5rem;
    }

    .hero-flight-lockup[b-vjpmtbojrw] {
        grid-template-columns: minmax(120px, 33vw) minmax(0, 1fr);
        width: 100%;
    }

    .hero-flight-lockup .tagline[b-vjpmtbojrw] {
        margin-left: 0.2rem;
        transform: translateY(16%);
    }

    .hero-flight-lockup[b-vjpmtbojrw]  .tagline-stack {
        gap: clamp(0.35rem, 1.5vw, 0.5rem) !important;
    }

    .hero-flight-lockup[b-vjpmtbojrw]  .sub-textHome {
        font-size: clamp(0.72rem, 3.1vw, 0.92rem);
    }

    .hero-flight-lockup[b-vjpmtbojrw]  .tagline-kicker {
        font-size: clamp(0.95rem, 4vw, 1.15rem);
    }

    .hero-flight-lockup[b-vjpmtbojrw]  .dingu {
        font-size: clamp(1.95rem, 8.5vw, 2.6rem);
    }
}

@media (max-width: 350px) {
    .hero-flight-lockup[b-vjpmtbojrw] {
        grid-template-columns: minmax(100px, 32vw) minmax(0, 1fr);
    }

    .hero-flight-lockup .tagline[b-vjpmtbojrw] {
        margin-left: 0.1rem;
    }

    .hero-flight-lockup[b-vjpmtbojrw]  .sub-textHome {
        font-size: 0.7rem;
    }

    .hero-flight-lockup[b-vjpmtbojrw]  .tagline-kicker {
        font-size: 0.82rem;
    }

    .hero-flight-lockup[b-vjpmtbojrw]  .dingu {
        font-size: 1.65rem;
    }
}
    
/* _content/DinguSite/Components/Pages/Solutions.razor.rz.scp.css */
:root[b-c1aegg3zu4] {
    --space1: #0d0b26;
    --space2: #1b1752;
}

/* Stage + layout */
.solutions-stage[b-c1aegg3zu4] {
    position:relative;
    inset: 0;
    overflow: auto;
    --solutions-card-width: clamp(260px, 26vw, 430px);
    --solutions-card-padding: 20px;
    --solutions-card-gap: clamp(2rem, 4vw, 5rem);
    --solutions-notch-w: clamp(34ch, 50vw, 800px);
    --solutions-notch-h: 28px;
    --solutions-ground-drop: 0px;
}

.sky[b-c1aegg3zu4] {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(to bottom, #190C50 25%, #1C0A61 40%, #143342 100%);
}

.content-wrap[b-c1aegg3zu4] {
    position: relative;
    z-index: 10;
    padding-block: 6dvh;
}

.page[b-c1aegg3zu4],
main[b-c1aegg3zu4],
article[b-c1aegg3zu4] {
    background: transparent;
}

[b-c1aegg3zu4] .solutions-page {
    text-align: center;
    margin-top: 20vh;
}

[b-c1aegg3zu4] .solutions-tagline {
    position: static;
    margin: 0 0 2rem 0;
    padding: 0;
    font-size: clamp(1.6rem, 2.4vw, 2.4rem) !important;
    line-height: 1.25;
    color: #F9E4AD;
    font-family: "nunito";
    font-weight: 400;
    text-align: center;
}


.solutions-inner[b-c1aegg3zu4] {
    background: rgba(10, 18, 40, 0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(249, 228, 173, 0.18);
    border-radius: 32px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
    width: min(92%, 1180px);
    margin: 2rem auto 0 auto;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    position:relative;
    z-index:10;
}



/* Card rows */
.solutions-card-row[b-c1aegg3zu4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--solutions-card-gap);
}

[b-c1aegg3zu4] .service-card {
    padding: 20px;
    border-radius: 24px;
    background: #F9E4AD;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    opacity: .85;
    width: 100%;
    max-width: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-card[b-c1aegg3zu4] {
    border-radius: 24px;
}

[b-c1aegg3zu4] .card-body {
    font-size: clamp(16px, 1.05vw, 20px);
    line-height: 1.8;
    letter-spacing: 1px;
    -webkit-text-stroke: 1px black;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-wrap: pretty;
    margin: 0;
    font-family: "nunito";
    color: black;
    font-weight: 500;
    z-index: 1;
}

[b-c1aegg3zu4] .outline {
    color: black;
    -webkit-text-stroke: 2px black;
    text-stroke: 1px black;
    font-weight: 500;
    font-family: "nunito";
}

.service-list-wrap[b-c1aegg3zu4] {
    display: flex;
    justify-content: flex-start;
    padding-left: 1.5vw;
}

.service-list[b-c1aegg3zu4] {
    margin: 0;
    padding-left: 1.25rem;
    /* Typography */
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    font-weight: 300;
    color: #000000;
    /* iPad / Safari hyphen control */
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
    /* Alignment safety */
    text-align: left;
}

.mr-10[b-c1aegg3zu4] { margin-right: 0 !important; }

/* Fixed assets */
.cat-sitting[b-c1aegg3zu4] {
    position: fixed;
    bottom: calc(6vh + var(--solutions-ground-drop));
    right: 5vw;
    width: clamp(225px, 20vw, 250px);
    height: auto;
    z-index: 20;
    pointer-events: none;
}

.saturn[b-c1aegg3zu4] {
    position: absolute;
    top: 1vh;
    right: 20vw;
    width: clamp(75px, 20vw, 150px);
    height: auto;
}

.moon-edge[b-c1aegg3zu4] {
    position: fixed;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: var(--solutions-ground-drop);
    width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: cover;
    object-position: bottom;
    pointer-events: none;
}

/* Border and notch under tagline */
.outer[b-c1aegg3zu4] {
    --border: #f6f1dc;
    --radius: 30px;
    --notch-w: var(--solutions-notch-w);
    --notch-h: var(--solutions-notch-h);
    position: relative;
    border-radius: var(--radius);
    padding: clamp(2.5rem, 6vw, 3rem) clamp(1.5rem, 5vw, 2rem) 1.5rem;
    z-index: 2;
}

.outer[b-c1aegg3zu4]::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 12.5%;
    width: 75%;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--border);
    clip-path: polygon(
        0 0,
        calc(50% - var(--notch-w)/2) 0,
        calc(50% - var(--notch-w)/2) var(--notch-h),
        calc(50% + var(--notch-w)/2) var(--notch-h),
        calc(50% + var(--notch-w)/2) 0,
        100% 0,
        100% 100%,
        0 100%
    );
    pointer-events: none;
}
@media (max-width: 350px) {
    [b-c1aegg3zu4] .solutions-title {
        font-size: clamp(1.8rem, 4vw, 2.4rem) !important;
        padding-bottom:0;
    }
}


    /* Mobile: single column, no outline */
    @media (max-width: 767.98px) {
        .solutions-stage[b-c1aegg3zu4] {
            --solutions-card-width: min(92vw, 480px);
            --solutions-card-gap: clamp(1.5rem, 6vw, 3rem);
            --solutions-card-padding: clamp(22px, 5vw, 28px);
            --solutions-notch-w: 0px;
            --solutions-ground-drop: 0vh;
        }

        [b-c1aegg3zu4] .solutions-tagline {
            position: static;
            transform: none;
            /*margin: 0.5rem auto 0;*/
        }

        .solutions-card-row[b-c1aegg3zu4] {
            flex-direction: column;
            align-items: center;
        }

        [b-c1aegg3zu4] .solutions-page {
            text-align: center;
            margin-top: 10vh;
        }

        [b-c1aegg3zu4] .service-card {
            min-height: 0px;
        }

        .outer[b-c1aegg3zu4]::before {
            display: none;
        }

        .cat-sitting[b-c1aegg3zu4] {
            bottom: calc(0vh + var(--solutions-ground-drop));
            right: -2vw;
            width: clamp(160px, 20vw, 320px);
        }
    }

    /* Tablet */
    @media (min-width: 768px) and (max-width: 1023.98px) {
        .solutions-stage[b-c1aegg3zu4] {
            --solutions-card-width: min(34vw, 460px);
            --solutions-card-gap: clamp(2rem, 4vw, 4.5rem);
            --solutions-notch-w: clamp(34ch, 60vw, 520px);
            --solutions-ground-drop: 0px;
        }

        .solutions-card-row[b-c1aegg3zu4] {
            flex-wrap: wrap;
        }

        /*::deep .service-card {
            min-height: 340px;
        }*/

        .outer[b-c1aegg3zu4]::before {
            display: none;
        }

        .cat-sitting[b-c1aegg3zu4] {
            bottom: calc(3vh + var(--solutions-ground-drop));
            right: 0vw;
        }
    }

    /* Desktop */
    @media (min-width: 1024px) {
        .solutions-stage[b-c1aegg3zu4] {
            --solutions-card-width: clamp(320px, 26vw, 430px);
            --solutions-card-gap: clamp(2.5rem, 4vw, 5rem);
            --solutions-notch-w: clamp(36ch, 56vw, 560px);
            --solutions-ground-drop: 0px;
        }

        .solutions-page[b-c1aegg3zu4] {
            margin-top: 16vh !important;
        }

        .cat-sitting[b-c1aegg3zu4] {
            bottom: calc(4vh + var(--solutions-ground-drop));
            right: 3vw;
        }
    }

    /* Large desktop */
    @media (min-width: 1366px) {
        .solutions-stage[b-c1aegg3zu4] {
            --solutions-card-width: clamp(340px, 24vw, 480px);
            --solutions-card-gap: clamp(3rem, 4vw, 5.5rem);
            --solutions-notch-w: clamp(40ch, 52vw, 800px);
            --solutions-ground-drop: 0px;
        }

        .cat-sitting[b-c1aegg3zu4] {
            width: clamp(230px, 20vw, 320px);
            bottom: calc(6vh + var(--solutions-ground-drop));
            right: 5vw;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .cat-sitting[b-c1aegg3zu4],
        .solutions-tagline[b-c1aegg3zu4],
        .outer[b-c1aegg3zu4]::before {
            animation: none !important;
            transition: none !important;
        }
    }


.solutions-grid[b-c1aegg3zu4] {
    display: grid;
    gap: var(--solutions-card-gap);
    justify-content: center;
    /* 2 columns when there's room, otherwise it collapses naturally */
    grid-template-columns: repeat(2, minmax(var(--solutions-card-width), var(--solutions-card-width)));
}

@media (max-width: 767.98px) {
    .solutions-grid[b-c1aegg3zu4] {
        grid-template-columns: 1fr;
    }
}

[b-c1aegg3zu4] .service-card {
    height: 100%;
}

/* Conversion-focused solutions layout */
.solutions-stage[b-c1aegg3zu4] {
    overflow-x: clip;
    overflow-y: visible;
}

[b-c1aegg3zu4] .solutions-page {
    padding-bottom: clamp(315px, 27vw, 380px);
}

.solutions-inner[b-c1aegg3zu4] {
    width: min(92%, 1180px);
    padding: clamp(1.5rem, 3vw, 2.75rem);
}

[b-c1aegg3zu4] .solutions-tagline {
    margin-bottom: 0.75rem;
    font-weight: 800;
}

.solutions-intro[b-c1aegg3zu4] {
    width: min(760px, 100%);
    margin: 0 auto clamp(1.75rem, 3vw, 2.75rem);
    color: rgba(255, 255, 255, 0.92);
    font: 600 clamp(1rem, 0.45vw + 0.9rem, 1.15rem)/1.65 "Nunito", sans-serif;
    letter-spacing: 0.15px;
}

.solutions-grid[b-c1aegg3zu4] {
    width: min(960px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
}

[b-c1aegg3zu4] .service-card {
    min-height: 250px;
    padding: clamp(1.35rem, 2.3vw, 1.8rem);
    opacity: 0.94;
}

[b-c1aegg3zu4] .card-body {
    line-height: 1.55;
    letter-spacing: 0.15px;
    -webkit-text-stroke: 0;
    hyphens: none;
    overflow-wrap: break-word;
    font-weight: 650;
}

[b-c1aegg3zu4] .outline {
    margin-bottom: 0.8rem;
    color: #111426;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    font-weight: 900;
    line-height: 1.15;
}

.service-list-wrap[b-c1aegg3zu4] {
    flex: 1;
    align-items: center;
    padding-left: 0;
}

.service-list[b-c1aegg3zu4] {
    width: 100%;
    padding-left: 1.3rem;
    font-size: clamp(0.98rem, 0.45vw + 0.85rem, 1.12rem);
    line-height: 1.55;
    font-weight: 650;
}

.service-list li + li[b-c1aegg3zu4] {
    margin-top: 0.45rem;
}

.solutions-cta[b-c1aegg3zu4] {
    width: min(760px, 100%);
    margin: clamp(2rem, 4vw, 3.5rem) auto 0;
    color: white;
}

.solutions-cta h3[b-c1aegg3zu4] {
    margin: 0 0 0.65rem;
    color: #f9e4ad;
    font: 900 clamp(1.35rem, 1.5vw + 1rem, 2rem)/1.25 "Nunito", sans-serif;
}

.solutions-cta p[b-c1aegg3zu4] {
    margin: 0 auto 1.25rem;
    font: 600 clamp(1rem, 0.35vw + 0.9rem, 1.12rem)/1.55 "Nunito", sans-serif;
}

.primary-btn[b-c1aegg3zu4] {
    width: min(420px, 100%);
    padding: 14px 24px;
    border: 3px solid #f9e4ad;
    border-radius: 12px;
    background: transparent;
    color: #f9e4ad;
    font: 800 clamp(1rem, 0.4vw + 0.9rem, 1.2rem)/1.2 "Nunito", sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.primary-btn:hover[b-c1aegg3zu4],
.primary-btn:focus-visible[b-c1aegg3zu4] {
    background: #e5d3a3;
    color: #0b1b3a;
    transform: translateY(-2px);
}

.primary-btn:focus-visible[b-c1aegg3zu4] {
    outline: 3px solid white;
    outline-offset: 4px;
}

.solutions-character[b-c1aegg3zu4] {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.cat-sitting[b-c1aegg3zu4] {
    position: absolute;
    right: clamp(-1rem, 1vw, 1.5rem);
    bottom: 0;
    width: clamp(210px, 18vw, 280px);
}

@media (max-width: 767.98px) {
    [b-c1aegg3zu4] .solutions-page {
        padding-bottom: 290px;
    }

    .solutions-inner[b-c1aegg3zu4] {
        width: min(94%, 560px);
        padding: 1.5rem 1rem;
        border-radius: 24px;
    }

    .solutions-grid[b-c1aegg3zu4] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    [b-c1aegg3zu4] .service-card {
        min-height: 0;
        padding: 1.4rem;
    }

    .solutions-character[b-c1aegg3zu4] {
        inset: 0;
    }

    .cat-sitting[b-c1aegg3zu4] {
        right: -0.75rem;
        bottom: 0;
        width: clamp(150px, 42vw, 185px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .primary-btn[b-c1aegg3zu4] {
        transition: none;
    }
}



/* _content/DinguSite/Components/Pages/Work.razor.rz.scp.css */
.work-page[b-vabrjfvhuc] {
    position: relative;
    z-index: 201;
    width: min(1260px, calc(100% - 3rem));
    margin: 0 auto;
    padding: 19vh 0 clamp(18rem, 30vw, 28rem);
}

.work-hero[b-vabrjfvhuc] {
    width: min(900px, 100%);
    margin: 0 auto 4rem;
    text-align: center;
}

.work-eyebrow[b-vabrjfvhuc],
.case-category[b-vabrjfvhuc],
.story-label[b-vabrjfvhuc] {
    color: #f9e4ad;
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.work-eyebrow[b-vabrjfvhuc] {
    margin: 0 0 0.55rem;
    font-size: 0.86rem;
}

[b-vabrjfvhuc] .work-title {
    margin: 0;
    color: white;
    font-family: "Cabin Sketch", cursive;
    font-size: clamp(2.7rem, 6vw, 4.8rem);
    line-height: 1.05;
}

.work-intro[b-vabrjfvhuc] {
    margin: 1.25rem auto 0;
    color: rgba(255,255,255,0.86);
    font: 800 clamp(1.15rem, 2.1vw, 1.55rem)/1.6 "Nunito", sans-serif;
}

.work-disclosure[b-vabrjfvhuc] {
    margin: 1rem auto 0;
    color: rgba(255,255,255,0.58);
    font: 700 0.9rem/1.6 "Nunito", sans-serif;
}

.work-cases[b-vabrjfvhuc] {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.work-case[b-vabrjfvhuc] {
    position: relative;
    scroll-margin-top: 15vh;
    padding: clamp(1.5rem, 4vw, 3.25rem);
    border: 1px solid rgba(249, 228, 173, 0.18);
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(16, 23, 54, 0.8), rgba(19, 32, 57, 0.58));
    box-shadow: 0 20px 48px rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.work-case[b-vabrjfvhuc]::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -160px;
    top: -165px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 228, 173, 0.14), transparent 70%);
    pointer-events: none;
}

.case-header[b-vabrjfvhuc] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.case-number[b-vabrjfvhuc] {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(249, 228, 173, 0.65);
    border-radius: 50%;
    color: #f9e4ad;
    font: 800 1rem/1 "Nunito", sans-serif;
    letter-spacing: 0.1em;
    box-shadow: 0 0 0 10px rgba(249, 228, 173, 0.04), 0 0 28px rgba(249, 228, 173, 0.14);
}

.case-category[b-vabrjfvhuc] {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
}

.case-header h2[b-vabrjfvhuc] {
    margin: 0;
    color: white;
    font: 800 clamp(1.8rem, 3.5vw, 3rem)/1.15 "Nunito", sans-serif;
}

.case-lede[b-vabrjfvhuc] {
    width: min(850px, 100%);
    margin: 0.9rem 0 0;
    color: rgba(255,255,255,0.76);
    font: 700 1.05rem/1.7 "Nunito", sans-serif;
}

.case-stats[b-vabrjfvhuc] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 2.25rem 0;
}

.case-stat[b-vabrjfvhuc] {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
}

.case-stat strong[b-vabrjfvhuc] {
    color: #f9e4ad;
    font: 800 clamp(1.1rem, 2vw, 1.4rem)/1.25 "Nunito", sans-serif;
}

.case-stat span[b-vabrjfvhuc] {
    color: rgba(255,255,255,0.66);
    font: 700 0.88rem/1.5 "Nunito", sans-serif;
}

.case-story[b-vabrjfvhuc] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.case-story section[b-vabrjfvhuc] {
    min-width: 0;
}

.case-story section + section[b-vabrjfvhuc] {
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255,255,255,0.1);
}

.story-label[b-vabrjfvhuc] {
    margin: 0 0 0.7rem;
    font-size: 0.76rem;
}

.case-story section > p:last-child[b-vabrjfvhuc] {
    margin: 0;
    color: rgba(255,255,255,0.75);
    font: 700 0.96rem/1.7 "Nunito", sans-serif;
}

.story-result[b-vabrjfvhuc] {
    padding: 1.1rem 1.2rem 1.2rem !important;
    border: 1px solid rgba(249, 228, 173, 0.16) !important;
    border-radius: 18px;
    background: rgba(249, 228, 173, 0.07);
}

.work-cta[b-vabrjfvhuc] {
    width: min(840px, 100%);
    margin: 4rem auto 0;
    padding: 2.5rem 2rem;
    border: 1px solid rgba(249, 228, 173, 0.22);
    border-radius: 28px;
    background: rgba(10, 18, 40, 0.4);
    text-align: center;
}

.work-cta h2[b-vabrjfvhuc] {
    margin: 0 auto 1.5rem;
    color: white;
    font: 800 clamp(1.65rem, 3vw, 2.5rem)/1.25 "Nunito", sans-serif;
}

.primary-btn[b-vabrjfvhuc] {
    width: min(420px, 100%);
    padding: 14px 24px;
    border: 3px solid #f9e4ad;
    border-radius: 12px;
    background: transparent;
    color: #f9e4ad;
    font: 800 1.1rem/1.3 "Nunito", sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.primary-btn:hover[b-vabrjfvhuc],
.primary-btn:focus-visible[b-vabrjfvhuc] {
    background: #e5d3a3;
    color: #0b1b3a;
    transform: translateY(-2px);
}

.primary-btn:focus-visible[b-vabrjfvhuc] {
    outline: 3px solid white;
    outline-offset: 4px;
}

.work-scene[b-vabrjfvhuc] {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.cat-telescope[b-vabrjfvhuc] {
    position: fixed;
    z-index: 2;
    right: 8vw;
    bottom: 7vh;
    width: clamp(220px, 22vw, 320px);
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(255,255,255,.15));
}

.moon-cliff[b-vabrjfvhuc] {
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .case-stats[b-vabrjfvhuc] {
        grid-template-columns: 1fr;
    }

    .case-stat[b-vabrjfvhuc] {
        display: grid;
        grid-template-columns: minmax(140px, 0.7fr) 1.3fr;
        align-items: center;
        gap: 1rem;
    }

    .case-story[b-vabrjfvhuc] {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .case-story section + section[b-vabrjfvhuc] {
        padding: 1.4rem 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .story-result[b-vabrjfvhuc] {
        padding: 1.15rem 1.2rem 1.2rem !important;
        border: 1px solid rgba(249, 228, 173, 0.16) !important;
    }
}

@media (max-width: 600px) {
    .work-page[b-vabrjfvhuc] {
        width: min(100% - 2rem, 1260px);
        padding-top: 17vh;
        padding-bottom: 17rem;
    }

    .work-hero[b-vabrjfvhuc] {
        margin-bottom: 2.5rem;
    }

    .work-case[b-vabrjfvhuc] {
        border-radius: 24px;
    }

    .case-header[b-vabrjfvhuc] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .case-number[b-vabrjfvhuc] {
        width: 58px;
        height: 58px;
    }

    .case-stats[b-vabrjfvhuc] {
        margin: 1.75rem 0;
    }

    .case-stat[b-vabrjfvhuc] {
        display: flex;
        gap: 0.25rem;
    }

    .work-cta[b-vabrjfvhuc] {
        margin-top: 2.5rem;
        padding: 2rem 1.25rem;
    }

    .cat-telescope[b-vabrjfvhuc] {
        right: 0;
        bottom: clamp(5rem, 9vh, 6rem);
        width: clamp(170px, 48vw, 210px);
    }

    .moon-cliff[b-vabrjfvhuc] {
        left: 50%;
        right: auto;
        width: max(820px, 170vw);
        transform: translateX(-58%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .primary-btn[b-vabrjfvhuc] {
        transition: none;
    }
}