/* =========================================================================
   Stonefort Marine — design system
   Tokens verbatim from the Figma variables.
   ========================================================================= */

:root {
    /* surfaces */
    --surface-base: #ffffff;
    --surface-subtle: #efefef;
    --surface-inverse: #12122d;

    /* ink */
    --ink-primary: #12122d;
    --ink-secondary: #5a5a6e;
    --ink-on-inverse: #ffffff;
    --ink-on-inverse-muted: #c4c4d2;

    /* accent */
    --accent-on-inverse: #50bfff;
    --accent-on-surface: #12122d;
    /* Cyan reads at 2:1 on white, which fails AA for small text. This is the
       same hue darkened to 5.6:1 for labels on light surfaces. */
    --accent-on-light: #1c6ea4;

    /* lines */
    --line-subtle: #dcdee5;
    --line-on-inverse: #2e2e4a;

    /* type scale */
    --font: "DM Sans", -apple-system, sans-serif;
    --display-l: clamp(2.75rem, 5vw, 4.5rem);      /* 72 */
    --h2: clamp(2rem, 3.2vw, 2.75rem);             /* 44 */
    --h3: clamp(1.625rem, 2.5vw, 2.125rem);        /* 34 */
    --h4: 1.625rem;                                /* 26 */
    --h5: 1.3125rem;                               /* 21 */
    --body-l: 1.25rem;                             /* 20 */
    --body: 1.0625rem;                             /* 17 */
    --body-s: 0.9375rem;                           /* 15 */
    --caption: 0.8125rem;                          /* 13 */

    /* layout */
    --gutter: 80px;
    --max: 1280px;
    --max-site: 1920px; /* every container caps here; gutter padding sits inside */

    /* motion — one signature curve, one workhorse curve */
    --ease-sf: cubic-bezier(0.19, 1, 0.22, 1);    /* expo-out: reveals, settles */
    --ease-house: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric: fills, wipes, draws */
    --ease-nudge: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot: arrows */
    --header-h: 97px;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--body);
    line-height: 1.65;
    color: var(--ink-primary);
    /* Navy behind everything, so overscroll at either end shows brand colour
       rather than white. The content column paints its own surface. */
    background: var(--surface-inverse);
    -webkit-font-smoothing: antialiased;
}
#main { background: var(--surface-base); }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
.screen-reader-text {
    position: absolute; width: 1px; height: 1px;
    clip-path: inset(50%); overflow: hidden;
}

/* brand surfaces: selection + scrollbar */
::selection { background: var(--accent-on-inverse); color: var(--surface-inverse); }
/* Track matches the content column, not the navy body behind it. */
html { scrollbar-color: #3a3a55 var(--surface-base); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--surface-base); }
::-webkit-scrollbar-thumb {
    background: #3a3a55;
    border-radius: 6px;
    border: 3px solid var(--surface-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--surface-inverse); }

/* focus system: navy ring on light surfaces, cyan on inverse */
:focus-visible {
    outline: 2px solid var(--ink-primary);
    outline-offset: 3px;
    border-radius: 2px;
}
.hero :focus-visible,
.why :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.site-header :focus-visible,
.mobile-menu :focus-visible {
    outline-color: var(--accent-on-inverse);
}
.button--primary:focus-visible {
    outline-color: var(--ink-primary);
    outline-offset: 2px;
}
.hero :focus-visible, .cta-band :focus-visible { outline-offset: -2px; }

/* ---------- shared pieces ---------- */
.overline {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--ink-secondary);
}
.overline--accent { color: var(--accent-on-inverse); }
.overline--rule::before {
    content: "";
    width: 56px; height: 1px;
    background: currentColor;
    opacity: 0.6;
    transform: scaleX(var(--rule, 1));
    transform-origin: left center;
}
.section-heading {
    font-size: var(--h2);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.045em;
}
.section-heading--inverse { color: var(--ink-on-inverse); }
.section-lede {
    font-size: var(--body-l);
    line-height: 1.6;
    letter-spacing: -0.025em;
    color: var(--ink-secondary);
}
.text-link {
    font-size: var(--body);
    font-weight: 500;
    color: var(--ink-primary);
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}
.text-link__label {
    padding-bottom: 2px;
    background: linear-gradient(currentColor, currentColor) no-repeat left calc(100% - 1px) / 0% 1px;
    transition: background-size 0.35s var(--ease-house);
}
.text-link__arrow {
    display: inline-block;
    transition: transform 0.35s var(--ease-nudge);
}
.text-link__icon { align-self: center; flex: none; }
.text-link--inverse { color: var(--accent-on-inverse); }
.button {
    position: relative;
    display: inline-block;
    font-family: var(--font);
    font-size: var(--body-s);
    font-weight: 500;
    line-height: 1;
    padding: 14px 26px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.button::before {
    /* navy plate that rises on hover, inverting the pill */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--surface-inverse);
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform 0.35s var(--ease-house);
}
.button__label {
    position: relative;
    z-index: 1;
    display: inline-block;
    transition: color 0.35s var(--ease-house), transform 0.15s var(--ease-house);
}
.button--primary { background: var(--accent-on-inverse); color: var(--accent-on-surface); }
.button--block { display: block; text-align: center; }
.button:active .button__label { transform: scale(0.96); }
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    position: relative;
    font-size: var(--caption);
    font-weight: 500;
    padding: 8px 16px;
    border: 1px solid var(--line-subtle);
    border-radius: 999px;
    color: var(--ink-secondary);
    overflow: hidden;
    transition:
        transform 0.3s var(--ease-nudge),
        border-color 0.3s var(--ease-house),
        color 0.35s var(--ease-house);
}
.chip::before {
    /* navy plate rising from the bottom of the pill */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--surface-inverse);
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform 0.35s var(--ease-house);
}
.chip::after {
    /* cyan specular strip that sweeps once the plate is up */
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -45%;
    width: 40%;
    background: linear-gradient(105deg, transparent, rgba(80, 191, 255, 0.45), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    transition: none;
}
.chip__label { position: relative; z-index: 1; }

/* ---------- header ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    transition: background 0.3s var(--ease-house), box-shadow 0.3s var(--ease-house);
}
body:not(.has-hero-header) .site-header { background: var(--surface-inverse); }
body:not(.has-hero-header) { padding-top: var(--header-h); }
.site-header--solid {
    background: rgba(18, 18, 45, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 -1px 0 var(--line-on-inverse);
}
/* With a dropdown open the bar must match the panel exactly, so it reads as
   one block rather than a translucent strip above a solid one. */
.site-header--mega {
    background: var(--surface-inverse);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.site-header__inner {
    max-width: var(--max-site);
    margin: 0 auto;
    padding: 22px var(--gutter);
    /* Equal side columns so the nav sits on the true page centre rather than
       in whatever space the logo and button leave behind. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 48px;
}
.site-header__brand { justify-self: start; }
.site-header__actions { justify-self: end; }
.site-header__brand img { width: 191px; height: auto; }
.site-header__brand,
.site-footer__logo,
.mobile-menu__brand { transition: opacity 0.3s var(--ease-house); }
.site-nav {
    display: flex;
    gap: 36px;
}
/* Child combinators throughout: a mega panel lives inside its own nav item,
   so descendant selectors would style every link in the dropdown too. */
.site-nav > li > a {
    position: relative;
    padding-bottom: 4px;
    font-size: var(--body);
    color: var(--ink-on-inverse);
    transition: color 0.25s var(--ease-house);
}
.site-nav > li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--accent-on-inverse);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s var(--ease-house);
}
.site-nav > li.current-menu-item > a,
.site-nav > li.current-menu-ancestor > a,
.site-nav > li.current_page_parent > a { color: var(--accent-on-inverse); }
.site-nav > li > a[aria-current="page"]::after,
.site-nav > li.current-menu-item > a::after,
.site-nav > li.current-menu-ancestor > a::after,
.site-nav > li.current_page_parent > a::after { transform: scaleX(1); }
.site-header__burger { display: none; }

/* mobile menu overlay */
.mobile-menu {
    position: fixed;
    inset: 0;
    /* Above the cookie banner (400), or the banner covers the lower nav links. */
    z-index: 420;
    background: var(--surface-inverse);
    color: var(--ink-on-inverse);
    padding: 24px;
    overflow-y: auto;
}
.mobile-menu__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 28px;
}
.mobile-menu__brand { display: inline-flex; }
.mobile-menu__close {
    background: none; border: 0;
    color: var(--ink-on-inverse);
    font-size: 2rem; line-height: 1;
    cursor: pointer;
    /* Thumb target: the glyph alone was 34px. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: -10px;
}
.mobile-menu__group {
    border-top: 1px solid var(--line-on-inverse);
    padding: 24px 0;
}
.mobile-menu__list a {
    display: block;
    padding: 10px 0;
    font-size: var(--h5);
    font-weight: 500;
}
.mobile-menu__cta { border-top: 1px solid var(--line-on-inverse); padding-top: 24px; }
.mobile-menu__note {
    margin-top: 14px;
    font-size: var(--body-s);
    color: var(--ink-on-inverse-muted);
    text-align: center;
}

/* ---------- hero ---------- */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh; /* mobile: excludes browser chrome, so no address-bar jump */
    min-height: 640px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--ink-on-inverse);
    overflow: hidden;
    background: var(--surface-inverse);
}
.hero__poster,
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The poster carries the hero until the video is attached, which only happens
   on large viewports: the file is several megabytes and autoplay makes phones
   download all of it. */
