/* =========================================================================
   Visionary Dynamics — public site
   Brand tokens are derived from the supplied logo artwork:
     navy  #001D53   bright blue #006BF7   gold #D9A03A
   Contrast for every text and control pairing is verified by
   `php tests/contrast.php`; see docs/qa-report.md.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts */

@font-face {
    font-family: 'Source Serif 4';
    src: url('../fonts/source-serif-4-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif 4';
    src: url('../fonts/source-serif-4-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
    --vd-navy: #001d53;
    --vd-navy-700: #0a2c6e;
    --vd-navy-900: #00143a;
    --vd-blue: #006bf7;
    --vd-link: #0a56c4;
    --vd-link-hover: #00143a;
    --vd-gold: #d9a03a;
    --vd-gold-ink: #8a6100;

    --vd-ink: #12161f;
    --vd-ink-muted: #4e5a70;
    --vd-on-navy: #ffffff;
    --vd-on-navy-muted: #cbd6ea;

    --vd-surface: #ffffff;
    --vd-surface-alt: #f5f7fb;
    /* The deepest point of .vd-section--gradient. A diagonal gradient has a
       single darkest corner, so this token is the worst case any text in that
       section sits on, and the contrast suite checks against it directly.
       Chosen by measurement, not by eye: the gold eyebrow has the least
       headroom of anything on a light ground (5.54:1 on white), and anything
       deeper than this drops it under the 4.5 minimum. */
    --vd-surface-alt-deep: #e9eff9;
    --vd-surface-navy: var(--vd-navy);

    --vd-border: #dce1ea;
    --vd-border-strong: #6b7689;
    --vd-border-navy: rgba(255, 255, 255, 0.26);

    --vd-focus: #006bf7;

    --vd-font-display: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    --vd-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

    --vd-measure: 68ch;

    --vd-space-1: 0.25rem;
    --vd-space-2: 0.5rem;
    --vd-space-3: 0.75rem;
    --vd-space-4: 1rem;
    --vd-space-5: 1.5rem;
    --vd-space-6: 2rem;
    --vd-space-7: 3rem;
    --vd-space-8: 4rem;
    --vd-space-9: 5.5rem;

    --vd-radius: 3px;
    --vd-radius-lg: 6px;

    --vd-shadow-sm: 0 1px 2px rgba(0, 20, 58, 0.06), 0 2px 8px rgba(0, 20, 58, 0.05);
    --vd-shadow-md: 0 2px 6px rgba(0, 20, 58, 0.08), 0 12px 28px rgba(0, 20, 58, 0.09);

    --vd-container: 1180px;
    --vd-gutter: 1.25rem;

    /* The sticky header's own height (min-height 76px plus its 1px border).
       Kept as a token because scroll-margin-top below depends on it: change
       one and the other must follow, or in-page links start landing behind
       the header again. */
    --vd-header-height: 77px;
}

/* The header is sticky, so the browser's default fragment behaviour — put the
   target at the very top of the viewport — hides the target underneath it.
   Every "Discuss Your Project" button on the site links to
   /contact#project-enquiry, so without this the most-used link on the site
   lands on a heading the visitor cannot see. Verified by ANC-01..ANC-04. */
[id] {
    scroll-margin-top: calc(var(--vd-header-height) + var(--vd-space-5));
}

/* ------------------------------------------------------------- base reset */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--vd-surface);
    color: var(--vd-ink);
    font-family: var(--vd-font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vd-font-display);
    font-weight: 600;
    color: var(--vd-navy);
    line-height: 1.18;
    letter-spacing: -0.011em;
    margin: 0 0 var(--vd-space-4);
    text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p {
    margin: 0 0 var(--vd-space-4);
}

a {
    color: var(--vd-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--vd-link-hover);
}

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

hr {
    border: 0;
    border-top: 1px solid var(--vd-border);
    margin: var(--vd-space-6) 0;
}

::selection {
    background: #cfe0ff;
    color: var(--vd-navy-900);
}

/* ------------------------------------------------------------- utilities */

.vd-container {
    width: 100%;
    max-width: var(--vd-container);
    margin-inline: auto;
    padding-inline: var(--vd-gutter);
}

.vd-container--narrow {
    max-width: 780px;
}

.vd-section {
    padding-block: var(--vd-space-8);
}

.vd-section--tight {
    padding-block: var(--vd-space-7);
}

.vd-section--alt {
    background: var(--vd-surface-alt);
}

/* A softer alternative to the flat alt surface: the section emerges from the
   white above it and deepens toward the far corner. No second blended layer —
   a blue bloom on top looked good but cost the gold eyebrow its contrast
   margin, and one flat darkest point is what keeps this checkable. */
.vd-section--gradient {
    background: linear-gradient(
        160deg,
        var(--vd-surface) 0%,
        var(--vd-surface-alt) 42%,
        var(--vd-surface-alt-deep) 100%
    );
}

.vd-section--navy {
    background: var(--vd-surface-navy);
    color: var(--vd-on-navy);
}

.vd-section--navy h1,
.vd-section--navy h2,
.vd-section--navy h3 {
    color: var(--vd-on-navy);
}

.vd-eyebrow {
    display: block;
    font-family: var(--vd-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--vd-gold-ink);
    margin: 0 0 var(--vd-space-3);
}

.vd-section--navy .vd-eyebrow {
    color: var(--vd-gold);
}

.vd-lead {
    font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.3rem);
    line-height: 1.55;
    color: var(--vd-ink-muted);
    max-width: 58ch;
}

.vd-section--navy .vd-lead {
    color: var(--vd-on-navy-muted);
}

.vd-measure {
    max-width: var(--vd-measure);
}

.vd-rule {
    width: 56px;
    height: 4px;
    background: var(--vd-gold);
    border-radius: 2px;
    margin: 0 0 var(--vd-space-5);
}

.vd-section-head {
    max-width: 60ch;
    margin-bottom: var(--vd-space-7);
}

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

/* ------------------------------------------------------------ skip link */

