:root {
    --color-text: #323232;
    --color-muted: #4a4a4a;
    --color-primary: #007f40;
    --color-surface: #ffffff;
    --color-surface-alt: #f6f7f9;
    --color-footer-bar: #eaeaea;
    --color-border: rgba(35, 35, 35, 0.12);
    --font-family-base: 'Open Sans', sans-serif;
    --font-family-nav: 'Noto Sans', sans-serif;

    /* Type scale — 1rem = 16px (browser default, so Bootstrap's rem-based
       spacing/gutter utilities resolve to their documented values) */
    --font-size-body: 1.0625rem;  /* 17px */
    --font-size-small: 0.875rem;  /* 14px */
    --font-size-h1: 3rem;         /* 48px */
    --font-size-h2: 2rem;         /* 32px */
    --font-size-h3: 1.5rem;       /* 24px */
    --font-size-h4: 1.25rem;      /* 20px */
    --font-size-h5: 1.125rem;     /* 18px */
    --font-size-h6: 1rem;         /* 16px */

    /* Design leading: a flat 46px across h1–h3, expressed as ratios so it
       scales with the responsive font sizes below. */
    --line-height-h1: 0.958;
    --line-height-h2: 1.438;
    --line-height-h3: 1.917;
    --line-height-heading: 1.2;
    --line-height-body: 1.4;

    /* -2% tracking (the px values in the design are all -0.02em) */
    --letter-spacing-heading: -0.02em;
}

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

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

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body);
    color: var(--color-text);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Open Sans everywhere — form controls do not inherit font by default */
button,
input,
select,
optgroup,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-base);
    font-style: normal;
    font-weight: 700;
    color: var(--color-text);
}

h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-heading);
}

h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-heading);
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    letter-spacing: var(--letter-spacing-heading);
}

h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-heading);
}

h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-heading);
}

h6 {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-heading);
}

p,
li {
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body);
}

p {
    color: var(--color-muted);
}

small,
.text-small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
}

strong,
b {
    font-weight: 700;
}

/*------------------------------------*\
    SCROLL ANIMATIONS (AOS)
\*------------------------------------*/

/* aos.css sets `opacity: 0` on every [data-aos] element as soon as it loads. If
   its JavaScript never runs — blocked, errored, or a slow connection that times
   out — that content stays permanently invisible. So the hiding is gated behind
   a class only JS can add: no .aos-ready means everything renders normally.
   Specificity (0,2,1) beats AOS's own [data-aos^=fade][data-aos^=fade] (0,2,0),
   and !important covers the per-animation transform rules too. */
html:not(.aos-ready) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* AOS ships a 100px travel, which is far too much for a subtle reveal. */
html.aos-ready [data-aos="fade-up"] {
    transform: translate3d(0, 18px, 0);
}

html.aos-ready [data-aos="fade-down"] {
    transform: translate3d(0, -18px, 0);
}

html.aos-ready [data-aos="fade-right"] {
    transform: translate3d(-18px, 0, 0);
}

html.aos-ready [data-aos="fade-left"] {
    transform: translate3d(18px, 0, 0);
}

html.aos-ready [data-aos="zoom-in"] {
    transform: scale(0.97);
}

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

a {
    color: var(--color-text);
    text-decoration: none;
    transition: opacity 200ms ease, color 200ms ease;
}

a:hover,
a:focus {
    opacity: 0.8;
}

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

/* Bootstrap owns .container's box model (padding via --bs-gutter-x, auto
   margins). We only pin the max-width — Bootstrap would widen it to 1320px
   at xxl. 30px gutter keeps the original 15px each side. */
.container,
.container-fluid {
    --bs-gutter-x: 1.875rem;
}

.container {
    max-width: 1035px;
}


.site-header {
    position: relative;
    width: 100%;
    background-color: var(--color-surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    z-index: 20;
}

/* Vertical padding lives on the wrappers, never on the .container element
   itself — a `padding: 18px 0` shorthand there zeroes Bootstrap's gutter and
   the bar goes flush to the viewport edge. */
.header-top {
    padding-top: 18px;
    padding-bottom: 18px;
}

.header-bar {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Compact brand mark — hidden at xl by .d-xl-none */
.header-brand {
    display: block;
    flex-shrink: 0;
    margin-right: 16px;
}

.header-brand img {
    max-height: 34px;
    width: auto;
}

.header-logos {
    gap: 16px;
}

.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 130px;
    min-width: 120px;
}

.header-logo img {
    max-height: 69px;
    width: auto;
    display: block;
}

.header-logo.logo-center {
    flex: 0 1 260px;
}

.header-logo.logo-center img {
    max-height: 72px;
}

/* Layout comes from Bootstrap utilities in the markup
   (d-flex align-items-center justify-content-between) */
.header-inner {
    gap: 24px;
}

.site-nav {
    margin-left: auto;
    margin-right: auto;
}

.site-nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 60px;
}

.site-nav li {
    position: relative;
    font-size: inherit;
}

.site-nav a {
    color: var(--color-text);
    font-family: var(--font-family-nav);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-block;
    padding: 6px 0;
}

.site-nav a:hover,
.site-nav a:focus {
    color: var(--color-primary);
}

.site-nav .menu-item-has-children > a:hover::after,
.site-nav .menu-item-has-children > a:focus::after {
    color: var(--color-primary);
}

.site-nav .menu-item-has-children > a::after {
    /* use svg icon for dropdown indicator */
    content: '';
    display: inline-block;
    width: 14px;
    height: 10px;
    margin-left: 8px;
    vertical-align: middle;
    background-image: url('../img/icon-dropdown.svg');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.9;
    transition: transform 180ms ease, opacity 180ms ease;
}

.site-nav .sub-menu {
    display: block;
    position: absolute;
    top: calc(100% + 25px);
    padding: 27px 20px;
    left: 0;
    min-width: 300px;
    width: 100%;
    max-width: 320px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 240ms ease, visibility 240ms ease, transform 240ms ease;
    z-index: 10;
    white-space: normal;
    box-sizing: border-box;
}

.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children.sub-menu-active > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav .sub-menu > li {
    width: 100%;
    display: block;
    clear: both;
}

.site-nav .sub-menu a {
    display: block;
    padding: 12px 22px;
    font-size: var(--font-size-small);
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    color: var(--color-text);
    white-space: normal;
}

