/* _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;
}

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; /* sticks to bottom of the viewport */
    left: 3rem;
    bottom: 1.5rem; /* distance from bottom */
    font-size: 0.70rem;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    z-index: 200;
    margin: 0; /* no margin so it doesn't add height */
    padding: 0;
}

@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;
    z-index: 2147480000;
    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);
}

/* 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;
    }


/* ===== Hanger position + knobs ===== */
.hanger[b-a2g8wf6hyi] {
    position: absolute;
    left: calc(var(--left) + var(--x-shift, 0px));
    transform: translateX(-50%); /* 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 */
}

/* 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);
    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;
}

/* ===== 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;
}

.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;
    }
}

@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;
}
/* _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] {
    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, 2vw, 26px) + 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;
}

[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%;
}

[b-hicb4dva8t] .card-body {
    font-size: clamp(14px, 1vw + 0.4rem, 20px);
    line-height: 1.6;
    letter-spacing: .5px;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-wrap: pretty;
    margin: 0;
    font-family: "nunito";
    color: black;
    font-weight: 700;
}

[b-hicb4dva8t] .card-body-story {
    font-size: clamp(15px, .9vw + 0.25rem, 16px);
    line-height: 1.6;
    letter-spacing: .5px;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-wrap: pretty;
    margin: 0;
    font-family: "nunito";
    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: -8vh; /* keep your placement */
    left: 36vw;
    width: clamp(220px, 32vw, 370px);
    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 */
    }

    /* (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: -20vh 0 -1vh; /* negative margin pulls her into the gap */
        z-index: 10;
        pointer-events: none;
    }
}
@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-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, 1.2vw, 14px)); /* pull down by ~half the last push */
        margin-left: clamp(6px, 1.2vw, 12px); /* minimal right shift */
    }
}

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

    [b-hicb4dva8t] .service-card {
        height: auto;
    }
}


/* _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 {
    height: var(--contact-button-height);
    color: #F9E4AD;
    opacity: 0.9;
    border: solid;
    border-radius: 15px;
    font-family: nunito;
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: none;
}

/* 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] {
    position: fixed; /* take it out of layout */
    top: 50vh; /* moved DOWN from 18vh */
    right: 6vw; /* horizontal position – to the side of form */
    width: clamp(220px, 30vw, 380px);
    pointer-events: none;
    z-index: 3;
    opacity: 1; /* make sure it's visible */
    transform: none; /* no extra translation */
}

/* Cat gif */
.cat-mail[b-nfnfthlz5v] {
    display: block;
    width: 100%;
    height: auto;
    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-bob-b-nfnfthlz5v 3.8s ease-in-out infinite;
    will-change: transform, filter;
}

/* Simple bobbing animation (no big path) */
@keyframes cat-mail-bob-b-nfnfthlz5v {
    0% {
        transform: translateY(0);
        filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(255,255,255,0.15));
    }

    50% {
        transform: translateY(-10px);
        filter: drop-shadow(0 10px 22px rgba(0,0,0,.32)) drop-shadow(0 0 18px rgba(255,255,255,0.25));
    }

    100% {
        transform: translateY(0);
        filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(255,255,255,0.15));
    }
}

/* Optional: hide the cat on narrow screens so it doesn't overlap the form */
@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; /* take it out of layout */
        top: 75vh; 
        right: 6vw; /* horizontal position – to the side of form */
        width: clamp(220px, 30vw, 380px);
        pointer-events: none;
        z-index: 3;
        opacity: 1; /* make sure it's visible */
        transform: none; /* no extra translation */
    }

}


/* 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: 1;
    filter: drop-shadow(0 -6px 24px rgba(0,0,0,.35));
}
/* _content/DinguSite/Components/Pages/ContactSent.razor.rz.scp.css */
.content-wrap[b-ilwvtev3wh] {
    --sent-offset-factor: 1;
}

[b-ilwvtev3wh] .contact-sent-line {
    margin-inline: auto;
    max-width: clamp(260px, 70vw, 760px);
}

[b-ilwvtev3wh] .contact-sent-line--right {
    margin-right: calc(var(--sent-offset, 0) * var(--sent-offset-factor));
}

[b-ilwvtev3wh] .contact-sent-line--left {
    margin-left: calc(var(--sent-offset, 0) * var(--sent-offset-factor));
}

