/* ==========================================================================
   Aveneu Consultancy — main stylesheet
   An editorial professional-services look: serif headings, quiet rules, a lot
   of white space. Colours and fonts come from Admin → Settings → Theme, which
   writes the custom properties below into an inline <style> block in the head.
   ========================================================================== */

:root {
    --av-primary: #005EC4;
    --av-primary-dark: #00397A;
    --av-accent: #B9010D;
    --av-accent-light: #EAF2FC;
    --av-gold: #8FBFF5;
    --av-ink: #1D1814;
    --av-muted: #5B6472;
    --av-bg: #F4F7FB;
    --av-border: #DCE4EE;

    /* Channel values, so overlays can use the theme colours with an alpha */
    --av-primary-rgb: 0, 94, 196;
    --av-primary-dark-rgb: 0, 57, 122;
    --av-accent-rgb: 185, 1, 13;
    --av-radius: 0.5rem;
    --av-radius-btn: 0.25rem;
    --av-font-heading: 'Josefin Sans', 'Century Gothic', Futura, system-ui, sans-serif;
    --av-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --av-shadow-sm: 0 1px 2px rgba(0, 44, 94, .06);
    --av-shadow: 0 1px 3px rgba(0, 44, 94, .07), 0 12px 28px rgba(0, 44, 94, .07);
    --av-shadow-lg: 0 2px 6px rgba(0, 44, 94, .08), 0 24px 56px rgba(0, 44, 94, .14);
    --av-measure: 68ch;

    --bs-primary: var(--av-primary);
    --bs-body-color: var(--av-ink);
    --bs-body-font-family: var(--av-font-body);
    --bs-border-color: var(--av-border);
    --bs-link-color: var(--av-primary);
    --bs-link-hover-color: var(--av-accent);
    --bs-border-radius: var(--av-radius-btn);
    --bs-border-radius-lg: var(--av-radius);
}

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

body {
    font-family: var(--av-font-body);
    color: var(--av-ink);
    background: #fff;
    font-size: 1.0625rem;
    line-height: 1.75;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--av-font-heading);
    font-weight: 700;
    color: var(--av-primary);
    line-height: 1.18;
    letter-spacing: 0;
}

/* Josefin Sans carries a small x-height, so headings sit a touch larger than a
   serif would at the same nominal size. */
h3, h4, h5, h6 { font-weight: 600; }

p { margin-bottom: 1.1rem; }

a { color: var(--av-primary); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--av-accent); }

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

/* In-page anchors clear the sticky header */
[id] { scroll-margin-top: 92px; }
hr { border-color: var(--av-border); opacity: 1; }

::selection { background: var(--av-primary); color: #fff; }
:focus-visible { outline: 3px solid var(--av-accent); outline-offset: 2px; }

/* --------------------------------------------------------- brand lockup */

.navbar-brand, .footer-brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-mark { width: 48px; height: 48px; flex: none; }
.brand-words { display: flex; flex-direction: column; line-height: 1.12; }
/* Both lines echo the lettering inside the badge: a heavy neo-grotesque set
   in caps, the first line in the logo red, the second in the logo near-black. */
.brand-name {
    font-family: var(--av-font-body);
    font-weight: 800;
    font-size: 1.06rem;
    color: var(--av-accent);
    letter-spacing: .005em;
    text-transform: uppercase;
    white-space: nowrap;
}
.brand-sub {
    font-family: var(--av-font-body);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .245em;
    text-transform: uppercase;
    color: var(--av-ink);
    white-space: nowrap;
}
.footer-brand { margin-bottom: 1.25rem; }
/* 58px made the lockup 230px wide, which spilled out of its footer column and
   collided with the Services list. 44px keeps the whole lockup inside it. */
.footer-brand .brand-mark { width: 44px; height: 44px; }
/* The footer ground is too dark for the logo red, so the lockup goes light there. */
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: rgba(255, 255, 255, .7); }
.nav-panel-head .brand-mark { width: 44px; height: 44px; }

@media (max-width: 420px) {
    .brand-name { font-size: .88rem; }
    .brand-sub { font-size: .62rem; letter-spacing: .2em; }
    .brand-mark { width: 42px; height: 42px; }
}