.site-nav .sub-menu li:last-child a {
    border-bottom: none;
}

button,
.btn {
    font-family: var(--font-family-base);
    font-size: var(--font-size-small);
    font-weight: 600;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: transform 200ms ease, opacity 200ms ease;
}

button:hover,
.btn:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

/* --- Burger toggle --- */

/* Visible by default; .d-xl-none hides it once the inline menu takes over */
.navbar-toggle {
    display: block;
    position: relative;
    width: 28px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 21;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    transform: none;
    opacity: 1;
}

.navbar-toggle span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--color-text);
    transition: top 260ms ease, transform 260ms ease, opacity 180ms ease, background-color 200ms ease;
}

.navbar-toggle span:nth-child(1) { top: 0; }
.navbar-toggle span:nth-child(2) { top: 9px; }
.navbar-toggle span:nth-child(3) { top: 18px; }

.navbar-toggle.navActive span:nth-child(1) {
    top: 9px;
    transform: rotate(45deg);
}

.navbar-toggle.navActive span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.2);
}

.navbar-toggle.navActive span:nth-child(3) {
    top: 9px;
    transform: rotate(-45deg);
}

/* --- Mobile nav backdrop --- */

/* Catches taps outside the panel to dismiss it. Deliberately transparent — the
   design darkens nothing, so this only needs to be hittable, not visible. */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: visibility 300ms ease;
    z-index: 18;
}

.nav-overlay.navActive {
    opacity: 1;
    visibility: visible;
}

.site-footer {
    background-color: var(--color-surface);
}

/* --- Footer logo strip (white) --- */

.footer-top {
    padding: 56px 0 48px;
}

.footer-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 56px;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo a {
    display: block;
}

.footer-logo img {
    max-height: 69px;
    width: auto;
    transition: opacity 240ms ease;
}

.footer-logo-center img {
    max-height: 50px;
}

.footer-logo a:hover img,
.footer-logo a:focus img {
    opacity: 0.75;
}

/* --- Footer bottom bar (light grey) --- */

.footer-bottom {
    background-color: var(--color-footer-bar);
    padding: 14px 0;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
}

.footer-copyright {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: 1.4;
}

.footer-sep {
    display: inline-block;
    padding: 0 6px;
    color: var(--color-text);
}

.footer-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    color: var(--color-text);
    line-height: 0;
}

.footer-social-icon {
    display: block;
    width: 22px;
    height: 22px;
}

.footer-social:hover,
.footer-social:focus {
    color: var(--color-primary);
    opacity: 1;
}

.footer-nav a {
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: var(--line-height-body);
}

.footer-nav a:hover,
.footer-nav a:focus {
    color: var(--color-primary);
    opacity: 1;
}

/*------------------------------------*\
    HOMEPAGE HERO
\*------------------------------------*/

.hero {
    position: relative;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Decorative dashed ring. The map PNG is transparent, so this needs an
   explicit z-index to sit behind it — absolutely positioned elements
   otherwise paint above static ones regardless of DOM order. */
.hero-ring {
    position: absolute;
    top: -14%;
    height: auto;
    object-fit: contain;
    right: -5vw;
    width: 42vw;
    max-width: 860px;
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.hero-copy {
    position: relative;
    z-index: 2;
}

/* The global h1 leading (46px) is set for single-line headings and is too
   tight for a stacked two-line hero — the design sits at ~1.25. */
.hero-title {
    line-height: 1.25;
}

.hero-title-main,
.hero-title-accent {
    display: block;
}

.hero-title-accent {
    color: var(--color-primary);
    font-style: italic;
}

/* --- Map --- */

/* The map PNG is cropped on its eastern edge, so that edge must never sit
   inside the viewport or it reads as a hard cut-off. This negative margin is
   exactly the distance from the column's content edge to the viewport's right
   edge — container gutter (15px) + column gutter (15px) + whatever margin the
   centred container leaves — so the map always runs flush right at every
   width. .hero clips the overflow, so no horizontal page scroll. */
.hero-map {
    position: relative;
    z-index: 1;
    margin-right: calc(-1 * ((100vw - min(100vw, 1035px)) / 2 + 30px));
}

.hero-map-image {
    width: 100%;
    height: auto;
    display: block;
}

/* 400px glow from the design, centred on its marker coordinate.
   Scales down with the map so it stays proportional. */
.hero-glow {
    position: absolute;
    left: var(--marker-x);
    top: var(--marker-y);
    width: min(400px, 62%);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 400px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 212, 107, 0.50) 0%, rgba(0, 212, 107, 0.00) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Zero-size anchor: the marker's x/y lands exactly on this point, and the
   button is offset from it so the pin tip (not the label) sits on the spot. */
.hero-marker {
    position: absolute;
    left: var(--marker-x);
    top: var(--marker-y);
    width: 0;
    height: 0;
    z-index: 2;
}

.hero-marker-btn {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    /* negative half the icon width — centres the pin on the x coordinate */
    margin-left: calc(var(--marker-size, 44px) / -2);
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    white-space: nowrap;
    text-align: left;
    transition: transform 200ms ease;
}
.hero-marker--city .hero-marker-btn{
    gap: 4px;
}

button.hero-marker-btn {
    cursor: pointer;
}

button.hero-marker-btn:hover,
button.hero-marker-btn:focus-visible {
    transform: translateY(-2px);
    opacity: 1;
}

.hero-marker-icon,
.hero-marker-icon iconify-icon {
    display: block;
    width: var(--marker-size, 44px);
    height: var(--marker-size, 44px);
    font-size: 24px;
}
.hero-marker--pin .hero-marker-icon iconify-icon {
    font-size: 44px;
}

.hero-marker-icon {
    flex-shrink: 0;
    color: var(--color-primary);
    filter: drop-shadow(0 5px 10px rgba(0, 60, 30, 0.28));
}

.hero-marker-label {
    color: var(--color-primary);
    font-size: var(--font-size-h5);
    font-weight: 700;
    line-height: 1.2;
}

/* The ⊕ city marker is centred on its point rather than hanging above it */
.hero-marker--city {
    --marker-size: 26px;
}

.hero-marker--city .hero-marker-btn {
    transform: translateY(50%);
}

.hero-marker--city .hero-marker-icon {
    color: var(--color-text);
    filter: none;
}

.hero-marker--city .hero-marker-label {
    color: var(--color-primary);
    font-size: var(--font-size-h5);
    font-weight: 700;
}

/* Pulse ring, centred on the pin head — the marker glyph's circle sits at
   9/24 of the icon box, so it tracks --marker-size. */
.hero-marker--pin .hero-marker-btn::before {
    content: '';
    position: absolute;
    left: calc(var(--marker-size, 44px) / 2);
    top: calc(var(--marker-size, 44px) * 0.375);
    width: calc(var(--marker-size, 44px) * 0.5);
    height: calc(var(--marker-size, 44px) * 0.5);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.35;
    animation: heroPulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes heroPulse {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.45; }
    70%  { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* --- Marker panel --- */

.hero-marker-panel {
    position: absolute;
    left: 18px;
    top: 14px;
    width: 240px;
    padding: 18px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
    z-index: 3;
}

.hero-marker-panel[hidden] {
    display: none;
}

.hero-marker-panel-title {
    margin-bottom: 8px;
    font-size: var(--font-size-h6);
    line-height: 1.25;
    letter-spacing: normal;
}

.hero-marker-panel p {
    font-size: var(--font-size-small);
    line-height: 1.45;
}

.hero-marker-panel-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--color-primary);
    font-size: var(--font-size-small);
    font-weight: 700;
}

.home-content {
    padding-top: 40px;
    padding-bottom: 60px;
}

/*------------------------------------*\
    PAGE BANNER
\*------------------------------------*/

.page-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 356px;
    overflow: hidden;
}

.page-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Figma: rgba(0, 0, 0, 0.10) over the photo */
.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.20);
}