.hero__video {
    opacity: 0;
    transition: opacity 0.6s var(--ease-sf);
}
.hero__video.is-playing { opacity: 1; }
.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(18, 18, 45, 0.62) 0%, rgba(18, 18, 45, 0.42) 45%, rgba(18, 18, 45, 0.84) 100%),
        rgba(18, 18, 45, 0.38);
}
.hero__badge {
    position: absolute;
    top: 124px;
    /* The hero is full-bleed but its content caps at --max-site, so past
       1920 the badge must follow the content gutter, not the viewport edge. */
    right: max(var(--gutter), calc((100% - var(--max-site)) / 2 + var(--gutter)));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 12px 24px 12px 20px;
}
.hero__badge-number {
    font-size: var(--h4);
    font-weight: 500;
    color: var(--accent-on-inverse);
}
.hero__badge-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.35;
    white-space: pre-line;
}
.hero__type {
    position: relative;
    z-index: 2;
    padding: 0 var(--gutter);
    max-width: var(--max-site);
    margin: 0 auto;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding-top: 110px;
}
.hero__type .overline { color: var(--ink-on-inverse); }
.hero__heading {
    font-size: var(--display-l);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.04em;
    max-width: 1280px;
}
.hero__sub {
    font-size: var(--body-l);
    line-height: 1.6;
    letter-spacing: -0.025em;
    max-width: 1280px;
    color: var(--ink-on-inverse);
}
.hero__routes {
    position: relative;
    z-index: 2;
    display: flex;
    max-width: var(--max-site);
    width: 100%;
    margin: 48px auto 0;
}
.hero__route {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    border-top: 2px solid var(--accent-on-inverse);
    padding: 32px 64px 64px 80px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: flex-grow 0.55s var(--ease-house);
}
.hero__route + .hero__route { padding: 32px 80px 64px 64px; }
.hero__route + .hero__route::after {
    /* vertical divider: rides the flex boundary as panels expand */
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -1px;
    width: 2px;
    background: var(--accent-on-inverse);
    transform: scaleY(var(--route-divider, 1));
    transform-origin: top center;
}
@media (prefers-reduced-motion: no-preference) {
    /* entrance: top border draws first (JS drives --route-border), then the divider */
    .js .hero__route { border-top-color: transparent; }
    .js .hero__route::before {
        content: "";
        position: absolute;
        top: -2px; left: 0; right: 0;
        height: 2px;
        background: var(--accent-on-inverse);
        transform: scaleX(var(--route-border, 0));
        transform-origin: left center;
    }
    .js .hero__route + .hero__route::after {
        transform: scaleY(var(--route-divider, 0));
    }
}
.hero__route-title {
    font-size: var(--h4);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.26;
}
.hero__route-desc {
    font-size: var(--body);
    color: var(--ink-on-inverse-muted);
    max-width: 576px;
    transition: color 0.35s var(--ease-house);
}

/* ---------- generic section shell ---------- */
.intro__inner, .consultancy__inner, .talent__inner, .candidates__inner,
.why__inner, .testimonials__inner, .insights__inner, .cta-band__inner,
.site-footer__inner {
    max-width: var(--max-site);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* ---------- intro ---------- */
.intro { padding: 120px 0 0; }
.intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 96px;
}
.intro__left .overline { margin-bottom: 24px; }
.intro__heading {
    font-size: var(--h2);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.045em;
}
.intro__right { display: flex; flex-direction: column; gap: 22px; padding-top: 46px; }
.intro__lede {
    font-size: var(--body-l);
    line-height: 1.6;
    letter-spacing: -0.025em;
    color: var(--ink-secondary);
}
.intro__lede--strong { color: var(--ink-primary); font-weight: 500; }
.intro__stats {
    max-width: var(--max-site);
    margin: 96px auto 0;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.intro__stat {
    position: relative;
    border-top: 1px solid var(--line-subtle);
    padding: 32px 40px 56px 0;
}
.intro__stat + .intro__stat { padding-left: 40px; }
@media (prefers-reduced-motion: no-preference) {
    /* entrance: hairline draws in just ahead of its count-up (JS drives --stat-rule) */
    .js .intro__stat { border-top-color: transparent; }
    .js .intro__stat::before {
        content: "";
        position: absolute;
        top: -1px; left: 0; right: 0;
        height: 1px;
        background: var(--line-subtle);
        transform: scaleX(var(--stat-rule, 0));
        transform-origin: left center;
    }
}
.intro__stat-value {
    display: block;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.intro__stat-label {
    display: block;
    margin-top: 10px;
    font-size: var(--body-s);
    color: var(--ink-secondary);
}

/* ---------- consultancy grid ---------- */
.consultancy { padding: 120px 0; }
.consultancy__head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 96px;
    margin-bottom: 64px;
}
.consultancy__head .overline { margin-bottom: 24px; }
.consultancy__head-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 46px;
}
.consultancy__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Border the container, not just the tiles: a partial last row would
       otherwise leave a stepped, unclosed outline. */
    border: 1px solid var(--line-subtle);
    transition: grid-template-columns 0.6s var(--ease-sf);
}
/* Two tiles should fill the row. Three columns would leave a bordered empty
   cell, which reads as a missing tile rather than as whitespace. Scoped above
   the stacking breakpoint: :has() outranks the single-column mobile rule, so
   an unscoped version would keep two columns at 390 and overflow the page. */