.skip-link {
    position: absolute;
    left: var(--vd-space-4);
    top: -100px;
    z-index: 200;
    background: var(--vd-navy);
    color: #fff;
    padding: 0.75rem 1.1rem;
    border-radius: var(--vd-radius);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus {
    top: var(--vd-space-4);
    color: #fff;
}

/* --------------------------------------------------------------- buttons */

.vd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.68rem 1.35rem;
    border: 2px solid transparent;
    border-radius: var(--vd-radius);
    font-family: var(--vd-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vd-btn--primary {
    background: var(--vd-navy);
    border-color: var(--vd-navy);
    color: #fff;
}

.vd-btn--primary:hover,
.vd-btn--primary:focus {
    background: var(--vd-navy-700);
    border-color: var(--vd-navy-700);
    color: #fff;
}

.vd-btn--ghost {
    background: transparent;
    border-color: var(--vd-navy);
    color: var(--vd-navy);
}

.vd-btn--ghost:hover,
.vd-btn--ghost:focus {
    background: var(--vd-navy);
    color: #fff;
}

.vd-btn--on-navy {
    background: #fff;
    border-color: #fff;
    color: var(--vd-navy);
}

.vd-btn--on-navy:hover,
.vd-btn--on-navy:focus {
    background: var(--vd-on-navy-muted);
    border-color: var(--vd-on-navy-muted);
    color: var(--vd-navy-900);
}

.vd-btn--outline-on-navy {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

.vd-btn--outline-on-navy:hover,
.vd-btn--outline-on-navy:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.vd-btn--sm {
    min-height: 38px;
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
}

.vd-btn--block {
    width: 100%;
}

/* A text link that behaves as a forward action. */
.vd-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--vd-link);
    min-height: 30px;
}

.vd-arrow-link::after {
    content: '→';
    transition: transform 0.15s ease;
}

.vd-arrow-link:hover {
    text-decoration: underline;
}

.vd-arrow-link:hover::after {
    transform: translateX(3px);
}

/* ---------------------------------------------------------------- header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid var(--vd-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vd-space-4);
    min-height: 76px;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.35rem 0;
}

.brand-logo img {
    display: block;
    width: 186px;
    height: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--vd-space-5);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--vd-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--vd-ink);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.site-nav__link:hover {
    color: var(--vd-link);
    border-bottom-color: var(--vd-border-strong);
}

.site-nav__link[aria-current='page'] {
    color: var(--vd-navy);
    font-weight: 600;
    border-bottom-color: var(--vd-gold);
}

/* A section with sub-pages. The parent stays a link and the button beside
   it only discloses the list, so the section is reachable with JavaScript
   off — the menu is an accelerator, never the only route. */
.site-nav__item--has-menu {
    position: relative;
}

.site-nav__parent {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.site-nav__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--vd-ink);
    cursor: pointer;
}

.site-nav__disclosure:hover {
    color: var(--vd-link);
}

.site-nav__chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__chevron {
        transition: none;
    }
}

.site-nav__item--has-menu.is-open .site-nav__chevron {
    transform: translateY(1px) rotate(-135deg);
}

.site-nav__menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 230px;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--vd-surface);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius);
    box-shadow: var(--vd-shadow-md);
}

.site-nav__item--has-menu.is-open .site-nav__menu {
    display: block;
}

.site-nav__menu a {
    display: block;
    padding: 0.6rem 0.7rem;
    min-height: 44px;
    color: var(--vd-ink);
    text-decoration: none;
    border-radius: var(--vd-radius);
    white-space: nowrap;
}

.site-nav__menu a:hover {
    background: var(--vd-surface-alt);
    color: var(--vd-link);
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.8rem;
    background: transparent;
    border: 1px solid var(--vd-border-strong);
    border-radius: var(--vd-radius);
    color: var(--vd-navy);
    font-weight: 600;
    cursor: pointer;
}

.nav-toggle__bars {
    display: inline-block;
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* The header switches to the menu button before the nav can overflow.
   Verified at 360, 390, 768, 1024, 1440 (tests/browser.mjs). */
@media (max-width: 1099.98px) {
    .nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--vd-space-4) var(--vd-gutter) var(--vd-space-5);
        background: var(--vd-surface);
        border-bottom: 1px solid var(--vd-border);
        box-shadow: var(--vd-shadow-md);
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav__link {
        min-height: 52px;
        border-bottom: 1px solid var(--vd-border);
        border-left: 3px solid transparent;
        padding-left: 0.6rem;
    }

    .site-nav__link[aria-current='page'] {
        border-left-color: var(--vd-gold);
        border-bottom-color: var(--vd-border);
    }

    .site-nav .vd-btn {
        margin-top: var(--vd-space-4);
    }

    /* In the stacked menu the sub-pages sit inline under their parent
       rather than floating over the page. */
    .site-nav__parent {
        justify-content: space-between;
        border-bottom: 1px solid var(--vd-border);
    }

    .site-nav__parent .site-nav__link {
        flex: 1 1 auto;
        border-bottom: 0;
    }

    .site-nav__disclosure {
        min-width: 52px;
        min-height: 52px;
        flex: 0 0 auto;
    }

    .site-nav__menu {
        position: static;
        min-width: 0;
        padding: 0 0 0 var(--vd-space-4);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .site-nav__menu a {
        min-height: 48px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--vd-border);
        border-radius: 0;
    }
}

/* ------------------------------------------------------------------ hero */

.hero {
    position: relative;
    background: var(--vd-surface);
    border-bottom: 1px solid var(--vd-border);
    overflow: hidden;
}

/* The full-bleed illustration (see partials/hero-background.php) sits
   behind the whole section, above the plain surface colour and below the
   grid content. Only the home page uses it while it is under review. */
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* A photographic .hero-bg (see partials/hero-photo.php) instead of the
   drawn illustration: the <img> covers its box at any aspect ratio, so —
   unlike the SVG version above — this needs no boxed mobile fallback and
   stays visible at every width (overridden back on below, since the
   general .hero-bg / .page-head--illustrated .hero-bg rules elsewhere hide
   the SVG version below 900px; the extra .hero-bg--photo class beats that
   on specificity). The scrim keeps whatever text sits over it within the
   same contrast the navy wash guaranteed. */
