/* ==========================================================================
   Homepage — Contact (.ct) and Other Ways to Connect (.cn).
   Plain CSS; shares tokens from home-hero.css and the .st-* section
   primitives from home-story.css. Form behaviour lives in index.html.
   ========================================================================== */

/* ==========================================================================
   Contact — the primary conversion moment
   ========================================================================== */

.ct {
    position: relative;
    padding: clamp(5rem, 10vw, 9rem) 0 clamp(5rem, 10vw, 8.5rem);
    color: #fff;
    font-family: "Manrope", sans-serif;
    /* Opens on Our Reach's closing colour, so the two read as one chapter. */
    background: linear-gradient(180deg, #131315 0%, #0f0f16 55%, #0b0b12 100%);
}

/* Atmosphere is clipped here, not on the section, so the intro can stay sticky. */
.ct-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ct-bg::before,
.ct-bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.ct-bg::before {
    width: 54rem;
    height: 42rem;
    left: -16rem;
    top: 18%;
    background: radial-gradient(closest-side, rgba(124, 58, 237, 0.2), transparent);
}

.ct-bg::after {
    width: 40rem;
    height: 32rem;
    right: -12rem;
    bottom: 12rem;
    background: radial-gradient(closest-side, rgba(14, 165, 233, 0.1), transparent);
}

/* ---------- Phones and small tablets: a horizon where Our Reach hands over ----------
   The two sections share one near-black, so on a narrow screen their seam
   read as a long dead stretch. A tighter gap (with Our Reach's own, in
   story.css) and, on the seam, a line of brand light with a glow beneath it,
   a comet of light running along it now and then (the line draws out from
   the middle as it arrives: assets/js/home/mobile.js). */

@media (max-width: 899px) {
    .ct {
        padding-top: 3.75rem;
    }

    .ct::before,
    .ct::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        pointer-events: none;
    }

    /* The line, and the light spilling from it (centred on the seam). */
    .ct::before {
        left: 0;
        right: 0;
        height: 5rem;
        translate: 0 -50%;
        background:
            linear-gradient(90deg, transparent 0%, #7c3aed 20%, #0ea5e9 50%, #f472b6 80%, transparent 100%) center / 100% 1px no-repeat,
            radial-gradient(48% 34% at 50% 50%, rgba(124, 58, 237, 0.3), transparent 72%),
            radial-gradient(30% 22% at 50% 50%, rgba(14, 165, 233, 0.22), transparent 72%);
        transform-origin: 50% 50%;
    }

    /* The comet: a bright head with a soft tail behind it. */
    .ct::after {
        left: 0;
        width: 10rem;
        height: 1.4rem;
        translate: -100% -50%;
        background:
            radial-gradient(2.6rem 0.55rem at 80% 50%, rgba(255, 255, 255, 0.95), rgba(191, 229, 255, 0.5) 30%, transparent 70%),
            radial-gradient(7rem 0.35rem at 45% 50%, rgba(165, 214, 255, 0.4), transparent 70%);
        opacity: 0;
    }
}

@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
    .ct::after {
        animation: ct-comet 6s cubic-bezier(0.45, 0, 0.25, 1) 1.4s infinite;
    }
}

@keyframes ct-comet {
    0% { transform: translateX(0); opacity: 0; }
    6% { opacity: 1; }
    40% { opacity: 1; }
    46%, 100% { transform: translateX(calc(100vw + 10rem)); opacity: 0; }
}

.ct-grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
}

.ct .st-title {
    font-size: clamp(2.3rem, 3.9vw, 3.7rem);
}

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

.ct-title .ct-title-lit {
    /* The gradient only paints inside the box; extend it below the line so
       descenders (the "g" in "building") aren't cut off. */
    padding-bottom: 0.16em;
    margin-bottom: -0.16em;
    color: transparent;
    background: linear-gradient(94deg, #c9b4ff 0%, #8fd8f8 70%, #f6b6dc 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ct-copy {
    margin-top: 1.75rem;
    color: rgba(222, 224, 240, 0.74);
}

.ct-copy .st-lede {
    color: #fff;
}

.ct-direct {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    align-items: baseline;
    margin: 2.25rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
    color: rgba(222, 224, 240, 0.66);
}

.ct-direct a {
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(90deg, var(--hx-purple), var(--hx-cyan)) left bottom / 100% 1px no-repeat;
    padding-bottom: 0.15rem;
    overflow-wrap: anywhere;
}

.ct-direct a:hover {
    color: #c9b4ff;
}

/* ---------- Form panel ---------- */

.ct-panel {
    position: relative;
    padding: clamp(1.4rem, 3.2vw, 2.75rem);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.025);
}