@media (min-width: 901px) {
    .consultancy__grid:has(> .consultancy__tile:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.consultancy__tile-content { display: flex; flex-direction: column; }
/* Collapsed until hover (desktop) or tap (mobile). The 0fr-to-1fr grid row
   animates to the paragraph's real height, so the reveal takes the same time
   whatever the copy length -- a max-height guess overshoots short text and
   clips long text. */
.consultancy__tile-reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 0.6s var(--ease-sf),
        opacity 0.3s var(--ease-sf),
        margin-top 0.6s var(--ease-sf);
}
.consultancy__tile-reveal > p {
    overflow: hidden;
    margin: 0;
    font-size: var(--body-s);
    line-height: 1.6;
    color: var(--ink-secondary);
}
.consultancy__tile {
    position: relative;
    border-right: 1px solid var(--line-subtle);
    border-bottom: 1px solid var(--line-subtle);
    padding: 40px;
    min-height: 208px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    transition: background 0.6s var(--ease-sf), box-shadow 0.6s var(--ease-sf);
}
.consultancy__tile::after {
    /* hover: cyan baseline draw along the tile's bottom edge */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--accent-on-inverse);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s var(--ease-sf);
    z-index: 1;
}
.consultancy__tile-number {
    font-size: var(--caption);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--ink-secondary);
    transition: color 0.4s var(--ease-sf);
}
.consultancy__tile--accent .consultancy__tile-number { color: var(--accent-on-light); }
.consultancy__tile-title {
    font-size: var(--h5);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.34;
}

/* ---------- talent split ---------- */
.talent { padding: 0 0 120px; }
.talent__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 592px);
    gap: 96px;
    align-items: center;
}
.talent__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.talent__media { overflow: hidden; }
.talent__media img { width: 100%; object-fit: cover; aspect-ratio: 1184 / 1120; }

/* ---------- candidates ---------- */
.candidates { background: var(--surface-subtle); padding: 120px 0; }
.candidates__head { max-width: 720px; margin-bottom: 56px; display: flex; flex-direction: column; gap: 22px; }
.candidates__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}
.candidate-card {
    position: relative;
    background: var(--surface-base);
    border: 1px solid var(--line-subtle);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.35s var(--ease-sf), box-shadow 0.35s var(--ease-sf);
}
.candidate-card::before {
    /* hover: cyan top border draw, quoting the hero routes */
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 2px;
    background: var(--accent-on-inverse);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--ease-house);
}
.candidate-card__number {
    font-size: var(--caption);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--ink-secondary);
}
.candidate-card__title { font-size: var(--h5); font-weight: 500; letter-spacing: -0.025em; margin-top: 16px; }
.candidate-card__meta { font-size: var(--caption); color: var(--ink-secondary); }
.candidate-card__blurb { font-size: var(--body-s); line-height: 1.6; color: var(--ink-secondary); }
.candidate-card__link { margin-top: auto; padding-top: 12px; }

/* ---------- why stonefort ---------- */
.why {
    position: relative;
    overflow: hidden;
    background-color: var(--surface-inverse);
    background-size: cover;
    background-position: center;
    color: var(--ink-on-inverse);
}
.js .why { background-image: none !important; }
.why__bg {
    /* parallax layer with vertical overscan; the section bg is the no-JS fallback */
    position: absolute;
    inset: -12% 0;
    will-change: transform;
}
.why__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why__overlay { position: relative; background: rgba(18, 18, 45, 0.88); padding: 120px 0; }
.why__head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 96px;
    margin-bottom: 72px;
}
.why__head .overline { margin-bottom: 24px; }
.why__lede {
    font-size: var(--body-l);
    line-height: 1.6;
    color: var(--ink-on-inverse-muted);
    padding-top: 46px;
}
.why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
}
.why__item {
    border-top: 1px solid var(--line-on-inverse);
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.why__item-number {
    font-size: var(--caption);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent-on-inverse);
}
.why__item-title { font-size: var(--h5); font-weight: 500; letter-spacing: -0.025em; margin-top: 10px; }
.why__item-body { font-size: var(--body-s); line-height: 1.6; color: var(--ink-on-inverse-muted); }

/* ---------- testimonials ---------- */
.testimonials { padding: 120px 0; }
.testimonials__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin-bottom: 48px;
}
/* Two quotes per view, native scroll-snap so it works before JS runs. The
   negative margin lets the leftmost quote sit on the gutter while the track
   still has room to scroll cleanly. */
.testimonials__track {
    --carousel-gap: 96px;
    display: flex;
    gap: var(--carousel-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonials__track:focus-visible { outline: 2px solid var(--accent-on-light); outline-offset: 12px; }
.testimonial {
    flex: 0 0 calc((100% - var(--carousel-gap)) / 2);
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
}
.carousel__nav { display: flex; gap: 10px; }
.carousel__nav[hidden] { display: none; }
.carousel__button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-subtle);
    border-radius: 50%;
    background: none;
    color: var(--ink-primary);
    cursor: pointer;
    transition: border-color var(--micro, 0.35s) var(--ease-house), color var(--micro, 0.35s) var(--ease-house), opacity var(--micro, 0.35s) var(--ease-house);
}
.carousel__button--prev .carousel__icon { transform: rotate(90deg); }
.carousel__button--next .carousel__icon { transform: rotate(-90deg); }
.carousel__button:disabled { opacity: 0.3; cursor: default; }
.carousel__button:not(:disabled):hover { border-color: var(--ink-primary); }
.testimonial__quote {
    font-size: var(--h5);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
}
.testimonial__attribution { display: flex; flex-direction: column; gap: 2px; }
.testimonial__name { font-size: var(--body); font-weight: 500; }
.testimonial__org { font-size: var(--body-s); color: var(--ink-secondary); }

/* ---------- insights ---------- */
.insights { padding: 0 0 120px; }
.insights__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
    margin-bottom: 56px;
}
.insights__head .overline { margin-bottom: 24px; }
.insights__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.insight-card { display: flex; }
/* Cards stretch so the read link sits on a common baseline across a row. */
.insight-card__link { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.insight-card__link .text-link { margin-top: auto; padding-top: 8px; }
.insight-card__media { overflow: hidden; }
.insight-card__media img {
    width: 100%;
    aspect-ratio: 405 / 240;
    object-fit: cover;
    transition: transform 0.8s var(--ease-sf);
}
.insight-card__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}
.insight-card__meta .overline--accent { color: var(--accent-on-light); }
.insight-card__date { font-size: var(--caption); color: var(--ink-secondary); }
.insight-card__title {
    font-size: var(--h5);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.34;
}

/* ---------- cta band ---------- */
.cta-band { background: var(--surface-inverse); color: var(--ink-on-inverse); padding: 120px 0; }
.cta-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 96px;
    align-items: start;
}
.cta-band__copy { display: flex; flex-direction: column; gap: 24px; }
.cta-band__lede { font-size: var(--body-l); line-height: 1.6; color: var(--ink-on-inverse-muted); }
.cta-band__routes { display: flex; flex-direction: column; position: relative; }
.cta-route {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    border-top: 1px solid var(--line-on-inverse);
    padding: 32px 0;
    position: relative;
}
.cta-route:last-child { border-bottom: 1px solid var(--line-on-inverse); }
.cta-route__body { transition: transform 0.35s var(--ease-sf); }

/* Entrance: each rule draws left to right in turn, closing with the bottom
   line under the last route (JS drives --cta-rule). Same mechanism as the
   stat row. Without JS or under reduced motion the plain borders above
   stand as they are. */
@media (prefers-reduced-motion: no-preference) {
    .js .cta-route { border-top-color: transparent; }
    .js .cta-route:last-child { border-bottom-color: transparent; }
    .js .cta-route::before,
    .js .cta-band__routes::after {
        content: "";
        position: absolute;
        left: 0; right: 0;
        height: 1px;
        background: var(--line-on-inverse);
        transform: scaleX(var(--cta-rule, 0));
        transform-origin: left center;
    }
    .js .cta-route::before { top: -1px; }
    .js .cta-band__routes::after { bottom: 0; }
}

/* Hover: cyan redraws over the route's own top rule. Outside the JS gate
   because it needs neither. */
.cta-route::after {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: var(--accent-on-inverse);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s var(--ease-sf);
}
.cta-route .overline { margin-bottom: 10px; }
.cta-route__title { font-size: var(--h5); font-weight: 500; letter-spacing: -0.025em; }
.cta-route__note { font-size: var(--body-s); color: var(--ink-on-inverse-muted); margin-top: 6px; }
.cta-route__arrow { font-size: var(--h4); color: var(--accent-on-inverse); }