.hero-bg--photo {
    overflow: hidden;
}

.hero-bg--photo picture,
.hero-bg--photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-bg__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 29, 83, 0.05) 0%, rgba(0, 29, 83, 0.55) 42%, rgba(0, 29, 83, 0.92) 100%);
}

/* The page-head band is shorter and carries no text over the photo (see
   .page-head__grid--photo below, which drops the second column entirely) —
   a lighter scrim keeps the photo readable while still landing the band on
   the same navy the illustrated version ends on at its right edge. */
.page-head--illustrated .hero-bg__scrim {
    background: linear-gradient(90deg, rgba(0, 29, 83, 0) 0%, rgba(0, 29, 83, 0.25) 60%, rgba(0, 29, 83, 0.75) 100%);
}

/* Both gradients above were modelled on the SVG illustration's shape, whose
   own left zone was plain white surface with no art in it at all — the
   heading/lead text never needed scrim protection there. A photograph has
   no such reserved zone: it covers the full band, including exactly where
   that text sits, so the near-transparent start of each gradient left it
   sitting almost directly on the photo. Override with a much stronger,
   flatter wash — high opacity at every horizontal position — for the photo
   variant specifically. Higher specificity than both rules above (and than
   .page-head--illustrated .hero-bg__scrim) so it wins regardless of source
   order. */
.hero-bg--photo .hero-bg__scrim,
.page-head--illustrated .hero-bg--photo .hero-bg__scrim {
    background: linear-gradient(90deg, rgba(0, 20, 58, 0.82) 0%, rgba(0, 29, 83, 0.68) 45%, rgba(0, 29, 83, 0.9) 100%);
}

.hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--vd-space-8);
    align-items: center;
    padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
    min-height: clamp(460px, 42vw, 620px);
}

.hero__title {
    margin-bottom: var(--vd-space-5);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-space-3);
    margin-top: var(--vd-space-6);
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-space-2) var(--vd-space-5);
    margin-top: var(--vd-space-6);
    padding-top: var(--vd-space-5);
    border-top: 1px solid var(--vd-border);
    font-size: 0.95rem;
    color: var(--vd-ink-muted);
    list-style: none;
    padding-left: 0;
}

.hero__meta li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.hero__meta li::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--vd-gold);
    border-radius: 1px;
    transform: rotate(45deg);
    flex: 0 0 auto;
}

/* .hero--photo marks the home hero when it is rendering the photographic
   background (see partials/hero-photo.php) instead of the plain surface
   colour the base .hero rules assume. With the strengthened scrim above the
   background is now a consistently dark navy at every horizontal position,
   the same navy .vd-section--navy text sits on, so the foreground text
   reuses that on-navy palette rather than the default dark-on-light one.
   The text-shadow is extra insurance against any locally bright patch of
   the photo the scrim doesn't fully flatten. */
.hero--photo .vd-eyebrow {
    color: var(--vd-gold);
}

.hero--photo .hero__title,
.hero--photo .vd-lead {
    color: var(--vd-on-navy);
    text-shadow: 0 1px 3px rgba(0, 20, 58, 0.45);
}

.hero--photo .hero__meta {
    color: var(--vd-on-navy-muted);
    border-top-color: rgba(255, 255, 255, 0.25);
}

.hero--photo .hero__actions .vd-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

.hero--photo .hero__actions .vd-btn--ghost:hover,
.hero--photo .hero__actions .vd-btn--ghost:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* The panel no longer carries its own navy box on wide screens: the
   full-bleed .hero-bg behind the whole section already puts navy here.
   The panel is just where the tagline text sits. Its own boxed graphic
   (partials/hero-graphic.php, still included in the markup) is hidden at
   this width and reappears at the mobile breakpoint below, where the
   full-bleed art is switched off instead. */
.hero__panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vd-space-6);
    min-height: 260px;
}

/* The brand-geometry illustration (see partials/hero-graphic.php) fills
   whichever box it sits in — the page-head panel on other pages, or (below
   900px only, see the media query further down) the home hero panel. */
.hero-graphic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* On the home page specifically, the full-bleed .hero-bg already supplies
   the navy field on wide screens, so the panel's own boxed copy of the
   graphic is redundant there — hidden until the mobile breakpoint below
   switches the two back. */
.hero__panel .hero-graphic {
    display: none;
}

.hero__panel-inner {
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
}

/* The supplied artwork is navy on white, so it is never knocked out or
   recoloured for a dark panel. The panel carries type and brand geometry. */
.hero__panel-tagline {
    font-family: var(--vd-font-display);
    font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
    line-height: 1.35;
    color: #fff;
    margin: 0 0 var(--vd-space-4);
}

.hero__panel-tagline span {
    display: block;
}

.hero__panel-tagline span + span {
    margin-top: 0.1em;
}

.hero__panel-tagline span:nth-child(2n) {
    color: var(--vd-on-navy-muted);
}

.hero__panel-words {
    font-family: var(--vd-font-display);
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
    line-height: 1.5;
    margin: 0;
    color: #fff;
}

@media (max-width: 900px) {
    /* The full-bleed background is slice-cropped for a wide, short section;
       stacked on a narrow screen the section is much taller and the same
       crop stops landing behind the tagline panel. Switch back to the
       panel's own boxed graphic instead, exactly as before this change.
       The photo version (.hero-bg--photo, higher specificity) is exempt:
       object-fit: cover means it keeps covering at any height, so the
       photo hero stays full-bleed at every width instead of switching to
       a boxed panel. */
    .hero-bg {
        display: none;
    }

    .hero-bg.hero-bg--photo {
        display: block;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vd-space-6);
        min-height: 0;
    }

    /* Content sets the height on a narrow screen: a fixed ratio would clip
       the supporting line. No boxed navy card here any more: the full-bleed
       photo (kept visible above) already carries the navy tone at every
       width, so a second opaque background on the panel would just hide it. */
    .hero__panel {
        aspect-ratio: auto;
        min-height: 240px;
        padding-block: var(--vd-space-7);
    }
}