[b-ilwvtev3wh] .contact-sent-cta {
    font-size: clamp(2rem, 4vw, 40px);
}

.cat-rocket-sent[b-ilwvtev3wh] {
    display: block;
    width: 100%;
    height: auto;
}


.rocket-wrapper[b-ilwvtev3wh] {
    position: absolute;
    bottom: 10vh;
    right: 20vw;
    width: clamp(240px, 40vw, 500px);
    pointer-events: none;
    will-change: transform, filter;
    transform-origin: 50% 60%;
    animation: rocket-float-b-ilwvtev3wh 5.5s ease-in-out 0.0s infinite alternate;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
}

/* Gentle float animation */
@keyframes rocket-float-b-ilwvtev3wh {
    0% {
        transform: translateY(0) rotate(-0.6deg);
        
    }

    50% {
        transform: translateY(-10px) rotate(0.6deg);
        
    }

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

@media (prefers-reduced-motion: reduce) {
    .rocket-wrapper[b-ilwvtev3wh] {
        animation: none !important;
        transform: none !important;
    }
}

@media (max-width: 900px) {
    .rocket-wrapper[b-ilwvtev3wh] {
        --sent-offset-factor: 0.45;
    }

    .rocket-wrapper[b-ilwvtev3wh] {
        right: 12vw;
        width: clamp(240px, 55vw, 420px);
    }
}

@media (max-width: 640px) {
    .content-wrap[b-ilwvtev3wh] {
        --sent-offset-factor: 0;
    }

    [b-ilwvtev3wh] .contact-sent-line {
        text-align: center;
    }

    .rocket-wrapper[b-ilwvtev3wh] {
        position: relative;
        right: auto;
        bottom: auto;
        margin: clamp(2rem, 10vw, 3.5rem) auto 0;
        width: clamp(220px, 70vw, 360px);
    }
}
/* _content/DinguSite/Components/Pages/Home.razor.rz.scp.css */


/* full-bleed container that covers the whole viewport */
.home-stage[b-fysfbjcy45] {
    --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-fysfbjcy45] {
    position: fixed;
    left: 90%; /* move it back toward the rocket's flight path */
    bottom: 25vh; /* 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-fysfbjcy45] .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-fysfbjcy45] {
    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-fysfbjcy45] {
    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-fysfbjcy45] {
    animation: rocket-fly-in-b-fysfbjcy45 var(--rocket-flight-dur) cubic-bezier(.22,.9,.24,1) var(--rocket-flight-delay) both;
}

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

/* Flight path */
@keyframes rocket-fly-in-b-fysfbjcy45 {
    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-fysfbjcy45 {
    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-fysfbjcy45] {
    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-fysfbjcy45 1.6s ease-out 2.8s forwards;
}

@keyframes text-wipe-reveal-b-fysfbjcy45 {
    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-fysfbjcy45] .dingu {
    display: inline-block;
    color: #fff;
    font-family: 'Cabin Sketch';
    font-size: 6rem; /* 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-fysfbjcy45] .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-fysfbjcy45]  {
        left: 50%;
        bottom: 20vh;
        width: 60vw;
        max-width: 75vw;
 
    }

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

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

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

    .home-stage[b-fysfbjcy45] {
        /* 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-fysfbjcy45] {
        left: 55%;
        bottom: 12vh;
        width: 70vw;
        max-width: 75vw;
    }

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

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

    .home-stage[b-fysfbjcy45] {
        --rocket-path-left: 30vw;
        --rocket-path-bottom: 40vh;
        --rocket-path-width: 28vw;
        --rocket-start-x: 45vw;
        --rocket-start-y: 7vh;
    }
    .cat-rocket[b-fysfbjcy45] {
        width: 350px;
        height: auto;
    }
}

/* ≥ 1024px — small laptops / landscape tablets */
@media (min-width: 1024px) {

    [b-fysfbjcy45] .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 */
    }

    .tagline[b-fysfbjcy45] {
        left: 65%;
        bottom: 40vh;
        width: 75vw;
        max-width: 80vw;
    }

    [b-fysfbjcy45] .sub-textHome {
        font-size: 3vh;
    }

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

    .home-stage[b-fysfbjcy45] {
        --rocket-path-left: 8vw;
        --rocket-path-bottom: 35vh;
        --rocket-path-width: 26vw;
        --rocket-start-x: 50vw;
        --rocket-start-y: 7vh;
    }
}

/* ≥ 1366px — desktops / large laptops (your “hero” layout) */
@media (min-width: 1366px) {
    .tagline[b-fysfbjcy45] {
        left: 55%;
        bottom: 40vh;
        width: 85vw;
        max-width: 90vw;
    }

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

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

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

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

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

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

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

    .home-stage[b-fysfbjcy45] {
        /* 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;
    }
    .cat-rocket[b-fysfbjcy45] {
        width: 400px;
        height: auto;
    }
}
/* _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);
    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;
}

@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] {
        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: 1024px) {
    .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;
    }
}

@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;
    }
}

@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/Solutions.razor.rz.scp.css */
:root[b-c1aegg3zu4] {
    --space1: #0d0b26;
    --space2: #1b1752;
}

/* Stage + layout */
.solutions-stage[b-c1aegg3zu4] {
    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: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, #190C50 25%, #1C0A61 40%, #143342 100%);
}

.content-wrap[b-c1aegg3zu4] {
    position: relative;
    z-index: 50;
    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: absolute;
    top: -0.6em;
    margin-top: 0;
    margin-bottom: 1vh;
    padding: 0 0.5rem;
    font-size: clamp(1rem, 2.5vw, 2.5rem) !important;
    line-height: 1.4;
    color: #F9E4AD;
    font-family: "nunito";
    font-weight: 400;
    z-index: 2;
}

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

/* Cards */
[b-c1aegg3zu4] .service-card {
    padding: var(--solutions-card-padding);
    border-radius: 20px;
    background: #F9E4AD;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    opacity: .85;
    width: var(--solutions-card-width);
    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;
}

[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: 1vw;
}

.service-list[b-c1aegg3zu4] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    color: #000000;
    font-weight: 300;
    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(230px, 20vw, 320px);
    height: auto;
    z-index: 3;
    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: 1;
    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;
        }

        [b-c1aegg3zu4] .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;
        }
    }
/* _content/DinguSite/Components/Pages/Work.razor.rz.scp.css */
/* ========= Base styles (mobile first: < 480px) ========= */

[b-vabrjfvhuc] .sun-core {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #F7E3B2;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid white;
    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);
}

    [b-vabrjfvhuc] .sun-core span {
        font-family: 'Nunito', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: #000000;
    }

[b-vabrjfvhuc] .orbit-ring {
    position: absolute;
    width: 70vw;
    height: 70vw;
    max-width: 420px;
    max-height: 240px;
    border-radius: 50%;
    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);
}