.page-banner-inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Figma: 509 x 112, 2px solid #FFF, radius 10px */
.page-banner-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(509px, 100%);
    min-height: 112px;
    padding: 20px 40px;
    border: 2px solid #ffffff;
    border-radius: 10px;
}

/* Inherits the global h1 size, weight, leading and tracking — the design's
   48px / 700 / 46px / -0.96px is exactly the h1 token. */
.page-banner-title {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-family-nav);
    text-align: center;
}

@media only screen and (max-width: 991.98px) {
    .page-banner {
        min-height: 260px;
    }
    .page-banner-box {
        min-height: 92px;
        padding: 18px 28px;
    }
    .site-nav .menu-item-has-children > a::after{
        width: 11px;
        height: 7px;
    }
}

@media only screen and (max-width: 575.98px) {
    .page-banner {
        min-height: 200px;
    }
    .page-banner-box {
        min-width: 100%;
        min-height: 76px;
        padding: 14px 18px;
    }
}

.page-title {
    margin-bottom: 24px;
}

/*------------------------------------*\
    FLEXIBLE CONTENT SECTIONS
\*------------------------------------*/

.section {
    position: relative;
    padding-top: 56px;
    padding-bottom: 56px;
}

.section-heading {
    margin-bottom: 20px;
}

/* Shared prose styling for WYSIWYG output */
.section-text > * + *,
.entry-content > * + * {
    margin-top: 16px;
}

.section-text ul,
.section-text ol,
.entry-content ul,
.entry-content ol {
    padding-left: 0;
    list-style: none;
}

.section-text ul li,
.section-text ol li,
.entry-content ul li,
.entry-content ol li {
    position: relative;
    padding-left: 26px;
}

.section-text ul li + li,
.section-text ol li + li,
.entry-content ul li + li,
.entry-content ol li + li {
    margin-top: 16px;
}

/* Green arrow markers from the design.
   The box is exactly one line tall so `center` keeps the icon aligned with the
   first line of text regardless of font size. */
.section-text ul li::before,
.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: calc(var(--line-height-body, 1.4) * 1em);
    background: url('../img/icon-play-bullet.svg') no-repeat left center;
    background-size: 12px auto;
}

.section-text ol,
.entry-content ol {
    counter-reset: section-list;
}

.section-text ol li,
.entry-content ol li {
    counter-increment: section-list;
}

.section-text ol li::before,
.entry-content ol li::before {
    content: counter(section-list) '.';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: 700;
}

.section-text a,
.entry-content a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* --- Media column --- */

.section-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.section-media-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.18);
}

.section-media figcaption {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

/* Dashed ring and glow sit behind the image, scaled off the column width so
   they stay proportional at every breakpoint. */
.section-media-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90%;
    max-width: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.section-media-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 108%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 400px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 212, 107, 0.50) 0%, rgba(0, 212, 107, 0.00) 100%);
    pointer-events: none;
    z-index: 1;
}

/* --- Section: Content Card --- */

/* Bold centred lead-in above the card */
.content-card-intro {
    max-width: 880px;
    margin: 0 auto 40px;
    color: var(--color-text);
    font-size: var(--font-size-h5);
    font-weight: 700;
    line-height: var(--line-height-body);
    text-align: center;
}

/* Figma: radius 16px, #FFF, shadow 0 8px 30px rgba(17, 0, 21, 0.13).
   No padding — the image runs flush to the card edges and `overflow: hidden`
   clips it to the rounded corners. The copy column carries its own inset. */
.content-card {
    max-width: 1034px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 8px 30px 0 rgba(17, 0, 21, 0.13);
}

/* Zero the column gutter too, or each column keeps 12px of side padding */
.content-card .row {
    --bs-gutter-x: 0;
}

.content-card-image {
    width: 100%;
    height: 100%;
    min-height: 750px;
    object-fit: cover;
    border-radius: 0;
}

.content-card-body {
    padding: 36px 36px 40px;
}

/* Global h3 size and tracking, green, with heading leading — the design's
   stacked two-line heading is far tighter than h3's 46px default. */
.content-card-heading {
    margin-bottom: 20px;
    color: var(--color-primary);
    line-height: var(--line-height-heading);
}

/* Card copy runs at the small token, as in the design */
.content-card-text p,
.content-card-text li {
    font-size: var(--font-size-small);
}

/* Now a list of individual logos rather than one combined image */
.content-card-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.content-card-logo {
    font-size: 0; /* kills the inline-gap under the image */
    line-height: 0;
}

.content-card-logo img {
    width: 74px;
    height: 74px;
    border-radius: 10px;
    object-fit: contain;
}

.content-card-logo a {
    display: block;
    transition: opacity 180ms ease;
}

.content-card-logo a:hover,
.content-card-logo a:focus-visible {
    opacity: 0.75;
}

