/* Department of Public Relations and Media page — scoped styles (prefix: .pr-)
   Reuses the site's brand blue (#0096db) and the Roboto Slab font from base.html. */

.pr-page {
    --pr-primary: #0096db;
    --pr-primary-dark: #0987c2;
    --pr-primary-deep: #075e87;
    --pr-ink: #1e293b;
    --pr-muted: #64748b;
    --pr-line: #e2e8f0;
    --pr-bg-soft: #f4f8fb;
    --pr-tint: rgba(0, 150, 219, .12);
    --pr-radius: 16px;
    --pr-shadow: 0 10px 30px -12px rgba(2, 74, 110, .25);
    --pr-shadow-hover: 0 18px 40px -16px rgba(2, 74, 110, .35);
    --pr-space: clamp(48px, 7vw, 96px);
    /* the lines joining the head's card to the team's cards */
    --pr-link: #99d5f1;
    --pr-link-gap: 32px;
    /* the site's navbar sticks to the top once the page scrolls: a section
       reached through an anchor starts below it, not under it */
    --pr-sticky-offset: 96px;
    color: var(--pr-ink);
    overflow-x: hidden;
}

.pr-page .container {
    max-width: 1200px;
}

.pr-page [id] {
    scroll-margin-top: var(--pr-sticky-offset);
}

.pr-page a:focus-visible {
    outline: 3px solid var(--pr-primary);
    outline-offset: 3px;
    border-radius: 6px;
}

.pr-hero a:focus-visible,
.pr-press__desk a:focus-visible {
    outline-color: #fff;
}

.pr-section {
    padding: var(--pr-space) 0;
}

.pr-section:nth-of-type(even) {
    background: var(--pr-bg-soft);
}

.pr-section__head {
    max-width: 780px;
    margin: 0 auto clamp(28px, 4vw, 44px);
    text-align: center;
    /* overrides the global `header { background-color: #5d5d5d }` from styles.css */
    background: transparent;
}

.pr-section__title {
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--pr-ink);
}

/* a second heading inside the same section */
.pr-section__head--next {
    margin-top: var(--pr-space);
}

.pr-section__lead {
    color: var(--pr-muted);
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.65;
    margin: 0;
}

/* the icon tiles of the cards */
.pr-aim__icon,
.pr-task__icon,
.pr-activity__icon,
.pr-note__icon,
.pr-channel__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--pr-primary), var(--pr-primary-dark));
}

/* the white card the sections are built of */
.pr-aim,
.pr-task,
.pr-activity,
.pr-priority,
.pr-note,
.pr-channel {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-shadow);
}

/* ---------- Buttons ---------- */
.pr-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    cursor: pointer;
}

.pr-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.pr-btn--primary {
    background: var(--pr-primary);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(0, 150, 219, .8);
}

.pr-btn--primary:hover {
    background: var(--pr-primary-dark);
    color: #fff;
}

.pr-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.pr-btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: #fff;
}

/* on the blue press desk: white, the brand's deep blue for the text */
.pr-btn--light {
    background: #fff;
    color: var(--pr-primary-deep);
    box-shadow: 0 8px 20px -10px rgba(2, 40, 60, .6);
}

.pr-btn--light:hover {
    background: #fff;
    color: var(--pr-primary-deep);
}

/* ---------- Hero ---------- */
.pr-hero {
    position: relative;
    color: #fff;
    padding: clamp(48px, 8vw, 104px) 0 clamp(44px, 7vw, 84px);
    background:
        radial-gradient(120% 120% at 85% 0%, rgba(255, 255, 255, .16), transparent 55%),
        linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-primary-dark) 45%, var(--pr-primary-deep) 100%);
    overflow: hidden;
}

/* a message sent out on every side, the five channels on the orbit; from
   992px only: on a narrower hero it would sit behind the text */
.pr-hero__signal {
    display: none;
    position: absolute;
    right: max(24px, calc((100% - 1200px) / 2));
    top: 50%;
    width: min(36%, 400px);
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
}

.pr-hero__orbit {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1.5;
    stroke-dasharray: 4 8;
}

.pr-hero__wave {
    fill: none;
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 8;
    stroke-linecap: round;
}

.pr-hero__channel {
    fill: #fff;
}