.ct-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ct-signal {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.ct-signal-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #34d3ee;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18), 0 0 12px rgba(14, 165, 233, 0.8);
}

.ct-req {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(222, 224, 240, 0.6);
}

.ct-star {
    color: #7dd3fc;
}

/* ---------- Groups and fields ---------- */

.ct-group {
    min-width: 0;
    margin: 0 0 2rem;
    padding: 0;
    border: 0;
}

.ct-legend {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin-bottom: 1rem;
    padding: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

/* The studio's own name for each group, kept as a quiet secondary label. */
.ct-legend-k {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.ct-row {
    display: grid;
    gap: 1.25rem;
}

.ct-field {
    min-width: 0;
}

.ct-field + .ct-field {
    margin-top: 0;
}

.ct-group > .ct-field + .ct-field {
    margin-top: 1.25rem;
}

.ct-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(238, 238, 248, 0.88);
}

.ct-optional {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(222, 224, 240, 0.5);
}

.ct-input {
    display: block;
    width: 100%;
    min-height: 3.35rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    /* 16px+ keeps iOS from zooming into the field. */
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    box-shadow: none;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.ct-input::placeholder {
    color: rgba(222, 224, 240, 0.36);
}

.ct-input:hover {
    border-color: rgba(255, 255, 255, 0.22);
}

.ct-input:focus {
    outline: none;
    border-color: #8b5cf6;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);
}

textarea.ct-input {
    min-height: 9.5rem;
    resize: vertical;
}

.ct-input[aria-invalid="true"] {
    border-color: #ff6e84;
    box-shadow: 0 0 0 3px rgba(255, 110, 132, 0.16);
}

.ct-error {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #ffb2b9;
}

.ct-error::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.08rem;
    border-radius: 50%;
    background: #ff6e84;
    font-size: 0.7rem;
    font-weight: 800;
    color: #2a0610;
}

.ct-error[hidden] {
    display: none;
}

@media (min-width: 640px) {
    .ct-row--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Consent ---------- */

.ct-consent-note {
    margin: -0.35rem 0 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(222, 224, 240, 0.62);
}

.ct-checks {
    display: grid;
    gap: 0.85rem;
}

.ct-check {
    position: relative;
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.6rem;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.ct-check:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.ct-check:has(.ct-check-input:checked) {
    border-color: rgba(139, 92, 246, 0.55);
    background: rgba(124, 58, 237, 0.08);
}

/* The real checkbox stays in place (and focusable) under the drawn one. */
.ct-check-input {
    position: absolute;
    left: 1.1rem;
    top: 1.05rem;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ct-check-box {
    position: relative;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.05rem;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.3rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ct-check-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 90% no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 90% no-repeat;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s var(--hx-ease);
}

.ct-check-input:checked + .ct-check-box {
    border-color: transparent;
    background: linear-gradient(135deg, var(--hx-purple), var(--hx-cyan));
}

.ct-check-input:checked + .ct-check-box::after {
    opacity: 1;
    transform: none;
}

.ct-check-input:focus-visible + .ct-check-box {
    outline: 2px solid #7dd3fc;
    outline-offset: 3px;
}

.ct-check-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.ct-check-desc {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(222, 224, 240, 0.7);
}

/* ---------- Submit and feedback ---------- */

.ct-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-top: 0.5rem;
}

.ct-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    width: 100%;
    height: 3.6rem;
    padding: 0 0.45rem 0 1.7rem;
    overflow: hidden;
    border: 0;
    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 14px 34px -14px rgba(124, 58, 237, 0.75);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: box-shadow 0.5s var(--hx-ease), transform 0.5s var(--hx-ease), opacity 0.3s ease;
}

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

.ct-submit-arrow svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.6s var(--hx-ease);
}

.ct-spinner {
    display: none;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ct-spin 0.8s linear infinite;
}

@keyframes ct-spin {
    to { transform: rotate(360deg); }
}

.ct-form.is-sending .ct-submit {
    cursor: progress;
    opacity: 0.82;
}

.ct-form.is-sending .ct-submit-arrow svg {
    display: none;
}

.ct-form.is-sending .ct-spinner {
    display: block;
}

.ct-submit:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .ct-submit:not(:disabled):hover {
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 18px 40px -14px rgba(124, 58, 237, 0.9);
    }

    .ct-submit:not(:disabled):hover .ct-submit-arrow svg {
        transform: translateX(3px);
    }
}