@media only screen and (max-width: 575.98px) {
    .content-card-logo img {
        width: 46px;
        height: 46px;
    }
}

@media only screen and (max-width: 991.98px) {
    .content-card-image {
        min-height: 260px;
    }
    .content-card-body {
        padding: 28px 24px 32px;
    }
}

/* --- Section: Gallery --- */

/* Figma: #FAFAFA band */
.section-gallery {
    background: #fafafa;
}

.gallery-heading {
    margin-bottom: 32px;
    text-align: center;
}

.gallery-grid {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.gallery-item {
    display: block;
    overflow: hidden;
    background: rgba(35, 35, 35, 0.04);
}

/* Ratio matches the theme's `feature` crop (720x510), so a thumbnail that WP
   could not generate still lands on the same shape as the rest. */
.gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 72 / 51;
    object-fit: cover;
    transition: transform 400ms ease;
}

.gallery-item:hover,
.gallery-item:focus {
    opacity: 1;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item img {
        transition: none;
    }
    .gallery-item:hover img,
    .gallery-item:focus-visible img {
        transform: none;
    }
}

/* --- Section: Posts Carousel --- */

/* Heading with the green rule to its left */
.carousel-heading {
    position: relative;
    margin-bottom: 28px;
    padding-left: 16px;
}

.carousel-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.12em;
    bottom: 0.12em;
    width: 4px;
    border-radius: 2px;
    background: var(--color-primary);
}

/* The arrows are absolutely positioned rather than flex items, so the track
   spans the full container width and the first card's left edge lines up with
   the heading above it. As flex siblings they pushed the track inward by the
   button width plus the gap. */
.posts-carousel {
    position: relative;
}

.posts-carousel-track {
    /* Room for the card shadows, which overflow: hidden would otherwise clip.
       The matching padding puts the slides back on the container edge, so the
       alignment with the heading is preserved. */
    margin: -14px;
    padding: 14px;
    overflow: hidden;
}

.posts-carousel .swiper-wrapper {
    align-items: stretch;
}

.posts-carousel .swiper-slide {
    height: auto;
    display: flex;
}

/* Holds the AOS reveal so Swiper's own transforms never clash with it. Must
   pass the slide's full height and width through to the card. */
.posts-carousel-slide-inner {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Arrows --- */

/* Centred with a negative margin rather than translateY, because the global
   button:hover lift overwrites `transform` and would knock it off centre. */
.carousel-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

/* Clear of the container on wide screens */
.carousel-nav--prev {
    left: -38px;
}

.carousel-nav--next {
    right: -38px;
}

.carousel-nav span {
    display: block;
    width: 11px;
    height: 11px;
    border-top: 2px solid var(--color-text);
    border-right: 2px solid var(--color-text);
    transition: border-color 180ms ease;
}

.carousel-nav--prev span {
    transform: rotate(-135deg);
}

.carousel-nav--next span {
    transform: rotate(45deg);
}

.carousel-nav:hover span,
.carousel-nav:focus-visible span {
    border-color: var(--color-primary);
}

.carousel-nav:hover,
.carousel-nav:focus {
    transform: none;
    opacity: 1;
}

/* Swiper adds this when there is nothing to scroll to */
.carousel-nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

.carousel-nav.swiper-button-lock {
    display: none;
}

/* --- Card --- */

.post-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}

.post-card-date {
    margin-bottom: 12px;
    color: var(--color-muted);
    font-size: var(--font-size-small);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.post-card-title {
    margin-bottom: 12px;
    font-size: var(--font-size-h5);
    line-height: 1.3;
    letter-spacing: normal;
}

.post-card-title a {
    color: var(--color-text);
}

.post-card-title a:hover,
.post-card-title a:focus {
    color: var(--color-primary);
    opacity: 1;
}

.post-card-excerpt {
    margin-bottom: 18px;
    font-size: var(--font-size-small);
    line-height: 1.5;
}

/* Pinned to the base so links align across cards of differing height */
.post-card-link {
    margin-top: auto;
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: 700;
}

.post-card-link:hover,
.post-card-link:focus {
    color: var(--color-primary);
    opacity: 1;
}

/* Below this there is no margin left of the container to sit in, so the arrows
   move onto the track's outer edges. They land in the card's own padding, and
   the chevron stays legible against the white card. Card alignment with the
   heading is unaffected either way. */
@media only screen and (max-width: 1239.98px) {
    .carousel-nav--prev {
        left: -2px;
    }
    .carousel-nav--next {
        right: -2px;
    }
}

/* --- Card style: news (image, date, clamped title, green base) --- */

/* The image is inset by the card's own padding, so its edges line up with the
   date and title rather than bleeding to the card edge. */
.post-card--news {
    padding: 20px 20px 22px;
    border-bottom: 5px solid var(--color-primary);
}

.news-card-media {
    display: block;
    margin-bottom: 18px;
}

/* aspect-ratio rather than a fixed height, so the crop holds at any card width */
.news-card-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Two lines then ellipsis, so cards stay even regardless of title length */
.news-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Card style: project (logo, caption, pill button) --- */

.post-card--project {
    align-items: center;
    justify-content: space-between;
    padding: 28px 24px;
    text-align: center;
}

.project-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    margin-bottom: 14px;
}

.project-card-logo img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    object-fit: contain;
}

.project-card-caption {
    margin-bottom: 18px;
    font-size: var(--font-size-small);
    line-height: 1.4;
}

/* Pushed to the base so buttons align across cards with and without captions */
.project-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.project-card-btn:hover,
.project-card-btn:focus {
    color: #ffffff;
    opacity: 1;
}

/* Outbound variant — same pill, plus a diagonal arrow */
.external-card-btn {
    gap: 7px;
}

.external-card-btn svg {
    flex-shrink: 0;
    transition: transform 180ms ease;
}

.external-card-btn:hover svg,
.external-card-btn:focus-visible svg {
    transform: translate(2px, -2px);
}

/* --- Card style: publication (cover, title, download) --- */

.post-card--publication {
    padding: 14px 14px 18px;
}

.publication-card-media {
    display: block;
    margin-bottom: 16px;
}

.publication-card-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* auto top margin sits on the title, not the link, so the title + download
   pair is pushed to the base as a group. Cards without a cover then bottom-
   align with those that have one, instead of stranding the title up top. */
.publication-card-title {
    margin-top: auto;
    margin-bottom: 14px;
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
}