/* ---------- footer ---------- */
.site-footer { background: var(--surface-inverse); color: var(--ink-on-inverse); padding: 96px 0 32px; }
.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 96px;
    padding-bottom: 72px;
}
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.site-footer__brand img { width: 191px; }
.site-footer__socials { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer__logo { display: inline-flex; }
.site-footer__tagline { font-size: var(--body-s); line-height: 1.6; color: var(--ink-on-inverse-muted); max-width: 248px; }
.site-footer__col .overline { margin-bottom: 22px; }
.site-footer__menu a {
    display: block;
    width: fit-content;
    padding: 8px 0;
    font-size: var(--body);
    color: var(--ink-on-inverse);
    background: linear-gradient(var(--accent-on-inverse), var(--accent-on-inverse)) no-repeat left calc(100% - 6px) / 0% 1px;
    transition: color 0.25s var(--ease-house), background-size 0.3s var(--ease-house);
}
.site-footer__partners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line-on-inverse);
    padding: 48px 0;
}
.site-footer__partner { display: flex; flex-direction: column; gap: 6px; }
.site-footer__partner + .site-footer__partner {
    border-left: 1px solid var(--line-on-inverse);
    padding-left: 64px;
}
.site-footer__partner .overline { margin-bottom: 8px; }
.site-footer__partner-name { font-size: var(--h5); font-weight: 500; }
.site-footer__partner-line {
    width: fit-content;
    font-size: var(--body-s);
    color: var(--ink-on-inverse-muted);
    background: linear-gradient(var(--accent-on-inverse), var(--accent-on-inverse)) no-repeat left calc(100% - 1px) / 0% 1px;
    transition: color 0.25s var(--ease-house), background-size 0.3s var(--ease-house);
}
.site-footer__legal {
    border-top: 1px solid var(--line-on-inverse);
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    gap: 32px;
    font-size: var(--caption);
    color: var(--ink-on-inverse-muted);
}
.site-footer__legal-links { display: flex; gap: 28px; }
.site-footer__legal-links a {
    background: linear-gradient(var(--accent-on-inverse), var(--accent-on-inverse)) no-repeat left calc(100% - 1px) / 0% 1px;
    transition: color 0.25s var(--ease-house), background-size 0.3s var(--ease-house);
}

/* ---------- reveal pre-states (JS removes) ----------
   Gated on no-preference so reduced-motion users can never be caught by
   hidden content, even if JS dies mid-parse. */
@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal],
    .js [data-hero-reveal],
    .js [data-hero-route],
    .js [data-hero-badge],
    .js [data-media-reveal],
    .js .chip {
        opacity: 0;
        will-change: transform, opacity;
    }
}

/* ---------- hover grammar (fine pointers only; touch goes straight to :active) ---------- */
@media (hover: hover) and (pointer: fine) {
    .site-header__brand:hover,
    .site-footer__logo:hover,
    .mobile-menu__brand:hover { opacity: 0.7; }

    /* Back link: arrow pulls left, label underlines — the text-link language
       in reverse, since this one travels backwards. */
    .page-hero__breadcrumb:hover { color: var(--ink-on-inverse); }
    .page-hero__breadcrumb:hover .page-hero__breadcrumb-arrow { transform: translateX(-6px); }
    .page-hero__breadcrumb:hover .page-hero__breadcrumb-label { background-size: 100% 1px; }

    .text-link:hover .text-link__label,
    .hero__route:hover .text-link__label,
    .insight-card__link:hover .text-link__label { background-size: 100% 1px; }
    .text-link:hover .text-link__arrow,
    .hero__route:hover .text-link__arrow,
    .insight-card__link:hover .text-link__arrow { transform: translateX(6px); }

    .button:hover::before { transform: translateY(0); }
    .button:hover .button__label { color: var(--accent-on-inverse); }

    .chip:hover {
        transform: translateY(-2px);
        border-color: var(--surface-inverse);
        color: var(--ink-on-inverse);
    }
    .chip:hover::before { transform: translateY(0); }
    .chip:hover::after {
        opacity: 1;
        transform: skewX(-18deg) translateX(360%);
        transition: transform 0.65s var(--ease-house) 0.12s, opacity 0.1s linear 0.12s;
    }

    .site-nav > li > a:hover { color: var(--accent-on-inverse); }
    .site-nav > li > a:hover::after { transform: scaleX(1); }

    /* routes expand into each other; the divider rides the flex boundary */
    .hero__route:hover { flex-grow: 1.16; }
    .hero__route:hover .hero__route-desc { color: var(--ink-on-inverse); }

    /* The hovered column widens and the others give way, matching the hero
       route panels. grid-template-columns animates in current browsers. */
    .consultancy__grid:has(.consultancy__tile:nth-child(3n + 1):hover) { grid-template-columns: 1.3fr 1fr 1fr; }
    .consultancy__grid:has(.consultancy__tile:nth-child(3n + 2):hover) { grid-template-columns: 1fr 1.3fr 1fr; }
    .consultancy__grid:has(.consultancy__tile:nth-child(3n + 3):hover) { grid-template-columns: 1fr 1fr 1.3fr; }

    /* The expand-on-hover tracks above assume three columns, so a two-tile
       grid needs its own pair. */
    .consultancy__grid:has(> .consultancy__tile:nth-child(2):last-child):has(.consultancy__tile:nth-child(1):hover) { grid-template-columns: 1.3fr 1fr; }
    .consultancy__grid:has(> .consultancy__tile:nth-child(2):last-child):has(.consultancy__tile:nth-child(2):hover) { grid-template-columns: 1fr 1.3fr; }

    .consultancy__tile:hover {
        background: var(--surface-subtle);
        box-shadow: inset 0 0 0 1px var(--accent-on-inverse);
    }
    .consultancy__tile:hover::after { transform: scaleX(1); }
    .consultancy__tile:hover .consultancy__tile-number { color: var(--accent-on-light); }
    .consultancy__tile:hover .consultancy__tile-reveal {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 14px;
    }

    .candidate-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(18, 18, 45, 0.07);
    }
    .candidate-card:hover::before { transform: scaleX(1); }

    .insight-card__link:hover .insight-card__media img { transform: scale(1.05); }

    .cta-route:hover .cta-route__body { transform: translateX(12px); }
    .cta-route:hover::after { transform: scaleX(1); }

    .site-footer__menu a:hover,
    .site-footer__partner-line:hover,
    .site-footer__legal-links a:hover {
        color: var(--accent-on-inverse);
        background-size: 100% 1px;
    }
}

/* touch acknowledgement on the big panel links */
.hero__route:active,
.cta-route:active,
.insight-card__link:active { opacity: 0.85; }

/* ---------- reduced motion: instant state changes everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    html { scroll-behavior: auto !important; }
}

/* ---------- page transition ---------- */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--surface-inverse);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.js .page-transition {
    opacity: 1;
    visibility: visible;
    animation: sf-curtain-out 0.5s var(--ease-house) forwards;
}
.js .page-transition--managed { animation: none; }
@keyframes sf-curtain-out {
    to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .page-transition { display: none; }
}

/* ---------- inner-page shell ---------- */
.skip-link {
    position: absolute;
    top: 0; left: 0;
    z-index: 200;
}
.skip-link:focus {
    width: auto; height: auto;
    clip-path: none;
    padding: 14px 22px;
    background: var(--surface-inverse);
    color: var(--ink-on-inverse);
}
.site-header__wordmark { color: var(--ink-on-inverse); font-weight: 600; letter-spacing: -0.02em; }
.overline--accent-solid { color: var(--accent-on-light); }
/* Two navy bands in a row need a hairline, or they read as one block. */
.page-hero + .cta-band,
.section--inverse + .cta-band { border-top: 1px solid var(--line-on-inverse); }
.section-lede--inverse { color: var(--ink-on-inverse-muted); }