.section { padding: 4.25rem 0; }
.section-tight { padding: 3rem 0; }
.section-light { background: var(--av-bg); }
.section-accent { background: var(--av-accent-light); }
.section-dark { background: var(--av-primary); color: rgba(255, 255, 255, .86); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark a { color: #fff; }

@media (min-width: 992px) {
    .section { padding: 6rem 0; }
    .section-tight { padding: 4rem 0; }
}

.text-muted-2 { color: var(--av-muted) !important; }
.measure { max-width: var(--av-measure); }

/* Thin rule used to separate editorial blocks */
.rule { height: 1px; background: var(--av-border); border: 0; margin: 0; }

/* -------------------------------------------------- section headings */

/* ---------------------------------------------------- section marker

   The chord: two points at different heights joined by one hairline, the
   motif the whole practice is built on. It replaces the uppercase eyebrow
   label that used to head every section. The ends carry the two brand
   colours because the two parties are never the same party.                */

.section-mark {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--av-border);
}
.section-mark-label {
    font-family: var(--av-font-body);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--av-ink);
}
.chord { flex: none; overflow: visible; }
.chord-line { stroke: var(--av-primary); opacity: .4; }
.chord-a { fill: var(--av-primary); }
.chord-b { fill: var(--av-accent); }

/* Centred section heads centre the lockup and narrow the rule to match. */
.section-head-center .section-mark {
    justify-content: center;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}

/* Dark grounds: the blue end goes white and the red end gold, since neither
   brand colour carries on deep blue. */