.publication-card-title a {
    color: var(--color-text);
}

.publication-card-title a:hover,
.publication-card-title a:focus {
    color: var(--color-primary);
    opacity: 1;
}

.publication-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* No auto margin here — the title above owns the spacing, keeping the two
       together at the base rather than splitting them apart. */
    margin-right: auto;
    color: var(--color-primary);
    font-size: var(--font-size-small);
    font-weight: 700;
}

.publication-card-link:hover,
.publication-card-link:focus {
    color: var(--color-primary);
    opacity: 0.75;
}

/* --- Card style: link (title with corner arrow) --- */

.post-card--link {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 22px;
}

.link-card-title {
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1.45;
}

.link-card-arrow {
    flex-shrink: 0;
    color: var(--color-text);
    line-height: 0;
    transition: color 180ms ease, transform 180ms ease;
}

.post-card--link:hover,
.post-card--link:focus {
    opacity: 1;
}

.post-card--link:hover .link-card-arrow,
.post-card--link:focus-visible .link-card-arrow {
    color: var(--color-primary);
    transform: translate(2px, -2px);
}

.post-card--link:hover .link-card-title {
    color: var(--color-primary);
}

@media only screen and (max-width: 575.98px) {
    .carousel-nav {
        width: 22px;
    }
    .post-card {
        padding: 20px;
    }
}

/* --- Section: Form --- */

/* Gravity Forms' own stylesheet is disabled (see gform_disable_css in
   functions.php), so everything below — including the field grid GF would
   normally provide — is defined here. No specificity fight, exact control. */

.section-form {
    --field-border: #eae9e9;
    --field-radius: 4px;
    --field-gap: 22px;
    --field-error: #e02b2b;
}

.form-section-heading {
    margin-bottom: 32px;
    text-align: center;
}

/* Figma: 860px card, radius 10px, shadow -4px 4px 25px rgba(0,0,0,0.15) */
.form-card {
    max-width: 860px;
    margin: 0 auto;
    padding: 48px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: -4px 4px 25px 0 rgba(0, 0, 0, 0.15);
}

.form-card-intro {
    margin-bottom: 28px;
}

/* --- Container resets --- */

.form-card .gform_heading {
    display: none;
}

/* Checkbox fields are <fieldset> elements — without this the browser draws its
   default border around each consent row. */
.form-card fieldset.gfield {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-card .gform_wrapper form {
    margin: 0;
}

/* --- Field grid --- */

.form-card .gform_fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    row-gap: var(--field-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-card .gfield {
    grid-column: span 12;
    min-width: 0;
}

.form-card .gfield--width-half {
    grid-column: span 6;
}

.form-card .gfield--width-third {
    grid-column: span 4;
}

.form-card .gfield--width-quarter {
    grid-column: span 3;
}

.form-card .gfield_visibility_hidden,
.form-card .gform_hidden,
.form-card .gfield--type-honeypot {
    display: none;
}

/* --- Labels --- */

.form-card .gfield_label {
    display: block;
    margin-bottom: 8px;
    padding: 0;
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-h6);
    font-weight: 400;
    line-height: 1.4;
}

.form-card .gfield_required {
    color: var(--field-error);
}

.form-card .gfield_required_text {
    display: none;
}

/* Consent groups use their choice text as the visible label */
.form-card .gfield--type-checkbox > .gfield_label,
.form-card .gfield--type-radio > .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.form-card .ginput_container {
    margin: 0;
}

/* --- Inputs: Figma 1px #EAE9E9, radius 4px, 14px 20px 15px --- */

.form-card .gform_wrapper input[type="text"],
.form-card .gform_wrapper input[type="email"],
.form-card .gform_wrapper input[type="tel"],
.form-card .gform_wrapper input[type="url"],
.form-card .gform_wrapper input[type="number"],
.form-card .gform_wrapper input[type="password"],
.form-card .gform_wrapper select,
.form-card .gform_wrapper textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 14px 20px 15px;
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    background-color: #ffffff;
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-h6);
    line-height: 1.4;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.form-card .gform_wrapper input:focus,
.form-card .gform_wrapper select:focus,
.form-card .gform_wrapper textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 127, 64, 0.12);
}

.form-card .gform_wrapper ::placeholder {
    color: rgba(35, 35, 35, 0.42);
    opacity: 1;
}

/* Bolder, with our own chevron replacing the native arrow */
.form-card .gform_wrapper select {
    padding-right: 48px;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('../img/icon-dropdown.svg');
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 14px 10px;
    cursor: pointer;
}

/* GF renders rows="10"; the design's box is far shorter */
.form-card .gform_wrapper textarea {
    height: 115px;
    min-height: 115px;
    resize: vertical;
}

/* --- Checkboxes --- */

.form-card .gfield_checkbox {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-card .gfield_checkbox .gchoice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
}

.form-card .gfield_checkbox input[type="checkbox"] {
  
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    padding: 0;
    border: 1px solid rgba(35, 35, 35, 0.45);
    border-radius: 2px;
    background-color: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.form-card .gfield_checkbox input[type="checkbox"]:checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

.form-card .gfield_checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.form-card .gfield_checkbox label {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-h6);
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
}

/* --- Submit --- */

.form-card .gform_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px 0 0;
    padding: 0;
}

.form-card .gform_footer .gform_button {
    width: auto;
    padding: 15px 44px;
    border: none;
    border-radius: 999px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-family-nav);
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 200ms ease, opacity 200ms ease;
}

.form-card .gform_footer .gform_button:hover {
    transform: translateY(-1px);
    opacity: 0.94;
}

.form-card .gform_ajax_spinner {
    width: 22px;
    height: 22px;
    margin-left: 12px;
}

/* --- Validation --- */

.form-card .gfield_error input,
.form-card .gfield_error select,
.form-card .gfield_error textarea {
    border-color: var(--field-error);
}

.form-card .gfield_validation_message,
.form-card .validation_message {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--field-error);
    font-size: var(--font-size-small);
    line-height: 1.4;
}

.form-card .gform_validation_errors {
    margin-bottom: 24px;
    padding: 14px 20px;
    border: 1px solid var(--field-error);
    border-radius: var(--field-radius);
    background: rgba(224, 43, 43, 0.06);
}

.form-card .gform_validation_errors .gform_submission_error {
    color: var(--field-error);
    font-size: var(--font-size-h6);
    font-weight: 600;
}