.ct-privacy {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: rgba(222, 224, 240, 0.6);
}

.ct-privacy a {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.35);
}

.ct-privacy a:hover {
    color: #fff;
}

.ct-status {
    display: flex;
    gap: 0.8rem;
    margin: 1.5rem 0 0;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(14, 165, 233, 0.35);
    border-radius: 0.6rem;
    background: rgba(14, 165, 233, 0.08);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e6f6fd;
}

.ct-status[hidden] {
    display: none;
}

.ct-status[data-tone="error"] {
    border-color: rgba(255, 110, 132, 0.45);
    background: rgba(255, 110, 132, 0.08);
    color: #ffd6db;
}

.ct-status[data-tone="success"] {
    border-color: rgba(52, 211, 238, 0.45);
    background: rgba(14, 165, 233, 0.1);
}

.ct-status a {
    color: inherit;
    font-weight: 700;
}

@media (min-width: 640px) {
    .ct-submit {
        width: auto;
        min-width: 17rem;
    }
}

/* ---------- Desktop: conversation on the left, form on the right ---------- */

@media (min-width: 1024px) {
    .ct-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: clamp(2rem, 3vw, 3rem);
        align-items: start;
    }

    .ct-intro {
        grid-column: 1 / span 5;
        position: sticky;
        top: 7.5rem;
    }

    .ct-panel {
        grid-column: 6 / span 7;
    }
}

@media (min-width: 1280px) {
    .ct-intro {
        grid-column: 1 / span 5;
        padding-right: 1.5rem;
    }
}

/* ==========================================================================
   Other ways to connect — the Nebulight network. Three beacons (dark icon
   tiles in white frames) joined by a line, each over its card. With motion,
   a signal runs along the line: the line lights in the brand colours behind
   it and each beacon sends out rings as the signal reaches it, then again.
   All of it shares one 6s cycle, so it stays in step.
   ========================================================================== */

.cn {
    --cn-cycle: 6s;
    /* Where each card begins below the top of its beacon. */
    --cn-top: 3rem;
    --cn-gap: clamp(1.5rem, 3vw, 2.75rem);
    position: relative;
    isolation: isolate;
    padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(5rem, 10vw, 8.5rem);
    background:
        radial-gradient(50rem 24rem at 50% 0%, rgba(225, 233, 255, 0.9), transparent 70%),
        #f6f5fb;
    color: #0c0b1d;
    font-family: "Manrope", sans-serif;
}

/* A faint field of points behind the network. */
.cn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(12, 11, 29, 0.1) 1px, transparent 1.3px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(55% 50% at 50% 62%, #000 0%, transparent 100%);
    mask-image: radial-gradient(55% 50% at 50% 62%, #000 0%, transparent 100%);
    pointer-events: none;
}

/* ---------- The heading ---------- */

.cn-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 46rem;
    margin: 0 auto clamp(3.5rem, 7vw, 5.5rem);
    text-align: center;
}

.cn-head .st-label::after {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.cn-copy {
    max-width: 36rem;
    margin: 1.4rem 0 0;
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    line-height: 1.7;
    color: #4b4a5e;
}

/* ---------- The network ---------- */

.cn-network {
    position: relative;
}

.cn-list {
    display: grid;
    gap: 3.25rem;
    max-width: 28rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.cn-list > li {
    display: flex;
}

.cn-card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 0 0 0.25rem;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

/* The beacon: a dark tile in a white frame, with rings that pulse out. */
.cn-beacon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    margin-bottom: -3rem;
    padding: 0.5rem;
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 18px 36px -14px rgba(20, 27, 48, 0.28), 0 0 0 1px rgba(12, 11, 29, 0.04);
    transition: scale 0.5s var(--hx-ease), box-shadow 0.5s var(--hx-ease);
}

.cn-beacon::before,
.cn-beacon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 7.4rem;
    height: 7.4rem;
    border: 2px solid rgba(var(--cn-c), 0.5);
    border-radius: 50%;
    box-shadow: 0 0 22px rgba(var(--cn-c), 0.18), inset 0 0 14px rgba(var(--cn-c), 0.1);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
    pointer-events: none;
}

.cn-tile {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.7rem;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(var(--cn-c), 0.22), transparent 60%),
        #05060d;
    color: var(--cn-icon);
}

.cn-tile .material-symbols-outlined {
    font-size: 2rem;
    transition: scale 0.5s var(--hx-ease);
}