.section-dark .section-mark,
.page-hero .section-mark,
.hero .section-mark { border-bottom-color: rgba(255, 255, 255, .22); }
.section-dark .section-mark-label,
.page-hero .section-mark-label,
.hero .section-mark-label { color: #fff; }
.section-dark .chord-line,
.page-hero .chord-line,
.hero .chord-line { stroke: #fff; opacity: .5; }
.section-dark .chord-a,
.page-hero .chord-a,
.hero .chord-a { fill: #fff; }
.section-dark .chord-b,
.page-hero .chord-b,
.hero .chord-b { fill: var(--av-gold); }

/* In a hero the marker introduces the h1 on its own, with no rule to sit
   between the two. */
.page-hero .section-mark,
.hero .section-mark {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 1.25rem;
}

.section-title {
    font-size: clamp(1.9rem, 3.4vw, 2.85rem);
    margin-bottom: 1rem;
}
.section-subtitle {
    color: var(--av-muted);
    max-width: 58ch;
    margin-bottom: 0;
    font-size: 1.02rem;
}
.section-head-center { text-align: center; }
.section-head-center .section-subtitle { margin-inline: auto; }

/* Standfirst: the display face is doing enough work in the headline above it,
   so this stays in the reading face. */
.lead-display {
    font-family: var(--av-font-body);
    font-size: clamp(1.1rem, 1.6vw, 1.22rem);
    font-weight: 400;
    line-height: 1.65;
    color: var(--av-muted);
}

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

.btn {
    font-family: var(--av-font-body);
    font-weight: 600;
    font-size: .95rem;
    border-radius: var(--av-radius-btn);
    padding: .75rem 1.5rem;
    letter-spacing: .01em;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-brand { background: var(--av-primary); border: 1px solid var(--av-primary); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--av-primary-dark); border-color: var(--av-primary-dark); color: #fff; }

.btn-accent { background: var(--av-accent); border: 1px solid var(--av-accent); color: #fff; }
.btn-accent:hover, .btn-accent:focus { background: var(--av-primary); border-color: var(--av-primary); color: #fff; }

.btn-outline-brand { background: transparent; border: 1px solid var(--av-primary); color: var(--av-primary); }
.btn-outline-brand:hover { background: var(--av-primary); color: #fff; }

.btn-light-outline { background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
.btn-light-outline:hover { background: #fff; color: var(--av-primary); border-color: #fff; }

.btn-lg { padding: .95rem 1.9rem; font-size: 1rem; }
.btn-sm { padding: .45rem 1rem; font-size: .87rem; }

/* Text link with a moving arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .93rem;
    color: var(--av-accent);
}
.link-arrow i { transition: transform .18s ease; }
.link-arrow:hover i { transform: translateX(4px); }

/* ---------------------------------------------------------------- topbar */

.topbar {
    background: var(--av-primary-dark);
    color: rgba(255, 255, 255, .8);
    font-size: .84rem;
    padding: .5rem 0;
}
.topbar a { color: rgba(255, 255, 255, .8); }
.topbar a:hover { color: #fff; }
.topbar i { color: var(--av-gold); margin-right: .4rem; }
.topbar-social {
    display: inline-flex;
    width: 26px; height: 26px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}
.topbar-social i { margin: 0; color: #fff; font-size: .78rem; }
.topbar-social:hover { background: var(--av-gold); }
.topbar-social:hover i { color: var(--av-primary-dark); }

/* ---------------------------------------------------------------- navbar */

.site-navbar {
    background: #fff;
    border-bottom: 1px solid var(--av-border);
    padding: .75rem 0;
    z-index: 1030;
}
.site-navbar.is-stuck { box-shadow: var(--av-shadow-sm); }

.site-navbar .nav-link {
    color: var(--av-ink);
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem .8rem;
    position: relative;
}
.site-navbar .nav-link:hover { color: var(--av-accent); }
.site-navbar .nav-link.active { color: var(--av-primary); font-weight: 600; }
.site-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: .8rem; right: .8rem; bottom: .15rem;
    height: 1px;
    background: var(--av-accent);
}
.nav-arrow { opacity: .35; }

.nav-burger {
    width: 44px; height: 40px;
    border: 1px solid var(--av-border);
    background: #fff;
    border-radius: var(--av-radius-btn);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
}
.nav-burger span { display: block; width: 20px; height: 1.5px; background: var(--av-primary); transition: transform .25s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1199.98px) {
    /* The off-canvas panel is parked off screen, so the document must not
       scroll sideways to reach it. clip is used rather than hidden because it
       does not turn the page into a scroll container, which would break the
       sticky header. */
    html, body { overflow-x: clip; }
    @supports not (overflow: clip) {
        html, body { overflow-x: hidden; }
    }

    /* The menu panel sits inside the sticky navbar's stacking context, so the
       back-to-top button has to get out of the way while the menu is open. */
    body.nav-open .back-to-top { display: none; }

    .site-nav-panel {
        position: fixed;
        visibility: hidden;
        top: 0; right: 0; bottom: 0;
        width: min(86vw, 360px);
        background: #fff;
        box-shadow: -20px 0 50px rgba(var(--av-primary-dark-rgb), .22);
        transform: translateX(105%);
        transition: transform .28s ease;
        padding: 1.25rem 1.25rem 2rem;
        overflow-y: auto;
        z-index: 1080;
        display: flex;
        flex-direction: column;
    }
    .site-nav-panel.open { transform: translateX(0); visibility: visible; }
    .site-navbar .navbar-nav { width: 100%; }
    .site-navbar .nav-link {
        display: flex; align-items: center; justify-content: space-between;
        padding: .85rem .25rem;
        border-bottom: 1px solid var(--av-border);
        font-size: 1rem;
    }
    .site-navbar .nav-link.active::after { display: none; }
    .nav-item-cta .btn { width: 100%; margin-top: 1rem; }
    .nav-backdrop {
        position: fixed; inset: 0;
        background: rgba(var(--av-primary-dark-rgb), .5);
        opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
        z-index: 1070;
    }
    .nav-backdrop.show { opacity: 1; pointer-events: auto; }
    body.nav-open { overflow: hidden; }
}

.nav-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--av-border);
    margin-bottom: .5rem;
}
.nav-panel-foot { margin-top: auto; padding-top: 1.25rem; }
.nav-panel-call {
    display: flex; align-items: center; gap: .75rem;
    background: var(--av-bg);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: .85rem 1rem;
    color: var(--av-primary);
}
.nav-panel-call .npc-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--av-primary); color: #fff;
    display: grid; place-items: center; flex: none;
}
.nav-panel-call small { display: block; font-size: .74rem; color: var(--av-muted); }
.nav-panel-social { display: flex; gap: .5rem; margin-top: .9rem; }
.nav-panel-social a {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--av-bg); color: var(--av-primary);
    display: grid; place-items: center;
}
.nav-panel-social a:hover { background: var(--av-primary); color: #fff; }

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

.hero {
    position: relative;
    background: var(--av-primary-dark);
    color: #fff;
    overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* The live artwork, drawn by assets/js/hero-network.js. It is a sibling of
   the image and sits under ::after, so the scrim attenuates it exactly as it
   attenuates the still. It is out of flow and has no intrinsic size, so it
   cannot shift the layout however late the script runs, and it fades in only
   once it has actually painted a frame. */
.hero-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .5s ease;
}
.hero-media.canvas-live .hero-canvas { opacity: 1; }

.hero-media::after {
    content: '';
    position: absolute; inset: 0;
    /* The scrim stays heavy over the column the heading and the buttons sit
       in and opens up to the right of it, where the artwork is all there is to
       look at. Before, the far end sat at .58 and the network was barely
       legible anywhere, which is no way to treat a picture that now moves. */
    background: linear-gradient(100deg,
        rgba(var(--av-primary-dark-rgb), .94) 0%,
        rgba(var(--av-primary-dark-rgb), .84) 34%,
        rgba(var(--av-primary-dark-rgb), .62) 62%,
        rgba(var(--av-primary-rgb), .42) 100%);
}

/* A canvas prints as a blank box in several browsers, so the still is what
   goes on paper. */
@media print {
    .hero-canvas { display: none !important; }
}
.hero-inner { position: relative; padding-block: 4.5rem 4rem; }
@media (min-width: 992px) { .hero-inner { padding-block: 7.5rem 6.5rem; } }

.hero h1 {
    color: #fff;
    font-size: clamp(2.25rem, 4.8vw, 3.7rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
    letter-spacing: 0;
}
.hero h1 span { color: var(--av-gold); font-style: italic; }
.hero-sub {
    color: rgba(255, 255, 255, .84);
    font-size: 1.1rem;
    max-width: 56ch;
    margin-bottom: 2rem;
}


/* The panel holds white text over whatever the artwork happens to put behind
   it, which used to be a lightening wash over a bright dot: the numbered list
   measured 3.1 to 1 against its own backdrop, short of the 4.5 to 1 small text
   needs. Washing the panel with the deep blue instead of with white takes it to
   4.6 to 1, and reads better over a network that now moves besides. */
.hero-panel {
    background: rgba(var(--av-primary-dark-rgb), .5);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--av-radius);
    padding: 1.75rem;
    backdrop-filter: blur(3px);
}
.hero-panel h2 { color: #fff; font-size: 1.25rem; margin-bottom: 1.1rem; }
.hero-panel ol { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.hero-panel li {
    counter-increment: step;
    display: flex; gap: .9rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: .95rem;
    color: rgba(255, 255, 255, .84);
}
.hero-panel li:last-child { border-bottom: 0; }
.hero-panel li::before {
    content: counter(step);
    font-family: var(--av-font-heading);
    color: var(--av-gold);
    font-size: 1rem;
    line-height: 1.5;
    flex: none;
}

/* Inner page hero */
.page-hero {
    position: relative;
    background: var(--av-primary);
    color: #fff;
    padding: 3.25rem 0 2.75rem;
    overflow: hidden;
}
.page-hero img.page-hero-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .32;
}
.page-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--av-primary-dark) 12%, rgba(var(--av-primary-rgb), .74) 100%);
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 3.8vw, 3.1rem); }
.page-hero p { color: rgba(255, 255, 255, .82); max-width: 62ch; margin-bottom: 0; }
.page-hero .section-mark { margin-bottom: 1rem; }
@media (min-width: 992px) { .page-hero { padding: 4.75rem 0 4rem; } }

.breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid var(--av-border);
    font-size: .84rem;
}
.breadcrumb-bar .breadcrumb { margin: 0; padding: .75rem 0; }
.breadcrumb-bar a { color: var(--av-muted); }
.breadcrumb-bar .breadcrumb-item.active { color: var(--av-primary); font-weight: 500; }

/* ------------------------------------------------------------ trust strip */

.trust-strip { background: #fff; border-bottom: 1px solid var(--av-border); }
.trust-item {
    display: flex; align-items: center; gap: .75rem;
    padding: 1.15rem 0;
    font-size: .92rem;
    color: var(--av-muted);
}
.trust-item i { color: var(--av-accent); font-size: 1.05rem; flex: none; }

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

.card-soft {
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    height: 100%;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card-soft:hover { border-color: var(--av-accent); box-shadow: var(--av-shadow); }

.icon-badge {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--av-accent-light);
    color: var(--av-accent);
    display: grid; place-items: center;
    font-size: 1.2rem;
    flex: none;
}
.icon-badge-lg { width: 64px; height: 64px; font-size: 1.5rem; }
.icon-badge-square { border-radius: var(--av-radius); }
.icon-badge-dark { background: rgba(255, 255, 255, .1); color: var(--av-gold); }

/* Service card */
.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 1.9rem 1.75rem;
    color: var(--av-ink);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.service-card:hover { border-color: var(--av-accent); box-shadow: var(--av-shadow); transform: translateY(-2px); color: var(--av-ink); }
.service-card .service-index {
    font-family: var(--av-font-heading);
    font-size: .95rem;
    color: var(--av-accent);
    letter-spacing: .1em;
    margin-bottom: 1.1rem;
    display: block;
}
.service-card h3 { font-size: 1.32rem; margin-bottom: .6rem; }
.service-card p { color: var(--av-muted); font-size: .96rem; margin-bottom: 1.25rem; }
.service-card .link-arrow { margin-top: auto; }

/* Audience card */
.audience-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    overflow: hidden;
    color: var(--av-ink);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.audience-card:hover { border-color: var(--av-accent); box-shadow: var(--av-shadow); transform: translateY(-2px); color: var(--av-ink); }
.audience-card .audience-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--av-bg); }
.audience-card .audience-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.audience-card:hover .audience-media img { transform: scale(1.04); }
.audience-card .audience-body { padding: 1.5rem; }
.audience-card h3 { font-size: 1.28rem; margin: .9rem 0 .5rem; }
.audience-card p { color: var(--av-muted); font-size: .94rem; margin-bottom: 1rem; }

/* Insight card */
.insight-card {
    display: flex; flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.insight-card:hover { border-color: var(--av-accent); box-shadow: var(--av-shadow); transform: translateY(-2px); }
.insight-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--av-bg); }
.insight-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.insight-card:hover .insight-media img { transform: scale(1.04); }
.insight-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.insight-meta {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--av-muted);
    margin-bottom: .75rem;
}
.insight-meta .cat { color: var(--av-accent); font-weight: 600; }
.insight-card h3 { font-size: 1.28rem; margin-bottom: .6rem; }
.insight-card h3 a { color: var(--av-primary); }
.insight-card h3 a:hover { color: var(--av-accent); }
.insight-card p { color: var(--av-muted); font-size: .95rem; }
.insight-card .link-arrow { margin-top: auto; }