.pr-hero__bubble {
    fill: rgba(255, 255, 255, .16);
    stroke: #fff;
    stroke-width: 4;
    stroke-linejoin: round;
}

.pr-hero__text {
    fill: none;
    stroke: #fff;
    stroke-width: 6;
    stroke-linecap: round;
}

@media (prefers-reduced-motion: no-preference) {
    /* the waves go out once, the inner pair first; 200 is a little over the longest wave */
    .pr-hero__wave {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        animation: pr-draw .7s ease-out forwards;
    }

    .pr-hero__wave:nth-of-type(1),
    .pr-hero__wave:nth-of-type(2) { animation-delay: .2s; }
    .pr-hero__wave:nth-of-type(3),
    .pr-hero__wave:nth-of-type(4) { animation-delay: .6s; }
    .pr-hero__wave:nth-of-type(5),
    .pr-hero__wave:nth-of-type(6) { animation-delay: 1s; }
}

@keyframes pr-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.pr-hero__inner {
    position: relative;
    z-index: 1;
}

.pr-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 14px;
    flex-wrap: wrap;
}

.pr-breadcrumb .breadcrumb-item,
.pr-breadcrumb .breadcrumb-item a,
.pr-breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, .85);
}

.pr-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .55);
}

.pr-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 13px;
    font-weight: 600;
    opacity: .85;
    margin: 18px 0 10px;
}

.pr-hero__title {
    max-width: 680px;
    font-size: clamp(30px, 5vw, 54px);
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 20px;
    color: #fff;
}

.pr-hero__lead {
    color: rgba(255, 255, 255, .92);
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 0 28px;
}

.pr-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- Quick facts ---------- */
.pr-facts {
    background: var(--pr-primary-deep);
    padding: 0;
}

.pr-facts__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.pr-fact {
    padding: 26px 18px;
    text-align: center;
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.pr-fact:first-child {
    border-left: none;
}

.pr-fact__value {
    display: block;
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    line-height: 1.1;
}

.pr-fact__label {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .8);
}

/* ---------- Section links ---------- */
.pr-jumpnav {
    background: #fff;
    border-bottom: 1px solid var(--pr-line);
}

.pr-jumpnav__list {
    list-style: none;
    margin: 0;
    padding: 14px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.pr-jumpnav__list a {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pr-ink);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.pr-jumpnav__list a:hover {
    color: var(--pr-primary-deep);
    background: var(--pr-tint);
}

/* ---------- Mission ---------- */
.pr-mission {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 28px);
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px);
    background: #fff;
    border: 1px solid var(--pr-line);
    border-left: 5px solid var(--pr-primary);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-shadow);
}

.pr-mission__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    font-size: 26px;
    color: #fff;
    background: linear-gradient(135deg, var(--pr-primary), var(--pr-primary-deep));
}

/* the card's name in small capitals above the text */
.pr-mission__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pr-primary-deep);
}

.pr-mission__text {
    margin: 0;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 600;
    line-height: 1.6;
    color: var(--pr-ink);
}

/* ---------- Vision and primary goal ---------- */
.pr-aims {
    list-style: none;
    max-width: 960px;
    margin: 24px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.pr-aim {
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pr-aim:hover {
    transform: translateY(-4px);
    box-shadow: var(--pr-shadow-hover);
}

.pr-aim__icon {
    align-self: flex-start;
    margin-bottom: 18px;
}

.pr-aim__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.35;
}

.pr-aim__text {
    color: var(--pr-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Key responsibilities ---------- */
.pr-tasks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.pr-task {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 64px 24px 22px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pr-task:hover {
    transform: translateY(-4px);
    box-shadow: var(--pr-shadow-hover);
}

/* the number in the corner, as the areas of the other department pages carry theirs */
.pr-task__num {
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: rgba(0, 150, 219, .2);
}

.pr-task__text {
    align-self: center;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--pr-ink);
}

/* ---------- Day-to-day activities ---------- */
.pr-activities {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.pr-activity {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pr-activity::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--pr-primary), var(--pr-primary-deep));
}

.pr-activity:hover {
    transform: translateY(-4px);
    box-shadow: var(--pr-shadow-hover);
}

.pr-activity__icon {
    align-self: flex-start;
    margin-bottom: 18px;
}

.pr-activity__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.35;
}

.pr-activity__text {
    color: var(--pr-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Strategic priorities ---------- */
.pr-priorities {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.pr-priority {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 22px;
    border-left: 5px solid var(--pr-primary);
}

.pr-priority__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--pr-primary), var(--pr-primary-deep));
    box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--pr-line);
}

