/*
 * KW2 site styles. Plain CSS, no build step.
 *
 * 1. Fonts and tokens    5. Site header and menu    9.  Listings and sliders
 * 2. Base                6. Page headers            10. Footer
 * 3. Type                7. Blocks                  11. Utilities
 * 4. Layout and tones    8. Cards
 */

/* 1. Fonts and tokens
   ------------------------------------------------------------------------- */

/* Ciutadella is licensed from MyFonts; the layout loads its page-view counters */
@font-face {
    font-family: "Ciutadella";
    src: url("webfonts/31525F_0_0.woff2") format("woff2"), url("webfonts/31525F_0_0.woff") format("woff");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Ciutadella";
    src: url("webfonts/330660_0_0.woff2") format("woff2"), url("webfonts/330660_0_0.woff") format("woff");
    font-weight: 600;
    font-display: swap;
}

/* Colours, type and spacing follow the 2026 home page on the old site */
:root {
    --navy: #00476f; /* headings, buttons on hover, the footer */
    --navy-deep: #003b5c; /* the header, banner, page headers and navy sections */
    --gold: #d7944b;
    --gold-text: #9c6a33; /* gold dark enough for small text on light backgrounds */
    --cream: #fffcf8; /* text on navy and gold */
    --paper: #fff;
    --beige: #f8eee1;
    --line: #e4d4c0;
    --ink: #000;

    --font-head: "Ciutadella", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;

    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lg: 1.25rem;
    --h1: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
    --h2: clamp(2.25rem, 1.75rem + 1.6vw, 3.125rem);
    --h3: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
    --h4: 1.25rem;

    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --gap: 2rem;
    --space-section: clamp(3rem, 2rem + 3.5vw, 4.6875rem);
    --container: 75.625rem; /* the old site's 1240px container, less its padding */
    --container-narrow: 50rem; /* two thirds of it, as on the old site */
    --header-height: 4.4375rem;

    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
}

/* 2. Base
   ------------------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* The footer stays at the foot of short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    /* Long words and links wrap rather than widen the page */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1 0 auto;
}

img, svg, video, iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