/* Numbered process */
.process-list { counter-reset: stepcount; list-style: none; padding: 0; margin: 0; }
.process-list > li {
    counter-increment: stepcount;
    position: relative;
    padding: 1.5rem 0 1.5rem 4.25rem;
    border-bottom: 1px solid var(--av-border);
}
.process-list > li:last-child { border-bottom: 0; }
.process-list > li::before {
    content: counter(stepcount, decimal-leading-zero);
    position: absolute;
    left: 0; top: 1.4rem;
    font-family: var(--av-font-heading);
    font-size: 1.5rem;
    color: var(--av-accent);
}
.process-list h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.process-list p { color: var(--av-muted); font-size: .96rem; margin-bottom: 0; }

/* Why-us / value cards */
.feature-item { display: flex; gap: 1.1rem; }
.feature-item h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.feature-item p { color: var(--av-muted); font-size: .95rem; margin-bottom: 0; }

/* Stats */
.stat-tile { padding: 1.25rem 0; }
.stat-tile .stat-value {
    font-family: var(--av-font-heading);
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    font-weight: 600;
    color: #fff;
    line-height: 1;
}
.stat-tile .stat-label { color: rgba(255, 255, 255, .75); font-size: .9rem; margin-top: .5rem; max-width: 22ch; }
.stat-tile i { color: var(--av-gold); font-size: 1.1rem; margin-bottom: .9rem; display: block; }