.form-card .gform_confirmation_message {
    color: var(--color-text);
    font-size: var(--font-size-h6);
    text-align: center;
}

@media only screen and (max-width: 575.98px) {
    .form-card {
        padding: 28px 20px;
    }
    /* Name fields stack rather than squeeze */
    .form-card .gfield--width-half,
    .form-card .gfield--width-third,
    .form-card .gfield--width-quarter {
        grid-column: span 12;
    }
}

/* --- Section: Timeline --- */

.section-timeline {
    --timeline-line: rgba(35, 35, 35, 0.32);
    --timeline-dot: 14px;
    /* Dash length and gap on a `dashed` border scale with its width, so this
       one value controls both stroke weight and dash spacing. */
    --timeline-stroke: 2px;
    --timeline-radius: 20px;
}

.timeline-heading {
    margin-bottom: 40px;
    text-align: center;
}

/* Dot centres land at (i + 0.5) / cols of the row width, which is exactly
   where a Bootstrap column of that count centres its card. */
.timeline-track {
    position: relative;
    height: 34px;
}

.timeline-dot {
    position: absolute;
    top: 50%;
    left: calc((var(--i) + 0.5) * 100% / var(--cols));
    width: var(--timeline-dot);
    height: var(--timeline-dot);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 24px rgba(0, 127, 64, 0.55);
}

/* Runs from the first dot to this row's own last dot — a short final row
   stops early instead of trailing off to full width. */
.timeline-track-line {
    position: absolute;
    top: 50%;
    left: calc(100% / var(--cols) / 2);
    right: calc(100% - (var(--count) - 0.5) * 100% / var(--cols));
    border-top: var(--timeline-stroke) dashed var(--timeline-line);
}

.timeline-cards {
    align-items: flex-start;
}

/* Figma: #F1F1F1, radius 10px, centred content */
.timeline-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 27px 24px;
    border-radius: 10px;
    background: #f1f1f1;
    text-align: center;
}

.timeline-card-title {
    color: #0a0a0a;
    font-family: var(--font-family-nav);
    font-size: var(--font-size-h5);
    font-weight: 700;
    line-height: 1.3;
}

.timeline-card-text {
    margin-top: 12px;
    color: #0a0a0a;
    font-size: var(--font-size-h6);
    font-weight: 400;
    line-height: 1.45;
}

/* S-connector: down the right at this row's last dot, across, then down the
   left at the next row's first dot.
   Built from three parts so each turn is a rounded corner on a single element
   — a curve drawn across two elements would break mid-radius. Each corner box
   is exactly --timeline-radius wide and the straight run bridges the gap
   between them, so the whole path is continuous. */
.timeline-link {
    position: relative;
    display: block;
    height: 72px;
}

/* Incoming: drops at this row's last dot, curves into the horizontal */
.timeline-link::before {
    content: '';
    position: absolute;
    top: 0;
    height: 50%;
    width: var(--timeline-radius);
    right: calc(100% - (var(--count) - 0.5) * 100% / var(--cols));
    border-right: var(--timeline-stroke) dashed var(--timeline-line);
    border-bottom: var(--timeline-stroke) dashed var(--timeline-line);
    border-bottom-right-radius: var(--timeline-radius);
}

/* Outgoing: curves out of the horizontal, drops at the next row's first dot */
.timeline-link::after {
    content: '';
    position: absolute;
    top: calc(50% - var(--timeline-stroke));
    bottom: 0;
    width: var(--timeline-radius);
    left: calc(100% / var(--cols) / 2);
    border-left: var(--timeline-stroke) dashed var(--timeline-line);
    border-top: var(--timeline-stroke) dashed var(--timeline-line);
    border-top-left-radius: var(--timeline-radius);
}

/* The straight run between the two curves */
.timeline-link-line {
    position: absolute;
    top: calc(50% - var(--timeline-stroke));
    left: calc(100% / var(--cols) / 2 + var(--timeline-radius));
    right: calc(100% - (var(--count) - 0.5) * 100% / var(--cols) + var(--timeline-radius));
    border-top: var(--timeline-stroke) dashed var(--timeline-line);
}
@media(min-width:1439px){
	.hero-ring {
		position: absolute;
		top: -14%;
		right: 0vw;
		width: 42vw;
		max-width: 42vw;
	}
}
/* Below lg the serpentine has no meaning — switch to a vertical spine with a
   dot beside each stacked card. */
@media only screen and (max-width: 991.98px) {
    .timeline-track,
    .timeline-link {
        display: none;
    }
    /* Zeroing the x-gutter removes Bootstrap's negative row margin, so a
       column's left edge sits exactly at the timeline's padding edge. That
       makes the dot offset below exact rather than guesswork. */
    .timeline-cards {
        --bs-gutter-x: 0;
        --bs-gutter-y: 1.5rem;
    }
    .timeline {
        position: relative;
        padding-left: 40px;
    }
    /* One continuous spine for the whole stack — no gaps at row boundaries */
    .timeline::before {
        content: '';
        position: absolute;
        left: 13px;
        top: 16px;
        bottom: 16px;
        border-left: var(--timeline-stroke) dashed var(--timeline-line);
    }
    .timeline-card-col {
        position: relative;
    }
    .timeline-card-col::before {
        content: '';
        position: absolute;
        left: -27px; /* column edge (40px) back to the spine (13px) */
        top: 28px;
        width: var(--timeline-dot);
        height: var(--timeline-dot);
        transform: translateX(-50%);
        border-radius: 50%;
        background: var(--color-primary);
        box-shadow: 0 0 16px rgba(0, 127, 64, 0.5);
    }
    .timeline-row + .timeline-row {
        margin-top: 1.5rem;
    }
}

/* --- Section: Team --- */

/* Figma: #FAFAFA band */
.section-team {
    background: #fafafa;
}

/* Column flex so the members row can absorb the group's full height —
   that is what makes cards match across groups on the same row, not just
   within one group. */
.team-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.team-group-heading {
    margin-bottom: 20px;
}