iframe {
    border: 0;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

figure, blockquote {
    margin: 0;
}

/* 3. Type
   ------------------------------------------------------------------------- */

/* Headings are navy on light backgrounds; navy and gold ones set --heading to their text colour.
   As on the old site, they fill each line before wrapping. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    margin: 0 0 0.5em;
    color: var(--heading, var(--navy));
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.1;
}

h1, .h1 { font-size: var(--h1); }
h2, .h2 { font-size: var(--h2); }
h3, .h3 { font-size: var(--h3); }
h4, .h4 { font-size: var(--h4); line-height: 1.2; }

p {
    margin: 0 0 1em;
}

.eyebrow {
    margin: 0 0 0.9375rem;
    color: var(--gold);
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.eyebrow--center {
    margin-bottom: 2.5rem;
    text-align: center;
}

/* A filled label hanging from a rule, e.g. “Services Provided”, as the old site's ruled eyebrows */
.flag {
    display: flex;
    margin: 0 0 1.5rem;
    border-top: 1px solid var(--gold);
    font-family: var(--font-head);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.flag span {
    padding: 0.55em 1em 0.45em;
    background: var(--gold);
    color: #fff;
}

.flag--center {
    justify-content: center;
    text-align: center;
}

.section-heading {
    font-size: var(--h2);
}

h1.section-heading {
    font-size: var(--h1);
}

.caption {
    margin-top: 0.75rem;
    color: #5b5b5b;
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Rich text */
.prose > :last-child {
    margin-bottom: 0;
}

/* Headings in rich text and embedded code, like the contact form's, are a size down */
.prose h2, .embed h2 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem); }
.prose h2 { margin-top: 1.75em; }
.prose h3 { font-size: var(--h3); margin-top: 1.5em; }
.prose h4 { font-size: var(--text-lg); margin-top: 1.5em; }
.prose > :first-child { margin-top: 0; }

.prose a:not(.button) {
    color: var(--navy);
    text-decoration-color: var(--gold);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.prose a:not(.button):hover {
    text-decoration-thickness: 2px;
}

.prose ul, .prose ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

.prose li + li {
    margin-top: 0.35em;
}

.prose li::marker {
    color: var(--gold);
}

.prose blockquote {
    margin: 1.5em 0;
    padding-left: 1.25em;
    border-left: 3px solid var(--gold);
    font-size: var(--text-lg);
}

.prose img {
    margin-block: 1.5em;
}

.prose figure.media,
.prose figure.table {
    margin: 1.5em 0;
}

.prose figure.media iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.prose th, .prose td {
    padding: 0.5em 0.75em;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

/* 4. Layout and tones
   ------------------------------------------------------------------------- */

.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

.container--narrow {
    width: min(100% - 2 * var(--gutter), var(--container-narrow));
}

/* Two thirds of the page from tablets, as on the old site */
@media (min-width: 48em) {
    .container--narrow {
        width: min((100% - 2 * var(--gutter)) * 2 / 3, var(--container-narrow));
    }
}

.grid {
    display: grid;
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

* + .grid,
* + .listing,
* + .buttons,
* + .logos,
* + .embed,
* + .video {
    margin-top: 2rem;
}

/* Columns from tablets, as on the old site */
@media (min-width: 48em) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 48em) {
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Main column with a sidebar after it. As on the old site, phones centre the sidebar below,
   and from tablets quotes and callouts sit centred beside the main column, past a gold rule
   as tall as it. Topic links sit at the top, with no rule. */
.with-sidebar {
    display: grid;
    gap: var(--gap);
}

.sidebar {
    padding-top: var(--gap);
    text-align: center;
}

@media (min-width: 48em) {
    .with-sidebar {
        --sidebar-gap: clamp(2.5rem, 6vw, 5rem);
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
        gap: var(--sidebar-gap);
    }

    .with-sidebar--start {
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    }

    /* The rule sits halfway across the gap */
    .sidebar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: calc(var(--sidebar-gap) / -2);
        padding: 0 0 0 calc(var(--sidebar-gap) / 2);
        border-left: 1px solid var(--gold);
        text-align: left;
    }

    .sidebar--topicLinks,
    .sidebar--embed {
        justify-content: flex-start;
    }

    .sidebar--topicLinks {
        border-left: 0;
    }

    .with-sidebar--start .sidebar {
        justify-content: flex-start;
        margin: 0 calc(var(--sidebar-gap) / -2) 0 0;
        padding: 0 calc(var(--sidebar-gap) / 2) 0 0;
        border-left: 0;
        border-right: 1px solid var(--gold);
    }
}

/* Blocks: consecutive blocks on the same background share their spacing. Each keeps its
   content's margins inside, so its background runs behind them. */
.block {
    display: flow-root;
    padding-block: var(--space-section);
}

.block:not(.tone-tinted, .tone-dark, .tone-accent) + .block:not(.tone-tinted, .tone-dark, .tone-accent),
.tone-tinted + .tone-tinted,
.tone-dark + .tone-dark,
.tone-accent + .tone-accent {
    padding-top: 0;
}

/* Articles keep the old site's wider gaps between blocks on white */
.type-article .block:not(.tone-tinted, .tone-dark, .tone-accent) + .block:not(.tone-tinted, .tone-dark, .tone-accent) {
    padding-top: calc(var(--space-section) * 0.6);
}

.tone-tinted {
    background: var(--beige);
}

.tone-dark {
    --heading: currentColor;
    background: var(--navy-deep);
    color: #fff;
}

.tone-accent {
    --heading: currentColor;
    background: var(--gold);
    color: var(--navy-deep);
}

.tone-dark .eyebrow {
    color: var(--gold);
}

.tone-accent .eyebrow {
    color: #fff;
}

.tone-dark .prose a:not(.button),
.tone-accent .prose a:not(.button) {
    color: inherit;
    text-decoration-color: currentColor;
}

.tone-dark .flag span {
    color: var(--navy-deep);
}

/* Buttons: solid gold, navy on hover (beige on navy) */
.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.button,
.prose a.button {
    display: inline-block;
    padding: 1rem 2rem 0.75rem;
    border: 0;
    border-radius: 5px;
    background: var(--gold);
    color: var(--cream);
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.button:hover,
.button:focus-visible,
.prose a.button:hover {
    background: var(--navy);
    color: #fff;
}

.tone-dark .button:hover,
.tone-dark .button:focus-visible,
.tone-dark .prose a.button:hover {
    background: var(--beige);
    color: var(--navy);
}

.tone-accent .button,
.tone-accent .prose a.button {
    background: var(--navy-deep);
    color: #fff;
}

.tone-accent .button:hover,
.tone-accent .prose a.button:hover {
    background: #fff;
    color: var(--navy);
}

/* A row of buttons on its own, such as “View All Articles” under a feed */
.text-section__main > .buttons:only-child {
    justify-content: center;
}

/* Text-style links, used under icon columns */
.buttons--text .button {
    padding: 0 0 0.2em;
    border: 0;
    border-bottom: 2px solid var(--navy);
    border-radius: 0;
    background: none;
    color: var(--navy);
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
}

.buttons--text .button:hover {
    background: none;
    color: var(--gold-text);
    border-color: var(--gold);
}

/* 5. Site header and menu
   ------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: #fff;
    color: var(--navy);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--navy-deep);
    color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 0.25);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding-inline: 0.9375rem;
    transition: background-color 0.2s;
}

@media (min-width: 79.375em) {
    .site-header__bar {
        padding-inline: 1.875rem;
    }
}

/* Gold while the menu is open */
.site-header__bar:has([aria-expanded="true"]) {
    background: var(--gold);
}

.site-header__logo img {
    width: 62px;
    height: auto;
}

/* As on the old site: three bars as wide as the label, 9px apart. The padding widens the
   target without moving the icon off the gutter. */
.menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    margin-right: -0.5rem;
    padding: 0.5rem;
    border: 0;
    background: none;
    color: var(--cream);
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.no-js .menu-toggle {
    display: none;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s, background-color 0.2s;
}

.menu-toggle__icon {
    position: relative;
    margin-block: 0.5625rem;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
    content: "";
    position: absolute;
    inset-inline: 0;
}

.menu-toggle__icon::before { top: -0.5625rem; }
.menu-toggle__icon::after { top: 0.5625rem; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(0.5625rem) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-0.5625rem) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__label { opacity: 0; }

/* Over the page, below the bar */
.site-menu {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    background: var(--navy-deep);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    clip-path: inset(0);
}

.js .site-menu:not(.is-open) {
    visibility: hidden;
    clip-path: inset(0 0 100%);
}

/* It slides open and shut, as on the old site */
@media (prefers-reduced-motion: no-preference) {
    .site-menu {
        transition: clip-path 0.25s ease;
    }

    .js .site-menu:not(.is-open) {
        transition: clip-path 0.25s ease, visibility 0s 0.25s;
    }
}

.site-menu__inner {
    display: grid;
    gap: 2rem var(--gap);
    padding-block: 0.3125rem 0.9375rem;
}

.site-menu__contact {
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* The contact blurb only shows beside the links, from 64em */
@media (max-width: 63.99em) {
    .site-menu__contact {
        display: none;
    }
}

@media (min-width: 64em) {
    .site-menu__inner {
        grid-template-columns: 14rem minmax(0, 1fr);
        padding-block: 1.875rem;
    }

    .site-menu__contact {
        padding-right: var(--gap);
        border-right: 1px solid rgb(255 255 255 / 0.2);
    }
}

/* Jen's photo over a red circle, as on the old site */
.site-menu__photo {
    width: 8.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    box-shadow: 2.5rem 0 0 #f4364c;
}

.site-menu__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu__nav > ul {
    columns: 3 11rem;
    column-gap: var(--gap);
}

.site-menu__nav > ul > li {
    break-inside: avoid;
    margin-bottom: 1.75rem;
}

.site-menu__nav > ul > li > a {
    display: inline-block;
    margin-bottom: 0.625rem;
    border-bottom: 3px solid var(--line);
    color: var(--gold);
    font-family: var(--font-head);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.site-menu__nav li li a {
    display: block;
    padding-block: 0.625rem;
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-decoration: none;
    text-transform: uppercase;
}

.site-menu__expand {
    display: none;
}

/* Phones: one column of sections, each with a button that shows its pages */
@media (max-width: 33.99em) {
    .site-menu__nav > ul > li {
        position: relative;
        margin: 0;
        border-bottom: 3px solid var(--line);
    }

    .site-menu__nav > ul > li > a {
        display: block;
        margin: 0;
        padding-top: 0.3125rem;
        border: 0;
        line-height: 3rem;
    }

    .js .site-menu__expand {
        display: block;
        position: absolute;
        top: 0.3125rem;
        right: 0;
        width: 2.75rem;
        height: 2.625rem;
        padding: 0;
        border: 0;
        border-left: 1px solid var(--gold);
        background: none;
        color: #fff;
        cursor: pointer;
    }

    .site-menu__expand::before {
        content: "";
        display: block;
        width: 1rem;
        height: 1rem;
        margin: auto;
        background: currentColor;
        mask: var(--chevron) center / contain no-repeat;
        transform: rotate(90deg);
        transition: transform 0.25s;
    }

    .site-menu__expand[aria-expanded="true"]::before {
        transform: rotate(-90deg);
    }

    .site-menu__nav li li:last-child {
        padding-bottom: 1.25rem;
    }

    /* Each section's pages fold into a second row that slides open and shut, as on the old site.
       The pages are clipped to that row, with room around them for a focus outline. */
    .js .site-menu__nav > ul > li {
        display: grid;
        grid-template-rows: auto 1fr;
    }

    .js .site-menu__nav > ul > li:has(> [aria-expanded="false"]) {
        grid-template-rows: auto 0fr;
    }

    .js .site-menu__expand + ul {
        overflow: hidden;
        margin: -0.3125rem -0.3125rem 0;
        padding: 0.3125rem 0.3125rem 0;
    }

    .js .site-menu__expand[aria-expanded="false"] + ul {
        visibility: hidden;
    }
}

@media (max-width: 33.99em) and (prefers-reduced-motion: no-preference) {
    .js .site-menu__nav > ul > li {
        transition: grid-template-rows 0.25s ease;
    }

    .js .site-menu__expand[aria-expanded="false"] + ul {
        transition: visibility 0s 0.25s;
    }
}

@media (min-width: 77.5em) {
    .site-menu__inner {
        padding-block: 4.375rem;
    }
}

.site-menu__nav a:hover,
.site-menu__nav a[aria-current="page"] {
    color: var(--gold);
}

/* 6. Page headers
   ------------------------------------------------------------------------- */

/* As on the old site: the title at the top, under a shade from the top edge. Articles get a
   taller header. */
.page-header {
    --heading: currentColor;
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 12.5rem;
    padding-block: 2.1875rem 2rem;
    background: var(--navy-deep);
    color: #fff;
    isolation: isolate;
}

.type-article .page-header {
    min-height: 22.5rem;
}

@media (min-width: 48em) {
    .page-header {
        min-height: 23.125rem;
        padding-top: 3.125rem;
    }

    .type-article .page-header {
        min-height: 35rem;
    }
}

@media (min-width: 64em) {
    .type-article .page-header {
        min-height: 40rem;
    }
}

.page-header--plain {
    min-height: 0;
    padding-block: 4rem 2.5rem;
}

.page-header__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Just the image, as on case studies */
.page-header--image {
    display: block;
    min-height: 0;
    padding: 0;
    aspect-ratio: 28 / 11;
}

.type-article .page-header--image {
    min-height: 0;
}

/* A shade under the title */
.page-header:not(.page-header--image):has(.page-header__image)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.85), transparent 50%);
}

.page-header__title {
    max-width: 22em;
    margin: 0;
    color: var(--heading);
    font-family: var(--font-head);
    font-size: 2.625rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.3);
}

@media (min-width: 64em) {
    .page-header__title {
        font-size: 5rem;
    }
}

.page-header__text {
    max-width: 38rem;
    margin: 1rem 0 0;
    font-size: var(--text-lg);
    line-height: 1.5;
}

/* With a video: a white column with the title in gold, then the video, notched by a white
   arrow. On phones the video comes first and the arrow points up at the title. From tablets
   the title sits 30px from the window's edge, as on the old site. */
.page-header--video {
    --heading: var(--gold);
    display: grid;
    min-height: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
}

.page-header--video .page-header__inner {
    padding-block: 0.9375rem 1.5rem;
}

.page-header--video .page-header__title {
    text-shadow: none;
    text-transform: uppercase;
}

.page-header__video {
    position: relative;
    height: 16.875rem;
    overflow: hidden;
    container-type: size;
    background: var(--navy-deep);
}

.page-header__video::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: var(--gutter);
    border-style: solid;
    border-width: 0 2.5rem 2.8125rem;
    border-color: transparent transparent var(--paper);
}

.page-header__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@media (min-width: 48em) {
    .page-header--video {
        grid-template-columns: 5fr 7fr;
        height: 26.25rem;
    }

    .page-header--video .page-header__inner {
        grid-row: 1;
        width: auto;
        margin: 0;
        padding: 1.875rem var(--gap) 0 1.875rem;
    }

    .page-header__video {
        height: 100%;
    }

    .page-header__video::after {
        top: 1.875rem;
        bottom: auto;
        left: 0;
        border-width: 2.5rem 0 2.5rem 2.8125rem;
        border-color: transparent transparent transparent var(--paper);
    }
}

@media (min-width: 64em) {
    .page-header--video .page-header__inner {
        padding-top: 2.8125rem;
    }
}

/* Home banner: the old site's 1400 × 550 Creatopy design, scaled to fit. Its positions
   are design pixels ÷ 14 in container units, since 1cqi is 14 design pixels. */
.banner {
    background: var(--navy-deep);
}

.banner__art {
    position: relative;
    max-width: 77.5rem;
    aspect-ratio: 1400 / 550;
    margin-inline: auto;
    container-type: inline-size;
}

/* A word between two gold rules */
.banner__word {
    position: absolute;
    top: calc(219cqi / 14);
    display: flex;
    justify-content: center;
    width: calc(368cqi / 14);
    padding-block: calc(23cqi / 14) calc(22cqi / 14);
    border-block: max(1px, calc(3cqi / 14)) solid var(--gold);
}

.banner__word--left {
    left: calc(143cqi / 14);
}

.banner__word--right {
    left: calc(889cqi / 14);
}

.banner__word img {
    width: auto;
    height: calc(61cqi / 14);
}

.banner__logo {
    position: absolute;
    top: calc(189.5cqi / 14);
    left: calc(570cqi / 14);
    width: calc(259cqi / 14);
}

/* The logo settles into place, then the words slide out from it */
@media (prefers-reduced-motion: no-preference) {
    .banner__logo {
        animation: banner-logo 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
    }

    .banner__word--left {
        animation: banner-left 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s both;
    }

    .banner__word--right {
        animation: banner-right 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s both;
    }
}

@keyframes banner-logo {
    from {
        opacity: 0;
        transform: scale(1.3);
    }
}

@keyframes banner-left {
    from {
        opacity: 0;
        transform: translateX(calc(50cqi / 14));
    }
}

@keyframes banner-right {
    from {
        opacity: 0;
        transform: translateX(calc(-50cqi / 14));
    }
}

/* Articles */
.byline {
    padding-top: 1.5rem;
    color: var(--gold-text);
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.byline a {
    color: var(--navy);
    text-decoration: none;
}

.byline a:hover {
    text-decoration: underline;
}

/* 7. Blocks
   ------------------------------------------------------------------------- */

/* Text sections */
.text-section--centered .buttons {
    justify-content: center;
}

.text-section--centered .text-section__main {
    text-align: center;
}

/* A heading with at most buttons introduces the blocks after it: the buttons sit to the
   right, level with the heading, and a block on the same background follows closely */
.text-section--intro .section-heading {
    margin-bottom: 1.5rem;
}

.text-section--intro:is(
    .tone-default:has(+ .block:not(.tone-tinted, .tone-dark, .tone-accent)),
    .tone-tinted:has(+ .tone-tinted),
    .tone-dark:has(+ .tone-dark),
    .tone-accent:has(+ .tone-accent)
) {
    padding-bottom: 0;
}

/* Buttons repeated by a row of buttons lower down show only there on phones */
@media (max-width: 47.99em) {
    .text-section--repeated .buttons {
        display: none;
    }
}

@media (min-width: 48em) {
    .text-section--intro .text-section__main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--gap);
        align-items: start;
    }

    .text-section--intro .text-section__main > * {
        grid-column: 1;
    }

    /* The buttons' bottom margin matches the heading's, so the two centre on each other */
    .text-section--intro .text-section__main > .buttons {
        grid-row: 1;
        grid-column: 2;
        align-self: center;
        margin-block: 0 1.5rem;
    }

    .text-section--intro .text-section__main:has(> .eyebrow) > .buttons {
        grid-row: 2;
    }
}