/* Coverage chips */
.coverage-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.coverage-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--av-border);
    background: #fff;
    border-radius: 100px;
    padding: .45rem 1.1rem;
    font-size: .92rem;
    color: var(--av-ink);
}
.coverage-chip i { color: var(--av-accent); font-size: .8rem; }
.coverage-chip:hover { border-color: var(--av-accent); color: var(--av-primary); }
.coverage-chip.is-active {
    background: var(--av-primary);
    border-color: var(--av-primary);
    color: #fff;
}
.coverage-chip.is-active i, .coverage-chip.is-active .text-muted-2 { color: rgba(255, 255, 255, .7) !important; }

.coverage-card {
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 1.4rem 1.5rem;
    background: #fff;
    height: 100%;
}
.coverage-card h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.coverage-card .region { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--av-accent); margin-bottom: .7rem; }
.coverage-card p { color: var(--av-muted); font-size: .93rem; margin-bottom: 0; }

/* A coverage card that is itself the link. The hub pages and the nearby block
   make the whole card clickable rather than hanging a "read more" off it, so
   the card needs the hover and focus states a bare div never had. The heading
   keeps the ink colour so it does not read as a second link inside the first. */
a.coverage-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.coverage-card h3 { color: var(--av-ink); }
a.coverage-card:hover,
a.coverage-card:focus-visible {
    border-color: var(--av-accent);
    box-shadow: 0 10px 28px rgba(19, 33, 46, .08);
    transform: translateY(-2px);
}
a.coverage-card:focus-visible { outline: 2px solid var(--av-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    a.coverage-card { transition: none; }
    a.coverage-card:hover, a.coverage-card:focus-visible { transform: none; }
}

/* Testimonials */
.testimonial-card {
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 1.9rem 1.75rem;
    height: 100%;
}
.testimonial-card .stars { color: var(--av-accent); font-size: .85rem; margin-bottom: 1rem; }
.testimonial-card blockquote {
    font-family: var(--av-font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--av-primary);
    margin-bottom: 1.25rem;
}
.testimonial-who { display: flex; align-items: center; gap: .8rem; }
.testimonial-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--av-accent-light);
    color: var(--av-accent);
    display: grid; place-items: center;
    font-family: var(--av-font-heading);
    font-weight: 600;
    flex: none;
}
.testimonial-who strong { display: block; font-size: .95rem; color: var(--av-primary); font-weight: 600; }
.testimonial-who span { font-size: .82rem; color: var(--av-muted); }