.section { padding: 120px 0; }
.section__inner {
    max-width: var(--max-site);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.section + .section { padding-top: 0; }
.section--inverse {
    background: var(--surface-inverse);
    color: var(--ink-on-inverse);
    padding: 120px 0;
}
.section--inverse + .section { padding-top: 120px; }
/* Must beat `.section + .section`, or a dark band loses its top padding and
   the overline sits flush against the edge. */
.section + .section--inverse { padding-top: 120px; }
.section__head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 96px;
    align-items: end;
    margin-bottom: 64px;
}
.section__head .overline { margin-bottom: 24px; }
.section__head > .text-link { justify-self: end; }
/* Lede and link share the right-hand cell, so the link can't be a direct grid
   child using justify-self above. */
.section__head-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }

/* ---------- strapline ----------
   The client's three-part sign-off line ("Independent. Experienced.
   Defensible.") that closes a service or an arm intro. */
.strapline {
    font-size: var(--body);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.5;
    color: var(--accent-on-light);
    margin: 32px 0 0;
}
.rich-text + .strapline { margin-top: 28px; }
.detail__points + .strapline { margin-top: 28px; }
.section--inverse .strapline { color: var(--accent-on-inverse); }
.section__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 96px;
}
.section__split .overline { margin-bottom: 24px; }
.section__split-body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 8px; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Sticky first columns on desktop only: below this the layouts are stacked,
   where sticky would pin content over the copy that follows it. */
@media (min-width: 1025px) {
    .section__split > *:first-child,
    .questions__head,
    .faq__head,
    .detail__aside,
    .contact__aside,
    .job-single__aside,
    .job-apply__intro,
    .toc {
        position: sticky;
        top: calc(var(--header-h) + 48px);
        align-self: start;
    }
}

@media (hover: hover) and (pointer: fine) {
    .toc__link:hover { color: var(--ink-primary); border-left-color: var(--ink-secondary); }
}

/* rich text */
.rich-text { font-size: var(--body-l); line-height: 1.6; letter-spacing: -0.02em; color: var(--ink-secondary); }
.rich-text > * + * { margin-top: 1em; }
.rich-text strong { color: var(--ink-primary); font-weight: 500; }
.rich-text a { color: var(--accent-on-surface); text-decoration: underline; text-underline-offset: 3px; }
.rich-text h2 { font-size: var(--h3); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink-primary); margin-top: 1.6em; }
.rich-text h3 { font-size: var(--h5); font-weight: 500; letter-spacing: -0.025em; color: var(--ink-primary); margin-top: 1.6em; }
.rich-text ul { display: flex; flex-direction: column; gap: 10px; }
.rich-text li { position: relative; padding-left: 26px; }
.rich-text li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.65em;
    width: 12px; height: 1px;
    background: var(--accent-on-inverse);
}
.rich-text blockquote {
    border-left: 2px solid var(--accent-on-inverse);
    padding-left: 28px;
    font-size: var(--h5);
    line-height: 1.5;
    color: var(--ink-primary);
}
.rich-text img { margin: 1.6em 0; }
/* Copy fills its container; paragraph width is never capped. */
.section--inverse .rich-text { color: var(--ink-on-inverse-muted); }
.section--inverse .rich-text strong { color: var(--ink-on-inverse); }

/* ---------- page hero ---------- */
.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--surface-inverse);
    color: var(--ink-on-inverse);
    padding: calc(var(--header-h) + 96px) 0 96px;
}
.page-hero--image {
    padding-bottom: 120px;
    min-height: min(62svh, 620px);
    display: flex;
    align-items: flex-end;
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(18, 18, 45, 0.72) 0%, rgba(18, 18, 45, 0.5) 45%, rgba(18, 18, 45, 0.86) 100%),
        rgba(18, 18, 45, 0.32);
}
.page-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-site);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.page-hero__breadcrumb {
    font-size: var(--body-s);
    color: var(--accent-on-inverse);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    transition: color 0.3s var(--ease-house);
}
.page-hero__breadcrumb-arrow {
    display: inline-block;
    transition: transform 0.35s var(--ease-nudge);
}
.page-hero__breadcrumb-label {
    padding-bottom: 2px;
    background: linear-gradient(currentColor, currentColor) no-repeat left calc(100% - 1px) / 0% 1px;
    transition: background-size 0.35s var(--ease-house);
}
.page-hero__heading {
    font-size: var(--display-l);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.04em;
    max-width: 20ch;
}
.page-hero__standfirst {
    font-size: var(--body-l);
    line-height: 1.6;
    letter-spacing: -0.025em;
    color: var(--ink-on-inverse);
    max-width: 62ch;
}
/* The default overline ink is dark, which is unreadable over hero imagery. */
.page-hero .overline { color: var(--ink-on-inverse); }

/* ---------- mega menu ---------- */
.site-nav__item--mega { position: static; }
.mega {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    /* Fully opaque: a translucent panel picks up the header's backdrop filter
       and flashes light over pale sections. */
    background: var(--surface-inverse);
    border-top: 1px solid var(--line-on-inverse);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.mega__inner {
    max-width: var(--max-site);
    margin: 0 auto;
    padding: 56px var(--gutter) 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 96px;
}
.mega__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.mega__lede { font-size: var(--body); line-height: 1.6; color: var(--ink-on-inverse-muted); max-width: 40ch; }
.mega__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
    align-content: start;
}
.mega__list li { border-bottom: 1px solid var(--line-on-inverse); }
.mega__list a {
    display: block;
    padding: 18px 0;
    font-size: var(--h5);
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--ink-on-inverse);
    transition: color 0.25s var(--ease-house), padding-left 0.35s var(--ease-sf);
}

/* ---------- feature split ---------- */
.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 592px);
    gap: 96px;
    align-items: center;
}
.section--feature-flipped .feature { grid-template-columns: minmax(0, 592px) minmax(0, 1fr); }
.section--feature-flipped .feature__copy { order: 2; }
.section--feature-flipped .feature__media { order: 1; }
.feature__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.feature__copy .overline { margin-bottom: 0; }
.feature__media { overflow: hidden; }
.feature__media img { width: 100%; object-fit: cover; }
.feature__points { display: flex; flex-direction: column; gap: 12px; }
.feature__points li {
    position: relative;
    padding-left: 30px;
    font-size: var(--body);
    color: var(--ink-secondary);
}
.feature__points li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.7em;
    width: 16px; height: 1px;
    background: var(--accent-on-inverse);
}

/* ---------- detail list ---------- */
.detail-list { border-top: 1px solid var(--line-subtle); }
.detail {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 96px;
    padding: 64px 0;
    border-bottom: 1px solid var(--line-subtle);
    scroll-margin-top: calc(var(--header-h) + 24px);
}
.detail__aside { display: flex; flex-direction: column; gap: 28px; }
.detail__number { font-size: var(--caption); font-weight: 600; letter-spacing: 0.1em; color: var(--accent-on-surface); }
.detail__media { overflow: hidden; }
.detail__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.detail__body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.detail__title { font-size: var(--h3); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.detail__points { display: flex; flex-direction: column; gap: 12px; }
.detail__points li {
    position: relative;
    padding-left: 30px;
    font-size: var(--body);
    color: var(--ink-secondary);
}
.detail__points li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.7em;
    width: 16px; height: 1px;
    background: var(--accent-on-inverse);
}