.team-members {
    flex: 1 1 auto;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

/* Cards stretch to fill their row line */
.team-member {
    display: flex;
}

.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding: 24px 16px 20px;
    border-radius: 6px;
    border-bottom: 5px solid var(--color-primary);
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    text-align: center;
}
.team-member.head .team-card{
    border-radius: 9px;
    justify-content: center !important;
}
.team-card .profile{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.team-card-image {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
}

/* A real portrait is cropped to a circle; the fallback mark is shown whole */
.team-card-image.is-photo {
    border-radius: 50%;
    object-fit: cover;
}

.team-card-image.is-logo {
    object-fit: contain;
}

.team-card-name {
    color: #263d4f;
    font-size: var(--font-size-h5);
    font-weight: 600;
    line-height: 1.35;
}

.team-card-affiliation {
    margin-top: 8px;
    color: #263d4f;
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: 1.5;
}

/* Full-width groups hold more, smaller cards */
.team-group--full .team-card-image {
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
}

.team-group--full .team-card-name {
    font-size: var(--font-size-small);
}

.team-group--full .team-card {
    padding: 30px 12px;
}

@media only screen and (max-width: 991.98px) {
    .team-card-image {
        width: 96px;
        height: 96px;
    }
}

/* --- Section: Text + Figure --- */

.text-figure-heading {
    margin-bottom: 24px;
}

/* Plain figure — no rounding, shadow or crop, so diagrams stay legible */
.text-figure {
    margin: 0;
}


.text-figure-image {
    width: 100%;
    max-width: 330px;
    height: auto;
}

.text-figure-caption {
    margin-top: 12px;
    color: var(--color-muted);
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
}

@media only screen and (max-width: 991.98px) {
    /* Figure below the copy on small screens, whichever side it sits on */
    .section-text-figure .text-figure {
        margin-top: 32px;
    }
}

/* --- Section: Callout + Text --- */

.callout-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 117px;
    padding: 24px 28px;
    border-radius: 8px;
    background: var(--color-primary);
    text-align: left;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Circular 52px icon, per the design's exported flag asset */
.callout-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.callout-label {
    color: #ffffff;
    font-size: var(--font-size-h6);
    font-weight: 700;
    line-height: 1.25;
}

a.callout-panel:hover,
a.callout-panel:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 60, 30, 0.22);
    opacity: 1;
}

@media only screen and (max-width: 991.98px) {
    .callout-panel {
        min-height: 96px;
        margin-bottom: 24px;
    }
}

/* --- Section: CTA Banner --- */

.cta-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 257px;
    padding: 40px 25px;
    border-radius: 24px;
    background: var(--color-primary);
    text-align: center;
}

/* Heading and sub line invert on the green panel */
.cta-banner-heading {
    color: #ffffff;
    line-height: var(--line-height-heading);
}

.cta-banner-text {
    color: #ffffff;
}

.cta-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 60px;
    border-radius: 85px;
    background: #ffffff;
    color: var(--color-primary);
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cta-banner-btn:hover,
.cta-banner-btn:focus {
    color: var(--color-primary);
    opacity: 1;
}

@media only screen and (max-width: 575.98px) {
    .cta-banner {
        min-height: 0;
        gap: 20px;
        padding: 32px 20px;
        border-radius: 16px;
    }
    .cta-banner-btn {
        padding: 12px 36px;
    }
}

/* --- Section: Icon Grid --- */

.section-icon-grid-heading {
    margin-bottom: 48px;
    
    text-align: center;
}

.icon-grid {
    --bs-gutter-y: 56px;
}

.icon-grid-item {
    display: block;
    text-align: center;
}

/* Figma: 101px circle, #FFF, shadow 0 0 110px rgba(0,0,0,0.10) */
.icon-grid-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 101px;
    height: 101px;
    margin: 0 auto 46px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 110px 0 rgba(0, 0, 0, 0.10);
    color: var(--color-primary);
    transition: transform 240ms ease, box-shadow 240ms ease;
}

/* Icons vary in aspect ratio, so bound the box and let them fit inside it */
.icon-grid-badge img,
.icon-grid-badge iconify-icon {
    display: block;
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 40px;
    object-fit: contain;
}

.icon-grid-badge iconify-icon {
    width: 40px;
    height: 40px;
}

a.icon-grid-item:hover .icon-grid-badge,
a.icon-grid-item:focus-visible .icon-grid-badge {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}

a.icon-grid-item:hover,
a.icon-grid-item:focus {
    opacity: 1;
}

/* Figma: 187px wide, 14px / 600, #0A0A0A, centred */
.icon-grid-text {
    display: block;
    max-width: 187px;
    margin: 0 auto;
    color: #0a0a0a;
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.35;
}

@media only screen and (max-width: 575.98px) {
    .icon-grid {
        --bs-gutter-y: 36px;
    }
    .icon-grid-badge {
        width: 84px;
        height: 84px;
        margin-bottom: 24px;
        box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.12);
    }
    .icon-grid-badge img,
    .icon-grid-badge iconify-icon {
        max-width: 36px;
        max-height: 34px;
    }
    .icon-grid-badge iconify-icon {
        width: 34px;
        height: 34px;
    }
}

/* Breathing room between the copy and the decorated image */
@media only screen and (min-width: 992px) {
    
    .section {
        padding-top: 72px;
        padding-bottom: 72px;
    }
    .section-content-media--left .section-copy {
        padding-left: 32px;
    }
    .section-content-media--right .section-copy {
        padding-right: 32px;
    }
}

@media only screen and (max-width: 991.98px) {
    /* Image below the copy on small screens, whichever side it sits on */
    .section-content-media .col-lg-6:first-child {
        order: 2;
    }
    .section-content-media .col-lg-6:last-child {
        order: 1;
    }
    .section-media {
        margin-top: 32px;
    }
    .section-media-ring,
    .section-media-glow {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) {
    .hero {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .section-content-media--left .section-copy{
        padding-right: 54px;
    }
    .section-content-media--right .section-copy{
        padding-right: 60px;
    }
}

@media only screen and (max-width: 991.98px) {
    .hero {
        padding-top: 32px;
        padding-bottom: 40px;
    }
    .hero-copy {
        margin-bottom: 8px;
    }
    .hero-ring {
        top: 4%;
        right: -22%;
        width: 88%;
    }
    /* Anchor panels to the map on small screens so they cannot be clipped */
    .hero-marker-panel {
        position: fixed;
        left: 50%;
        top: auto;
        bottom: 16px;
        width: min(320px, calc(100vw - 32px));
        transform: translateX(-50%);
        z-index: 25;
    }
}

@media only screen and (max-width: 575.98px) {
    .hero-marker {
        --marker-size: 30px;
    }
    .hero-marker--city {
        --marker-size: 20px;
    }
    .hero-marker-label {
        font-size: var(--font-size-small);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-marker--pin .hero-marker-btn::before {
        animation: none;
    }
}

#siteCookie {
    background-color: rgba(0, 0, 0, 0.78);
    position: fixed;
    z-index: 30;
    bottom: 0;
    padding: 12px 0;
    width: 100%;
}

#siteCookie,
#siteCookie p,
#siteCookie a {
    color: #fff;
    font-weight: 600;
}

#siteCookie .inner {
    gap: 12px;
}