/* Engagement examples */
.engagement-card {
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    background: #fff;
    padding: 1.75rem;
    height: 100%;
}
.engagement-card h3 { font-size: 1.15rem; margin: 1rem 0 1rem; }
.engagement-card dt {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--av-accent); font-weight: 600; margin-bottom: .2rem;
}
.engagement-card dd { color: var(--av-muted); font-size: .94rem; margin-bottom: 1rem; }
.engagement-card dd:last-child { margin-bottom: 0; }

/* Team */
.team-card { text-align: center; padding: 1.75rem 1.25rem; }
.team-card img {
    width: 104px; height: 104px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.1rem;
}
.team-card h3 { font-size: 1.1rem; margin-bottom: .1rem; }
.team-card .role { color: var(--av-accent); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .75rem; }
.team-card p { color: var(--av-muted); font-size: .92rem; margin-bottom: 0; }

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

.cta-band { position: relative; background: var(--av-primary); color: #fff; overflow: hidden; }
.cta-band img.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.cta-band::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(95deg, var(--av-primary-dark) 18%, rgba(var(--av-primary-rgb), .72) 100%);
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.cta-band p { color: rgba(255, 255, 255, .84); max-width: 60ch; margin-bottom: 0; }

/* ------------------------------------------------------------ newsletter */

.newsletter-band { background: var(--av-bg); border-top: 1px solid var(--av-border); }
.newsletter-band h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.newsletter-band p { color: var(--av-muted); margin-bottom: 0; }
.newsletter-form .form-control { padding: .8rem 1rem; }

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

.site-footer {
    background: var(--av-primary-dark);
    color: rgba(255, 255, 255, .7);
    padding-top: 3.25rem;
    font-size: .92rem;
}

/* The blurb sets the column width; without a cap it runs the full four
   columns on a wide screen and drags the whole footer taller. */
.footer-about {
    max-width: 34ch;
    margin-bottom: 1.1rem;
    color: rgba(255, 255, 255, .66);
    line-height: 1.6;
}
.site-footer h2,
.site-footer h3 {
    color: #fff;
    font-family: var(--av-font-body);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 1.25rem;
}
.site-footer a { color: rgba(255, 255, 255, .7); }
.site-footer a:hover { color: var(--av-gold); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: .75rem; margin-bottom: .85rem; }
.footer-contact i { color: var(--av-gold); margin-top: .35rem; flex: none; font-size: .85rem; }
.footer-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    display: grid; place-items: center;
}
.footer-social a:hover { background: var(--av-gold); color: var(--av-primary-dark); }
.footer-disclosure {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 2.25rem;
    padding-top: 1.35rem;
    font-size: .81rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .52);
}
.footer-disclosure i { opacity: .65; }
/* Brokerage registration line. Regulatory small print, so it is quiet but
   legible: it must never fall below the contrast floor the way a decorative
   caption might. */