/* A heading and intro over icon cards sit side by side when there's room */
.text-section--split .icons {
    margin-top: 3rem;
}

@media (min-width: 64em) {
    .text-section--split .text-section__main {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.875rem;
        align-items: baseline;
    }

    .text-section--split .text-section__main > * {
        grid-column: 1 / -1;
    }

    .text-section--split .section-heading {
        grid-column: 1;
        padding-right: 20%;
    }

    .text-section--split .prose {
        grid-column: 2;
    }
}

/* Columns: any buttons sit along the foot of the row, level with their neighbours' */
.column:has(> .buttons) {
    display: flex;
    flex-direction: column;
}

.column > .buttons {
    margin-top: auto;
    padding-top: 2rem;
}

.column__image {
    margin-bottom: 1.5rem;
}

.column--icon .column__image {
    width: 10.625rem;
}

.column__number {
    margin: 0 0 0.25rem;
    color: var(--gold);
    font-family: var(--font-head);
    font-size: clamp(3rem, 2.5rem + 2vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
}

/* Column headings are a size between h2 and h3, as on the old site */
.column__heading {
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
}

.column__text {
    font-family: var(--font-head);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
}

/* Without a heading, the subheading is the column's heading */
h3.column__text {
    font-size: var(--h3);
    font-weight: 700;
    line-height: 1.1;
}

/* Standard and icon columns have a large gold heading */
:is(.column--standard, .column--icon) .column__heading {
    color: var(--gold-text);
}

/* Flag columns head with a flag, like the case studies' Insight, Action and Result */
.column > .flag {
    margin-bottom: 0.5rem;
}

/* Centered columns, the old “standardCenter” style: a small icon over a large heading */
.column--centered {
    text-align: center;
}

.column--centered .column__image {
    width: 6.25rem;
    margin-inline: auto;
}

.column--centered .buttons {
    justify-content: center;
}

/* Card columns turn their lists into ruled labels */
.column--card .prose ul {
    padding: 0;
    list-style: none;
}

.column--card .prose li {
    margin: 0;
    padding: 0.6rem 0 0.5rem;
    border-bottom: 1px solid var(--gold);
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Card columns with a photo are profiles, as on the old site: a round photo over centred
   text and buttons */
.column--card:has(> .column__image) {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.column--card:has(> .column__image) > .buttons {
    justify-content: center;
}

.column--card > .column__image {
    width: 11rem;
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    object-fit: cover;
}

.column--card:has(> .column__image) .column__text {
    color: var(--gold-text);
    font-size: var(--text-base);
}

@media (min-width: 48em) {
    .grid--3 > .column--card:not(:has(> .column__image)):not(:nth-child(3n + 1)) {
        padding-left: var(--gap);
        border-left: 1px solid var(--gold);
        margin-left: calc(-1 * var(--gap) / 2);
    }
}

/* Icons */
.icons {
    text-align: center;
}

.icon__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.icon__image {
    width: 7.5rem;
    aspect-ratio: 1;
    object-fit: contain;
    padding: 0.5rem;
    border: 1px solid var(--gold);
    background: #fff;
    transition: border-color 0.15s;
}

/* Without a label, an icon is a round photo */
.icon__inner:not(:has(.icon__heading)) .icon__image {
    width: min(9rem, 100%);
    padding: 0;
    border: 0;
    border-radius: 50%;
    object-fit: cover;
}

a.icon__inner:hover .icon__image {
    border-color: var(--gold);
}

.icon__heading {
    color: var(--navy);
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.icon__label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.icon__text {
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Icons with labels are cards: the image beside its label */
.icons--cards {
    text-align: left;
}

.icons--cards .icon__inner {
    flex-direction: row;
    gap: 1.5rem;
    height: 100%;
    padding: 1.5rem;
    background: var(--beige);
}

.tone-tinted .icons--cards .icon__inner {
    background: #fff;
}

.icons--cards .icon__image {
    flex: none;
    width: 6.25rem;
    padding: 0;
    border: 0;
    background: none;
    transition: transform 0.4s ease;
}

/* The icon grows on hover, as an entry card's picture does */
.icons--cards a.icon__inner:hover .icon__image {
    transform: scale(1.1);
}

.icons--cards .icon__heading {
    font-size: var(--h3);
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
}

/* Statistics: a row each, the figure and its label beside the icon, over a gold rule */
.icons--stats {
    gap: 0;
    text-align: left;
}

.icons--stats .icon__inner {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
    padding-block: 2.8125rem;
    border-bottom: 1px solid var(--gold);
}

.icons--stats .icon:first-child .icon__inner {
    padding-top: 0.9375rem;
}

.icons--stats .icon__image {
    flex: none;
    width: min(9.375rem, 25%);
    padding: 0;
    border: 0;
    background: none;
}

.icons--stats .icon__label {
    gap: 0.625rem;
}

.icons--stats .icon__heading,
.icons--stats .icon__text {
    color: var(--navy-deep);
    letter-spacing: 0;
    text-transform: none;
}

.icons--stats .icon__heading {
    font-size: 2.625rem;
    line-height: 1;
}

.icons--stats .icon__text {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

@media (min-width: 48em) {
    .icons--stats .icon__heading {
        font-size: 7.5rem;
    }

    .icons--stats .icon__text {
        font-size: 2rem;
    }
}

/* Logos: a white table of cells divided by beige rules, as on the old site. The clip hides
   the rules on the outer edges. */
.logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 45%), 1fr));
    margin: 0;
    padding: 0;
    background: #fff;
    list-style: none;
    clip-path: inset(0 1px 1px 0);
}

.logos li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8.75rem;
    padding: 1rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.logos img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Embedded code and video. The contact map's script fills #kw2-map, which needs a height. */
.embed iframe {
    width: 100%;
}

#kw2-map {
    height: 28.125rem;
}

.video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Quotes */
.quote figure {
    text-align: center;
}

.quote__text {
    font-family: var(--font-head);
    font-size: var(--h3);
    font-weight: 700;
    line-height: 1.3;
}

.quote__text > :last-child {
    margin-bottom: 0;
}

.attribution {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    text-align: left;
}

.quote .attribution {
    justify-content: center;
    text-align: center;
}

.quote__text img {
    margin-inline: auto;
}

.attribution__photo {
    width: 4.5rem;
    border-radius: 50%;
}

.attribution__name,
.attribution__title {
    display: block;
    line-height: 1.3;
}

.attribution__name {
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.attribution__title {
    color: var(--gold-text);
    font-family: var(--font-head);
    font-size: var(--text-sm);
    font-weight: 600;
}

.tone-dark .attribution__title,
.tone-accent .attribution__title {
    color: inherit;
}

/* Sidebars. As on the old site, quotes are body text, and a callout without a heading is
   large italic text. */
.quote-card blockquote,
.callout .prose {
    font-size: var(--text-sm);
    line-height: 1.6;
}

.callout:not(:has(> .eyebrow)) .prose {
    color: var(--navy);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.45;
}

.quote-card .prose h4 {
    font-size: 2rem;
    line-height: 1.2;
}

.quote-card.tone-dark,
.quote-card.tone-accent,
.quote-card.tone-tinted {
    padding: 1.75rem;
}

.quote-card.tone-dark blockquote,
.quote-card.tone-accent blockquote {
    color: inherit;
}

.quote-card .attribution {
    flex-direction: column;
    align-items: center;
}

.quote-card .attribution__photo,
.callout__photo {
    width: 11rem;
}

.callout__photo {
    margin: 0 auto 1.5rem;
    border-radius: 50%;
}

@media (min-width: 48em) {
    .quote-card .attribution {
        align-items: flex-start;
    }

    .callout__photo {
        margin-inline: 0;
    }
}

/* On phones the topic links' label is centred */
@media (max-width: 47.99em) {
    .sidebar--topicLinks .flag {
        justify-content: center;
    }
}

.topic-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.topic-links a {
    display: block;
    padding: 0.85rem 0 0.75rem;
    border-bottom: 1px solid var(--gold);
    color: var(--gold-text);
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.topic-links a:hover {
    color: var(--navy);
}

/* Images and results. Framed images have the old site's hairline, for screenshots on white. */
.images__item img {
    width: 100%;
}

.images--framed .images__item img {
    border: 1px solid #c4c4c4;
}

.results__grid {
    gap: 1.875rem;
}

@media (min-width: 34em) {
    .results__grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.result {
    position: relative;
    display: flex;
    padding: 1rem;
}

.result__heading {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0;
    padding: 1.25rem;
    color: #fff;
    font-size: var(--text-lg);
}

@media (min-width: 34em) {
    .result__heading {
        padding: 1.875rem;
    }
}

.result img {
    margin: auto;
}

/* People */
.person-card {
    text-align: center;
}

.person-card__photo,
.profile__photo {
    width: min(12rem, 70%);
    margin: 0 auto 1.25rem;
    border-radius: 50%;
}

.people .container {
    max-width: calc(var(--container) * 10 / 12);
}

.person-card__name {
    margin-bottom: 0.25rem;
    font-size: var(--h3);
}

.person-card__name a {
    text-decoration: none;
}

.person-card__title,
.profile__title {
    color: var(--gold-text);
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.3;
}

.profile {
    text-align: center;
}

.profile__name {
    margin: 0 0 0.25rem;
    font-family: var(--font-head);
    font-size: var(--h3);
    font-weight: 700;
    line-height: 1.1;
}

/* Inline, divided by rules, as on the old site */
.profile__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.profile__links li + li::before {
    content: "|";
    margin-inline: 0.6em;
    color: var(--gold);
}

.profile__links a {
    color: var(--navy);
    text-decoration-color: var(--gold);
}

/* 8. Cards
   ------------------------------------------------------------------------- */

.cards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--beige);
    color: var(--ink);
}

.tone-tinted .card {
    background: #fff;
}

.card__media {
    overflow: hidden;
    aspect-ratio: 11 / 6;
    background: var(--line);
}

.card__media--strip {
    aspect-ratio: 4 / 1;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card:hover .card__media img {
    transform: scale(1.03);
}

.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.5rem;
}

.card .eyebrow {
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.card__title {
    margin: 0;
    font-size: var(--h3);
    line-height: 1;
}

.card__title a {
    text-decoration: none;
}

.card__title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

/* The whole card is the link */
.card__title a::before,
.card__button::before {
    content: "";
    position: absolute;
    inset: 0;
}

.card__text {
    margin: 1rem 0 0;
    line-height: 1.4;
}

.card--static {
    background: #fff;
}

/* A card with a button, like the home page's industries */
.card--button {
    text-align: center;
}

.card--button .card__title {
    text-transform: uppercase;
}

.card--button .card__text {
    margin-bottom: 2rem;
}

.card__button {
    align-self: center;
    min-width: max(70%, 11rem);
    margin-top: auto;
    padding-inline: 0.75rem;
    white-space: nowrap;
}

.card--button:hover .card__button {
    background: var(--navy);
    color: #fff;
}

/* One card per row. As on the old site, a link card is a box with the text beside a
   quarter-width picture, on the right and then the left; an entry is a picture with its
   title over the top. */
.cards--wide {
    display: grid;
    gap: var(--gap);
}

@media (min-width: 48em) {
    .cards--wide .card:not(.card--entry) {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
        align-items: center;
    }

    .cards--wide .card:not(.card--entry) .card__media {
        order: 1;
        height: 100%;
        aspect-ratio: auto;
        min-height: 17rem;
    }

    .cards--wide > li:nth-child(even) .card:not(.card--entry) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }

    .cards--wide > li:nth-child(even) .card:not(.card--entry) .card__media {
        order: 0;
    }

    .cards--wide .card__body {
        padding: clamp(1.5rem, 3vw, 2.5rem);
    }

    .cards--wide .card__title {
        font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.625rem);
    }
}

.cards--wide .card--entry {
    --heading: #fff;
    display: grid;
    background: var(--navy-deep);
    color: #fff;
}

.cards--wide .card--entry > * {
    grid-area: 1 / 1;
}

.cards--wide .card--entry .card__media {
    position: relative;
    aspect-ratio: 4 / 3;
}

@media (min-width: 48em) {
    .cards--wide .card--entry .card__media {
        aspect-ratio: 2.1;
    }
}

.cards--wide .card--entry .card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.7), transparent 60%);
}

