/* ==========================================================================
   Homepage — Services (assets/js/home/services.js).
   A quiet list of the six capability names beside one image "stage". The
   service in the middle of the screen (or hovered, or focused) is active:
   the stage wipes to its picture, colour and number. Clicking a service
   lays its description and full scope over the picture (.sv-detail).
   ========================================================================== */

.sv {
    --sv-ink: #0c0b1d;
    --sv-muted: #6b6a7a;
    --sv-line: rgba(12, 11, 29, 0.1);
    position: relative;
    padding: clamp(4.8rem, 10vw, 8.5rem) 0 clamp(5rem, 10vw, 8rem);
    background: #f9f5f8;
    color: var(--sv-ink);
}

.sv-shell {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2rem);
}

/* ---------- Intro ---------- */

.sv-intro {
    display: grid;
    gap: 1.6rem;
    margin-bottom: clamp(3rem, 6.5vw, 5rem);
}

.sv-label {
    margin-bottom: 1.4rem;
}

.sv-title {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--sv-ink);
}

.sv-title > span {
    display: block;
}

/* "One aligned creative system." in the brand colours, slowly flowing. */
.sv-title-soft {
    color: transparent;
    background: linear-gradient(94deg, #7c3aed 0%, #0ea5e9 35%, #f472b6 65%, #7c3aed 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    /* Room for descenders (the g in "aligned") inside the clipped gradient. */
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
    /* Sets the l of "aligned" squarely under the p of "capabilities" above
       (both lines are the same size, so this holds at every width). */
    word-spacing: 0.058em;
}

@media (prefers-reduced-motion: no-preference) {
    .sv-title-soft {
        animation: sv-flow 10s ease-in-out infinite alternate;
    }
}

@keyframes sv-flow {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

.sv-lede {
    max-width: 34rem;
    margin: 0;
    font-size: clamp(1.02rem, 1.25vw, 1.18rem);
    line-height: 1.72;
    color: var(--sv-muted);
}

@media (min-width: 960px) {
    .sv-intro {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: end;
        gap: clamp(2.5rem, 5vw, 5rem);
    }

    .sv-lede {
        padding-bottom: 0.5rem;
    }
}

/* ---------- Layout: the stage above the list, or beside it ---------- */

.sv-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 5vw, 2.5rem);
}

.sv-stage {
    order: -1;
}

@media (min-width: 960px) {
    .sv-body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
        align-items: center;
        gap: clamp(3rem, 6vw, 6rem);
    }

    .sv-stage {
        order: 0;
    }
}

/* ---------- The list ---------- */

.sv-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--sv-line);
}

.sv-row {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    padding: clamp(0.95rem, 2.2vw, 1.4rem) 0;
    border-top: 1px solid var(--sv-line);
}

/* The active service's two colours fill its hairline. */
.sv-row::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgb(var(--scope-a)), rgb(var(--scope-b)));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s var(--hx-ease);
}

.sv-n {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(12, 11, 29, 0.35);
    font-variant-numeric: tabular-nums;
    transition: color 0.5s var(--hx-ease);
}

.sv-name {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.85rem, 3.9vw, 3.5rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.045em;
    color: var(--sv-ink);
    transition: color 0.5s var(--hx-ease);
}