#siteCookie p {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-small);
}

#siteCookie a {
    text-decoration: underline;
}

.cookie-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    flex-shrink: 0;
    color: #fff;
    background: transparent;
}

.cookie-dismiss:hover,
.cookie-dismiss:focus {
    transform: none;
    opacity: 1;
    background: rgba(255, 255, 255, 0.14);
}

/* Nav switches to the burger drawer below Bootstrap's xl breakpoint. Keeping
   this on a Bootstrap breakpoint means .d-xl-* utilities line up exactly. */
@media only screen and (max-width: 1199.98px) {
    :root {
        --font-size-h1: 2.5rem;   /* 40px */
        --font-size-h2: 1.75rem;  /* 28px */
        --font-size-h3: 1.375rem; /* 22px */
        --line-height-h1: 1.1;
        --line-height-h2: 1.25;
        --line-height-h3: 1.35;
    }

    /* Single compact bar: brand left, burger right */
    .site-header {
        position: sticky;
        top: 0;
    }
    .header-bar {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .header-inner {
        flex-wrap: nowrap;
        gap: 12px;
    }
    /* The bar is the panel's positioning context. Its z-index also keeps the bar
       and panel above the dismiss overlay (18). */
    .header-bar {
        position: relative;
        z-index: 20;
    }

    /* Starts below the header rather than at the viewport top, so it can never
       sit over the logo row whatever the stacking order ends up being. */
    .nav-overlay {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        bottom: auto;
        height: 100vh;
    }

    /* --- Drop-down panel ---
       Full-width sheet that fades and slides down from under the header bar.
       `top: 100%` on the bar lands it flush beneath, and because the bar is
       full width so is the panel. It travels with the sticky header. */
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        bottom: auto;
        display: block;
        width: 100%;
        max-height: calc(100vh - 100%);
        margin: 0;
        padding: 10px 0 26px;
        background: var(--color-surface);
        /* The panel starts flush against the header's own bottom border and
           covers it, so it carries its own hairline to keep the two separate. */
        border-top: 1px solid rgba(35, 35, 35, 0.10);
        box-shadow: 0 22px 40px rgba(0, 0, 0, 0.10);
        opacity: 0;
        visibility: hidden;
        transition: opacity 200ms ease, visibility 320ms;
        z-index: 19;
        /* Also does the clipping the animation below depends on */
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .site-nav.navActive {
        opacity: 1;
        visibility: visible;
    }
    /* The travel is on the list, not the panel. The panel is a descendant of
       .header-bar and so always paints above the bar's background — moving the
       panel itself made its top edge slide across the header. Translating the
       list instead keeps the panel fixed under the header while its overflow
       clips the list, so the items read as emerging from behind the bar. */
    .site-nav > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        max-width: none;
        transform: translateY(-22px);
        transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .site-nav.navActive > ul {
        transform: translateY(0);
    }
    .site-nav li {
        width: 100%;
    }
    /* Centred, mixed case — no per-item rules. Add the `nav-divider` class to a
       menu item in Appearance > Menus to start a new group above it. */
    .site-nav a {
        display: block;
        padding: 13px 24px;
        font-size: var(--font-size-small);
        letter-spacing: normal;
        text-transform: none;
        text-align: center;
    }
    .site-nav > ul > li.nav-divider {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(35, 35, 35, 0.10);
    }
    .site-nav .current-menu-item > a,
    .site-nav .current_page_item > a {
        color: var(--color-primary);
    }
    .site-nav .menu-item-has-children > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .site-nav .menu-item-has-children > a::after {
        margin-left: 0;
        flex-shrink: 0;
    }
    .site-nav .menu-item-has-children.sub-menu-active > a {
        color: var(--color-primary);
    }
    .site-nav .menu-item-has-children.sub-menu-active > a::after {
        transform: rotate(180deg);
    }
    .site-nav .sub-menu {
        position: static;
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        background: var(--color-surface-alt);
        border-radius: 0;
        box-shadow: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        max-height: 0;
        overflow: hidden;
        transition: max-height 320ms ease;
    }
    .site-nav .menu-item-has-children.sub-menu-active > .sub-menu {
        max-height: 1000px;
    }
    .site-nav .sub-menu li {
        width: 100%;
    }
    .site-nav .sub-menu a {
        padding: 11px 24px;
        font-size: var(--font-size-small);
        font-weight: 400;
        text-align: center;
        text-transform: none;
        border-bottom: none;
    }
    html.fix,
    body.fix {
        overflow: hidden;
    }

    /* --- Footer --- */
    .footer-top {
        padding: 40px 0 32px;
    }
    .footer-logos {
        gap: 24px 32px;
    }
}

@media only screen and (max-width: 767.98px) {
    :root {
        --font-size-h1: 2rem;      /* 32px */
        --font-size-h2: 1.5rem;    /* 24px */
        --font-size-h3: 1.25rem;   /* 20px */
        --font-size-h4: 1.125rem;  /* 18px */
        --font-size-body: 1rem;    /* 16px */
        --line-height-h3: 1.3;
    }
    
    .footer-logos {
        gap: 24px;
    }
    .footer-logo {
        flex: 0 1 auto;
    }
    .footer-logo img {
        max-height: 36px;
    }
    .footer-logo-center img {
        max-height: 34px;
    }
    .footer-bottom-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .footer-sep {
        display: none;
    }
    .footer-address {
        display: block;
    }
}

@media only screen and (max-width: 575.98px) {
    :root {
        --font-size-h1: 1.75rem;   /* 28px */
        --font-size-h2: 1.375rem;  /* 22px */
    }
    .header-brand img {
        max-height: 30px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .site-nav,
    .site-nav > ul,
    .nav-overlay,
    .site-nav .sub-menu,
    .navbar-toggle span {
        transition-duration: 0.01ms;
    }
}