.cards--wide .card--entry .card__body {
    z-index: 1;
    align-self: start;
    max-width: 48rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.cards--wide .card--entry .card__title {
    font-size: clamp(1.625rem, 1.25rem + 1vw, 2rem);
    line-height: 1.15;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.3);
}

/* 9. Listings and sliders
   ------------------------------------------------------------------------- */

.listing__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.no-js .listing__filters {
    display: none;
}

/* Buttons that switch the grid between options, one at a time */
.listing__toggles {
    margin-bottom: 2.5rem;
}

.no-js .listing__toggles {
    display: none;
}

/* The buttons share one row. Each has its own border, overlapping its neighbour's */
.listing__toggle-list {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    max-width: 48rem;
    margin-inline: auto;
    padding-left: 1px;
}

.listing__toggle {
    margin-left: -1px;
    padding: 1rem 0.25rem 0.85rem;
    border: 1px solid var(--gold);
    background: #fff;
    color: var(--gold);
    font-family: var(--font-head);
    font-size: clamp(1rem, 0.75rem + 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    cursor: pointer;
}

.listing__toggle:hover {
    background: var(--beige);
}

.listing__toggle[aria-pressed="true"] {
    background: var(--gold);
    color: #fff;
}

@media (max-width: 47.99em) {
    .listing__filters > * {
        flex: 1 1 100%;
    }

    .select select {
        width: 100%;
    }
}

.select select {
    appearance: none;
    min-width: 15rem;
    padding: 0.8em 2.75em 0.7em 1em;
    border: 1px solid var(--navy);
    border-radius: 2px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5.5 8 11l5.5-5.5' fill='none' stroke='%23003b5c' stroke-width='2'/%3E%3C/svg%3E") right 1em center / 0.85em no-repeat;
    color: var(--navy);
    font-family: var(--font-head);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.listing [data-hidden] {
    display: none;
}

.listing__empty {
    margin: 0;
    text-align: center;
}

.listing__more {
    margin: 2.5rem 0 0;
    text-align: center;
}

/* Sliders scroll natively within the content width; site.js adds the arrows */
.slider {
    --slide: min(85%, 22rem);
    --slide-gap: 1.25rem;
}

.slider--1 { --slide: min(88%, 36rem); }
.slider--2 { --slide: min(85%, 28rem); }

/* From tablets, a one-column slider shows two slides and a sliver of the next */
@media (min-width: 48em) {
    .slider--1 { --slide: calc((100% - 2 * var(--slide-gap) - 1.5rem) / 2); }
}

.slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--slide);
    gap: var(--slide-gap);
    margin: 0;
    padding: 0 0 0.5rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.slider__track::-webkit-scrollbar {
    display: none;
}

.slider__slide {
    scroll-snap-align: start;
}

.slider__controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.no-js .slider__controls {
    display: none;
}

.slider__button {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    cursor: pointer;
}

.slider__button::before {
    content: "";
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    margin: auto;
    background: currentColor;
    -webkit-mask: var(--chevron) center / contain no-repeat;
    mask: var(--chevron) center / contain no-repeat;
    transform: scaleX(-1);
}

.slider__button--next::before {
    transform: none;
}

.slider__button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* 10. Footer
   ------------------------------------------------------------------------- */

.site-footer {
    color: var(--cream);
}

.site-footer a {
    color: inherit;
}

.site-footer h2 {
    margin-bottom: 1rem;
    font-size: 2.125rem;
    line-height: 1;
}

.site-footer__top {
    padding-block: 4rem;
    background: var(--navy);
    color: var(--cream);
}

.site-footer__inner {
    display: grid;
    gap: 3.75rem;
}

.site-footer__cta {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

.site-footer__cta .prose {
    line-height: 1.7;
}

.site-footer__cta .prose p {
    margin-bottom: 1.5rem;
}

.site-footer__photo {
    width: 7.8125rem;
    border-radius: 50%;
}

.site-footer__contact .prose {
    line-height: 1.4;
}

.site-footer__contact .prose p {
    margin-bottom: 1.25rem;
}

.site-footer__contact .prose a:not(.button) {
    text-decoration: none;
}

@media (min-width: 48em) {
    .site-footer__inner {
        display: flex;
        justify-content: space-between;
    }

    .site-footer__cta {
        display: flex;
        gap: 2.5rem;
        margin-right: 3.75rem;
    }

    .site-footer__photo {
        flex: none;
    }

    .site-footer__contact {
        flex: 0 1 auto;
        max-width: 16rem;
    }
}

@media (min-width: 64em) {
    .site-footer__cta {
        margin-right: 6.25rem;
    }

    .site-footer__photo {
        width: 13.5rem;
    }
}

.social-links {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-links a {
    display: inline-flex;
    color: #fff;
    transition: opacity 0.2s;
}

.social-links a:hover {
    opacity: 0.75;
}

.social-links svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

/* The copyright line, with the subfooter's links after it */
.site-footer__bottom {
    padding-block: 1.3125rem;
    background: var(--navy-deep);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0.75;
}

.site-footer__legal p {
    margin: 0;
}

.site-footer__legal p + p::before {
    content: "|";
    padding-inline: 0.6em;
}

/* 11. Utilities
   ------------------------------------------------------------------------- */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}