/* Read aloud with each service and shown in the explorer, not on the page. */
.sv-desc {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Only the arrow shows; its label stays for screen readers. */
.sv .cs-scope {
    margin: 0;
}

.sv .cs-trigger-label,
.sv .cs-trigger-n {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Without JavaScript the scope opens beneath the name. */
.sv .cs-scope[open] {
    grid-column: 2 / -1;
}

/* With JavaScript: quiet until active. */
.sv.is-live .sv-row {
    cursor: pointer;
}

.sv.is-live .sv-row:not(.is-active) .sv-name {
    color: rgba(12, 11, 29, 0.24);
}

.sv.is-live .sv-row.is-active::after {
    transform: none;
}

.sv.is-live .sv-row.is-active .sv-n {
    color: rgb(var(--scope-a));
}

.sv.is-live .sv-row.is-active .cs-trigger-arrow {
    border-color: transparent;
    color: #fff;
}

.sv.is-live .sv-row.is-active .cs-trigger-arrow::before {
    transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
    .sv.is-live .sv-row:not(.is-active):hover .sv-name {
        color: rgba(12, 11, 29, 0.5);
    }
}

/* ---------- The stage ---------- */

.sv-frame {
    --sv-a: 149, 71, 247;
    --sv-b: 0, 210, 253;
    position: relative;
    display: grid;
    /* Square, like the photographs, so none of them is cropped. An open scope
       is at least as tall as the frame is wide (100cqw) and may grow taller on
       small screens; the width never follows the content. */
    container-type: inline-size;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #0b0c14;
    box-shadow:
        0 50px 80px -55px rgba(var(--sv-a), 0.75),
        0 34px 70px -48px rgba(var(--sv-b), 0.55);
    isolation: isolate;
    transition: box-shadow 1.1s var(--hx-ease);
}

.sv.is-live .sv-frame {
    cursor: pointer;
}

/* Its own layer, so the pictures' growing stack order stays beneath the
   shading and number. */
.sv-shots {
    position: absolute;
    z-index: 0;
    inset: 0;
}

.sv-shot {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.sv-shot:first-child {
    z-index: 1;
}

.sv-shot picture,
.sv-shot img {
    display: block;
    width: 100%;
    height: 100%;
}

.sv-shot img {
    object-fit: cover;
    transition: transform 1.4s var(--hx-ease), scale 1.2s var(--hx-ease);
}

@media (hover: hover) and (pointer: fine) {
    .sv-frame:hover .sv-shot.is-current img {
        transform: scale(1.035);
    }
}

/* Legibility for the number, plus a wash of the service's colour. */
.sv-shade {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 6, 16, 0) 55%, rgba(5, 6, 16, 0.78) 100%),
        radial-gradient(70% 50% at 100% 100%, rgba(var(--sv-b), 0.26), transparent 70%);
}

.sv-count {
    position: absolute;
    z-index: 21;
    left: clamp(1.1rem, 2.4vw, 1.75rem);
    bottom: clamp(0.9rem, 2.2vw, 1.5rem);
    display: flex;
    align-items: flex-start;
    margin: 0;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.sv-count-roll {
    position: relative;
    display: block;
    height: 1em;
    overflow: hidden;
    font-size: clamp(2.6rem, 5.6vw, 5.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
}

.sv-count-roll span {
    display: block;
}

.sv-count-roll span + span {
    position: absolute;
    inset: 0;
}

.sv-count-total {
    margin: 0.45rem 0 0 0.6rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
}

/* ---------- A service's scope, laid over its picture ---------- */

.sv-detail {
    position: absolute;
    z-index: 25;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.55rem, 1.1vw, 0.8rem);
    padding: clamp(1.1rem, 2.4vw, 1.75rem);
    color: #fff;
    /* A plain wash (no backdrop blur, no zoom on the picture), so the picture
       underneath never shifts or flickers as the scope fades in. */
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(var(--sv-a), 0.2), transparent 70%),
        linear-gradient(180deg, rgba(5, 6, 16, 0.66) 0%, rgba(5, 6, 16, 0.8) 55%, rgba(5, 6, 16, 0.9) 100%);
    cursor: auto;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Fade speeds: gentle when it comes on its own, quick on a click (set
       by the script). */
    --sv-fade: 0.3s;
    --sv-rise: 0.5s;
    --sv-base: 0.04s;
    --sv-step: 0.025s;
}

.sv-detail.is-slow {
    --sv-fade: 0.7s;
    --sv-rise: 0.75s;
    --sv-base: 0.12s;
    --sv-step: 0.05s;
}

.sv-detail.is-fast {
    --sv-fade: 0.25s;
    --sv-rise: 0.45s;
    --sv-base: 0.03s;
    --sv-step: 0.02s;
}

.sv-frame.is-open .sv-detail {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--sv-fade) ease;
}

