/*
 * Cormack Core Reactor - Main Stylesheet
 * Author: Charlie - Cormack Advertising
 *
 * The Hive site shell: tokens, base type, buttons, header, hero, photo CTA,
 * footer, enquiry overlay and cookie bar. Page sections are in home.css,
 * about.css and offer.css.
 *
 * Desktop sizes are the 1440px Figma frame written as calc(N * var(--u)):
 * --u is 1px at 1440 and wider and shrinks in proportion below it, so the
 * composition holds on laptops. Tablet and phone layouts are set explicitly
 * at the end of each file.
 */

:root {
    --navy: #1f174f;
    --navy-deep: #1c1038;
    --indigo: #3c3b7f;
    --violet: #2f217a;
    --ink: #211853;
    --mist: #f5f3f5;
    --green: #00e68c;
    --pill-border: #787878;
    --rule: rgba(255, 255, 255, 0.2); /* horizontal dividers */
    --error: #c4002b;

    --font-body: 'Pilat', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Pilat Wide', 'Pilat', 'Helvetica Neue', Arial, sans-serif;

    --u: min(1px, 100vw / 1440);
    --gutter: max(20px, calc(61 * var(--u)));
    --header-h: max(80px, calc(140 * var(--u)));
    --radius: 10px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

body {
    min-height: 100vh;
    background: var(--navy);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.17;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul[role="list"] {
    list-style: none;
}

strong {
    font-weight: 600;
}

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

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 300;
    padding: 10px 16px;
    border-radius: 6px;
    background: #fff;
    color: var(--navy);
    font-weight: 600;
}

.skip-link:focus {
    top: 12px;
}

/* Icons positioned from their Figma artboards overhang their box on purpose */
.site-main {
    overflow-x: clip;
}

/* Container */
.container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Shared type */
.eyebrow {
    font-weight: 600;
    font-size: 16px;
    line-height: 30px;
    text-transform: uppercase;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: max(26px, calc(37 * var(--u)));
    line-height: 1.054;
}

/* Section with a hairline above and its heading 26px under it */
.ruled {
    border-top: 1px solid var(--rule);
    padding-top: max(18px, calc(26 * var(--u)));
}

/* ------------------------------------------------------------------ Buttons */

/*
 * The pill is a navy fill with a grey border in screen blend mode, so it
 * lightens to violet over the navy page and turns translucent over photos.
 * The blend lives on ::before so the label and shadow stay untouched.
 */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 221px;
    height: 36px;
    padding: 0 22px;
    border-radius: 29px;
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 29px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--pill-border);
    border-radius: inherit;
    background-color: var(--navy);
    mix-blend-mode: screen;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.btn__label {
    position: relative;
}

/* No transform on hover: it would isolate the button and switch the blend off */
.btn:hover {
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3);
}

.btn:hover::before {
    background-color: #3d2e94;
}

.btn--lg {
    min-width: min(329px, 100%);
    height: 49px;
    font-size: 20px;
}

/* Solid navy, no border - used on light backgrounds */
.btn--solid::before {
    border-width: 0;
    mix-blend-mode: normal;
}

.btn--solid:hover::before {
    background-color: #2d2272;
}

/* ------------------------------------------------------------------ Header */

/* Logo and links on the left, buttons on the right, lined up with the page
   content - the 1440px frame, centred on wider screens (--content-edge).
   Once scrolled, the bar slides them out to the screen edges. The 140px
   bar's row sits 72.5px down, hence the 5px of top padding. */
.site-header {
    --content-edge: max(0px, (100% - 1440px) / 2);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: var(--header-h);
    padding: calc(5 * var(--u)) calc(var(--content-edge) + max(20px, calc(56 * var(--u)))) 0 calc(var(--content-edge) + max(20px, calc(60 * var(--u))));
    transition: height 0.35s var(--ease), padding 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* The scrolled bar's fill and blur sit on ::before. A backdrop-filter on the
   header itself would make it the containing block of the fixed mobile menu,
   which would then open only as tall as the bar. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(31, 23, 79, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);
}