.pr-priority__text {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--pr-ink);
}

/* ---------- Performance and transparency ---------- */
.pr-note {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 28px);
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 36px);
}

.pr-note__text {
    margin: 0;
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.7;
    color: var(--pr-ink);
}

/* ---------- For media representatives ---------- */
.pr-press {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1080px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-shadow);
    overflow: hidden;
}

.pr-press__body {
    padding: clamp(26px, 4vw, 44px);
}

.pr-press__text {
    margin: 0;
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.7;
    color: var(--pr-ink);
}

.pr-press__subtitle {
    margin: 28px 0 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pr-primary-deep);
}

.pr-requests {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pr-requests li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pr-ink);
    background: var(--pr-bg-soft);
    border: 1px solid var(--pr-line);
}

.pr-requests i {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 12px;
    color: var(--pr-primary-deep);
    background: var(--pr-tint);
}

/* the press desk: the hero's blue, so the way to reach the Department stands out */
.pr-press__desk {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: clamp(26px, 4vw, 44px);
    color: #fff;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .16), transparent 55%),
        linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-primary-deep) 100%);
}

.pr-press__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 22px;
    background: rgba(255, 255, 255, .16);
}

.pr-press__desk-title {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.pr-press__desk .pr-btn {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.pr-press__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.pr-press__phone:hover {
    color: #fff;
    text-decoration: underline;
}

.pr-press__ext {
    margin-top: -8px;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}

/* ---------- Team ---------- */
.pr-team__grid {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.pr-team__item {
    position: relative;
    flex: 0 1 340px;
    display: flex;
}

.pr-person {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pr-person:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 150, 219, .45);
    box-shadow: var(--pr-shadow-hover);
}

/* the photo whole: the Staff photos are square */
.pr-person__photo {
    flex: none;
    aspect-ratio: 1 / 1;
    background: var(--pr-bg-soft);
}

.pr-person__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* without a photo, the initials stand in its place */
.pr-person__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 72px;
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(0, 150, 219, .35);
    background:
        radial-gradient(circle at 50% 38%, rgba(0, 150, 219, .14), transparent 60%),
        var(--pr-bg-soft);
}

.pr-person__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 24px;
}

.pr-person__badge {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pr-primary-deep);
    background: var(--pr-tint);
}

.pr-person__name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 6px;
    color: var(--pr-ink);
}

.pr-person__role {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pr-muted);
}

/* at the bottom, so the contacts line up across a row whatever the length of the roles */
.pr-person__contacts {
    list-style: none;
    margin: auto 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--pr-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-person__contacts li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--pr-ink);
}

.pr-person__contacts i,
.pr-person__links a {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--pr-primary-deep);
    background: var(--pr-tint);
}

.pr-person__contacts i {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.pr-person__contacts a {
    min-width: 0;
    color: var(--pr-primary-dark);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pr-person__contacts a:hover {
    text-decoration: underline;
}

.pr-person__links {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.pr-person__links a {
    width: 38px;
    height: 38px;
    font-size: 16px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.pr-person__links a:hover {
    color: #fff;
    background: var(--pr-primary);
}

/* the Head of Department: a wide card with the photo on the left */
.pr-team__head .pr-person--head {
    max-width: 820px;
    margin: 0 auto;
}

.pr-person--head .pr-person__badge {
    color: #fff;
    background: linear-gradient(135deg, var(--pr-primary), var(--pr-primary-deep));
}

.pr-person--head .pr-person__name {
    font-size: clamp(22px, 2.6vw, 28px);
}

.pr-person--head .pr-person__role {
    font-size: 16px;
}

/* ---------- Official channels ---------- */
/* flex, not grid, so the last, shorter row sits in the middle */
.pr-channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.pr-channels li {
    flex: 0 1 calc((100% - 80px) / 5);
    min-width: 200px;
    display: flex;
}

/* the whole card is the link, so it lifts as one */
.pr-channel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 26px 18px 24px;
    text-align: center;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pr-channel:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 150, 219, .45);
    box-shadow: var(--pr-shadow-hover);
    text-decoration: none;
}

.pr-channel__icon {
    margin-bottom: 12px;
    font-size: 24px;
}

.pr-channel__name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pr-ink);
}