[b-vabrjfvhuc] .orbit-ring-secondary {
    position: absolute;
    width: 85vw;
    height: 85vw;
    max-width: 480px;
    max-height: 270px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    pointer-events: none;
}

.orbit-container[b-vabrjfvhuc] {
    position: relative;
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0; /* no horizontal shift on tiny screens */
}

.planet[b-vabrjfvhuc] {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #F9E4AD;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    text-decoration: none;
    cursor: pointer;
}

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

/* right planet (Moonwalk PM) */
.planet-pm[b-vabrjfvhuc] {
    transform: translate(-120px, 70px);
}

/* left planet (Moonwalk CRM) */
.planet-crm[b-vabrjfvhuc] {
    transform: translate(120px, -70px);
}

.cat-telescope[b-vabrjfvhuc] {
    position: fixed;
    bottom: 4vh;
    right: 4vw;
    width: clamp(170px, 45vw, 230px);
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
    z-index: 100;
    pointer-events: none;
}

.moon-cliff[b-vabrjfvhuc] {
    position: fixed;
    z-index: 98;
    left: 0;
    right: 0;
    bottom: 0;
    width: 130%; /* slight oversize so edges are covered on narrow phones */
    pointer-events: none;
}

/* ========= ≥ 480px ========= */
@media (min-width: 0px) {

    [b-vabrjfvhuc] .sun-core {
        width: 140px;
        height: 140px;
    }

        [b-vabrjfvhuc] .sun-core span {
            font-size: 1.1rem;
        }

    [b-vabrjfvhuc] .orbit-ring {
        width: 65vw;
        height: 65vw;
        max-width: 470px;
        max-height: 260px;
    }

    [b-vabrjfvhuc] .orbit-ring-secondary {
        width: 80vw;
        height: 80vw;
        max-width: 540px;
        max-height: 290px;
    }

    .planet[b-vabrjfvhuc] {
        width: 140px;
        height: 140px;
    }

    .planet-pm[b-vabrjfvhuc] {
        transform: translate(-160px, 80px);
    }

    .planet-crm[b-vabrjfvhuc] {
        transform: translate(160px, -80px);
    }

    .cat-telescope[b-vabrjfvhuc] {
        bottom: 5vh;
        right: 0vw;
        width: clamp(190px, 30vw, 200px);
    }

    .moon-cliff[b-vabrjfvhuc] {
        width: 120%;
    }
}