/* ---------------------------------------------------- positioning block */

.statement {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--vd-space-8);
}

/* -------------------------------------------------- about: paired columns */

/* Mission and Values as equal halves of one row. Equal columns rather than
   the asymmetric .statement split, because neither one is subordinate. */
.about-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vd-space-8);
    align-items: start;
}

.about-duo__col > p {
    font-size: 1.1rem;
}

.about-duo__col > h3 {
    margin-top: var(--vd-space-5);
}

.about-duo__col .pillars {
    margin-top: var(--vd-space-4);
}

/* The pillar's fixed 92px label track is sized for a full-width column;
   in half the width a long label such as "PARTNERSHIP" overruns it and
   collides with the text. Stack them instead, as the narrow breakpoint
   already does. */
.about-duo .pillar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
}

@media (max-width: 900px) {
    .about-duo {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vd-space-7);
    }
}

/* ------------------------------------------------------------- signposts */

.signpost-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vd-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.signpost {
    padding: var(--vd-space-6);
    background: var(--vd-surface-alt);
    border: 1px solid var(--vd-border);
    border-left: 3px solid var(--vd-gold);
    border-radius: var(--vd-radius);
}

.signpost__title {
    font-size: 1.25rem;
    margin: 0 0 var(--vd-space-3);
}

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

.signpost__title a:hover {
    color: var(--vd-link);
    text-decoration: underline;
}

.signpost__body {
    margin: 0;
    color: var(--vd-ink-muted);
}

@media (max-width: 720px) {
    .signpost-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------ team cards */

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vd-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.team-card {
    display: flex;
    flex-direction: column;
    background: var(--vd-surface);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
}

.team-card__portrait {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--vd-navy);
    overflow: hidden;
}

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

/* Shown when a member has no photograph. Initials on the brand navy, not a
   stock portrait and not a silhouette pretending to be one. */
.team-card__monogram {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(0, 107, 247, 0.28), transparent 60%),
        var(--vd-navy);
}

.team-card__initials {
    font-family: var(--vd-font-display);
    font-size: clamp(2.2rem, 1.6rem + 2vw, 3.1rem);
    line-height: 1;
    letter-spacing: 0.04em;
    color: #fff;
    opacity: 0.92;
}

.team-card__body {
    padding: var(--vd-space-5);
}

.team-card__role {
    font-family: var(--vd-font-display);
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--vd-navy);
    margin: 0 0 0.35rem;
}

.team-card__name {
    margin: 0;
    font-size: 0.95rem;
    color: var(--vd-ink-muted);
}

/* A seeded placeholder row: still visibly waiting for a real name. */
.team-card__name--pending {
    font-style: italic;
}

.team-card__bio {
    margin: var(--vd-space-3) 0 0;
    font-size: 0.95rem;
    color: var(--vd-ink-muted);
}

@media (max-width: 900px) {
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .team-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vd-space-5);
    }
}

/* ----------------------------------------------------------- media frame */

/* A framed contextual photograph. Rendered only when the client has set an
   image path in Settings — see partials/media-frame.php. */
.media-frame {
    margin: var(--vd-space-6) 0 0;
}

.media-frame__inner {
    overflow: hidden;
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius-lg);
    background: var(--vd-surface-alt);
}

.media-frame__inner img {
    display: block;
    width: 100%;
    height: auto;
}

.media-frame__caption {
    margin-top: var(--vd-space-3);
    font-size: 0.9rem;
    color: var(--vd-ink-muted);
}

.statement__body p {
    font-size: 1.1rem;
}

.statement__body p:first-child {
    font-family: var(--vd-font-display);
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
    line-height: 1.45;
    color: var(--vd-navy);
}

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

.pillar {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: var(--vd-space-4);
    align-items: baseline;
    padding-block: var(--vd-space-4);
    border-top: 1px solid var(--vd-border);
}

.pillar:last-child {
    border-bottom: 1px solid var(--vd-border);
}

.pillar__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vd-gold-ink);
}

.pillar__body {
    margin: 0;
    color: var(--vd-ink-muted);
}

@media (max-width: 900px) {
    .statement {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vd-space-6);
    }

    .pillar {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vd-space-1);
    }
}

/* ---------------------------------------------------- service catalogue */

.collections {
    display: grid;
    gap: var(--vd-space-6);
}

.collection {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--vd-space-6);
    padding: var(--vd-space-6);
    background: var(--vd-surface);
    border: 1px solid var(--vd-border);
    border-left: 4px solid var(--vd-navy);
    border-radius: var(--vd-radius-lg);
}

.collection:nth-child(2) { border-left-color: var(--vd-blue); }
.collection:nth-child(3) { border-left-color: var(--vd-gold); }
.collection:nth-child(4) { border-left-color: var(--vd-navy-700); }

.collection__index {
    font-family: var(--vd-font-display);
    font-size: 0.95rem;
    color: var(--vd-ink-muted);
    margin: 0 0 var(--vd-space-2);
}

.collection__title {
    font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.55rem);
    margin-bottom: var(--vd-space-3);
}

.collection__summary {
    margin: 0;
    color: var(--vd-ink-muted);
}

.service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    align-content: start;
}

.service-list__item {
    border-top: 1px solid var(--vd-border);
}

.service-list__item:last-child {
    border-bottom: 1px solid var(--vd-border);
}

.service-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vd-space-4);
    min-height: 52px;
    padding: 0.7rem 0.25rem;
    color: var(--vd-navy);
    font-weight: 600;
    text-decoration: none;
}

.service-list__link:hover {
    color: var(--vd-link);
    background: var(--vd-surface-alt);
}

.service-list__link::after {
    content: '→';
    color: var(--vd-ink-muted);
    flex: 0 0 auto;
}

.service-list__link:hover::after {
    color: var(--vd-link);
}

@media (max-width: 900px) {
    .collection {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vd-space-4);
        padding: var(--vd-space-5);
    }
}