.pr-channel__handle {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.4;
    color: var(--pr-primary-dark);
    overflow-wrap: anywhere;
}

/* ---------- Columns ---------- */
@media (min-width: 768px) {
    .pr-aims,
    .pr-tasks,
    .pr-activities,
    .pr-priorities {
        grid-template-columns: repeat(2, 1fr);
    }

    .pr-person--head {
        flex-direction: row;
    }

    .pr-person--head .pr-person__photo {
        flex: 0 0 300px;
    }

    .pr-person--head .pr-person__body {
        justify-content: center;
        padding: 32px 36px;
    }

    .pr-person--head .pr-person__contacts {
        margin-top: 0;
    }
}

@media (min-width: 992px) {
    .pr-hero__signal {
        display: block;
    }

    .pr-activities,
    .pr-priorities {
        grid-template-columns: repeat(3, 1fr);
    }

    /* the media text beside the press desk */
    .pr-press {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .pr-facts__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pr-fact:nth-child(3) {
        border-left: none;
    }

    .pr-fact:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, .14);
    }
}

@media (max-width: 575px) {
    .pr-facts__grid {
        grid-template-columns: 1fr;
    }

    .pr-fact {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .14);
        padding: 20px 16px;
    }

    .pr-fact:first-child {
        border-top: none;
    }

    .pr-mission,
    .pr-note {
        flex-direction: column;
        align-items: flex-start;
    }

    .pr-task {
        padding: 22px 56px 22px 20px;
    }

    .pr-task__num {
        right: 18px;
        font-size: 24px;
    }

    .pr-activity {
        padding: 26px 20px;
    }

    /* two to a row, so the five channels are not five screens of scrolling */
    .pr-channels {
        gap: 14px;
    }

    .pr-channels li {
        flex: 0 1 calc((100% - 14px) / 2);
        min-width: 0;
    }

    .pr-channel {
        padding: 22px 12px 20px;
    }

    .pr-jumpnav__list a {
        padding: 8px 14px;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .pr-page .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pr-btn {
        width: 100%;
        justify-content: center;
    }

    .pr-hero__cta {
        width: 100%;
    }
}

/* ---------- Connector lines (desktop) ---------- */
@media (min-width: 992px) {
    /* the head's stem, then a bar, then a drop to each card */
    .pr-team__head::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(-1 * var(--pr-link-gap));
        width: 2px;
        height: var(--pr-link-gap);
        margin-left: -1px;
        background: var(--pr-link);
    }

    .pr-team__head {
        position: relative;
        margin-bottom: var(--pr-link-gap);
    }

    .pr-team__grid {
        flex-wrap: nowrap;
        margin-top: 0;
        padding-top: var(--pr-link-gap);
    }

    /* half the 24px gap, plus 1px so neighbouring segments overlap
       instead of leaving a sub-pixel seam where they meet */
    .pr-team__item::before {
        content: "";
        position: absolute;
        top: calc(-1 * var(--pr-link-gap));
        left: -13px;
        right: -13px;
        height: 2px;
        background: var(--pr-link);
    }

    .pr-team__item:first-child::before {
        left: 50%;
    }

    .pr-team__item:last-child::before {
        right: 50%;
    }

    /* the drop from the bar to the card */
    .pr-team__item::after {
        content: "";
        position: absolute;
        left: 50%;
        top: calc(-1 * var(--pr-link-gap));
        width: 2px;
        height: var(--pr-link-gap);
        margin-left: -1px;
        background: var(--pr-link);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pr-btn,
    .pr-aim,
    .pr-task,
    .pr-activity,
    .pr-person,
    .pr-channel {
        transition: none;
    }

    .pr-btn:hover,
    .pr-aim:hover,
    .pr-task:hover,
    .pr-activity:hover,
    .pr-person:hover,
    .pr-channel:hover {
        transform: none;
    }
}