/* ---------- steps ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    /* Outline on the container, dividers between steps. Per-step bottom and
       right borders left the first step's corner open while it was still
       translated by its reveal tween. */
    border: 1px solid var(--line-subtle);
}
.step + .step { border-left: 1px solid var(--line-subtle); }
.step {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.step__number { font-size: var(--caption); font-weight: 600; letter-spacing: 0.1em; color: var(--accent-on-light); }
.step__title { font-size: var(--h5); font-weight: 500; letter-spacing: -0.025em; }
.step__body { font-size: var(--body-s); line-height: 1.6; color: var(--ink-secondary); }
.step__result { font-size: var(--body-s); line-height: 1.6; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-subtle); }
.step__result-label { font-weight: 600; color: var(--accent-on-light); }

/* ---------- question list ---------- */
.questions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 96px;
}
.questions__head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.questions__list { display: flex; flex-direction: column; }
.question {
    display: flex;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid var(--line-subtle);
    font-size: var(--body-l);
    line-height: 1.5;
    letter-spacing: -0.025em;
}
.question:last-child { border-bottom: 1px solid var(--line-subtle); }
.question__mark { color: var(--accent-on-inverse); flex: none; }

/* ---------- people ---------- */
.people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 64px;
}
.person { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.person__media { width: 100%; overflow: hidden; margin-bottom: 10px; }
.person__media img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.person__name { font-size: var(--h3); font-weight: 500; letter-spacing: -0.03em; }
.person__bio { font-size: var(--body); }
.person__contact { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.person__line { font-size: var(--body-s); color: var(--ink-secondary); width: fit-content; }

/* ---------- values ---------- */
.values { display: flex; flex-direction: column; gap: 48px; }
.values__heading { font-size: var(--h2); font-weight: 500; letter-spacing: -0.045em; line-height: 1.1; max-width: 24ch; }
.values__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 48px;
}
.value { display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--accent-on-inverse); padding-top: 24px; }
.value__word { font-size: var(--h3); font-weight: 500; letter-spacing: -0.03em; }
.value__body { font-size: var(--body-s); line-height: 1.6; color: var(--ink-secondary); }

/* ---------- logo row ---------- */
.logo-row__label { margin-bottom: 32px; }
.logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 56px;
}
.logo-row__item img { max-height: 44px; width: auto; opacity: 0.75; }

/* ---------- filters ---------- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
}
.filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--body-s);
    font-weight: 500;
    padding: 10px 20px;
    border: 1px solid var(--line-subtle);
    border-radius: 999px;
    color: var(--ink-secondary);
    transition: color 0.25s var(--ease-house), border-color 0.25s var(--ease-house), background 0.25s var(--ease-house);
}
.filter--active {
    background: var(--surface-inverse);
    border-color: var(--surface-inverse);
    color: var(--ink-on-inverse);
}
.filter__count { font-size: var(--caption); opacity: 0.6; }

/* ---------- jobs ---------- */
.job-list { border-top: 1px solid var(--line-subtle); }
.job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 36px 0;
    border-bottom: 1px solid var(--line-subtle);
    transition: padding 0.35s var(--ease-sf);
}
.job__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.job__title { font-size: var(--h4); font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; }
.job__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.job__meta-item { position: relative; font-size: var(--body-s); color: var(--ink-secondary); }
.job__meta-item + .job__meta-item::before {
    content: "";
    position: absolute;
    left: -13px; top: 50%;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--line-subtle);
}
.job__summary { font-size: var(--body-s); line-height: 1.6; color: var(--ink-secondary); max-width: 72ch; }
.job__arrow { font-size: var(--h4); color: var(--accent-on-inverse); flex: none; }

.job-single { padding: 96px 0 120px; }
.job-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 96px;
    align-items: start;
}
.job-single__aside {
    border: 1px solid var(--line-subtle);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.job-facts { display: flex; flex-direction: column; gap: 16px; }
.job-facts__row { display: flex; flex-direction: column; gap: 2px; }
.job-facts dt { font-size: var(--caption); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-secondary); }
.job-facts dd { margin: 0; font-size: var(--body); font-weight: 500; }
.job-single__note { font-size: var(--body-s); line-height: 1.6; color: var(--ink-secondary); }

/* ---------- article ---------- */
.article { padding: 96px 0 120px; }
.article__layout {
    display: grid;
    grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
    /* Centred and capped: the reading column has its own comfortable measure,
       so stretching the grid across the full container leaves dead space. */
    max-width: 1080px;
    margin-inline: auto;
}
.article__body { font-size: var(--body-l); }
.article__body h2 { scroll-margin-top: calc(var(--header-h) + 40px); }

.toc { display: flex; flex-direction: column; gap: 20px; }
/* An author display rule beats the UA [hidden] rule, so restate it. */
.toc[hidden] { display: none; }
.toc__list { display: flex; flex-direction: column; }
.toc__link {
    padding: 10px 0 10px 18px;
    border-left: 1px solid var(--line-subtle);
    font-size: var(--body-s);
    line-height: 1.4;
    color: var(--ink-secondary);
    transition: color 0.3s var(--ease-house), border-color 0.3s var(--ease-house);
}
.toc__link[data-toc-status="active"] {
    color: var(--ink-primary);
    border-left-color: var(--accent-on-inverse);
}
.article__related { margin-top: 96px; padding-top: 64px; border-top: 1px solid var(--line-subtle); }

/* ---------- role application ---------- */
.job-apply {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 80px;
    margin-top: 96px;
    padding-top: 64px;
    border-top: 1px solid var(--line-subtle);
    scroll-margin-top: calc(var(--header-h) + 32px);
}
.job-apply__intro { display: flex; flex-direction: column; gap: 20px; }
.article__related .overline { margin-bottom: 40px; }

/* ---------- faq ---------- */
.faq {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 96px;
}
.faq__head { display: flex; flex-direction: column; gap: 22px; }
.faq__list { border-top: 1px solid var(--line-subtle); }
.faq__item { border-bottom: 1px solid var(--line-subtle); }
.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    font-size: var(--h5);
    font-weight: 500;
    letter-spacing: -0.025em;
    cursor: pointer;
    list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__icon {
    position: relative;
    flex: none;
    width: 14px; height: 14px;
}
.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 14px; height: 1px;
    background: var(--ink-primary);
    transition: transform 0.55s var(--ease-sf);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__answer { overflow: hidden; padding-bottom: 28px; font-size: var(--body); }

/* ---------- contact ---------- */
.contact {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 96px;
    align-items: start;
}
.contact__form { display: flex; flex-direction: column; gap: 24px; }
.gform_wrapper { margin-top: 12px; }
.contact__aside {
    border-top: 2px solid var(--accent-on-inverse);
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.contact__person { display: flex; flex-direction: column; gap: 4px; }
.contact__person-name { font-size: var(--h5); font-weight: 500; letter-spacing: -0.025em; margin-bottom: 4px; }
.contact__line { font-size: var(--body-s); color: var(--ink-secondary); width: fit-content; }
.contact__note { font-size: var(--body-s); line-height: 1.6; color: var(--ink-secondary); }

/* ---------- forms (Gravity Forms, kept on-brand) ----------
   The plugin's stylesheets are switched off in inc/forms.php, so anything
   structural it relied on has to be restated here. */

/* CRITICAL: the anti-spam honeypot must never be visible. If it shows,
   visitors fill it in and their enquiry is silently filed as spam. */
.gform_validation_container,
.gfield--type-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* GF's own column widths, which lived in its framework stylesheet. */
.gform_fields .gfield--width-half { grid-column: span 6; }
.gform_fields .gfield--width-third { grid-column: span 4; }
.gform_fields .gfield--width-two-thirds { grid-column: span 8; }
.gform_fields .gfield--width-quarter { grid-column: span 3; }
.gform_fields .gfield--width-full { grid-column: span 12; }
.gform-icon { display: none; }

.gform_wrapper { margin: 0; }
.gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px;
}
.gform_wrapper .gform_fields > .gfield { grid-column: span 12; }
.gform_wrapper .gfield_label {
    display: block;
    margin-bottom: 10px;
    font-size: var(--caption);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-secondary);
}
.gform_wrapper .gfield_required {
    margin-left: 6px;
    font-weight: 500;
    color: var(--ink-secondary);
    text-transform: none;
    letter-spacing: 0;
}
/* GF wraps choice fields in a fieldset, which the browser draws a box around. */
.gform_wrapper fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gform_wrapper legend {
    display: block;
    padding: 0;
    margin-bottom: 10px;
    font-size: var(--caption);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-secondary);
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
    width: 100%;
    font-family: var(--font);
    font-size: var(--body);
    color: var(--ink-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-subtle);
    border-radius: 0;
    padding: 12px 0;
    transition: border-color 0.3s var(--ease-house), background 0.3s var(--ease-house);
}
.gform_wrapper textarea { min-height: 140px; resize: vertical; }
.gform_wrapper ::placeholder { color: var(--ink-secondary); opacity: 0.6; }

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    outline: none;
    border-bottom-color: var(--accent-on-inverse);
    border-bottom-width: 2px;
    padding-bottom: 11px;
}