.footer-reco {
    margin: 0 0 .85rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .82rem;
    color: rgba(255, 255, 255, .72);
}

/* Designer credit.
   The only outbound link in the footer, so it gets a deliberate hover rather
   than the generic one: the rule wipes in from the left and, on the way out,
   retreats to the right. The asymmetric transform-origin is what makes it read
   as drawn rather than merely toggled. */
.designer-credit {
    display: inline-flex;
    align-items: baseline;
    gap: .32rem;
    white-space: nowrap;
}
.designer-credit a {
    position: relative;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .005em;
    transition: color .22s ease;
}
.designer-credit a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .3s cubic-bezier(.33, 0, .2, 1);
}
.designer-credit a:hover,
.designer-credit a:focus-visible {
    color: var(--av-gold);
}
.designer-credit a:hover::after,
.designer-credit a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}
.designer-credit a:focus-visible {
    outline: 2px solid var(--av-gold);
    outline-offset: 4px;
    border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .designer-credit a,
    .designer-credit a::after { transition: none; }
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 1.25rem;
    padding: 1.1rem 0 1.35rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .5);
}

/* ------------------------------------------------------------ article body */

.prose { max-width: var(--av-measure); }
.prose p { margin-bottom: 1.15rem; }
.prose > p:first-of-type { font-size: 1.12rem; color: var(--av-ink); }
.prose h2 { font-size: 1.75rem; margin: 2.5rem 0 1rem; }
.prose h3 { font-size: 1.4rem; margin: 2.25rem 0 .85rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--av-accent); }
.prose blockquote {
    border-left: 2px solid var(--av-accent);
    padding: .25rem 0 .25rem 1.5rem;
    margin: 1.75rem 0;
    font-family: var(--av-font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--av-primary);
}
.prose a { color: var(--av-accent); text-decoration: underline; text-underline-offset: 2px; }
.prose img { border-radius: var(--av-radius); margin: 1.5rem 0; }

.article-hero-image { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--av-radius); }

.toc-card {
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 1.4rem 1.5rem;
    background: var(--av-bg);
}
.toc-card h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-family: var(--av-font-body); color: var(--av-muted); margin-bottom: .9rem; }

.sticky-side { position: sticky; top: 92px; }

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

.form-control, .form-select {
    border-color: var(--av-border);
    border-radius: var(--av-radius-btn);
    padding: .7rem .9rem;
    font-size: .97rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--av-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--av-accent-rgb), .16);
}
.form-label { font-weight: 500; font-size: .9rem; margin-bottom: .35rem; }
textarea.form-control { min-height: 140px; }

.form-card {
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 1.75rem;
}
@media (min-width: 992px) { .form-card { padding: 2.5rem; } }
.form-step-title {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--av-accent); font-weight: 600;
    padding-bottom: .6rem; margin: 2rem 0 1.25rem;
    border-bottom: 1px solid var(--av-border);
}
.form-step-title:first-child { margin-top: 0; }

/* Role chooser on the consultation form */
.role-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.role-option input { position: absolute; opacity: 0; pointer-events: none; }
.role-option label {
    display: block;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 1rem;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
    height: 100%;
}
.role-option label i { display: block; font-size: 1.2rem; color: var(--av-accent); margin-bottom: .5rem; }
.role-option label span { font-size: .92rem; font-weight: 500; }
.role-option input:checked + label { border-color: var(--av-accent); background: var(--av-accent-light); }
.role-option input:focus-visible + label { outline: 3px solid var(--av-accent); outline-offset: 2px; }