.sv-frame.is-open .sv-count {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Small screens: an open scope may need more room than the square, so it
   joins the flow (at least square) and the frame grows to fit it. */
@media (max-width: 959px) {
    .sv-frame.is-open {
        aspect-ratio: auto;
    }

    .sv-frame.is-open .sv-detail {
        position: relative;
        min-height: 100cqw;
        overflow: visible;
    }
}

/* The pointer belongs to the closed picture only. */
.sv .sv-frame.is-open {
    cursor: auto;
}

.sv-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sv-detail-eyebrow {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #7fd3f7;
}

.sv-detail-close {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.35s var(--hx-ease), border-color 0.35s var(--hx-ease), scale 0.35s var(--hx-ease);
}

.sv-detail-close svg {
    width: 0.95rem;
    height: 0.95rem;
}

.sv-detail-close:hover {
    border-color: rgba(var(--sv-a), 0.9);
    background: rgba(var(--sv-a), 0.3);
    scale: 1.06;
}

.sv-detail-title {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2.15rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    outline: none;
}

.sv-detail-desc {
    margin: 0;
    max-width: 30rem;
    font-size: clamp(0.86rem, 1vw, 0.98rem);
    line-height: 1.55;
    color: rgba(230, 231, 242, 0.84);
}

.sv-detail-k {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.2rem 0 0;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.sv-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(0.9rem, 1.6vw, 1.4rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-detail-list li {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
    padding: clamp(0.3rem, 0.6vw, 0.42rem) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: clamp(0.8rem, 0.95vw, 0.9rem);
    font-weight: 600;
    line-height: 1.3;
    color: rgba(248, 247, 252, 0.95);
}

.sv-detail-n {
    flex: none;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: rgb(var(--sv-b));
    font-variant-numeric: tabular-nums;
}

.sv-detail-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.75rem;
    height: 2.6rem;
    margin-top: auto;
    padding: 0 0.35rem 0 1rem;
    border-radius: 0.375rem;
    background: linear-gradient(100deg, var(--hx-purple) 0%, #5b4af0 48%, var(--hx-cyan) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 28px -14px rgba(124, 58, 237, 0.8);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transform-origin: left center;
    transition: scale 0.4s var(--hx-ease);
}

.sv-detail-cta-arrow {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    background: rgba(2, 6, 23, 0.3);
}

.sv-detail-cta-arrow svg {
    width: 0.9rem;
    height: 0.9rem;
}

.sv-detail-cta:hover {
    scale: 1.04;
}

.sv-detail-close:focus-visible,
.sv-detail-cta:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: 3px;
}

/* Each part settles in, a beat apart; the list follows item by item. */
@media (prefers-reduced-motion: no-preference) {
    .sv-detail.is-in > * {
        animation: sv-detail-in var(--sv-rise) var(--hx-ease) both;
        animation-delay: calc(var(--sv-base) + var(--d, 0) * var(--sv-step));
    }

    .sv-detail.is-in .sv-detail-list {
        animation: none;
    }

    .sv-detail.is-in .sv-detail-list li {
        animation: sv-detail-in var(--sv-rise) var(--hx-ease) both;
        animation-delay: calc(var(--sv-base) + 4 * var(--sv-step) + var(--i, 0) * var(--sv-step) * 0.45);
    }
}

@keyframes sv-detail-in {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
}

/* ---------- Phones and small tablets: one pinned stage, played by scroll ----------
   Below 900px the section holds the screen while the visitor's scroll plays
   the six services through one stage (built and driven by the script). The
   page floods dark as it arrives; the pictures are a deck the front card
   is flicked off; huge outlined names pan behind; chips gather in. The list
   stays for screen readers. */

.sv-m,
.sv-sr-scope {
    display: none;
}

@media (max-width: 899px) {
    .sv {
        /* The condensed nav bar's height: the stage starts below it. */
        --sv-pin: calc(env(safe-area-inset-top, 0px) + 4.4rem);
    }

    .sv-stage,
    .sv .cs-scope {
        display: none;
    }

    /* Read by screen readers (with each scope); the stage is shown instead. */
    .sv-list,
    .sv-sr-scope {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .sv-sr-scope {
        display: block;
    }

    /* One screen, a stretch per handover, and a short exit (the script
       spends the last 40svh lightening the page again). */
    .sv-m {
        display: block;
        position: relative;
        /* vh first for browsers without svh (older iPhones). */
        height: calc(100vh + (var(--count, 6) - 1) * 58vh + 40vh);
        height: calc(100svh + (var(--count, 6) - 1) * 58svh + 40svh);
        margin: 0 calc(-1 * clamp(1.25rem, 4vw, 2rem));
    }

    /* Each service gets a light hold: the page settles on it when a scroll
       comes to rest nearby (proximity, so it never fights the visitor), and
       a single swipe stops at the next one (snap-stop). The snap points sit
       where each service is fully in (placed by the script). */
    html {
        scroll-snap-type: y proximity;
    }

    .sv-m-snap {
        position: absolute;
        left: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .sv-m-pin {
        --ga: 149, 71, 247;
        --gb: 0, 210, 253;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(0.85rem, 2.2svh, 1.5rem);
        height: 100vh;
        height: 100svh;
        padding: calc(var(--sv-pin) + 0.75rem) clamp(1.25rem, 4vw, 2rem) clamp(1rem, 3svh, 2rem);
        overflow: hidden;
        border-radius: var(--round, 0) var(--round, 0) 0 0;
        background: #f9f5f8;
        isolation: isolate;
    }

    .sv-m-pin > :not(.sv-m-glow, .sv-m-words) {
        position: relative;
        z-index: 2;
    }

    /* ----- Light: a wash of the service's colours, and the panning names ----- */

    .sv-m-glow {
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(70% 40% at 50% 34%, rgba(var(--ga), 0.42), transparent 72%),
            radial-gradient(60% 35% at 85% 88%, rgba(var(--gb), 0.22), transparent 70%),
            radial-gradient(50% 30% at 10% 70%, rgba(var(--ga), 0.14), transparent 70%);
        opacity: 0;
        transition: opacity 0.8s ease;
    }

    .sv-m-pin.is-dark .sv-m-glow {
        opacity: 1;
    }

    .sv-m-words {
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: 36%;
        translate: 0 -50%;
        pointer-events: none;
    }

    .sv-m-track {
        display: flex;
        gap: 10vw;
        width: max-content;
        will-change: transform;
    }

    .sv-m-word {
        font-family: "Manrope", sans-serif;
        font-size: clamp(6rem, 31vw, 15rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.055em;
        white-space: nowrap;
        color: rgba(255, 255, 255, calc(var(--on, 0) * 0.07));
        -webkit-text-stroke: 1.5px rgba(255, 255, 255, calc(0.08 + var(--on, 0) * 0.2));
    }

    /* ----- Progress: one bar per service ----- */

    .sv-m-bar {
        display: grid;
        grid-template-columns: repeat(var(--count, 6), minmax(0, 1fr));
        gap: 0.35rem;
    }

    .sv-m-seg {
        position: relative;
        height: 1.4rem;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .sv-m-seg::before,
    .sv-m-seg i {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 3px;
        margin-top: -1.5px;
        border-radius: 2px;
    }

    .sv-m-seg::before {
        background: rgba(12, 11, 29, 0.1);
        transition: background-color 0.5s ease;
    }

    .sv-m-pin.is-dark .sv-m-seg::before {
        background: rgba(255, 255, 255, 0.16);
    }

    .sv-m-seg i {
        background: linear-gradient(90deg, rgb(var(--scope-a)), rgb(var(--scope-b)));
        box-shadow: 0 0 10px rgba(var(--scope-a), 0.7);
        transform: scaleX(var(--fill, 0));
        transform-origin: left;
    }

    /* ----- The deck: square cards, so every photograph shows whole ----- */

    .sv-m-deck {
        position: relative;
        align-self: center;
        flex: none;
        /* Room below the front card for the ones waiting behind it. */
        width: min(100% - 2.5rem, calc((100svh - var(--sv-pin) - 27rem) / 1.16), 26rem);
        aspect-ratio: 1 / 1.16;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: scale 0.3s var(--hx-ease);
    }

    .sv-m-deck:active {
        scale: 0.97;
    }

    .sv-m-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 0.5rem;
        background: #0b0c14;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.07),
            0 34px 60px -34px rgba(var(--scope-a), 0.75),
            0 18px 40px -26px rgba(0, 0, 0, 0.7);
        transform-origin: 50% 100%;
        will-change: transform, opacity;
    }

    .sv-m-card picture,
    .sv-m-card img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .sv-m-card img {
        object-fit: cover;
        will-change: transform;
    }

    /* ----- Number, name, description and scope ----- */

    .sv-m-head {
        display: flex;
        align-items: flex-end;
        gap: 0.85rem;
        margin-bottom: clamp(0.7rem, 1.8svh, 1.1rem);
    }

    .sv-m-num {
        display: block;
        flex: none;
        height: 1em;
        overflow: hidden;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(2.5rem, 12vw, 3.6rem);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.05em;
        font-variant-numeric: tabular-nums;
    }

    .sv-m-roll,
    .sv-m-roll span {
        display: block;
    }

    .sv-m-roll span {
        height: 1em;
        color: transparent;
        background: linear-gradient(135deg, rgb(var(--ga)), rgb(var(--gb)));
        -webkit-background-clip: text;
        background-clip: text;
    }

    /* The names share one masked slot. */
    /* The names' size is set here, so the room below the line inside the
       mask (for the tails of g and y, which reach about 0.11em past a name's
       own box) scales with them. */
    .sv-m-names {
        display: grid;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        padding-bottom: 0.3em;
        margin-bottom: -0.3em;
        font-size: clamp(2rem, 9.2vw, 3.2rem);
    }

    .sv-m-name {
        grid-area: 1 / 1;
        font-family: "Manrope", sans-serif;
        font-size: 1em;
        font-weight: 800;
        line-height: 1.04;
        letter-spacing: -0.045em;
        white-space: nowrap;
        color: var(--sv-ink);
        transition: color 0.5s ease;
        will-change: transform;
    }

    .sv-m-copies {
        display: grid;
    }

    .sv-m-copy {
        grid-area: 1 / 1;
        min-width: 0;
    }

    .sv-m-desc {
        max-width: 34rem;
        margin: 0 0 0.9rem;
        font-size: 0.98rem;
        line-height: 1.55;
        color: var(--sv-muted);
        transition: color 0.5s ease;
    }

    .sv-m-scope {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin: 0;
    }

    .sv-m-scope span {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.3rem 0.5rem;
        border: 1px solid var(--sv-line);
        border-radius: 0.375rem;
        background: rgba(255, 255, 255, 0.72);
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--sv-ink);
        transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
        will-change: transform, opacity;
    }

    .sv-m-scope span::before {
        content: "";
        flex: none;
        width: 0.32rem;
        height: 0.32rem;
        border-radius: 1px;
        background: linear-gradient(135deg, rgb(var(--scope-a)), rgb(var(--scope-b)));
        box-shadow: 0 0 6px rgba(var(--scope-a), 0.8);
    }

    /* On the night stage. */
    .sv-m-pin.is-dark .sv-m-name {
        color: #fff;
    }

    .sv-m-pin.is-dark .sv-m-desc {
        color: rgba(226, 228, 242, 0.72);
    }

    .sv-m-pin.is-dark .sv-m-scope span {
        border-color: rgba(255, 255, 255, 0.13);
        background: rgba(255, 255, 255, 0.06);
        color: #f3f2fa;
    }
}

/* Shorter phones: the description gives its room to the deck. */
@media (max-width: 899px) and (max-height: 700px) {
    .sv-m-desc {
        display: none;
    }

    .sv-m-deck {
        width: min(100% - 2.5rem, calc((100svh - var(--sv-pin) - 20rem) / 1.16), 26rem);
    }
}

/* The narrowest short phones: the scope wraps onto more lines. */
@media (max-width: 359px) and (max-height: 700px) {
    .sv-m-deck {
        width: min(100% - 2.5rem, calc((100svh - var(--sv-pin) - 22rem) / 1.16), 26rem);
    }
}

/* Landscape phones: deck beside the words. */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
    .sv-m-pin {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-content: center;
        column-gap: 1.75rem;
        row-gap: 0.75rem;
        padding-top: calc(var(--sv-pin) + 0.5rem);
        padding-bottom: 0.9rem;
    }

    .sv-m-bar {
        grid-column: 1 / -1;
    }

    .sv-m-deck {
        width: calc((100svh - var(--sv-pin) - 3.6rem) / 1.16);
    }

    .sv-m-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .sv-m-words {
        top: 55%;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .sv-detail,
    .sv-frame.is-open .sv-detail,
    .sv-row::after,
    .sv-n,
    .sv-name,
    .sv-frame,
    .sv-shot img,
    .sv-m-deck {
        transition: none !important;
    }
}