/* The card. */
.cn-card-body,
.cn-k,
.cn-title,
.cn-desc,
.cn-mail {
    position: relative;
    z-index: 1;
}

.cn-card::after {
    content: "";
    position: absolute;
    inset: var(--cn-top) 0 0;
    z-index: 0;
    border: 1px solid rgba(12, 11, 29, 0.07);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px -12px rgba(20, 27, 48, 0.09);
    transition: border-color 0.5s var(--hx-ease), box-shadow 0.5s var(--hx-ease);
}

/* The card's top edge lights in its colour as the signal arrives. */
.cn-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: var(--cn-top);
    left: 18%;
    right: 18%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--cn-c), 0), rgb(var(--cn-c)), rgba(var(--cn-c), 0));
    opacity: 0;
    pointer-events: none;
}

.cn-k {
    margin-top: calc(var(--cn-top) + 2.25rem);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--cn-ink);
}

.cn-title {
    margin: 1rem 0 0;
    font-size: clamp(1.9rem, 2.6vw, 2.35rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: #0c0b1d;
}

.cn-desc {
    max-width: 22rem;
    margin: 1.1rem 0 0;
    padding: 0 1.75rem;
    font-size: 0.98rem;
    line-height: 1.7;
    color: #5d5b70;
}

.cn-mail {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: auto 1.5rem 2.1rem;
    padding-top: 1.5rem;
    font-size: clamp(0.84rem, 1.05vw, 0.98rem);
    font-weight: 700;
    color: #0c0b1d;
}

.cn-mail-text {
    padding-bottom: 0.3rem;
    overflow-wrap: anywhere;
    background:
        linear-gradient(90deg, rgb(var(--cn-c)), rgb(var(--cn-c))) left bottom / 0% 2px no-repeat,
        linear-gradient(90deg, rgba(var(--cn-c), 0.3), rgba(var(--cn-c), 0.3)) left bottom / 100% 1px no-repeat;
    transition: background-size 0.6s var(--hx-ease), color 0.4s var(--hx-ease);
}

.cn-arrow {
    display: inline-grid;
    flex: none;
    color: rgb(var(--cn-c));
}

.cn-arrow svg {
    width: 1.15rem;
    height: 1.15rem;
    transition: transform 0.5s var(--hx-ease);
}

.cn-card:focus-visible {
    outline: none;
}

.cn-card:focus-visible::after {
    outline: 2px solid var(--cn-ink);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .cn-card:hover::after {
        border-color: rgba(var(--cn-c), 0.3);
        box-shadow: 0 26px 56px -16px rgba(var(--cn-c), 0.22);
    }

    .cn-card:hover .cn-beacon {
        scale: 1.05;
        box-shadow: 0 18px 40px -12px rgba(var(--cn-c), 0.45), 0 0 0 1px rgba(var(--cn-c), 0.12);
    }

    .cn-card:hover .cn-tile .material-symbols-outlined {
        scale: 1.12;
    }

    .cn-card:hover .cn-mail-text {
        color: var(--cn-ink);
        background-size: 100% 2px, 100% 1px;
    }

    .cn-card:hover .cn-arrow svg {
        transform: translateX(3px);
    }
}

/* ---------- Wide: three across, joined by the line ---------- */

.cn-wire {
    display: none;
}

@media (min-width: 900px) {
    /* The beacons sit above their cards, as on a line of their own. */
    .cn {
        --cn-top: 8rem;
    }

    .cn-beacon {
        margin-bottom: 0;
    }

    .cn-k {
        margin-top: 4.6rem;
    }

    .cn-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--cn-gap);
        max-width: none;
    }

    /* From the first beacon's centre to the last's. */
    .cn-wire {
        position: absolute;
        z-index: 1;
        top: 3rem;
        left: calc((100% - 2 * var(--cn-gap)) / 6);
        right: calc((100% - 2 * var(--cn-gap)) / 6);
        display: block;
        height: 1px;
        background: rgba(12, 11, 29, 0.14);
        pointer-events: none;
    }

    .cn-wire-lit {
        position: absolute;
        inset: -0.5px 0;
        background: linear-gradient(90deg, #7c3aed, #0ea5e9 50%, #f472b6);
        box-shadow: 0 0 10px rgba(14, 165, 233, 0.45);
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left;
    }

    /* The signal: the same comet as the line in Why It Matters, soft ovals
       that fade out on every side, a bright head (at the moving point) and a
       faint tail trailing behind it. */
    .cn-wire-pulse {
        position: absolute;
        top: 50%;
        left: 0;
        width: 19rem;
        height: 2rem;
        background:
            radial-gradient(5rem 1rem at 75% 50%, rgba(255, 255, 255, 0.92) 0%, rgba(215, 238, 255, 0.55) 20%, rgba(160, 205, 255, 0.16) 55%, rgba(160, 205, 255, 0) 100%),
            radial-gradient(9.4rem 0.66rem at calc(75% - 4.4rem) 50%, rgba(190, 230, 255, 0.32) 0%, rgba(150, 200, 255, 0.1) 60%, rgba(150, 200, 255, 0) 100%);
        opacity: 0;
        transform: translate(-75%, -50%);
    }
}