/* ========= ≥ 768px (tablet / small laptop) ========= */
@media (min-width: 768px) {

    [b-vabrjfvhuc] .sun-core {
        width: 150px;
        height: 150px;
    }

        [b-vabrjfvhuc] .sun-core span {
            font-size: 1.2rem;
        }

    [b-vabrjfvhuc] .orbit-ring {
        width: 60vw;
        height: 60vw;
        max-width: 550px;
        max-height: 300px;
    }

    [b-vabrjfvhuc] .orbit-ring-secondary {
        width: 75vw;
        height: 75vw;
        max-width: 640px;
        max-height: 330px;
    }

    .orbit-container[b-vabrjfvhuc] {
        height: 50vh;
        left: -5vw; /* start nudging system left on bigger screens */
    }

    .planet[b-vabrjfvhuc] {
        width: 200px;
        height: 200px;
    }

    .planet-pm[b-vabrjfvhuc] {
        transform: translate(-220px, 90px);
    }

    .planet-crm[b-vabrjfvhuc] {
        transform: translate(220px, -90px);
    }

    .cat-telescope[b-vabrjfvhuc] {
        bottom:5vh;
        right: 5vw;
        width: clamp(210px, 26vw, 270px);
    }

    .moon-cliff[b-vabrjfvhuc] {
        width: 110%;
    }
}

/* ========= ≥ 1024px (desktop) ========= */
@media (min-width: 1024px) {

    [b-vabrjfvhuc] .sun-core {
        width: 160px;
        height: 160px;
    }

        [b-vabrjfvhuc] .sun-core span {
            font-size: 1.25rem;
        }

    [b-vabrjfvhuc] .orbit-ring {
        width: 55vw;
        height: 55vw;
        max-width: 600px;
        max-height: 320px;
    }

    [b-vabrjfvhuc] .orbit-ring-secondary {
        width: 70vw;
        height: 70vw;
        max-width: 680px;
        max-height: 350px;
    }

    .orbit-container[b-vabrjfvhuc] {
        height: 55vh;
        left: -8vw;
    }

    .planet[b-vabrjfvhuc] {
        width: 220px;
        height: 220px;
    }

    .planet-pm[b-vabrjfvhuc] {
        transform: translate(-270px, 100px);
    }

    .planet-crm[b-vabrjfvhuc] {
        transform: translate(270px, -100px);
    }

    .cat-telescope[b-vabrjfvhuc] {
        bottom: 6vh;
        right: 7vw;
        width: clamp(230px, 22vw, 290px);
    }

    .moon-cliff[b-vabrjfvhuc] {
        width: 105%;
    }
}

/* ========= ≥ 1366px (large desktop) ========= */
@media (min-width: 1366px) {

    [b-vabrjfvhuc] .sun-core {
        width: 170px;
        height: 170px;
    }

        [b-vabrjfvhuc] .sun-core span {
            font-size: 1.3rem;
        }

    .orbit-container[b-vabrjfvhuc] {
        height: 60vh;
        left: -10vw; /* original offset for big screens */
    }

    .planet[b-vabrjfvhuc] {
        width: 230px;
        height: 230px;
    }

    .planet-pm[b-vabrjfvhuc] {
        transform: translate(-300px, 110px);
    }

    .planet-crm[b-vabrjfvhuc] {
        transform: translate(300px, -110px);
    }

    .cat-telescope[b-vabrjfvhuc] {
        bottom: 8vh;
        right: 9vw;
        width: clamp(240px, 20vw, 310px);
    }

    .moon-cliff[b-vabrjfvhuc] {
        width: 100%;
    }
}