/* ------------------------------------------------------------- packages */

.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--vd-space-5);
}

.package {
    display: flex;
    flex-direction: column;
    gap: var(--vd-space-3);
    padding: var(--vd-space-5);
    background: var(--vd-surface);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius-lg);
}

.package__title {
    font-size: 1.2rem;
    margin: 0;
}

.package__summary {
    margin: 0;
    color: var(--vd-ink-muted);
    font-size: 0.97rem;
}

.package__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.package__steps li {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    background: var(--vd-surface-alt);
    border: 1px solid var(--vd-border);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--vd-ink-muted);
}

.package__steps li + li::before {
    content: '';
}

.package__best-for {
    margin: auto 0 0;
    padding-top: var(--vd-space-3);
    border-top: 1px solid var(--vd-border);
    font-size: 0.92rem;
    color: var(--vd-ink-muted);
}

/* --------------------------------------------------------------- sectors */

.two-col-list {
    columns: 2;
    column-gap: var(--vd-space-8);
    list-style: none;
    margin: 0;
    padding: 0;
}

.two-col-list li {
    break-inside: avoid;
    padding: 0.55rem 0 0.55rem 1.5rem;
    border-bottom: 1px solid var(--vd-border);
    position: relative;
}

.two-col-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.15em;
    width: 8px;
    height: 2px;
    background: var(--vd-gold);
}

.vd-section--navy .two-col-list li {
    border-bottom-color: var(--vd-border-navy);
}

@media (max-width: 720px) {
    .two-col-list {
        columns: 1;
    }
}

/* ---------------------------------------------------------- process steps */

.process {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.process__step {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--vd-space-4);
    padding-block: var(--vd-space-4);
    border-top: 1px solid var(--vd-border);
}

.process__step:last-child {
    border-bottom: 1px solid var(--vd-border);
}

.process__step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-family: var(--vd-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--vd-gold-ink);
    padding-top: 0.15rem;
}

.process__label {
    font-family: var(--vd-font-display);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--vd-navy);
    margin: 0 0 0.15rem;
}

.process__body {
    margin: 0;
    color: var(--vd-ink-muted);
}

/* ------------------------------------------------------------- CTA band */

.cta-band {
    position: relative;
    overflow: hidden;
}

.cta-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--vd-space-7);
    align-items: center;
    position: relative;
    z-index: 1;
}

.cta-band::after {
    content: '';
    position: absolute;
    right: -8%;
    bottom: -72%;
    width: 26%;
    aspect-ratio: 1;
    background: var(--vd-blue);
    transform: rotate(38deg);
    opacity: 0.35;
    pointer-events: none;
}

.cta-band__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--vd-space-3);
}

@media (min-width: 861px) {
    .cta-band__actions {
        align-items: flex-end;
    }

    .cta-band__actions .vd-btn {
        min-width: 240px;
    }
}

@media (max-width: 860px) {
    .cta-band__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vd-space-5);
    }
}

/* --------------------------------------------------------------- footer */

.site-footer {
    background: var(--vd-surface-alt);
    border-top: 1px solid var(--vd-border);
    padding-block: var(--vd-space-7) var(--vd-space-5);
    font-size: 0.95rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--vd-space-6);
}

/* A long address must wrap inside its column rather than widen the page. */
.site-footer li,
.site-footer a {
    min-width: 0;
    overflow-wrap: anywhere;
}

.site-footer__about {
    color: var(--vd-ink-muted);
    max-width: 34ch;
}

.site-footer__logo img {
    width: 180px;
    height: auto;
    margin-bottom: var(--vd-space-4);
}

.site-footer h2 {
    font-family: var(--vd-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vd-navy);
    margin-bottom: var(--vd-space-3);
}

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

.site-footer li {
    margin-bottom: 0.4rem;
}

.site-footer a {
    color: var(--vd-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
}

.site-footer a:hover {
    color: var(--vd-link);
    text-decoration: underline;
}

/* The LinkedIn brand mark sitting to the left of the "LinkedIn" contact
   link. currentColor keeps it in step with the link's own text/hover
   color rather than needing a separate override. */
.site-footer__icon {
    width: 16px;
    height: 16px;
    margin-right: 0.45rem;
    flex-shrink: 0;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--vd-space-3);
    margin-top: var(--vd-space-6);
    padding-top: var(--vd-space-4);
    border-top: 1px solid var(--vd-border);
    color: var(--vd-ink-muted);
    font-size: 0.88rem;
}

.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-space-4);
}

@media (max-width: 900px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------- page header */

.page-head {
    background: var(--vd-surface-alt);
    border-bottom: 1px solid var(--vd-border);
    padding-block: var(--vd-space-7);
}

.page-head__title {
    margin-bottom: var(--vd-space-4);
}

/* A page-head carrying the full-bleed illustration (about, services,
   publications, contact and every service page) — the same language as the
   homepage hero in a shorter band, so every page in the site opens the
   same way. */
.page-head--illustrated {
    position: relative;
    overflow: hidden;
}

.page-head__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--vd-space-7);
    align-items: center;
    min-height: 190px;
}

/* On wide screens the background already puts navy and the motif on the
   right, so the panel is only the space the text must not run into. A
   service page has no panel element at all: its single grid child takes
   the first column and leaves the second empty, which comes to the same
   thing. */
.page-head__panel {
    position: relative;
}

.page-head__panel .hero-graphic {
    display: none;
}

/* A photo page-head (see partials/hero-photo.php) carries no .page-head__panel
   at all — the second column existed only to reserve space for the boxed
   graphic and hold no text of its own, so with a photo behind the whole
   band there is nothing left for it to do. */
