/* =====================================================================
   Engage Partners - public website theme
   Palette sampled from the company logo:
     royal blue  #2C4ACF   |   magenta  #F7037C   |   ink  #282828
   ===================================================================== */

:root {
    /* Brand */
    --navy-900: #0b1233;
    --navy-800: #131c47;
    --navy-700: #1c2a63;
    --navy-600: #26398c;
    --blue-600: #2439a8;
    --blue-500: #2c4acf;
    --blue-400: #6379e2;
    --blue-100: #dbe1fa;
    --blue-50:  #eff2fe;

    /* Magenta accent from the wordmark */
    --pink-600: #d1026a;
    --pink-500: #f7037c;
    --pink-100: #fcd6e7;
    --pink-50:  #fff0f6;

    /* Neutrals */
    --ink:      #10202f;
    --body:     #4a5b6b;
    --muted:    #7a8b9a;
    --line:     #e2e9f0;
    --line-2:   #eef3f8;
    --surface:  #ffffff;
    --surface-2:#f6f9fc;
    --surface-3:#eef4fa;

    /* Accents */
    --gold:     #d4a129;
    --green:    #17915f;
    --red:      #d0342c;

    /* Type - Segoe UI first, with a close cross-platform fallback chain */
    --font-sans:  'Segoe UI', 'Segoe UI Variable Text', system-ui, -apple-system,
                  BlinkMacSystemFont, 'Helvetica Neue', Roboto, Arial, sans-serif;
    /* Display face for headings. Set to the same stack so the whole site is
       Segoe UI; point this at a serif again if the editorial look is wanted. */
    --font-serif: 'Segoe UI', 'Segoe UI Variable Display', system-ui, -apple-system,
                  BlinkMacSystemFont, 'Helvetica Neue', Roboto, Arial, sans-serif;

    /* Layout */
    --container: 1240px;
    --radius:    4px;
    --radius-lg: 8px;
    --header-h:  74px;

    /* Vertical rhythm - tune the whole page's density from these three */
    --section-y:    clamp(42px, 4.6vw, 72px);
    --section-y-sm: clamp(30px, 3.2vw, 46px);
    --gap:          18px;

    --shadow-sm: 0 1px 2px rgba(7, 39, 66, .06), 0 1px 3px rgba(7, 39, 66, .04);
    --shadow-md: 0 4px 16px rgba(7, 39, 66, .08);
    --shadow-lg: 0 18px 48px rgba(7, 39, 66, .14);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.62;
    color: var(--body);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--navy-700); }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
p { margin: 0 0 1rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .75rem;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
}

/* Segoe UI needs a touch more weight than a serif to hold a large headline */
h1 { font-family: var(--font-serif); font-size: clamp(1.85rem, 3.5vw, 2.8rem); font-weight: 700; letter-spacing: -.025em; }
h2 { font-family: var(--font-serif); font-size: clamp(1.42rem, 2.3vw, 1.95rem); font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }

::selection { background: var(--blue-500); color: #fff; }

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

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 999;
    background: var(--navy-800); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------ utilities */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; }