.admin-bar .site-header {
    top: 32px;
}

.site-header.is-scrolled {
    height: 64px;
    padding: 0 max(20px, calc(24 * var(--u)));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}

.site-header.is-scrolled::before {
    opacity: 1;
}

.site-header__logo {
    position: relative;
    z-index: 2;
    flex: none;
}

.site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-left: max(32px, calc(61 * var(--u)));
}

/* The link text sits 3px above the button labels, as drawn */
.site-nav__list {
    position: relative;
    top: calc(-3 * var(--u));
    display: flex;
    gap: max(32px, calc(61 * var(--u)));
    list-style: none;
}

.site-nav__list a {
    position: relative;
    display: block;
    font-weight: 300;
    font-size: 16px;
    line-height: 29px;
}

.site-nav__list a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
}

.site-nav__list a:hover::after {
    transform: scaleX(1);
}

.site-nav__actions {
    display: flex;
    gap: 12px;
}

.site-nav__actions .btn {
    min-width: 0;
    padding: 0 15.5px;
}

/* The fixed header is its own stacking context, so a blend inside it can't
   reach the photo behind. These translucent fills give the screen-blend
   result over the hero and over the navy page alike. */
.site-nav__actions .btn::before {
    mix-blend-mode: normal;
    background-color: rgba(120, 110, 210, 0.35);
    border-color: rgba(200, 200, 225, 0.6);
}

.site-nav__actions .btn:hover::before {
    background-color: rgba(120, 110, 210, 0.5);
}

.nav-toggle {
    display: none;
}

/* ------------------------------------------------------------------ Hero */

.hero {
    position: relative;
    height: max(600px, calc(880 * var(--u)));
}

.hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(31, 23, 79, 0.48);
}

.hero__content {
    position: relative;
    padding-top: var(--hero-top);
}

.hero__title {
    margin-top: max(14px, calc(26 * var(--u)));
    font-family: var(--font-display);
    font-weight: 400;
    font-size: max(40px, calc(67 * var(--u)));
    line-height: 1.0896;
}

.hero__title strong {
    font-weight: 800;
}

.hero__lead {
    margin-top: calc(34 * var(--u));
    max-width: 20em;
    font-size: max(18px, calc(26 * var(--u)));
    line-height: 1.192;
}

/* Home: the photo fades into the navy page at its foot */
.hero--home {
    --hero-top: max(116px, calc(223 * var(--u)));
}

.hero--home .hero__media::after {
    background: linear-gradient(180deg, rgba(31, 23, 79, 0) 65.34%, var(--navy) 95%), rgba(31, 23, 79, 0.46);
}

.hero__wordmark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(44 * var(--u));
}

.hero__wordmark img {
    width: 100%;
}

/* Subpage heroes fill the screen, keeping the drawn composition: About's
   headline 182px above the foot, the split's copy centred (21px low) */
.hero--about,
.hero--split {
    --hero-top: 0px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    min-height: 600px;
}

.hero--about {
    justify-content: flex-end;
    padding-bottom: calc(182 * var(--u));
}

.hero--about .hero__title {
    max-width: 11.8em;
}

/* Split: navy on the left, photo on the right half */
.hero--split {
    justify-content: center;
    padding-top: calc(42 * var(--u));
}

.hero--split .hero__media {
    left: 50%;
}

.hero--split .hero__media::after {
    content: none;
}

.hero--split .hero__lead {
    max-width: min(50vw - var(--gutter) - 24px, 20em);
}

/* Scroll cue - a mouse outline whose arrow slides down */
.scroll-cue {
    position: absolute;
    top: calc(784 * var(--u));
    left: 50%;
    z-index: 2;
    width: 30px;
    height: 43px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 29px;
}

.hero--home .scroll-cue {
    top: 100%;
}

/* On the full-screen subpage heroes it keeps to the foot, 53px up as drawn */
.hero--about .scroll-cue,
.hero--split .scroll-cue {
    top: auto;
    bottom: calc(53 * var(--u));
}