/* Completed: a field the visitor has filled in and left valid. */
.gform_wrapper input:user-valid,
.gform_wrapper textarea:user-valid { border-bottom-color: var(--accent-on-light); }
.gform_wrapper input:user-invalid,
.gform_wrapper textarea:user-invalid { border-bottom-color: #b3261e; }
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.gform_wrapper .gchoice { display: flex; align-items: center; gap: 10px; }
.gform_wrapper .gchoice label { font-size: var(--body-s); color: var(--ink-secondary); }
.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"] { accent-color: var(--accent-on-inverse); width: 18px; height: 18px; }
.gform_wrapper .gform_fileupload_rules,
.gform_wrapper .gfield_description { font-size: var(--caption); color: var(--ink-secondary); margin-top: 8px; }
.gform_wrapper input[type="file"] { font-size: var(--body-s); color: var(--ink-secondary); }
.gform_wrapper input[type="file"]::file-selector-button {
    font-family: var(--font);
    font-size: var(--body-s);
    font-weight: 500;
    padding: 10px 18px;
    margin-right: 14px;
    border: 1px solid var(--line-subtle);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-primary);
    cursor: pointer;
    transition: border-color 0.25s var(--ease-house), color 0.25s var(--ease-house);
}
.gform_wrapper input[type="file"]::file-selector-button:hover {
    border-color: var(--surface-inverse);
    color: var(--accent-on-surface);
}
.gform_wrapper .gform_footer { margin-top: 36px; padding: 0; }
.gform_wrapper .gform_button {
    font-family: var(--font);
    font-size: var(--body-s);
    font-weight: 500;
    line-height: 1;
    padding: 16px 32px;
    border: 0;
    border-radius: 999px;
    background: var(--surface-inverse);
    color: var(--ink-on-inverse);
    cursor: pointer;
    transition: background 0.3s var(--ease-house), transform 0.15s var(--ease-house);
}
.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors { font-size: var(--body-s); color: #b3261e; }
.gform_wrapper .gform_confirmation_message { font-size: var(--body-l); color: var(--ink-primary); }

.gform_wrapper .gform_button:active { transform: scale(0.98); }
.gform_wrapper .gform_button:disabled { opacity: 0.5; cursor: progress; }
.gform_wrapper .gform_confirmation_wrapper {
    border-top: 2px solid var(--accent-on-inverse);
    padding-top: 32px;
}
.gform_wrapper .gform_confirmation_message {
    font-size: var(--body-l);
    line-height: 1.6;
    color: var(--ink-primary);
}
.gform_wrapper .gfield_error .gfield_label { color: #b3261e; }
.gform_wrapper .gform_fileupload_rules { display: block; }
.gform_wrapper .gform_drop_area {
    border: 1px dashed var(--line-subtle);
    background: transparent;
    padding: 24px;
    transition: border-color 0.3s var(--ease-house);
}

@media (hover: hover) and (pointer: fine) {
    .gform_wrapper input[type="text"]:hover,
    .gform_wrapper input[type="email"]:hover,
    .gform_wrapper input[type="tel"]:hover,
    .gform_wrapper textarea:hover,
    .gform_wrapper select:hover { border-bottom-color: var(--ink-secondary); }
    .gform_wrapper .gchoice:hover label { color: var(--ink-primary); }
    .gform_wrapper .gform_drop_area:hover { border-color: var(--accent-on-inverse); }
    .gform_wrapper .gform_button:hover { background: var(--accent-on-inverse); color: var(--accent-on-surface); }
}

/* ---------- cookie banner ---------- */
.button--ghost {
    background: transparent;
    color: var(--ink-on-inverse);
    box-shadow: inset 0 0 0 1px var(--line-on-inverse);
}
.button--ghost::before { background: var(--ink-on-inverse); }
.cookie {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 400;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s var(--ease-house), transform 0.4s var(--ease-sf);
}
.cookie.is-open { opacity: 1; transform: none; }
.cookie__inner {
    max-width: 640px;
    margin-left: auto;
    background: var(--surface-inverse);
    color: var(--ink-on-inverse);
    border: 1px solid var(--line-on-inverse);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.cookie__heading { font-size: var(--h5); font-weight: 500; letter-spacing: -0.025em; margin-bottom: 8px; }
.cookie__body { font-size: var(--body-s); line-height: 1.6; color: var(--ink-on-inverse-muted); }
.cookie__policy { color: var(--accent-on-inverse); text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie__panel { border-top: 1px solid var(--line-on-inverse); padding-top: 20px; }
.cookie__groups { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.cookie__group-head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.cookie__group-head input { accent-color: var(--accent-on-inverse); width: 18px; height: 18px; }
.cookie__group-head input:disabled { opacity: 0.5; cursor: not-allowed; }
.cookie__group-label { font-size: var(--body); font-weight: 500; }
.cookie__group-body { font-size: var(--body-s); line-height: 1.6; color: var(--ink-on-inverse-muted); margin-top: 6px; padding-left: 30px; }
.site-footer__consent {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {
    .cookie { left: 16px; right: 16px; bottom: 16px; }
    .cookie__inner { padding: 22px; }
    .cookie__actions .button { flex: 1 1 auto; text-align: center; }
}

/* ---------- pagination ---------- */
.pagination { margin-top: 64px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line-subtle);
    font-size: var(--body-s);
    color: var(--ink-secondary);
}
.pagination .page-numbers.current { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--ink-on-inverse); }
.screen-reader-text.pagination__label { display: none; }

.consultancy__tile-body { font-size: var(--body-s); line-height: 1.6; color: var(--ink-secondary); margin-top: 10px; }
/* Tiles carrying body copy align their headings to a common top edge; the
   homepage tiles (number top, title bottom) keep space-between. */
.consultancy__tile:has(.consultancy__tile-body) { justify-content: flex-start; gap: 28px; }

/* extra hover states for the new blocks */
@media (hover: hover) and (pointer: fine) {
    .mega__list a:hover { color: var(--accent-on-inverse); padding-left: 8px; }
    .filter:hover { border-color: var(--surface-inverse); color: var(--ink-primary); }
    .filter--active:hover { color: var(--ink-on-inverse); }
    .job:hover { padding-left: 16px; padding-right: 16px; }
    .job:hover .job__title { color: var(--accent-on-light); }
    .person__line:hover,
    .contact__line:hover { color: var(--accent-on-surface); }
    .logo-row__item img { transition: opacity 0.3s var(--ease-house); }
    .logo-row__item:hover img { opacity: 1; }
    .faq__question:hover { color: var(--accent-on-light); }
}

/* =========================================================================
   Mobile — 390 design, breakpoint at 900
   ========================================================================= */
@media (max-width: 900px) {
    :root { --gutter: 24px; }

    /* header — the nav is hidden here, so the grid would centre the burger */
    .site-header__inner {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 24px;
    }
    .site-header__brand img { width: 130px; }
    .site-header__nav, .site-header__cta { display: none; }
    .site-header__burger {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: flex-end;
        background: none;
        border: 0;
        padding: 8px 0;
        cursor: pointer;
    }
    .site-header__burger-line { width: 26px; height: 2px; background: var(--ink-on-inverse); }
    .site-header__burger-line--short { width: 18px; }

    /* hero: a fixed 100svh with overflow hidden and justify-content:flex-end
       pushed the heading up under the header on phones once the copy plus
       both routes outgrew the viewport. Let it grow past one screen. */
    .hero {
        height: auto;
        min-height: 100svh;
        max-height: none;
        padding-bottom: 8px;
    }
    .hero__type {
        flex: 1 0 auto;
        justify-content: flex-start;
        gap: 20px;
        padding-top: 120px;
    }
    .hero__heading { font-size: 2.5rem; }
    .hero__sub { font-size: 1rem; }
    .hero__badge {
        position: static;
        order: 2;
        align-self: flex-start;
        margin: 28px var(--gutter) 0;
        padding: 10px 18px 10px 16px;
    }
    .hero__badge-number { font-size: 1.25rem; }
    .hero__badge-label { font-size: 0.625rem; }
    .hero__routes { order: 3; flex-direction: column; margin-top: 32px; }
    .hero__route,
    .hero__route + .hero__route { flex: 0 0 auto; padding: 24px; }
    .hero__route + .hero__route::after { display: none; }
    .hero__route-desc { display: none; }

    /* intro */
    .intro { padding-top: 72px; }
    .intro__grid { grid-template-columns: 1fr; gap: 28px; }
    .intro__right { padding-top: 0; }
    .intro__stats { margin-top: 56px; grid-template-columns: 1fr 1fr; }
    .intro__stat, .intro__stat + .intro__stat { padding: 24px 12px 32px 0; }
    .intro__stat-value { font-size: 3rem; }

    /* consultancy */
    .consultancy { padding: 72px 0; }
    .consultancy__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
    .consultancy__head-right { padding-top: 0; }
    .consultancy__grid { grid-template-columns: 1fr; }
    .consultancy__tile {
        padding: 24px;
        min-height: 0;
        gap: 20px;
        /* Stacked full-width, the number and title read as one unit rather
           than being pushed to opposite ends of a tall box. */
        justify-content: flex-start;
        /* In one column the tile's own right edge sits on the container
           border, and the last tile's bottom edge on the container's. */
        border-right: 0;
    }
    .consultancy__tile:last-child { border-bottom: 0; }

    /* Tap to expand, since there is no hover here. */
    .consultancy__tile[role="button"] { cursor: pointer; }
    .consultancy__tile.is-open {
        background: var(--surface-subtle);
        box-shadow: inset 0 0 0 1px var(--accent-on-inverse);
    }
    .consultancy__tile.is-open::after { transform: scaleX(1); }
    .consultancy__tile.is-open .consultancy__tile-number { color: var(--accent-on-light); }
    .consultancy__tile.is-open .consultancy__tile-reveal {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 12px;
    }

    /* talent */
    .talent { padding-bottom: 72px; }
    .talent__inner { grid-template-columns: 1fr; gap: 40px; }

    /* candidates */
    .candidates { padding: 72px 0; }
    .candidates__grid { grid-template-columns: 1fr; gap: 16px; }

    /* why */
    .why__overlay { padding: 72px 0; }
    .why__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
    .why__lede { padding-top: 0; }
    .why__grid { grid-template-columns: 1fr; gap: 36px; }

    /* testimonials */
    .testimonials { padding: 72px 0; }
    .testimonials__head { margin-bottom: 32px; }
    .testimonials__track { --carousel-gap: 40px; }
    .testimonial { flex-basis: 100%; }
    .carousel__button { width: 42px; height: 42px; }

    /* insights */
    .insights { padding-bottom: 72px; }
    .insights__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px; }
    .insights__grid { grid-template-columns: 1fr; gap: 40px; }

    /* cta */
    .cta-band { padding: 72px 0; }
    .cta-band__inner { grid-template-columns: 1fr; gap: 48px; }

    /* footer */
    .site-footer { padding-top: 64px; }
    .site-footer__top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
    .site-footer__partners { grid-template-columns: 1fr; gap: 32px; padding: 36px 0; }
    .site-footer__partner + .site-footer__partner {
        border-left: 0;
        border-top: 1px solid var(--line-on-inverse);
        padding-left: 0;
        padding-top: 32px;
    }
    .site-footer__legal { flex-direction: column; gap: 16px; }
    .site-footer__legal-links { flex-wrap: wrap; gap: 16px; }

    /* inner pages */
    .section { padding: 72px 0; }
    .section + .section { padding-top: 0; }
    .section--inverse,
    .section--inverse + .section,
    .section + .section--inverse { padding-top: 72px; }
    .section--inverse { padding-bottom: 72px; }
    .section__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
    .section__split { grid-template-columns: 1fr; gap: 28px; }

    .page-hero { padding: calc(var(--header-h) + 48px) 0 56px; }
    .page-hero--image { min-height: 0; padding-bottom: 64px; }
    .page-hero__heading { font-size: 2.5rem; }
    .page-hero__standfirst { font-size: 1rem; }

    /* the mega panels collapse into the burger overlay */
    .mega { display: none; }

    .feature,
    .section--feature-flipped .feature { grid-template-columns: 1fr; gap: 32px; }
    .section--feature-flipped .feature__copy,
    .section--feature-flipped .feature__media { order: 0; }

    .detail { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
    .detail__aside { flex-direction: row; align-items: flex-start; gap: 16px; }
    .detail__media { flex: 1; }
    .detail__title { font-size: var(--h4); }

    .steps { grid-template-columns: 1fr; }
    .step { padding: 24px 20px; }
    .step + .step { border-left: 0; border-top: 1px solid var(--line-subtle); }

    .questions { grid-template-columns: 1fr; gap: 32px; }
    .question { font-size: 1rem; padding: 18px 0; }

    .people { grid-template-columns: 1fr; gap: 48px; }
    .person__name { font-size: var(--h4); }

    .values { gap: 32px; }
    .values__list { grid-template-columns: 1fr; gap: 28px; }

    .logo-row { gap: 32px; }
    .logo-row__item img { max-height: 34px; }

    .filter-bar { margin-bottom: 32px; }

    .job { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 0; }
    .job__title { font-size: var(--h5); }
    .job:hover { padding-left: 0; padding-right: 0; }
    .job-single { padding: 56px 0 72px; }
    .job-single__grid { grid-template-columns: 1fr; gap: 40px; }
    .job-single__aside { padding: 28px 24px; }

    .stat-row { grid-template-columns: 1fr 1fr; }

    .article { padding: 56px 0 72px; }
    .article__related { margin-top: 64px; padding-top: 40px; }
    .article__layout { grid-template-columns: 1fr; gap: 36px; max-width: none; }
    .job-apply { grid-template-columns: 1fr; gap: 32px; margin-top: 56px; padding-top: 40px; }
    .toc {
        border-top: 1px solid var(--line-subtle);
        border-bottom: 1px solid var(--line-subtle);
        padding: 24px 0;
    }

    .faq { grid-template-columns: 1fr; gap: 32px; }
    .faq__question { font-size: 1.0625rem; }

    .contact { grid-template-columns: 1fr; gap: 40px; }
}