.section { padding: var(--section-y) 0; }
.section-sm { padding: var(--section-y-sm) 0; }
.section-tint {
    background: var(--surface-2);
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
}
.section-dark { background: var(--navy-900); color: #b9cbdb; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-3 { margin-top: 1.1rem; }
.lead { font-size: 1.02rem; line-height: 1.68; color: var(--body); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .75rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--blue-600); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--pink-500); }
.section-dark .eyebrow { color: #9aabf5; }
.section-dark .eyebrow::before { background: var(--pink-500); }

.section-head { max-width: 700px; margin-bottom: clamp(24px, 2.6vw, 38px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head p { font-size: 1rem; margin-bottom: 0; }
.section-head h2 { margin-bottom: .5rem; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 28px;
    font-size: .93rem; font-weight: 600; letter-spacing: .01em;
    border: 1px solid transparent; border-radius: var(--radius);
    cursor: pointer; text-align: center; white-space: nowrap;
    transition: all .22s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .22s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary { background: var(--blue-500); color: #fff; }
.btn-primary:hover { background: var(--navy-800); color: #fff; }

.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--blue-500); color: #fff; }

.btn-outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--navy-800); background: var(--navy-800); color: #fff; }

.btn-ghost-light { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: #fff; color: var(--navy-900); border-color: #fff; }

.btn-white { background: #fff; color: var(--navy-900); }
.btn-white:hover { background: var(--blue-500); color: #fff; }

.btn-sm { padding: 10px 18px; font-size: .85rem; }
.btn-lg { padding: 17px 36px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }

.link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .92rem; color: var(--blue-600);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .22s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- header */
.topbar {
    position: relative;
    background: var(--navy-900); color: #93aec5;
    font-size: .8rem; padding: 8px 0;
}
/* Hairline in the brand gradient rather than a flat grey rule */
.topbar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, var(--blue-500) 0%, #7d2eae 45%, var(--pink-500) 100%);
    opacity: .65;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar-contact { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.topbar-contact > * { padding: 0 18px; position: relative; }
.topbar-contact > *:first-child { padding-left: 0; }
/* Thin separators between the contact items */
.topbar-contact > * + *::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 12px; background: rgba(255,255,255,.16);
}
.topbar a { color: #a9c0d5; display: inline-flex; align-items: center; gap: 7px; transition: color .2s var(--ease); }
.topbar a:hover { color: #fff; }
.topbar svg { width: 13px; height: 13px; color: var(--blue-400); }

.topbar-social { display: flex; gap: 6px; }
.topbar-social a {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.07); color: #9db2cd;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.topbar-social a:hover { background: var(--blue-500); color: #fff; transform: translateY(-1px); }
.topbar-social svg { width: 13px; height: 13px; color: currentColor; }

/* Solid, deliberately. A frosted `backdrop-filter` here composites the mega
   panel into the header's filtered layer and renders it see-through. */
.site-header {
    position: sticky; top: 0; z-index: 200;
    background: #fff;
    border-bottom: 1px solid var(--line);
    transition: box-shadow .28s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(11, 18, 51, .09); }

/* Reading progress, in the brand gradient, along the header's bottom edge */
.scroll-progress {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    pointer-events: none; overflow: hidden;
}
.scroll-progress span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--blue-500) 0%, #7d2eae 55%, var(--pink-500) 100%);
    transition: width .1s linear;
}

.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; min-height: var(--header-h);
    transition: min-height .28s var(--ease);
}
/* Compact the bar once the page is scrolled */
.site-header.is-stuck .header-inner { min-height: 66px; }
.site-header.is-stuck .brand img { max-height: 42px; }

/* flex:none on desktop so the logo keeps its full height instead of being
   squeezed by the nav; it is allowed to shrink again in the mobile query. */
.brand { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; }
.brand img { max-height: 54px; max-width: 100%; width: auto; transition: max-height .28s var(--ease); }
.brand-mark {
    width: 46px; height: 46px; flex: none; border-radius: 6px;
    background: linear-gradient(135deg, var(--blue-500), var(--navy-800));
    color: #fff; display: grid; place-items: center;
    font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em;
}
.brand-text { line-height: 1.15; }
.brand-name { font-family: var(--font-serif); font-size: 1.22rem; font-weight: 600; color: var(--navy-900); letter-spacing: -.02em; }
.brand-tag { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* Explicit margin/padding reset: this is a <ul>, so the global
   `ul { margin: 0 0 1rem; padding-left: 1.25rem }` would otherwise add a 16px
   bottom margin and push every link 8px above the bar's centre line. */
.main-nav {
    display: flex; align-items: center; gap: 2px;
    margin: 0 0 0 auto; padding: 0; list-style: none;
}
.main-nav > li { position: relative; list-style: none; }
/* Scoped to the top level only - the mega panels live inside .main-nav and
   must not inherit the nav link's padding, colour or nowrap. */
.main-nav > li > a {
    position: relative; display: block; padding: 11px 14px;
    font-size: .92rem; font-weight: 500; color: var(--ink);
    white-space: nowrap;
    transition: color .22s var(--ease);
}
/* Gradient underline that grows from the centre, instead of a filled pill */
.main-nav > li > a::before {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue-500), var(--pink-500));
    transform: scaleX(0); transform-origin: center;
    transition: transform .3s var(--ease);
}
.main-nav > li > a:hover, .main-nav > li.active > a { color: var(--blue-600); }
.main-nav > li > a:hover::before,
.main-nav > li.active > a::before,
.main-nav > li.has-mega.is-open > a::before { transform: scaleX(1); }

.main-nav ul { list-style: none; margin: 0; padding: 0; }

.has-children > a::after {
    content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.submenu {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 232px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .2s var(--ease); z-index: 30;
}
.main-nav li:hover > .submenu,
.main-nav li:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
    display: block; padding: 10px 14px; font-size: .89rem; font-weight: 500;
    color: var(--ink); border-radius: var(--radius);
}
.submenu a:hover { color: var(--blue-600); background: var(--blue-50); }

.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }
/* Brand-gradient CTA with a soft glow that shifts on hover */
.header-cta .btn-primary {
    background: linear-gradient(118deg, var(--blue-500) 0%, #7d2eae 55%, var(--pink-500) 130%);
    background-size: 160% 100%;
    background-position: 0% 0%;
    box-shadow: 0 4px 14px rgba(44, 74, 207, .26);
    transition: background-position .45s var(--ease), box-shadow .28s var(--ease), transform .2s var(--ease);
}
.header-cta .btn-primary:hover {
    background-position: 100% 0%;
    box-shadow: 0 8px 22px rgba(247, 3, 124, .32);
    transform: translateY(-1px);
}

.nav-toggle {
    display: none; width: 44px; height: 44px; border: 1px solid var(--line);
    border-radius: var(--radius); background: #fff; padding: 0;
    align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); transition: all .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */
.hero {
    position: relative; background: var(--navy-900); color: #cddced;
    overflow: hidden;
}
.hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(900px 420px at 88% 12%, rgba(44,74,207,.34), transparent 62%),
        radial-gradient(620px 380px at 8% 88%, rgba(247,3,124,.14), transparent 65%);
}
.hero-slides { position: relative; }
.hero-slide {
    display: none;
    padding: clamp(54px, 6.4vw, 92px) 0 clamp(46px, 5.2vw, 76px);
    position: relative; z-index: 2;
}
/* A slide with a photograph keeps it behind a heavy brand-navy wash so the
   headline always clears WCAG contrast. */
.hero-slide.has-bg { background-size: cover; background-position: center; }
/* Dark where the headline sits, clearing towards the right so the photograph
   is actually visible. Text side stays well above AA contrast. */
.hero-slide.has-bg::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background:
        linear-gradient(97deg,
            rgba(9,15,44,.96) 0%,
            rgba(9,15,44,.90) 32%,
            rgba(9,15,44,.62) 58%,
            rgba(13,22,64,.40) 100%),
        linear-gradient(to top, rgba(9,15,44,.55) 0%, rgba(9,15,44,0) 38%);
}
.hero-slide > .container { position: relative; z-index: 2; }
.hero-slide.is-active { display: block; animation: heroIn .7s var(--ease) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-eyebrow { color: var(--blue-400); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; display: block; }
.hero h1 { color: #fff; margin-bottom: 16px; line-height: 1.1; }
.hero p { font-size: 1.02rem; max-width: 56ch; color: #b3c8dc; margin-bottom: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-visual { position: relative; }
/* Dark glass rather than white: the card sits over whichever photograph the
   admin picks, so it must stay legible on a bright one too. */
.hero-card {
    background: rgba(8, 13, 38, .62);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-lg); padding: 22px;
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 18px 44px rgba(4, 8, 26, .34);
}
/* No blur support - fall back to a solid panel instead of a see-through one */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero-card { background: rgba(8, 13, 38, .88); }
}
.hero-card h3 { color: #fff; font-size: 1rem; margin-bottom: 14px; }

/* Three ways in - more useful than repeating the statistics band below */
.hero-paths { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hero-paths a {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 13px; border-radius: var(--radius);
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.hero-paths a:hover {
    background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24);
    transform: translateX(3px);
}
.hp-ico {
    width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255,255,255,.1); color: #cfe0ff;
}
.hp-ico svg { width: 19px; height: 19px; }
.hero-paths a:hover .hp-ico { background: var(--blue-500); color: #fff; }
.hp-text { min-width: 0; }
.hp-text b { display: block; color: #fff; font-size: .93rem; font-weight: 600; line-height: 1.3; }
.hp-text small { display: block; color: #9db2cd; font-size: .79rem; line-height: 1.4; margin-top: 1px; }
.hp-arrow { width: 15px; height: 15px; flex: none; margin-left: auto; color: #7f96b8; transition: transform .2s var(--ease), color .2s var(--ease); }
.hero-paths a:hover .hp-arrow { color: #fff; transform: translateX(3px); }
.hp-badge {
    display: inline-block; font-style: normal; vertical-align: middle;
    font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    background: var(--pink-500); color: #fff; padding: 2px 7px; border-radius: 100px; margin-left: 6px;
}

/* Slide arrows */
.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5;
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .22s var(--ease), border-color .22s var(--ease),
                transform .22s var(--ease), opacity .22s var(--ease);
}
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow:hover {
    background: var(--blue-500); border-color: var(--blue-500);
    box-shadow: 0 8px 22px rgba(44, 74, 207, .4);
}
.hero-prev { left: 22px; }
.hero-next { right: 22px; }
.hero-prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-next:hover { transform: translateY(-50%) translateX(3px); }

.hero-dots { display: flex; gap: 9px; padding-bottom: 30px; position: relative; z-index: 3; }
.hero-dots button {
    width: 34px; height: 3px; border: 0; padding: 0; border-radius: 2px;
    background: rgba(255,255,255,.25); transition: background .25s var(--ease);
}
.hero-dots button.is-active { background: var(--blue-500); }

/* --------------------------------------------------------- page banner */
.page-banner {
    position: relative; background: var(--navy-900);
    padding: clamp(38px, 4.4vw, 62px) 0 clamp(32px, 3.6vw, 50px); color: #b9cbdb;
    background-size: cover; background-position: center;
}
.page-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(4,24,42,.95) 30%, rgba(4,24,42,.72)); }
.page-banner > .container { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; margin-bottom: 12px; }
.page-banner p { max-width: 66ch; margin-bottom: 0; color: #a9c0d5; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; margin-bottom: 18px; list-style: none; padding: 0; }
.breadcrumb li { color: #7f9ab3; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; opacity: .5; }
.breadcrumb a { color: #a9c0d5; }
.breadcrumb a:hover { color: #fff; }

/* ------------------------------------------------------------ stat band
   Light, so it separates the dark hero from the white content below rather
   than extending the hero into one heavy navy mass. Numbers carry the brand
   ramp, which ties the band to the service and sector grids. */
.stat-band {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    padding: clamp(22px, 2.4vw, 34px) 0;
}
.stat-row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}
.stat-item {
    padding: 6px 26px;
    border-left: 2px solid var(--accent, var(--blue-500));
}
.stat-item:nth-child(1) { --accent: #2c4acf; }
.stat-item:nth-child(2) { --accent: #7d2eae; }
.stat-item:nth-child(3) { --accent: #ce118d; }
.stat-item:nth-child(4) { --accent: #f7037c; }
.stat-item b {
    display: block; font-family: var(--font-serif);
    font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1;
    color: var(--accent); font-weight: 700; letter-spacing: -.02em;
}
.stat-item span {
    display: block; margin-top: 6px; font-size: .78rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------- cards */
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; display: flex; flex-direction: column; height: 100%;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 1.16rem; margin-bottom: 10px; }
.card-body h3 a { color: inherit; }
.card-body h3 a:hover { color: var(--blue-600); }
.card-body p { font-size: .92rem; margin-bottom: 14px; }
.card-foot { margin-top: auto; padding-top: 4px; }

.card-tag {
    display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--blue-600); background: var(--blue-50);
    padding: 5px 11px; border-radius: 100px; margin-bottom: 12px;
}

/* ---------------------------------------------------------------------
   Accent ramp - six stops interpolated between the two logo colours
   (#2C4ACF royal blue -> #F7037C magenta). Cards cycle through it so a
   grid reads as one brand family rather than a random rainbow.
   --------------------------------------------------------------------- */
.service-card, .sector-tile { --accent: var(--blue-500); --accent-soft: var(--blue-100); --accent-wash: var(--blue-50); }

.service-card:nth-child(6n+1), .sector-tile:nth-child(6n+1) { --accent: #2c4acf; --accent-soft: #e1e6f8; --accent-wash: #eff2fe; }
.service-card:nth-child(6n+2), .sector-tile:nth-child(6n+2) { --accent: #553cbe; --accent-soft: #e7e4f6; --accent-wash: #f2f0fd; }
.service-card:nth-child(6n+3), .sector-tile:nth-child(6n+3) { --accent: #7d2eae; --accent-soft: #ede2f4; --accent-wash: #f7f0fb; }
.service-card:nth-child(6n+4), .sector-tile:nth-child(6n+4) { --accent: #a61f9d; --accent-soft: #f3e0f1; --accent-wash: #fbeff9; }
.service-card:nth-child(6n+5), .sector-tile:nth-child(6n+5) { --accent: #ce118d; --accent-soft: #f8deef; --accent-wash: #fdeef7; }
.service-card:nth-child(6n+6), .sector-tile:nth-child(6n+6) { --accent: #f7037c; --accent-soft: #fedced; --accent-wash: #ffedf5; }

/* service cards ---------------------------------------------------- */
.service-card {
    position: relative; overflow: hidden;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 24px 22px; height: 100%;
    display: flex; flex-direction: column;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* left rail in the card's accent */
.service-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent); transform: scaleY(0); transform-origin: top;
    transition: transform .35s var(--ease); z-index: 2;
}
/* soft accent wash that blooms from the top-right on hover */
.service-card::after {
    content: ''; position: absolute; top: -70px; right: -70px; width: 190px; height: 190px;
    border-radius: 50%; background: var(--accent-wash);
    opacity: 0; transform: scale(.5); transition: all .45s var(--ease); z-index: 0;
}
.service-card > * { position: relative; z-index: 1; }
.service-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(11, 18, 51, .13);
}
.service-card:hover::before { transform: scaleY(1); }
.service-card:hover::after { opacity: 1; transform: scale(1); }

.service-icon {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent); margin-bottom: 14px;
    transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease),
                box-shadow .3s var(--ease);
}
.service-icon svg { width: 23px; height: 23px; }
.service-card:hover .service-icon {
    background: var(--accent); color: #fff;
    transform: translateY(-2px) rotate(-4deg);
    box-shadow: 0 10px 22px rgba(11, 18, 51, .24);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 34%, transparent);
}
.service-card h3 { font-size: 1.06rem; margin-bottom: 7px; }
.service-card h3 a { color: inherit; }
.service-card:hover h3, .service-card:hover h3 a { color: var(--accent); }
.service-card p { font-size: .9rem; margin-bottom: 13px; }
.service-card .link-arrow { margin-top: auto; color: var(--accent); }

/* sector tiles ------------------------------------------------------ */
/* 230px keeps a 1240px container at four tracks, so the eight tiles on the
   home page land as a clean 4 + 4 rather than 5 + 3. */
.sector-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.sector-tile {
    position: relative; overflow: hidden;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 19px 18px; min-height: 138px;
    display: flex; flex-direction: column; gap: 8px;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.sector-tile::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .32s var(--ease); z-index: 2;
}
.sector-tile::after {
    content: ''; position: absolute; bottom: -60px; right: -60px; width: 150px; height: 150px;
    border-radius: 50%; background: var(--accent-wash);
    opacity: 0; transform: scale(.6); transition: all .42s var(--ease); z-index: 0;
}
.sector-tile > * { position: relative; z-index: 1; }
.sector-tile:hover {
    transform: translateY(-4px); border-color: transparent;
    box-shadow: 0 16px 34px rgba(11, 18, 51, .12);
}
.sector-tile:hover::before { transform: scaleX(1); }
.sector-tile:hover::after { opacity: 1; transform: scale(1); }

.sector-ico {
    width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent);
    transition: transform .28s var(--ease), background .28s var(--ease),
                color .28s var(--ease), box-shadow .28s var(--ease);
}
.sector-ico svg { width: 21px; height: 21px; }
.sector-tile:hover .sector-ico {
    background: var(--accent); color: #fff;
    transform: translateY(-2px) rotate(-4deg);
    box-shadow: 0 10px 20px rgba(11, 18, 51, .24);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 34%, transparent);
}
.sector-tile h3 { font-size: .95rem; margin: 0; transition: color .28s var(--ease); }
.sector-tile:hover h3 { color: var(--accent); }
.sector-tile p { font-size: .84rem; margin: 0; color: var(--muted); }

/* ---------------------------------------------------------- job cards */
.job-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 20px 22px; transition: all .28s var(--ease); position: relative;
}
.job-card:hover { border-color: var(--blue-400); box-shadow: var(--shadow-md); }
.job-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.job-card h3 { font-size: 1.18rem; margin-bottom: 6px; }
.job-card h3 a { color: inherit; }
.job-card h3 a:hover { color: var(--blue-600); }
.job-ref { font-size: .78rem; color: var(--muted); letter-spacing: .05em; }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 11px 0; font-size: .85rem; color: var(--body); }
.job-meta span { display: inline-flex; align-items: center; gap: 7px; }
.job-meta svg { width: 15px; height: 15px; color: var(--blue-500); flex: none; }
.job-card p { font-size: .9rem; margin-bottom: 13px; }
.job-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line-2); }
.job-skills { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
    display: inline-block; font-size: .76rem; padding: 5px 11px; border-radius: 100px;
    background: var(--surface-2); color: var(--body); border: 1px solid var(--line);
}
.chip-blue { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-100); }
.chip-urgent { background: #fdeceb; color: var(--red); border-color: #f8d5d3; }
.chip-featured { background: #fdf6e3; color: #9a7413; border-color: #f4e6c0; }
.chip-green { background: #e6f6ef; color: var(--green); border-color: #c9ead9; }

/* filter bar -------------------------------------------------------- */
.filter-bar {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 20px; margin-bottom: 32px; box-shadow: var(--shadow-sm);
}
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; align-items: end; }
.filter-bar label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; letter-spacing: .02em; }

/* ------------------------------------------------------------- course */
.course-card .card-media { aspect-ratio: 16 / 9; }
.course-media-fallback {
    width: 100%; height: 100%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--navy-800), var(--blue-600));
    color: #fff; font-family: var(--font-serif); font-size: 2rem; letter-spacing: .04em;
}
.course-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .84rem; color: var(--muted); margin-bottom: 14px; }
.course-meta span { display: inline-flex; align-items: center; gap: 6px; }
.course-meta svg { width: 14px; height: 14px; color: var(--blue-500); }

.enquiry-note {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--blue-50); border: 1px solid var(--blue-100);
    border-radius: var(--radius); padding: 14px 16px; font-size: .88rem; color: var(--navy-700);
}
.enquiry-note svg { width: 18px; height: 18px; color: var(--blue-600); flex: none; margin-top: 2px; }

/* --------------------------------------------------------- article */
.article-body { font-size: 1.03rem; line-height: 1.82; color: var(--body); }
.article-body > *:first-child { margin-top: 0; }
.article-body h2 { font-size: 1.7rem; margin: 2.2rem 0 .9rem; }
.article-body h3 { font-size: 1.3rem; margin: 1.9rem 0 .75rem; font-family: var(--font-sans); }
.article-body h4 { font-size: 1.08rem; margin: 1.5rem 0 .6rem; }
.article-body ul, .article-body ol { margin: 0 0 1.2rem; padding-left: 1.35rem; }
.article-body li { margin-bottom: .5rem; }
.article-body img { border-radius: var(--radius-lg); margin: 1.6rem 0; }
.article-body blockquote {
    margin: 1.8rem 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--blue-500);
    font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.55; color: var(--ink);
}
.article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .94rem; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; }
.article-body th { background: var(--surface-2); font-weight: 600; color: var(--ink); }
.article-body figure { margin: 1.6rem 0; }
.article-body figcaption { font-size: .84rem; color: var(--muted); margin-top: 8px; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }

/* rich text embeds stay inside the column */
.article-body iframe { max-width: 100%; border-radius: var(--radius-lg); }
.article-body .table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------ sidebar */
.layout-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.sidebar { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 16px; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 19px; }
.side-card h3 { font-size: 1.02rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.side-card.dark { background: var(--navy-800); border-color: var(--navy-800); color: #b6cadd; }
.side-card.dark h3 { color: #fff; border-color: rgba(255,255,255,.14); }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li + li { border-top: 1px solid var(--line-2); }
.side-list a { display: block; padding: 11px 0; font-size: .92rem; color: var(--ink); }
.side-list a:hover { color: var(--blue-600); }
.side-list .active a { color: var(--blue-600); font-weight: 600; }

.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: .9rem; }
.fact-list li:last-child { border-bottom: 0; }
.fact-list dt, .fact-list .k { color: var(--muted); }
.fact-list .v { color: var(--ink); font-weight: 500; text-align: right; }

/* --------------------------------------------------------------- forms */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-group { margin-bottom: 14px; }
.form-group.full { grid-column: 1 / -1; }

.form-label {
    display: block; font-size: .85rem; font-weight: 600; color: var(--ink);
    margin-bottom: 7px; letter-spacing: .01em;
}
.form-label .req { color: var(--red); margin-left: 2px; }

.form-control, .form-select, textarea.form-control {
    width: 100%; padding: 12px 14px;
    font-family: inherit; font-size: .94rem; color: var(--ink);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    appearance: none;
}
.form-control::placeholder { color: #a8b6c4; }
.form-control:focus, .form-select:focus {
    outline: 0; border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(44,74,207,.15);
}
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237a8b9a' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 11px;
    padding-right: 36px;
}
textarea.form-control { min-height: 130px; resize: vertical; line-height: 1.65; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--red); background-color: #fffafa; }
.form-error { display: block; font-size: .81rem; color: var(--red); margin-top: 6px; }
.form-help { display: block; font-size: .81rem; color: var(--muted); margin-top: 6px; }

.form-file {
    display: block; padding: 22px; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--line); border-radius: var(--radius);
    background: var(--surface-2); transition: all .22s var(--ease);
}
.form-file:hover, .form-file.is-drag { border-color: var(--blue-500); background: var(--blue-50); }
.form-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.form-file svg { width: 26px; height: 26px; color: var(--blue-500); margin: 0 auto 8px; }
.form-file b { display: block; font-size: .92rem; color: var(--ink); }
.form-file small { color: var(--muted); font-size: .8rem; }

.form-check { display: flex; align-items: flex-start; gap: 10px; font-size: .89rem; }
.form-check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--blue-500); flex: none; }

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

.form-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: clamp(20px, 2.2vw, 30px);
    box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------- alerts */
.alert {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px;
    font-size: .92rem; border: 1px solid;
}
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.alert-success { background: #e9f8f1; border-color: #bfe6d5; color: #0f6b46; }
.alert-error   { background: #fdeceb; border-color: #f6cfcc; color: #a52a23; }
.alert-warning { background: #fff8e6; border-color: #f3e0b0; color: #85631a; }
.alert-info    { background: var(--blue-50); border-color: var(--blue-100); color: var(--navy-700); }

.flash-stack { position: fixed; top: 20px; right: 20px; z-index: 900; max-width: 380px; display: grid; gap: 10px; }
.flash-stack .alert { box-shadow: var(--shadow-lg); background-color: #fff; animation: flashIn .35s var(--ease) both; }
@keyframes flashIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------- testimonial */
.quote-slider { position: relative; }
.quote-item { display: none; }
.quote-item.is-active { display: block; animation: heroIn .5s var(--ease) both; }
.quote-mark { font-family: var(--font-serif); font-size: 4rem; line-height: .8; color: var(--blue-500); opacity: .35; }
.quote-text { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.1vw, 1.72rem); line-height: 1.5; color: #fff; margin: 18px 0 26px; }
.quote-person { display: flex; align-items: center; gap: 14px; }
.quote-avatar {
    width: 50px; height: 50px; border-radius: 50%; flex: none; object-fit: cover;
    background: var(--blue-600); color: #fff; display: grid; place-items: center; font-weight: 600;
}
.quote-person b { display: block; color: #fff; font-size: .97rem; }
.quote-person span { font-size: .84rem; color: #8fa8bf; }
.quote-nav { display: flex; gap: 10px; margin-top: 30px; }
.quote-nav button {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
    background: transparent; color: #fff; display: grid; place-items: center;
    transition: all .22s var(--ease);
}
.quote-nav button:hover { background: var(--blue-500); border-color: var(--blue-500); }
.quote-nav svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------ accordion */
.accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.acc-item + .acc-item { border-top: 1px solid var(--line); }
.acc-head {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px;
    padding: 15px 20px; background: #fff; border: 0; text-align: left;
    font-size: 1rem; font-weight: 600; color: var(--ink);
}
.acc-head:hover { color: var(--blue-600); }
.acc-head .acc-ico { width: 22px; height: 22px; flex: none; position: relative; }
.acc-head .acc-ico::before, .acc-head .acc-ico::after {
    content: ''; position: absolute; background: var(--blue-500); border-radius: 2px;
    transition: transform .28s var(--ease);
}
.acc-head .acc-ico::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.acc-head .acc-ico::after  { top: 3px; left: 10px; width: 2px; height: 16px; }
.acc-item.is-open .acc-ico::after { transform: rotate(90deg); opacity: 0; }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
.acc-panel-inner { padding: 0 20px 17px; font-size: .93rem; }

/* --------------------------------------------------------------- steps */
.step-list { counter-reset: step; display: grid; gap: 4px; }
.step {
    display: grid; grid-template-columns: 58px 1fr; gap: 20px;
    padding: 15px 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-num {
    counter-increment: step; font-family: var(--font-serif); font-size: 1.6rem;
    color: var(--blue-500); line-height: 1;
}
.step-num::before { content: '0' counter(step); }
.step h4 { margin-bottom: 6px; }
.step p { font-size: .94rem; margin: 0; }

/* -------------------------------------------------------------- CTA */
.cta-band {
    background: linear-gradient(115deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--blue-600) 165%);
    color: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 3.2vw, 42px);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: #b3c8dc; margin: 0; max-width: 60ch; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* -------------------------------------------------------- logo strip */
.logo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.logo-cell { background: #fff; display: grid; place-items: center; padding: 26px 20px; min-height: 108px; }
.logo-cell img { max-height: 46px; width: auto; filter: grayscale(1); opacity: .62; transition: all .28s var(--ease); }
.logo-cell:hover img { filter: none; opacity: 1; }
.logo-cell span { font-weight: 600; color: var(--muted); font-size: .92rem; text-align: center; }

/* ------------------------------------------------------------ team */
.team-card { text-align: center; }
.team-photo {
    width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden;
    background: linear-gradient(150deg, var(--navy-800), var(--blue-600));
    display: grid; place-items: center; margin-bottom: 16px; position: relative;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo .team-initials { font-family: var(--font-serif); font-size: 2.6rem; color: #fff; letter-spacing: .04em; }
.team-card h3 { font-size: 1.06rem; margin-bottom: 3px; }
.team-card .role { font-size: .87rem; color: var(--blue-600); font-weight: 500; margin-bottom: 10px; }
.team-card p { font-size: .89rem; }
.team-links { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.team-links a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.team-links a:hover { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.team-links svg { width: 15px; height: 15px; }

/* ------------------------------------------------------- pagination */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 32px; list-style: none; padding: 0; }
.pagination a, .pagination span {
    min-width: 42px; height: 42px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-size: .9rem; color: var(--ink); background: #fff;
}
.pagination a:hover { border-color: var(--blue-500); color: var(--blue-600); }
.pagination .is-current { background: var(--navy-800); border-color: var(--navy-800); color: #fff; font-weight: 600; }
.pagination .is-disabled { color: #b9c5d1; background: var(--surface-2); }

/* ------------------------------------------------------------ empty */
.empty-state { text-align: center; padding: clamp(40px, 6vw, 72px) 24px; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.empty-state svg { width: 44px; height: 44px; color: var(--muted); margin: 0 auto 16px; }
.empty-state h3 { font-size: 1.15rem; }
.empty-state p { max-width: 46ch; margin: 0 auto 18px; }

/* ----------------------------------------------------------- footer */
.site-footer { background: var(--navy-900); color: #92a9bf; padding-top: clamp(36px, 3.8vw, 54px); font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: clamp(24px, 3vw, 42px); padding-bottom: 32px; }
.footer-grid h4 { color: #fff; font-size: .93rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 20px; font-family: var(--font-sans); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-tag { color: #7f96ad; }
.footer-grid p { color: #92a9bf; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-list a { color: #92a9bf; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; }
.footer-list a:hover { color: #fff; }
.footer-list a::before { content: ''; width: 0; height: 1px; background: var(--blue-500); transition: width .22s var(--ease); }
.footer-list a:hover::before { width: 10px; }

.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; color: var(--blue-500); flex: none; margin-top: 4px; }
.footer-contact a { color: #92a9bf; }
.footer-contact a:hover { color: #fff; }
.footer-contact b { color: #fff; display: block; font-size: .84rem; font-weight: 600; margin-bottom: 2px; }

.newsletter-form { display: flex; gap: 8px; margin-top: 14px; }
.newsletter-form input {
    flex: 1; min-width: 0; padding: 12px 14px; font-size: .9rem; color: #fff;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius);
}
.newsletter-form input::placeholder { color: #7f96ad; }
.newsletter-form input:focus { outline: 0; border-color: var(--blue-500); background: rgba(255,255,255,.1); }

.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.16); color: #92a9bf;
}
.footer-social a:hover { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.09); padding: 22px 0;
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    font-size: .85rem; color: #7f96ad;
}
.footer-bottom ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-bottom a { color: #7f96ad; }
.footer-bottom a:hover { color: #fff; }

/* ------------------------------------------------------ floating bits */
.to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 300;
    width: 46px; height: 46px; border-radius: 50%; border: 0;
    background: var(--navy-800); color: #fff; display: grid; place-items: center;
    box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: all .28s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--blue-500); }
.to-top svg { width: 18px; height: 18px; }

.wa-float {
    position: fixed; right: 22px; bottom: 78px; z-index: 300;
    width: 46px; height: 46px; border-radius: 50%;
    background: #25d366; color: #fff; display: grid; place-items: center;
    box-shadow: var(--shadow-lg);
}
.wa-float:hover { color: #fff; transform: scale(1.06); }
.wa-float svg { width: 22px; height: 22px; }

/* ====================================================== MEGA MENU ==== */
/* A mega item goes position:static so its panel resolves against the
   sticky header and can span the full viewport width. */
.main-nav > li.has-mega { position: static; }
.has-mega > a::after {
    content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .22s var(--ease);
}
.has-mega.is-open > a::after,
.main-nav > li.has-mega:hover > a::after { transform: translateY(1px) rotate(-135deg); }

.mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff;
    box-shadow: 0 26px 50px rgba(11, 18, 51, .16);
    opacity: 0; visibility: hidden; transform: translateY(9px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    z-index: 40;
    max-height: calc(100vh - var(--header-h) - 40px);
    overflow-y: auto;
}
.main-nav > li.has-mega:hover > .mega,
.main-nav > li.has-mega:focus-within > .mega,
.main-nav > li.has-mega.is-open > .mega { opacity: 1; visibility: visible; transform: none; }

.mega-inner { padding: 0; }
.mega-grid { display: grid; gap: clamp(28px, 3vw, 48px); padding: 32px 0 36px; }
.mega-grid-services,
.mega-grid-sectors,
.mega-grid-careers { grid-template-columns: minmax(0, 1fr) 316px; }
.mega-grid-courses  { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.mega-grid-insights { grid-template-columns: 1fr; }

.mega-label {
    display: block; font-size: .7rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--pink-500); margin-bottom: 16px;
}

.mega-links { display: grid; gap: 2px; }
.mega-links.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.mega-links.three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
.mega-cols, .mega-feature { min-width: 0; }

.mega-link {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px; border-radius: var(--radius);
    transition: background .18s var(--ease);
}
.mega-link:hover { background: var(--blue-50); }
.mega-link b { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.mega-link small { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.mega-link:hover b { color: var(--blue-600); }
.mega-links.compact .mega-link { padding: 8px 10px; align-items: center; }

.mega-ico {
    width: 38px; height: 38px; flex: none; border-radius: var(--radius);
    background: var(--blue-50); color: var(--blue-600);
    display: grid; place-items: center; transition: all .18s var(--ease);
}
.mega-ico svg { width: 19px; height: 19px; }
.mega-ico.sm { width: 30px; height: 30px; }
.mega-ico.sm svg { width: 16px; height: 16px; }
.mega-link:hover .mega-ico { background: var(--blue-500); color: #fff; }

.mega-flag {
    display: inline-block; font-style: normal; font-size: .64rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
    background: var(--pink-50); color: var(--pink-600); border: 1px solid var(--pink-100);
    padding: 2px 7px; border-radius: 100px; margin-left: 7px;
}

.mega-all {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
    font-size: .86rem; font-weight: 600; color: var(--blue-600);
    white-space: nowrap;
}
.mega-all svg { transition: transform .2s var(--ease); }
.mega-all:hover svg { transform: translateX(4px); }

.mega-empty { font-size: .9rem; color: var(--muted); margin: 0; }

.mega-rail {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 24px;
}
.mega-rail h4 { font-size: 1.02rem; margin-bottom: 8px; }
.mega-rail p { font-size: .87rem; margin-bottom: 16px; }

/* minmax(0,1fr) - plain 1fr lets long titles widen their own column */
.mega-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mega-card { display: block; min-width: 0; }
.mega-card-media {
    display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden;
    background: var(--surface-3); margin-bottom: 10px;
}
.mega-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.mega-card:hover .mega-card-media img { transform: scale(1.05); }
.mega-card-fallback {
    width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-weight: 700;
    background: linear-gradient(135deg, var(--navy-800), var(--blue-500));
}
.mega-card b { display: block; font-size: .89rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.mega-card:hover b { color: var(--blue-600); }
.mega-card small { display: block; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.mega-topic {
    display: inline-block; font-style: normal; font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 5px;
}

.mega-note {
    display: flex; gap: 9px; align-items: flex-start; margin: 18px 0 0;
    background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius);
    padding: 11px 14px; font-size: .82rem; color: var(--navy-700);
}
.mega-note svg { flex: none; margin-top: 2px; color: var(--blue-600); }

/* ======================================================= PARALLAX ==== */
.parallax { position: relative; overflow: hidden; isolation: isolate; }
.parallax > .container { position: relative; z-index: 3; }

/* Headroom must exceed the largest data-parallax speed: the shift peaks at
   speed x section-height, so 30% of overhang covers speeds up to 0.30. */
.parallax-bg {
    position: absolute; left: 0; right: 0; top: -30%;
    height: 160%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}
.parallax-veil { position: absolute; inset: 0; z-index: 2; }
.parallax-veil.navy {
    background: linear-gradient(180deg, rgba(11,18,51,.93) 0%, rgba(11,18,51,.88) 100%);
}
.parallax-veil.deep {
    background: linear-gradient(105deg, rgba(11,18,51,.96) 0%, rgba(11,18,51,.90) 45%, rgba(28,42,99,.82) 100%);
}
.parallax-veil.brand {
    background: linear-gradient(115deg, rgba(11,18,51,.95) 0%, rgba(28,42,99,.90) 55%, rgba(44,74,207,.80) 100%);
}

/* The CTA sits on its own rounded card, so the parallax lives inside it */
.cta-band.parallax { background: var(--navy-900); }
/* Lift only the real content above the veil - the :not() guards are required,
   otherwise this rule overrides position:absolute on the layers themselves. */
.cta-band.parallax > div:not(.parallax-bg):not(.parallax-veil) { position: relative; z-index: 3; }

/* Full-width statement band on a parallax photograph */
.statement { color: #c3d2e8; }
.statement-inner { max-width: 780px; }
.statement h2 { color: #fff; margin-bottom: 14px; }
.statement p { font-size: 1.03rem; line-height: 1.7; margin-bottom: 22px; max-width: 68ch; }
.statement .eyebrow { color: #9aabf5; }
.statement-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Touch devices fall back to a normal cover image - scroll-linked transforms
   fight the browser's own scroll compositing on mobile. */
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
    .parallax-bg { transform: none !important; top: 0; height: 100%; }
}

/* ------------------------------------------------------- animations */
/* Scroll reveal is opt-in: the `js` class is only added when scripting is
   available, so content is never hidden if JavaScript fails to run. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- responsive */
@media (max-width: 1080px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .layout-split { grid-template-columns: 1fr; }
    .sidebar { position: static; }
}

@media (max-width: 960px) {
    :root { --header-h: 72px; }
    .nav-toggle { display: flex; }
    .header-cta .btn { display: none; }
    /* Keep the wordmark from crowding the menu button */
    .header-inner { gap: 14px; }
    .brand { flex: 0 1 auto; }
    .brand img { max-height: 40px; }

    .main-nav {
        position: fixed; inset: var(--header-h) 0 0 auto; width: min(340px, 86vw);
        background: #fff; flex-direction: column; align-items: stretch; gap: 0;
        padding: 18px; overflow-y: auto; border-left: 1px solid var(--line);
        transform: translateX(105%); transition: transform .3s var(--ease);
        box-shadow: var(--shadow-lg); margin: 0; z-index: 210;
    }
    .main-nav.is-open { transform: none; }
    .main-nav > li { border-bottom: 1px solid var(--line-2); }
    .main-nav > li > a { padding: 14px 8px; font-size: .98rem; }
    /* The centre-out underline belongs to the desktop bar only */
    .main-nav > li > a::before { display: none; }
    .site-header.is-stuck .header-inner { min-height: var(--header-h); }
    .scroll-progress { display: none; }
    .submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; border-radius: 0; padding: 0 0 8px 14px;
        display: none;
    }
    .main-nav li.is-open > .submenu { display: block; }

    /* Mega panels collapse into plain accordion lists inside the drawer */
    .mega {
        position: static; display: none;
        opacity: 1; visibility: visible; transform: none;
        background: transparent; border: 0; box-shadow: none;
        max-height: none; overflow: visible;
    }
    .main-nav > li.has-mega.is-open > .mega { display: block; }
    .mega .container { padding: 0; max-width: none; }
    .mega-grid,
    .mega-grid-services, .mega-grid-sectors,
    .mega-grid-courses, .mega-grid-careers, .mega-grid-insights {
        grid-template-columns: 1fr; gap: 16px; padding: 2px 0 14px;
    }
    .mega-links.two, .mega-links.three { grid-template-columns: 1fr; }
    .mega-link { padding: 9px 8px; }
    .mega-label { margin-bottom: 10px; }
    .mega-rail { display: none; }             /* keeps the drawer scannable */
    .mega-cards, .mega-cards.three { grid-template-columns: 1fr 1fr; gap: 12px; }
    .mega-card-media { margin-bottom: 7px; }

    /* Must sit BELOW .site-header (z-index 200): the drawer lives inside the
       header's stacking context, so a higher backdrop would dim it too. */
    .nav-backdrop {
        position: fixed; inset: 0; background: rgba(11,18,51,.5); z-index: 190;
        opacity: 0; visibility: hidden; transition: all .3s var(--ease);
    }
    .nav-backdrop.is-open { opacity: 1; visibility: visible; }

    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    .hero-arrow { width: 40px; height: 40px; }
    .hero-arrow svg { width: 17px; height: 17px; }
    .hero-prev { left: 10px; }
    .hero-next { right: 10px; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .cta-band { grid-template-columns: 1fr; }
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
    .topbar-contact .hide-sm { display: none; }
}

@media (max-width: 720px) {
    /* One column means everything stacks - tighten the rhythm further so the
       page does not turn into an endless scroll. */
    :root { --section-y: 34px; --section-y-sm: 26px; --gap: 13px; }

    body { font-size: 15.5px; }
    .brand img { max-height: 34px; }
    .container { padding: 0 18px; }
    .section-head { margin-bottom: 20px; }
    .service-card { padding: 20px 18px; }
    .card-body { padding: 17px; }
    .side-card, .form-card { padding: 17px; }
    .sector-tile { min-height: 0; }
    .cta-band { padding: 24px 20px; }
    .stat-item { padding: 2px 14px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    /* Items wrap here, which would leave a separator dangling at line start */
    .topbar-contact { gap: 4px 14px; font-size: .76rem; }
    .topbar-contact > * { padding: 0; }
    .topbar-contact > * + *::before { display: none; }
    .topbar-social { display: none; }
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
    .job-card { padding: 22px 20px; }
    .hero-actions .btn { width: 100%; }
    .footer-bottom { flex-direction: column; gap: 12px; }
}

/* --------------------------------------------------------------- print */
@media print {
    .site-header, .topbar, .site-footer, .to-top, .wa-float, .breadcrumb, .no-print { display: none !important; }
    body { color: #000; font-size: 12pt; }
    a { color: #000; text-decoration: underline; }
}