.scroll-cue__arrow {
    position: absolute;
    top: 8px;
    left: 7.29px;
    animation: scroll-cue 1.8s ease-out infinite;
}

/* As prototyped: rest 0.6s, drop 12px over 0.3s, rest 0.6s, rise over 0.3s */
@keyframes scroll-cue {
    0%, 33.333% {
        transform: translateY(0);
    }
    50%, 83.333% {
        transform: translateY(12px);
    }
    100% {
        transform: translateY(0);
    }
}

/* ------------------------------------------------------------------ Photo CTA */

.cta {
    padding: max(40px, calc(59 * var(--u))) 0 max(40px, calc(57 * var(--u)));
}

.cta--ruled {
    padding-top: 0;
}

.cta--ruled .container::before {
    content: '';
    display: block;
    margin-bottom: max(28px, calc(45 * var(--u)));
    border-top: 1px solid var(--rule);
}

.cta__banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: max(300px, calc(405 * var(--u)));
    padding: 40px max(24px, calc(73 * var(--u)));
    border-radius: var(--radius);
    overflow: hidden;
}

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

.cta__banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--violet) 7.212%, rgba(47, 33, 122, 0));
    opacity: var(--shade, 0.9);
}

.cta__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta__title {
    font-weight: 600;
    font-size: max(22px, calc(26 * var(--u)));
    line-height: 1.115;
    text-transform: uppercase;
}

.cta__title + .btn {
    margin-top: max(20px, calc(27 * var(--u)));
}

/* ------------------------------------------------------------------ Footer */

.site-footer {
    padding: 60px 0 58px;
    background: linear-gradient(127.9deg, var(--navy-deep) 24.112%, var(--indigo) 75.888%);
}

.site-footer__logo {
    width: 174px;
}

.site-footer__enquiry {
    max-width: 467px;
    margin-top: 72px;
    font-size: 24px;
    line-height: 25px;
}

.site-footer__email {
    display: inline-block;
    margin-top: 25px;
    font-weight: 600;
    font-size: 24px;
    line-height: 25px;
}

.site-footer__email:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.site-footer__legal {
    margin-top: 62px;
    padding: 36px 0 45px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
    line-height: 21px;
}

.site-footer__legal p {
    max-width: 1206px;
}

.site-footer__legal a:hover,
.site-footer__base a:hover {
    text-decoration: underline;
}

.site-footer__base {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
    font-size: 14px;
    line-height: 21px;
}

/* ------------------------------------------------------------------ Enquiry overlay */

.enquiry {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--header-h) max(12px, calc(54 * var(--u))) 40px;
}

/* Without JavaScript the #enquire anchor opens it. With it, .is-open does:
   :target can't be cleared, so it would hold the dialog open after closing. */
.enquiry.is-open,
html:not(.js-enabled) .enquiry:target {
    display: block;
}

/* Scrim and card animate separately. Fading the whole overlay would switch
   off the blurs inside it until the fade ended, so the page would show
   through sharp, as if it sat on top of the card. The blur leads, so the
   card only ever rises over an already softened page. */
.enquiry.is-open .enquiry__scrim {
    animation: enquiry-scrim-in 0.3s var(--ease) both;
}

.enquiry.is-open .enquiry__panel {
    animation: enquiry-panel-in 0.45s var(--ease) 0.08s both;
}

@keyframes enquiry-scrim-in {
    from {
        background-color: rgba(31, 23, 79, 0);
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
    }
}

@keyframes enquiry-panel-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

.enquiry__scrim {
    position: fixed;
    inset: 0;
    background: rgba(31, 23, 79, 0.2);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.enquiry__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 591fr) minmax(0, 603fr);
    max-width: 1332px;
    min-height: max(560px, calc(665 * var(--u)));
    margin: 0 auto;
    padding: max(40px, calc(68 * var(--u))) max(24px, calc(63 * var(--u))) max(40px, calc(68 * var(--u))) max(24px, calc(75 * var(--u)));
    border-radius: var(--radius);
    background: rgba(245, 243, 245, 0.7);
    box-shadow: 14px 12px 17px rgba(0, 0, 0, 0.25);
    color: #000;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.enquiry__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s var(--ease);
}