/* ------------------------------------------------------------- accordion */

.accordion-item { border: 0; border-bottom: 1px solid var(--av-border); border-radius: 0 !important; background: transparent; }
.accordion-button {
    font-family: var(--av-font-heading);
    font-weight: 600;
    color: var(--av-primary);
    background: transparent;
    font-size: 1.18rem;
    padding: 1.2rem 2.5rem 1.2rem 0;
}
.accordion-button:not(.collapsed) { background: transparent; color: var(--av-accent); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-button::after { margin-left: auto; }
.accordion-body { color: var(--av-muted); padding: 0 2.5rem 1.4rem 0; }

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

.pagination .page-link {
    color: var(--av-primary);
    border-color: var(--av-border);
    margin: 0 .15rem;
    min-width: 42px;
    text-align: center;
    border-radius: var(--av-radius-btn) !important;
}
.pagination .page-item.active .page-link { background: var(--av-primary); border-color: var(--av-primary); color: #fff; }

.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--av-bg);
    border: 1px dashed var(--av-border);
    border-radius: var(--av-radius);
}
.empty-state i { font-size: 2.2rem; color: var(--av-border); margin-bottom: 1rem; }

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

.ratio-photo { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--av-radius); }
.ratio-wide { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-radius: var(--av-radius); }
.shadow-soft { box-shadow: var(--av-shadow); }
.bg-brand { background: var(--av-primary) !important; }
.bg-paper { background: var(--av-bg) !important; }
.text-brand { color: var(--av-primary) !important; }
.text-accent { color: var(--av-accent) !important; }
.rounded-brand { border-radius: var(--av-radius) !important; }
.fs-small { font-size: .88rem; }
.flex-none { flex: none; }
.alert { border-radius: var(--av-radius-btn); }

/* Google drops the reCAPTCHA v3 badge into the bottom right corner, exactly
   where this button lives, so on a page carrying the badge the button steps
   up above it rather than sitting on top of it. */
body:has(.grecaptcha-badge) .back-to-top { bottom: 5.5rem; }

.back-to-top {
    position: fixed;
    right: 1rem; bottom: 1rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--av-primary);
    color: #fff;
    box-shadow: var(--av-shadow);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 1040;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--av-accent); transform: translateY(-2px); }

@media print {
    .site-navbar, .topbar, .site-footer, .back-to-top, .cta-band, .newsletter-band { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


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

   The footer used to stretch every column to the height of the tallest, which
   left a dead band under the short ones, and it carried a "More" heading
   nested inside the Who we serve column. Columns are now top-aligned and the
   link groups sit on one rhythm. */

.site-footer h2,
.site-footer h3 {
    font-size: .72rem;
    letter-spacing: .15em;
    margin-bottom: .95rem;
    color: rgba(255, 255, 255, .95);
}
.footer-links li { margin-bottom: .45rem; }
.footer-links li:last-child { margin-bottom: 0; }
.footer-links a,
.footer-contact a { text-decoration: none; }
.footer-links a:hover { color: var(--av-gold); }

.footer-contact li { margin-bottom: .7rem; line-height: 1.5; }
.footer-contact li:last-child { margin-bottom: 0; }
.footer-contact i { font-size: .8rem; opacity: .7; }

.footer-social { margin-top: 1.1rem; }

.footer-brand { margin-bottom: 1rem; }

@media (max-width: 991.98px) {
    .site-footer { padding-top: 2.5rem; }
    .footer-about { max-width: none; }
}
/* An email address is one unbreakable token. In a narrow column it pushed the
   whole page sideways, so long values wrap instead of overflowing. */
.footer-contact a,
.footer-contact span { overflow-wrap: break-word; min-width: 0; }
.footer-contact li { align-items: flex-start; }

/* Contact details sit a notch smaller so a full email address fits its column
   on one line instead of breaking a single character onto the next. */
.footer-contact { font-size: .86rem; }

/* In the footer the lockup stands in a narrow column, where mark-beside-name
   is 16px too wide and pushes into the Services list. Stacking it fits, and
   reads as a deliberate footer treatment rather than a squeezed header one. */
.footer-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
}