/* ============================================
   LET'S WORK TOGETHER — shared nav CTA + anchored panel
   The button morphs into a 25vw × 65vh panel anchored top-right.
   ============================================ */

/* ---------- Nav CTA button ---------- */
.site-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
    background: transparent;
    border: 1px solid rgba(127, 127, 127, 0.55);
    border-radius: 0;
    cursor: pointer;
    pointer-events: auto;
    transition: border-color 0.2s ease;

    background-image: linear-gradient(
        90deg,
        currentColor 0%,
        currentColor 35%,
        var(--site-nav-cta-sheen-soft, #c4f5ff)   40%,
        var(--site-nav-cta-sheen-mid, #6ee7ff)    45%,
        var(--site-nav-cta-sheen-strong, #2ecbff) 49%,
        var(--site-nav-cta-sheen-peak, #ffffff)   52%,
        var(--site-nav-cta-sheen-strong, #2ecbff) 55%,
        var(--site-nav-cta-sheen-mid, #6ee7ff)    59%,
        var(--site-nav-cta-sheen-soft, #c4f5ff)   64%,
        currentColor 70%,
        currentColor 100%
    );
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 100% 50%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            text-fill-color: transparent;

    animation: site-nav-cta-rainbow 5s ease-in-out infinite;
    will-change: background-position;
}

@keyframes site-nav-cta-rainbow {
    0%   { background-position: 100% 50%; }
    60%  { background-position:   0% 50%; }
    100% { background-position:   0% 50%; }
}

.site-nav-cta:hover {
    border-color: rgba(127, 127, 127, 0.85);
}

.site-nav-cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.site-nav-mobile-cta {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-cta {
        animation: none;
        background-position: 100% 50%;
    }
}

@media (max-width: 640px) {
    .site-nav-cta {
        padding: 5px 10px;
        font-size: 10px;
    }
}

/* Shared mobile nav guardrails.
   Every page carries this same top nav, and on narrow phones the CTA was
   wide enough to create horizontal overflow. Keep the desktop composition,
   but make the mobile header fit the viewport instead of stretching it. */
@media (max-width: 720px) {
    .site-nav {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: max(20px, env(safe-area-inset-left, 0px));
        padding-right: max(20px, env(safe-area-inset-right, 0px));
        overflow: hidden;
        gap: 10px;
    }

    .site-nav-logo-link {
        flex: 0 0 auto;
    }

    .site-nav-links {
        min-width: 0;
        flex: 0 1 auto;
        max-width: calc(100vw - 84px);
        gap: clamp(8px, 2.2vw, 12px);
    }

    .site-nav-text-links {
        min-width: 0;
        gap: clamp(8px, 2vw, 10px);
    }

    .site-nav-link {
        font-size: 12px;
        line-height: 1.35;
    }

    .site-nav-cta {
        flex: 0 1 auto;
        max-width: min(132px, 33vw);
        min-width: 0;
        justify-content: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 760px) {
    .site-nav-cta {
        display: none;
    }

    .site-nav-mobile-cta {
        position: fixed;
        left: max(30px, env(safe-area-inset-left, 0px));
        right: max(30px, env(safe-area-inset-right, 0px));
        bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(116px, 14vh, 135px));
        z-index: var(--site-nav-z, 30);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        padding: 18px 20px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0;
        text-transform: uppercase;
        white-space: nowrap;
        color: #ffffff;
        background: rgba(0, 0, 0, 0.58);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 5px;
        box-shadow: none;
        cursor: pointer;
        pointer-events: auto;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .site-nav-mobile-cta:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 3px;
    }
}

@media (max-width: 360px) {
    .site-nav {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .site-nav-links {
        max-width: calc(100vw - 72px);
    }

    .site-nav-mobile-cta {
        left: max(24px, env(safe-area-inset-left, 0px));
        right: max(24px, env(safe-area-inset-right, 0px));
    }
}

@media (max-height: 620px) and (max-width: 760px) {
    .site-nav-mobile-cta {
        bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(72px, 14vh, 88px));
        min-height: 54px;
        padding-block: 16px;
    }
}

/* ============================================
   PANEL — anchored, animated from button rect
   ============================================ */

.lwt-modal {
    /* Light mode */
    --lwt-bg: #fafafa;
    --lwt-text: #1a1a1a;
    --lwt-text-muted: rgba(26, 26, 26, 0.55);
    --lwt-text-faint: rgba(26, 26, 26, 0.30);
    --lwt-line: rgba(26, 26, 26, 0.16);
    --lwt-line-active: #1a1a1a;
    --lwt-error: #b13a2b;

    --lwt-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    position: fixed;
    /* JS sets top/right/width/height inline. */
    z-index: 1000;
    overflow: hidden;
    background: var(--lwt-bg);
    color: var(--lwt-text);
    font-family: var(--lwt-sans);
    border: 1px solid var(--lwt-line-active);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.35);
    transition: top    0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
                right  0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
                width  0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
                height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.2s ease;
}

@media (prefers-color-scheme: dark) {
    .lwt-modal {
        --lwt-bg: #0a0a0a;
        --lwt-text: #f5f5f7;
        --lwt-text-muted: rgba(245, 245, 247, 0.55);
        --lwt-text-faint: rgba(245, 245, 247, 0.30);
        --lwt-line: rgba(245, 245, 247, 0.16);
        --lwt-line-active: #f5f5f7;
        --lwt-error: #ff8a8a;
    }
}

.lwt-modal[data-open="true"] {
    pointer-events: auto;
    opacity: 1;
}

.lwt-modal[data-open="true"]:not([data-closing="true"]) {
    left: 0;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw;
    border: 0;
    box-shadow: none;
}

.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-card {
    min-height: 100%;
}

@media (max-width: 760px) {
    .lwt-modal {
        border: 0;
        box-shadow: none;
        transition: top 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    right 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.16s ease;
    }

}

/* Closing — the panel morphs back into the nav button. Background,
   border, and shadow shift to match the button while the box shrinks
   to the button's rect. Card contents fade out quickly so the panel
   is empty for the rest of the morph. At the end, JS snap-swaps to
   the real button — its text appears at that exact moment, with no
   text rendered inside the panel beforehand. */
.lwt-modal[data-closing="true"] {
    pointer-events: none;
    background-color: transparent;
    border-color: rgba(127, 127, 127, 0.55);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transition: top    0.55s cubic-bezier(0.4, 0, 0.2, 1),
                right  0.55s cubic-bezier(0.4, 0, 0.2, 1),
                width  0.55s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.4s ease 0.1s,
                border-color 0.45s ease 0.1s,
                box-shadow 0.35s ease;
}

/* ---------- Card ---------- */
.lwt-card {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 26px 26px 22px;
    overflow: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    opacity: 0;
    /* Default fade-out used during open's pre-reveal phase. */
    transition: opacity 0.12s ease;
}

@media (min-width: 761px) {
    .lwt-card {
        padding:
            clamp(42px, 7vh, 76px)
            clamp(28px, 6vw, 96px)
            clamp(34px, 5.4vh, 64px);
    }
}

@media (max-width: 760px) {
    .lwt-card {
        padding:
            calc(env(safe-area-inset-top, 0px) + clamp(20px, 4.4vh, 34px))
            max(20px, env(safe-area-inset-right, 0px))
            calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 4.2vh, 32px))
            max(20px, env(safe-area-inset-left, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-card {
    opacity: 1;
    transition: opacity 0.25s ease 0.2s;
}

/* On close, fade the card content out quickly so the panel is empty
   while it morphs into the button shape. */
.lwt-modal[data-closing="true"] .lwt-card {
    opacity: 0;
    transition: opacity 0.18s ease;
}

/* ---------- Morph label ----------
   Anchored to the panel's top-right corner with intrinsic size — the
   modal's top-right is locked to the trigger button's top-right, so this
   sits exactly where the button text is, throughout the entire shrink.
   No drifting, no offset. Becomes visible ~50ms into the close (i.e.
   500ms before the morph completes), so the user reads "LET'S WORK
   TOGETHER" while the panel is still shrinking into place. */
.lwt-morph-label {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 6px 14px;
    box-sizing: border-box;

    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--lwt-text);

    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.lwt-modal[data-closing="true"] .lwt-morph-label {
    opacity: 1;
    /* Fully visible by ~50ms into the 550ms close, i.e. 500ms before
       the morph completes. */
    transition: opacity 0.05s ease;
}

.lwt-modal[data-mobile-trigger="true"] .lwt-morph-label {
    inset: 0;
    justify-content: center;
    padding: 12px 18px;
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 1.25;
}

.lwt-card {
    z-index: 1;
}

/* ---------- Close (×) inside the card ---------- */
.lwt-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    margin: 0;
    padding: 2px 6px;
    background: transparent;
    border: 0;
    font-family: var(--lwt-sans);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    color: var(--lwt-text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

@media (max-width: 760px) {
    .lwt-close {
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        right: max(14px, env(safe-area-inset-right, 0px));
        width: 44px;
        height: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: var(--lwt-text-muted);
    }
}

.lwt-close:hover {
    color: var(--lwt-text);
}

.lwt-close:focus-visible {
    outline: 1px solid var(--lwt-text);
    outline-offset: 2px;
}

/* ---------- Header ---------- */
.lwt-title {
    margin: 0 0 22px;
    padding-right: 28px;
    font-family: var(--lwt-sans);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--lwt-text);
}

@media (min-width: 761px) {
    .lwt-title,
    .lwt-form {
        width: min(100%, 680px);
        margin-left: auto;
        margin-right: auto;
    }

    .lwt-title {
        margin-bottom: clamp(24px, 4vh, 38px);
        font-size: clamp(30px, 4.2vw, 56px);
        line-height: 1.04;
        letter-spacing: 0;
    }
}

@media (max-width: 760px) {
    .lwt-title {
        margin: 0 46px clamp(22px, 3.5vh, 32px) 0;
        padding-right: 0;
        font-size: clamp(28px, 7.6vw, 38px);
        line-height: 1.08;
        letter-spacing: 0;
    }
}

/* ---------- Form ----------
   Distribute vertical space: short rows take their natural height,
   the message row absorbs everything that's left, and the action row
   pins to the bottom. Rows are equal-rhythm dividers. */
.lwt-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
}

/* Rows stack a sentence-case label above the field. Only the
   text-input rows (.lwt-row-line) carry an underline — the chips and
   textarea rows have no row-level border. */
.lwt-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 18px 0 0;
    border: 0;
}

@media (max-width: 760px) {
    .lwt-row {
        gap: 8px;
        padding-top: clamp(18px, 2.6vh, 26px);
    }

    .lwt-row:first-of-type {
        padding-top: 4px;
    }
}

.lwt-row:first-of-type {
    padding-top: 10px;
}

.lwt-row-line {
    border-bottom: 1px solid var(--lwt-line);
}

/* The message row sits at its natural height — its textarea has a
   fixed-ish height, so the panel hugs the content instead of stretching. */
.lwt-row-message {
    flex: 0 0 auto;
    min-height: 0;
    justify-content: flex-start;
    padding-bottom: 0;
    gap: 10px;
}

.lwt-row-label {
    font-family: var(--lwt-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lwt-text-muted);
}

.lwt-row input,
.lwt-row textarea {
    width: 100%;
    min-width: 0;
    padding: 2px 0 6px;
    margin: 0;
    font-family: var(--lwt-sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.05px;
    color: var(--lwt-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease;
}

@media (max-width: 760px) {
    .lwt-row-label,
    .lwt-row input,
    .lwt-row textarea {
        font-size: 16px;
        line-height: 1.45;
    }

    .lwt-row input {
        padding-bottom: 10px;
    }
}

/* Textarea wrapper — bordered rounded box around the message field.
   Fixed height so the panel hugs its content instead of growing the box
   to absorb the leftover panel space. */
.lwt-textarea-wrap {
    flex: 0 0 auto;
    height: 175px;
    display: flex;
    border: 1px solid var(--lwt-line);
    border-radius: 6px;
    padding: 12px 14px;
    transition: border-color 0.2s ease;
}

@media (max-width: 760px) {
    .lwt-textarea-wrap {
        height: clamp(132px, 24vh, 220px);
        padding: 14px 14px;
        border-radius: 8px;
    }
}

.lwt-textarea-wrap:focus-within {
    border-color: var(--lwt-line-active);
}

.lwt-row-message textarea {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    resize: none;
    padding: 0;
    border: 0;
    line-height: 1.55;
}

.lwt-row input::placeholder,
.lwt-row textarea::placeholder {
    color: var(--lwt-text-faint);
}

.lwt-row:has(input:focus) .lwt-row-label,
.lwt-row:has(textarea:focus) .lwt-row-label {
    color: var(--lwt-text);
}

.lwt-row:has(input:focus),
.lwt-row:has(textarea:focus) {
    border-bottom-color: var(--lwt-line-active);
}

/* ---------- Project type: chip selector ---------- */
.lwt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
}

@media (max-width: 760px) {
    .lwt-chips {
        gap: 8px;
    }
}

.lwt-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    cursor: pointer;
    font-family: var(--lwt-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--lwt-text);
    background: transparent;
    border: 1px solid var(--lwt-line);
    border-radius: 5px;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

@media (max-width: 760px) {
    .lwt-chip {
        min-height: 44px;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 15px;
    }
}

.lwt-chip input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.lwt-chip:hover {
    color: var(--lwt-text);
    border-color: var(--lwt-text);
}

.lwt-chip:has(input:checked) {
    color: var(--lwt-bg);
    background: var(--lwt-text);
    border-color: var(--lwt-text);
}

.lwt-chip:has(input:focus-visible) {
    outline: 1px dashed var(--lwt-text);
    outline-offset: 3px;
}

/* ---------- Minimum budget note (above the actions) ---------- */
.lwt-min-note {
    margin: 0;
    padding-top: 16px;
    font-family: var(--lwt-sans);
    font-size: 9.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lwt-text);
}

@media (max-width: 760px) {
    .lwt-min-note {
        padding-top: clamp(18px, 2.8vh, 26px);
        font-size: 11px;
    }
}

/* ---------- Actions (pinned at the bottom of the panel) ---------- */
.lwt-actions {
    margin-top: 14px;
    padding-top: 0;
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

@media (max-width: 760px) {
    .lwt-actions {
        margin-top: clamp(16px, 2.8vh, 24px);
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 12px;
    }
}

.lwt-cancel,
.lwt-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 12px 22px;
    font-family: var(--lwt-sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lwt-submit {
    padding: 12px 44px;
}

.lwt-cancel {
    padding: 12px 28px;
    color: var(--lwt-text-faint);
    border: 1px solid var(--lwt-line);
}

@media (max-width: 360px) {
    .lwt-card {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .lwt-title {
        font-size: 27px;
    }

    .lwt-actions {
        grid-template-columns: 1fr;
    }
}

.lwt-cancel:hover {
    color: var(--lwt-text);
    border-color: var(--lwt-text);
}

.lwt-submit {
    color: var(--lwt-text);
    border: 1px solid var(--lwt-text);
}

.lwt-submit:hover {
    background: var(--lwt-text);
    color: var(--lwt-bg);
}

@media (max-width: 760px) {
    .lwt-cancel,
    .lwt-submit {
        width: 100%;
        min-height: 52px;
        padding: 14px 12px;
        font-size: 12px;
    }
}

.lwt-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lwt-submit:disabled:hover {
    background: transparent;
    color: var(--lwt-text);
}

.lwt-submit-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

.lwt-submit:hover .lwt-submit-arrow {
    transform: translateX(3px);
}

.lwt-status {
    margin: 0;
    font-family: var(--lwt-sans);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--lwt-text-muted);
    min-height: 0;
}

.lwt-status:not(:empty) {
    margin-top: 6px;
}

.lwt-status[data-state="success"] {
    color: var(--lwt-text);
}

.lwt-status[data-state="error"] {
    color: var(--lwt-error);
}

@media (max-height: 620px) {
    .lwt-card {
        padding: 18px 18px 16px;
    }

    .lwt-close {
        top: 8px;
        right: 8px;
    }

    .lwt-title {
        margin-bottom: 12px;
        padding-right: 24px;
        font-size: 18px;
    }

    .lwt-row {
        gap: 4px;
        padding-top: 10px;
    }

    .lwt-row:first-of-type {
        padding-top: 4px;
    }

    .lwt-row-label,
    .lwt-row input,
    .lwt-row textarea {
        font-size: 13px;
    }

    .lwt-textarea-wrap {
        height: 96px;
        padding: 10px 12px;
    }

    .lwt-chip {
        padding: 6px 10px;
        font-size: 11px;
    }

    .lwt-min-note {
        padding-top: 10px;
    }

    .lwt-actions {
        margin-top: 10px;
    }

    .lwt-cancel,
    .lwt-submit {
        padding: 10px 18px;
    }
}

/* ============================================
   PANEL CONTENT REVEAL
   After the panel finishes growing (0.55s + 0.2s buffer), each row
   blur+slides into place with a soft stagger. Re-fires on every open
   because the parent selector toggles with [data-open] / [data-closing].
   ============================================ */
@keyframes lwtBlurFadeUp {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translate3d(0, 14px, 0);
    }
    60% {
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lwtBlurFadeIn {
    0% {
        opacity: 0;
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes lwtBlurChipPop {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: translate3d(0, 6px, 0) scale(0.92);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Hidden starting state for every animated child while the panel is
   closed or closing — keeps things tidy during the shrink. */
.lwt-modal .lwt-title,
.lwt-modal .lwt-row,
.lwt-modal .lwt-chip,
.lwt-modal .lwt-min-note,
.lwt-modal .lwt-actions,
.lwt-modal .lwt-close {
    opacity: 0;
    will-change: opacity, transform, filter;
}

/* When fully open (not closing), play the staggered choreography. */
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-title,
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-row,
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-chip,
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-min-note,
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-actions,
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-close {
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-close {
    animation: lwtBlurFadeIn 0.5s 0.55s forwards;
}

.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-title {
    animation: lwtBlurFadeUp 0.65s 0.55s forwards;
}

.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-row {
    animation: lwtBlurFadeUp 0.6s forwards;
}

.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-row:nth-of-type(1) { animation-delay: 0.65s; }
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-row:nth-of-type(2) { animation-delay: 0.73s; }
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-row:nth-of-type(3) { animation-delay: 0.81s; }
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-row:nth-of-type(4) { animation-delay: 0.89s; }

/* Chips pop in individually after their row arrives. */
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-chip {
    animation: lwtBlurChipPop 0.45s forwards;
}

.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-chip:nth-of-type(1) { animation-delay: 0.92s; }
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-chip:nth-of-type(2) { animation-delay: 0.98s; }
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-chip:nth-of-type(3) { animation-delay: 1.04s; }
.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-chip:nth-of-type(4) { animation-delay: 1.10s; }

.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-min-note {
    animation: lwtBlurFadeUp 0.55s 0.96s forwards;
}

.lwt-modal[data-open="true"]:not([data-closing="true"]) .lwt-actions {
    animation: lwtBlurFadeUp 0.55s 1.04s forwards;
}

@media (max-width: 760px) {
    .lwt-modal[data-mobile-trigger="true"][data-open="true"]:not([data-closing="true"]) .lwt-title,
    .lwt-modal[data-mobile-trigger="true"][data-open="true"]:not([data-closing="true"]) .lwt-row,
    .lwt-modal[data-mobile-trigger="true"][data-open="true"]:not([data-closing="true"]) .lwt-chip,
    .lwt-modal[data-mobile-trigger="true"][data-open="true"]:not([data-closing="true"]) .lwt-min-note,
    .lwt-modal[data-mobile-trigger="true"][data-open="true"]:not([data-closing="true"]) .lwt-actions,
    .lwt-modal[data-mobile-trigger="true"][data-open="true"]:not([data-closing="true"]) .lwt-close {
        animation: none !important;
        opacity: 1;
        filter: none;
        transform: none;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .lwt-modal,
    .lwt-card,
    .lwt-submit,
    .lwt-cancel,
    .lwt-option-mark {
        transition: none;
    }

    .lwt-modal .lwt-title,
    .lwt-modal .lwt-row,
    .lwt-modal .lwt-chip,
    .lwt-modal .lwt-min-note,
    .lwt-modal .lwt-actions,
    .lwt-modal .lwt-close {
        animation: none !important;
        opacity: 1;
        filter: none;
        transform: none;
    }
}