/* ---------- Motion (one shared cycle) ----------
   Runs without the script too; with it, it starts when the network comes
   into view and pauses while it is off screen. */

@media (prefers-reduced-motion: no-preference) {
    .cn:not(.cn-armed) .cn-beacon::before,
    .cn.is-on .cn-beacon::before {
        animation: cn-ring var(--cn-cycle) cubic-bezier(0.2, 0.7, 0.2, 1) var(--cn-at, 0s) infinite;
    }

    .cn:not(.cn-armed) .cn-beacon::after,
    .cn.is-on .cn-beacon::after {
        animation: cn-ring var(--cn-cycle) cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--cn-at, 0s) + 0.5s) infinite;
    }

    .cn:not(.cn-armed) .cn-tile,
    .cn.is-on .cn-tile {
        animation: cn-flash var(--cn-cycle) ease-out var(--cn-at, 0s) infinite;
    }

    .cn:not(.cn-armed) .cn-card::before,
    .cn.is-on .cn-card::before {
        animation: cn-edge var(--cn-cycle) ease-out calc(var(--cn-at, 0s) + 0.15s) infinite;
    }

    .cn:not(.cn-armed) .cn-wire-lit,
    .cn.is-on .cn-wire-lit {
        animation: cn-trace var(--cn-cycle) linear infinite;
    }

    .cn:not(.cn-armed) .cn-wire-pulse,
    .cn.is-on .cn-wire-pulse {
        animation: cn-travel var(--cn-cycle) linear infinite;
    }

    .cn.is-held .cn-network *,
    .cn.is-held .cn-network *::before,
    .cn.is-held .cn-network *::after {
        animation-play-state: paused;
    }
}

/* A ring opens out and fades. */
@keyframes cn-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
    4% { opacity: 0.85; }
    22% { opacity: 0.3; }
    40%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

/* The tile glows in its colour as the signal arrives. */
@keyframes cn-flash {
    0% { box-shadow: 0 0 0 0 rgba(var(--cn-c), 0), inset 0 0 0 1px rgba(var(--cn-c), 0); }
    4% { box-shadow: 0 0 26px 2px rgba(var(--cn-c), 0.55), inset 0 0 0 1px rgba(var(--cn-c), 0.55); }
    30%, 100% { box-shadow: 0 0 0 0 rgba(var(--cn-c), 0), inset 0 0 0 1px rgba(var(--cn-c), 0); }
}

@keyframes cn-edge {
    0% { opacity: 0; }
    6% { opacity: 1; }
    35%, 100% { opacity: 0; }
}

/* The line lights behind the signal (first to last beacon in 2.5s of the
   6s cycle), holds a moment, then fades. */
@keyframes cn-trace {
    0% { opacity: 1; transform: scaleX(0); }
    41.67% { opacity: 1; transform: scaleX(1); }
    70%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes cn-travel {
    0% { left: 0%; opacity: 0; }
    3% { opacity: 1; }
    41.67% { left: 100%; opacity: 1; }
    47%, 100% { left: 100%; opacity: 0; }
}

/* Reduced motion: still beacons and a plain line. */
@media (prefers-reduced-motion: reduce) {
    .cn-beacon,
    .cn-tile .material-symbols-outlined,
    .cn-card::after,
    .cn-mail-text,
    .cn-arrow svg {
        transition: none !important;
    }
}

/* ==========================================================================
   Footer nav: six links now, so let them wrap on narrow phones.
   ========================================================================== */

.footer-nav-block {
    flex-wrap: wrap;
    row-gap: 0.9rem;
}

.footer-nav-block a {
    /* Comfortable tap targets (24px+ tall) without changing the layout's look. */
    display: inline-block;
    padding: 0.45rem 0;
}