.page-head__grid--photo {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    /* Stacked, the band is far taller than the illustration's crop was
       drawn for, so the boxed panel takes over exactly as before. The photo
       version stays full-bleed instead (see the equivalent home-hero rule
       above) since object-fit: cover covers any height. */
    .page-head--illustrated .hero-bg {
        display: none;
    }

    .page-head--illustrated .hero-bg.hero-bg--photo {
        display: block;
    }

    .page-head__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vd-space-5);
        min-height: 0;
    }

    .page-head__panel {
        aspect-ratio: 16 / 9;
        max-width: 360px;
        background: var(--vd-navy);
        border-radius: var(--vd-radius-lg);
        overflow: hidden;
    }

    .page-head__panel .hero-graphic {
        display: block;
    }
}

.breadcrumbs {
    font-size: 0.88rem;
    color: var(--vd-ink-muted);
    margin-bottom: var(--vd-space-4);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs li + li::before {
    content: '/';
    margin-right: 0.35rem;
    color: var(--vd-border-strong);
}

.breadcrumbs a {
    color: var(--vd-ink-muted);
}

/* .page-head--photo marks the About, How-we-work and Services page-heads
   when they render the photographic background instead of the plain
   surface colour the base .page-head rules assume — same reasoning and
   on-navy palette as .hero--photo above. */
.page-head--photo .breadcrumbs,
.page-head--photo .breadcrumbs a {
    color: var(--vd-on-navy-muted);
}

.page-head--photo .breadcrumbs li + li::before {
    color: rgba(255, 255, 255, 0.4);
}

.page-head--photo .page-head__title,
.page-head--photo .vd-lead {
    color: var(--vd-on-navy);
    text-shadow: 0 1px 3px rgba(0, 20, 58, 0.45);
}

/* -------------------------------------------------------- service detail */

.service-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--vd-space-8);
    align-items: start;
}

.service-detail__aside {
    position: sticky;
    /* Clear of the sticky header, from the same token, so the two cannot
       drift apart. */
    top: calc(var(--vd-header-height) + var(--vd-space-5));
    padding: var(--vd-space-5);
    background: var(--vd-surface-alt);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius-lg);
}

.service-block + .service-block {
    margin-top: var(--vd-space-7);
}

.service-block__title {
    font-size: 1.35rem;
    padding-bottom: var(--vd-space-3);
    border-bottom: 2px solid var(--vd-gold);
    display: inline-block;
    margin-bottom: var(--vd-space-4);
}

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

.checklist li {
    position: relative;
    padding-left: 1.65rem;
}

.checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--vd-blue);
    transform: rotate(45deg);
}

.boundaries {
    margin-top: var(--vd-space-7);
    padding: var(--vd-space-5);
    background: #fff;
    border: 1px solid var(--vd-border);
    border-left: 4px solid var(--vd-gold);
    border-radius: var(--vd-radius);
}

.boundaries h2 {
    font-size: 1.1rem;
    margin-bottom: var(--vd-space-3);
}

.boundaries ul {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--vd-ink-muted);
}

.boundaries li + li {
    margin-top: var(--vd-space-2);
}

@media (max-width: 980px) {
    .service-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vd-space-6);
    }

    .service-detail__aside {
        position: static;
    }
}

/* --------------------------------------------------------------- articles */

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
    gap: var(--vd-space-6);
}

.article-card {
    display: flex;
    flex-direction: column;
    background: var(--vd-surface);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.article-card:hover {
    box-shadow: var(--vd-shadow-md);
}

.article-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--vd-surface-alt);
    overflow: hidden;
}

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

.article-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--vd-space-3);
    padding: var(--vd-space-5);
    flex: 1 1 auto;
}

.article-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.82rem;
    color: var(--vd-ink-muted);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--vd-border-strong);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--vd-navy);
    text-decoration: none;
}

a.tag:hover {
    background: var(--vd-navy);
    color: #fff;
    border-color: var(--vd-navy);
}

.article-card__title {
    font-size: 1.22rem;
    margin: 0;
}

.article-card__title a {
    color: var(--vd-navy);
    text-decoration: none;
}

.article-card__title a:hover {
    color: var(--vd-link);
    text-decoration: underline;
}

.article-card__excerpt {
    margin: 0;
    color: var(--vd-ink-muted);
    font-size: 0.97rem;
}

.article-card__footer {
    margin-top: auto;
    padding-top: var(--vd-space-3);
}

/* ----------------------------------------------------- publications index */

.publications-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-space-4);
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: var(--vd-space-5);
    margin-bottom: var(--vd-space-6);
    border-bottom: 1px solid var(--vd-border);
}

/* The jump row. The four collection links move you down this page; the
   packages link leaves it. They used to sit in one row of identical pills,
   which promised the same behaviour from both — so the cross-page one is
   now a sentence beside them rather than a fifth pill. */
.collection-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--vd-space-3) var(--vd-space-5);
}

.collection-jump__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vd-ink-muted);
    margin: 0;
    flex: 0 0 auto;
}

.collection-jump .filter-list {
    flex: 1 1 auto;
}

.collection-jump__aside {
    margin: 0;
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--vd-ink-muted);
}

@media (max-width: 900px) {
    .collection-jump {
        display: block;
    }

    .collection-jump__label {
        display: block;
        margin-bottom: var(--vd-space-3);
    }

    .collection-jump__aside {
        margin-top: var(--vd-space-4);
    }
}

.filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-list a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--vd-border-strong);
    border-radius: 999px;
    color: var(--vd-navy);
    font-size: 0.9rem;
    text-decoration: none;
}

.filter-list a[aria-current='true'] {
    background: var(--vd-navy);
    border-color: var(--vd-navy);
    color: #fff;
    font-weight: 600;
}

.search-form {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.empty-state {
    padding: var(--vd-space-7);
    text-align: center;
    background: var(--vd-surface-alt);
    border: 1px dashed var(--vd-border-strong);
    border-radius: var(--vd-radius-lg);
}

.empty-state h2 {
    font-size: 1.3rem;
}

.empty-state p {
    color: var(--vd-ink-muted);
    max-width: 48ch;
    margin-inline: auto;
}

/* ------------------------------------------------------------- pagination */

.pagination-nav {
    margin-top: var(--vd-space-7);
}

.pagination-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.pagination-nav a,
.pagination-nav span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.6rem;
    border: 1px solid var(--vd-border-strong);
    border-radius: var(--vd-radius);
    color: var(--vd-navy);
    text-decoration: none;
}