.enquiry__close::before,
.enquiry__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: var(--navy);
    transform: translate(-50%, -50%) rotate(45deg);
}

.enquiry__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.enquiry__close:hover {
    background-color: rgba(31, 23, 79, 0.08);
}

.enquiry__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 32px;
}

.enquiry__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: max(28px, calc(37 * var(--u)));
    line-height: 1.054;
}

.enquiry__title:focus {
    outline: none;
}

.enquiry__text {
    max-width: 13em;
    margin-top: max(20px, calc(33 * var(--u)));
    font-size: max(20px, calc(26 * var(--u)));
    line-height: 1.192;
}

.enquiry__submit {
    margin-top: auto;
    padding: 4px;
    margin-left: -4px;
    border-radius: 50%;
    transition: transform 0.2s var(--ease);
}

.enquiry__submit img {
    width: 36px;
    height: 36px;
}

.enquiry__submit:hover {
    transform: translateX(4px);
}

.enquiry__submit[aria-busy="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.enquiry__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 11px 29px;
    padding-top: max(20px, calc(72 * var(--u)));
}

.field {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field--half {
    grid-column: auto;
}

.field label {
    font-size: 18px;
    line-height: 31px;
}

.field input,
.field textarea {
    display: block;
    width: 100%;
    height: 67px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius);
    background: rgba(31, 23, 79, 0.06);
    color: #000;
    font-size: 18px;
    outline: none;
    transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea {
    height: 184px;
    padding: 18px 20px;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    background: rgba(31, 23, 79, 0.1);
    box-shadow: inset 0 0 0 2px var(--navy);
}

.field.has-error input,
.field.has-error textarea {
    box-shadow: inset 0 0 0 2px var(--error);
}

.enquiry__error {
    color: var(--error);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

.enquiry__error--form {
    grid-column: 1 / -1;
}

.enquiry__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.enquiry__sent {
    display: none;
    padding-top: max(20px, calc(72 * var(--u)));
    font-size: max(20px, calc(26 * var(--u)));
    line-height: 1.192;
}

.enquiry__sent-title {
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: max(28px, calc(37 * var(--u)));
}

.enquiry.is-sent .enquiry__fields,
.enquiry.is-sent .enquiry__submit {
    display: none;
}

.enquiry.is-sent .enquiry__sent {
    display: block;
}

html.enquiry-is-open {
    overflow: hidden;
}

/* ------------------------------------------------------------------ Cookie bar */

.cookie-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: rgba(28, 16, 56, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.cookie-bar[hidden],
html.enquiry-is-open .cookie-bar {
    display: none;
}

.cookie-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 16px;
}

/* One line wherever it fits beside the button; once it wraps, the lines are
   evened out so no word is left on a line of its own */
.cookie-bar__text {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 21px;
    text-wrap: balance;
}

.cookie-bar__ok {
    min-width: 120px;
    flex: none;
}

/* ------------------------------------------------------------------ Plain pages (index.php) */

.page-plain {
    padding: calc(var(--header-h) + 40px) 0 100px;
}

.page-plain__article + .page-plain__article {
    margin-top: 60px;
}

.page-plain .entry-content {
    max-width: 760px;
    margin-top: 28px;
    line-height: 1.5;
}

.page-plain .entry-content > * + * {
    margin-top: 1em;
}

.page-plain .entry-content a {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ Motion */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------------ Tablet */

@media (max-width: 1023px) {
    .site-header,
    .site-header.is-scrolled {
        justify-content: space-between;
        height: 64px;
        padding-top: 0;
    }

    .nav-toggle {
        position: relative;
        z-index: 2;
        display: block;
        width: 44px;
        height: 44px;
        margin-right: -10px;
    }

    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        position: absolute;
        left: 10px;
        width: 24px;
        height: 2px;
        background: #fff;
        transition: transform 0.3s var(--ease), opacity 0.2s;
    }

    .nav-toggle__bars {
        top: 21px;
    }

    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        content: '';
        left: 0;
    }

    .nav-toggle__bars::before {
        top: -7px;
    }

    .nav-toggle__bars::after {
        top: 7px;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars {
        background: transparent;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 48px;
        margin-left: 0;
        padding: 88px var(--gutter) 48px;
        background: var(--navy);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s var(--ease), visibility 0.3s;
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
    }

    .site-nav__list {
        top: 0;
        flex-direction: column;
        gap: 20px;
    }

    .site-nav__list a {
        font-family: var(--font-display);
        font-size: 32px;
        line-height: 1.2;
    }

    .site-nav__actions {
        flex-wrap: wrap;
    }

    .site-nav__actions .btn {
        padding: 0 22px;
    }

    /* Over the menu's own navy the real screen blend works again */
    .site-nav__actions .btn::before {
        mix-blend-mode: screen;
        background-color: var(--navy);
        border-color: var(--pill-border);
    }

    .site-nav__actions .btn:hover::before {
        background-color: #3d2e94;
    }

    html.nav-is-open {
        overflow: hidden;
    }

    /* The form scrolls under the bar here, so the bar keeps its fill */
    html.enquiry-is-open .site-header::before {
        opacity: 1;
    }
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* ------------------------------------------------------------------ Phone */

@media (max-width: 767px) {
    /* Fits a 320px screen */
    .btn--lg {
        font-size: 18px;
    }

    .hero {
        height: auto;
        min-height: max(560px, min(100svh, 760px));
        padding-bottom: 96px;
    }

    .hero--home,
    .hero--about,
    .hero--split {
        --hero-top: 124px;
    }

    .hero--home {
        padding-bottom: 140px;
    }

    /* Subpage heroes fill the screen here too */
    .hero--about {
        min-height: 100svh;
    }

    .hero__wordmark {
        bottom: 32px;
    }

    .hero--about .scroll-cue {
        top: auto;
        bottom: 32px;
    }

    /* Split stacks: copy on navy, then the photo filling the rest of the screen */
    .hero--split {
        justify-content: flex-start;
        min-height: 100svh;
        padding-top: 0;
        padding-bottom: 0;
    }

    .hero--split .hero__lead {
        max-width: none;
    }

    .hero--split .hero__content {
        padding-bottom: 48px;
    }

    /* Takes the height left under the copy (at least 4:3), whatever the photo's shape */
    .hero--split .hero__media {
        position: relative;
        left: 0;
        order: 2;
        flex: 1 0 0;
        min-height: 75vw;
    }

    .hero--split .hero__media img {
        position: absolute;
        inset: 0;
    }

    .hero--split .scroll-cue {
        display: none;
    }

    .cta__banner {
        align-items: flex-end;
        min-height: 340px;
        padding: 32px 24px;
    }

    .cta__banner::after {
        background: linear-gradient(0deg, var(--violet) 10%, rgba(47, 33, 122, 0.1) 90%);
    }

    .site-footer__enquiry {
        margin-top: 48px;
        font-size: 22px;
        line-height: 1.15;
    }

    .site-footer__email {
        margin-top: 20px;
        font-size: 22px;
    }

    .site-footer__legal {
        margin-top: 40px;
        padding: 28px 0;
    }

    .site-footer__base {
        flex-direction: column;
        gap: 8px;
    }

    .enquiry {
        padding: 88px 12px 24px;
    }

    .enquiry__panel {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 40px 20px 32px;
    }

    /* Title and intro first, then the fields, then the send arrow */
    .enquiry__intro {
        display: contents;
    }

    .enquiry__title {
        padding-right: 40px;
    }

    .enquiry__text {
        margin-top: 16px;
    }

    .enquiry__fields {
        order: 2;
        grid-template-columns: 1fr;
        padding-top: 28px;
    }

    .field--half {
        grid-column: 1 / -1;
    }

    .enquiry__sent {
        order: 2;
    }

    .enquiry__submit {
        order: 3;
        margin-top: 24px;
    }

    .cookie-bar__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}