/* ===== NavTech Cybersecurity: the line sheets =====
   Nine service cards on the same paper as the NavTech Service cards.
   cyber-flow.js draws a picture on each in dashed watercolour lines, in
   the pigments of the service cards, and keeps the dashes travelling
   while a card is on screen. The first card, the flagship service, is
   four times the size of the others. Without scripting the cards are
   plain paper with their text. */
.cyber {
    --cy-ink: #12151b;
    --cy-muted: rgba(18, 21, 27, 0.62);
    --cy-paper: #fafafa;
    --cy-gap: clamp(0.75rem, 1.4vw, 1.5rem);
    position: relative;
    z-index: 2;
    padding: clamp(4.5rem, 8vw, 7rem) var(--page-edge) clamp(4rem, 7vw, 6.5rem);
    color: var(--cy-ink);
    background: #ffffff;
}

.cy-head {
    margin: 0 0 clamp(2rem, 3.6vw, 4.5rem);
    text-align: center;
}
.cy-eyebrow {
    display: block;
    margin: 0 0 clamp(0.75rem, 1.3vw, 1.6rem);
    font-family: var(--sans);
    font-size: clamp(0.95rem, 1.25vw, 1.6rem);
    font-weight: 500;
    color: var(--cy-ink);
}
.cy-heading {
    max-width: 12.5em;
    margin: 0 auto;
    font-family: var(--sans-titles);
    font-size: clamp(2rem, 4.1vw, 5.125rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--cy-ink);
}

/* --- The sheets --- */
.cy-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cy-gap);
    max-width: 90rem;
    margin: 0 auto;
    padding: 0;
}
.cy-card {
    position: relative;
    aspect-ratio: 5 / 7;
    overflow: hidden;
    container-type: inline-size;
    /* The same corner as the service cards: 6.5% of the card's width.
       A percentage radius is taken from each side separately, so the
       vertical one is scaled back by the card's 5:7 shape. (cqw can't be
       used here: on the container itself it would mean the viewport.) */
    border-radius: 6.5% / calc(6.5% * 5 / 7);
    background: var(--cy-paper);
    box-shadow:
        0 0 0 1px rgba(18, 21, 27, 0.06),
        0 1px 2px -1px rgba(18, 21, 27, 0.06),
        0 2px 4px 0 rgba(18, 21, 27, 0.04);
}
@supports (corner-shape: squircle) {
    .cy-card {
        border-radius: 11% / calc(11% * 5 / 7);
        corner-shape: squircle;
    }
}
.cy-paper,
.cy-art {
    position: absolute;
    display: block;
    pointer-events: none;
}
.cy-paper {
    inset: 0;
    width: 100%;
    height: 100%;
}
/* The picture: a square in the middle of the sheet, between the title
   and the description. Multiply lets the paper show through the lines. */
.cy-art {
    left: 13cqw;
    top: 24.5cqw;
    width: 74cqw;
    height: 74cqw;
    mix-blend-mode: multiply;
}
.cy-name {
    position: absolute;
    top: 6.5cqw;
    left: 6.5cqw;
    right: 6.5cqw;
    margin: 0;
    font-family: var(--sans-titles);
    font-size: clamp(1.05rem, 6.2cqw, 1.7rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--cy-ink);
}
.cy-copy {
    position: absolute;
    left: 6.5cqw;
    right: 6.5cqw;
    bottom: 6.5cqw;
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(0.85rem, 4.7cqw, 1.25rem);
    font-weight: 400;
    line-height: 1.42;
    color: rgba(18, 21, 27, 0.78);
}
.cy-facts,
.cy-more { display: none; }

/* --- The lead card: two columns wide, two rows tall --- */
@media (min-width: 641px) {
    .cy-card--lead {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: auto;
        border-radius: 3.2% / calc(3.2% * 0.72);
    }
    @supports (corner-shape: squircle) {
        .cy-card--lead { border-radius: 5.4% / calc(5.4% * 0.72); }
    }
    .cy-card--lead .cy-name {
        top: 5cqw;
        left: 5cqw;
        right: 5cqw;
        font-size: clamp(1.5rem, 5.4cqw, 2.6rem);
    }
    .cy-card--lead .cy-art {
        left: 10cqw;
        top: 13cqw;
        width: 80cqw;
        height: 80cqw;
    }
    .cy-card--lead .cy-more { display: inline; }
    .cy-card--lead .cy-copy {
        left: 5cqw;
        right: 5cqw;
        bottom: 17cqw;
        max-width: 30em;
        font-size: clamp(1rem, 3.3cqw, 1.5rem);
    }
    .cy-card--lead .cy-facts {
        position: absolute;
        left: 5cqw;
        right: 5cqw;
        bottom: 5cqw;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3cqw;
        margin: 0;
        padding: 2.6cqw 0 0;
        list-style: none;
        border-top: 1px solid rgba(18, 21, 27, 0.1);
        font-family: var(--sans);
        font-size: clamp(0.8rem, 2.35cqw, 1.05rem);
        font-weight: 500;
        line-height: 1.3;
        color: var(--cy-ink);
    }
}

.cy-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 2vw, 2rem);
    margin: clamp(2rem, 4vw, 4.5rem) auto 0;
    text-align: center;
}
.cy-lede {
    max-width: 34em;
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(1rem, 1.3vw, 1.625rem);
    font-weight: 400;
    line-height: 1.55;
    text-wrap: balance;
    color: var(--cy-muted);
}

/* --- Small desktops: three columns, the lead card beside two others --- */
@media (max-width: 1279px) {
    .cy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Tablets: two columns, the lead card across both --- */
@media (max-width: 1023px) {
    .cy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cy-card--lead {
        grid-row: auto;
        aspect-ratio: 0.72;
    }
}

/* --- Phones: one row of sheets that scrolls --- */
@media (max-width: 640px) {
    .cyber { padding-inline: 0; }
    .cy-head, .cy-foot { padding-inline: clamp(1.35rem, 5.5vw, 1.75rem); }
    .cy-grid {
        display: flex;
        max-width: none;
        padding: 2px clamp(1.35rem, 5.5vw, 1.75rem) 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: clamp(1.35rem, 5.5vw, 1.75rem);
        scrollbar-width: none;
    }
    .cy-grid::-webkit-scrollbar { display: none; }
    .cy-card,
    .cy-card--lead {
        flex: 0 0 min(76vw, 19rem);
        aspect-ratio: 5 / 7;
        scroll-snap-align: start;
    }
}

@media print {
    .cy-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .cy-card, .cy-card--lead { grid-column: auto; grid-row: auto; aspect-ratio: auto; min-height: 9rem; }
    .cy-art, .cy-paper, .cy-facts { display: none; }
    .cy-name, .cy-copy { position: static; padding: 0.75rem; }
}