.pagination-nav [aria-current='page'] {
    background: var(--vd-navy);
    border-color: var(--vd-navy);
    color: #fff;
    font-weight: 600;
}

.pagination-nav .is-disabled {
    color: var(--vd-ink-muted);
    border-color: var(--vd-border);
    opacity: 0.65;
}

/* ------------------------------------------------------------ article page */

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--vd-space-8);
    align-items: start;
}

.article-header {
    margin-bottom: var(--vd-space-6);
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--vd-space-4);
    font-size: 0.92rem;
    color: var(--vd-ink-muted);
    margin-bottom: var(--vd-space-4);
}

.event-details {
    background: var(--vd-surface-alt);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius-lg);
    padding: var(--vd-space-5);
    margin: 0 0 var(--vd-space-6);
}

.event-details__flag {
    margin: 0 0 var(--vd-space-3);
    font-weight: 600;
    color: var(--vd-gold-ink);
}

.event-details dl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-space-5);
    margin: 0;
}

.event-details dt {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vd-ink-muted);
    margin: 0 0 0.2rem;
}

.event-details dd {
    margin: 0;
    font-weight: 600;
    color: var(--vd-navy);
}

.article-figure {
    margin: 0 0 var(--vd-space-6);
}

/* The About page's leadership spotlight (partials/team-spotlight.php).
   Reuses the .statement two-column grid — the portrait sits in the
   narrower track, biography and expertise in the wider one — so this adds
   only the portrait's own framing, matching the visual language already
   used for the Services diagram and the Settings-slot photographs. */
.team-spotlight__portrait {
    margin: 0;
}

.team-spotlight__portrait img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius-lg);
    box-shadow: var(--vd-shadow-md);
}

/* No photograph yet (the featured member hasn't had one uploaded and
   attached): drop the now-empty first column rather than leave a gap the
   width of an absent portrait. */
.team-spotlight--no-photo {
    grid-template-columns: minmax(0, 1fr);
}

.article-figure img {
    width: 100%;
    border-radius: var(--vd-radius-lg);
}

/* The "from evidence to results" process diagram on the Services index
   page (app/Views/services/index.php). Framed like a card rather than run
   full-bleed: it is a supplied brand asset, not photography, and reads
   better with breathing room than stretched edge-to-edge. */
.approach-diagram {
    max-width: 1100px;
    margin: 0 auto;
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    box-shadow: var(--vd-shadow-md);
}

.approach-diagram img {
    display: block;
    width: 100%;
    height: auto;
}

.article-figure figcaption {
    margin-top: var(--vd-space-2);
    font-size: 0.88rem;
    color: var(--vd-ink-muted);
}

.share-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.share-list a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--vd-border-strong);
    border-radius: var(--vd-radius);
    font-size: 0.9rem;
    color: var(--vd-navy);
    text-decoration: none;
}

.share-list a:hover {
    background: var(--vd-navy);
    color: #fff;
}

.article-aside {
    position: sticky;
    top: 100px;
    display: grid;
    gap: var(--vd-space-5);
}

@media (max-width: 980px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .article-aside {
        position: static;
    }
}

/* --------------------------------------------------------------- prose */

.prose {
    max-width: var(--vd-measure);
    font-size: 1.09rem;
    line-height: 1.72;
}

.prose > * + * {
    margin-top: var(--vd-space-4);
}

.prose h2 {
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
    margin-top: var(--vd-space-7);
}

.prose h3 {
    font-size: 1.28rem;
    margin-top: var(--vd-space-6);
}

.prose h4 {
    margin-top: var(--vd-space-5);
}

.prose ul,
.prose ol {
    padding-left: 1.35rem;
}

.prose li + li {
    margin-top: var(--vd-space-2);
}

.prose blockquote {
    margin: var(--vd-space-6) 0;
    padding: var(--vd-space-2) 0 var(--vd-space-2) var(--vd-space-5);
    border-left: 3px solid var(--vd-gold);
    font-family: var(--vd-font-display);
    font-size: 1.2rem;
    color: var(--vd-navy);
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

.prose pre {
    padding: var(--vd-space-4);
    background: var(--vd-navy-900);
    color: #eaf0ff;
    border-radius: var(--vd-radius);
    overflow-x: auto;
    font-size: 0.92rem;
}

.prose code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.92em;
}

.prose :not(pre) > code {
    padding: 0.1rem 0.35rem;
    background: var(--vd-surface-alt);
    border: 1px solid var(--vd-border);
    border-radius: 3px;
}

.prose img {
    border-radius: var(--vd-radius);
}

.prose figure {
    margin: var(--vd-space-6) 0;
}

.prose figcaption {
    margin-top: var(--vd-space-2);
    font-size: 0.9rem;
    color: var(--vd-ink-muted);
}

.table-scroll {
    overflow-x: auto;
    margin: var(--vd-space-5) 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.96rem;
}

.prose caption {
    caption-side: top;
    text-align: left;
    padding-bottom: var(--vd-space-2);
    color: var(--vd-ink-muted);
    font-size: 0.9rem;
}

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

.prose thead th {
    background: var(--vd-surface-alt);
    color: var(--vd-navy);
}

/* ---------------------------------------------------------------- forms */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vd-space-5);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

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

/* Two fields side by side may have hints of different lengths — "Geography"
   fits on one line where "Indicative deadline" wraps to two — which pushed
   one control lower than the other. The fields are equal-height grid items,
   so sending the control to the bottom of each keeps the inputs on a single
   line however the hints wrap. */
.field > input,
.field > select,
.field > textarea {
    margin-top: auto;
}

.field > label,
.field-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--vd-navy);
}

.field__hint {
    font-size: 0.87rem;
    color: var(--vd-ink-muted);
}

.field__optional {
    font-weight: 400;
    color: var(--vd-ink-muted);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='url'],
input[type='date'],
input[type='number'],
input[type='file'],
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: 0.6rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--vd-ink);
    background: #fff;
    border: 1px solid var(--vd-border-strong);
    border-radius: var(--vd-radius);
}

textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.6;
}

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--vd-navy) 50%), linear-gradient(135deg, var(--vd-navy) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.4rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--vd-focus);
    outline-offset: 1px;
    border-color: var(--vd-navy);
}

.field--error input,
.field--error select,
.field--error textarea {
    border-color: #a3121f;
    border-width: 2px;
}

.field__error {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    font-size: 0.9rem;
    font-weight: 600;
    color: #a3121f;
}

.field__error::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: #a3121f;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1;
}

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

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-space-4);
    align-items: center;
    margin-top: var(--vd-space-5);
}

.form-actions__note {
    font-size: 0.88rem;
    color: var(--vd-ink-muted);
    max-width: 46ch;
    margin: 0;
}

@media (max-width: 720px) {
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------- alerts */

.alert {
    display: flex;
    gap: var(--vd-space-3);
    padding: var(--vd-space-4) var(--vd-space-5);
    border: 1px solid var(--vd-border);
    border-left: 4px solid var(--vd-navy);
    border-radius: var(--vd-radius);
    background: var(--vd-surface-alt);
    margin-bottom: var(--vd-space-5);
}

.alert p:last-child {
    margin-bottom: 0;
}

.alert--success { border-left-color: #146c43; }
.alert--danger  { border-left-color: #a3121f; }
.alert--warning { border-left-color: var(--vd-gold-ink); }

.error-summary {
    border-left-color: #a3121f;
}

.error-summary ul {
    margin: var(--vd-space-2) 0 0;
    padding-left: 1.2rem;
}

.error-summary a {
    color: #a3121f;
    font-weight: 600;
}

/* --------------------------------------------------------- contact panel */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--vd-space-8);
    align-items: start;
}

.contact-card {
    padding: var(--vd-space-5);
    background: var(--vd-surface-alt);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius-lg);
}

.contact-card + .contact-card {
    margin-top: var(--vd-space-5);
}

.contact-card h2 {
    font-size: 1.12rem;
    margin-bottom: var(--vd-space-3);
}

.definition-list {
    display: grid;
    gap: var(--vd-space-3);
    margin: 0;
}

.definition-list dt {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vd-ink-muted);
}

.definition-list dd {
    margin: 0.15rem 0 0;
}

.numbered-steps {
    counter-reset: numbered;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--vd-space-4);
}


.numbered-steps li {
    position: relative;
    padding-left: 2.6rem;
}

.numbered-steps li::before {
    counter-increment: numbered;
    content: counter(numbered);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    background: var(--vd-navy);
    color: #fff;
    border-radius: 50%;
    font-size: 0.88rem;
    font-weight: 700;
}

/* Full-width variant: the five commissioning steps read as a sequence
   across the page instead of a tall list squeezed into a sidebar card. */
.numbered-steps--flow {
    /* 200px is chosen so the five steps sit on one row inside the 1180px
       container (5 x 202px + four 32px gaps = 1140px) rather than wrapping
       to a ragged 4 + 1. Narrower viewports wrap as they will. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--vd-space-6);
    counter-reset: numbered;
}

.numbered-steps--flow li {
    padding-left: 0;
    padding-top: 2.9rem;
}

.numbered-steps--flow li::before {
    top: 0;
}


@media (max-width: 980px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vd-space-6);
    }
}

/* --------------------------------------------------------- cookie banner */

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: #fff;
    border-top: 3px solid var(--vd-navy);
    box-shadow: 0 -8px 30px rgba(0, 20, 58, 0.15);
    padding: var(--vd-space-5) 0;
}

.cookie-banner__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--vd-space-5);
    align-items: center;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-space-3);
}

.cookie-banner p {
    margin: 0;
    font-size: 0.95rem;
}

@media (max-width: 800px) {
    .cookie-banner__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .cookie-banner__actions .vd-btn {
        flex: 1 1 160px;
    }
}

.consent-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--vd-space-3);
    padding: var(--vd-space-4);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius);
    background: #fff;
}

.consent-option + .consent-option {
    margin-top: var(--vd-space-3);
}

.consent-option input[type='checkbox'] {
    width: 22px;
    height: 22px;
    margin-top: 0.2rem;
    accent-color: var(--vd-navy);
}

.consent-option__label {
    font-weight: 600;
    color: var(--vd-navy);
}

.consent-option__description {
    margin: 0.2rem 0 0;
    font-size: 0.92rem;
    color: var(--vd-ink-muted);
}

/* ----------------------------------------------------------- data tables */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.data-table caption {
    caption-side: top;
    text-align: left;
    padding-bottom: var(--vd-space-3);
    color: var(--vd-ink-muted);
}

.data-table th,
.data-table td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--vd-border);
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    border-bottom: 2px solid var(--vd-navy);
    color: var(--vd-navy);
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------ notices */

.status-note {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-note--draft {
    background: #fdf0d5;
    color: #6a4a00;
}

.status-note--published {
    background: #d9f2e4;
    color: #0d5132;
}

.status-note--archived {
    background: #e8eaef;
    color: #333a45;
}

.preview-bar {
    background: var(--vd-gold);
    color: var(--vd-navy-900);
    padding: var(--vd-space-3) 0;
    font-weight: 600;
}

.preview-bar a {
    color: var(--vd-navy-900);
}

/* ------------------------------------------------------------ error page */

.error-page {
    padding-block: var(--vd-space-9);
    text-align: center;
}

.error-page__code {
    font-family: var(--vd-font-display);
    font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
    line-height: 1;
    color: var(--vd-gold);
    margin: 0 0 var(--vd-space-4);
}

.error-page__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-space-3);
    justify-content: center;
    margin-top: var(--vd-space-6);
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------------------------- printing */

@media print {
    .site-header,
    .site-footer,
    .cookie-banner,
    .cta-band,
    .skip-link {
        display: none !important;
    }

    body {
        font-size: 11pt;
        color: #000;
    }

    a[href^='http']::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
    }
}