:root {

--primary: #2f9d7e;
--primary-strong: #1f7f65;
--primary-soft: #e8f6f1;

--text-main: #263533;
--text-muted: #6a7c78;

--background: #f5faf8;
--white: #ffffff;

--border: #ddeae5;

--shadow-soft:
0 6px 18px rgba(0,0,0,.05);

--shadow-card:
0 14px 32px rgba(0,0,0,.08);

--radius: 16px;

--maxwidth: 1180px;
}


/* BASE */

html {
scroll-behavior: smooth;
}

body {

margin: 0;

font-family:
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica,
Arial,
sans-serif;

background: var(--background);

color: var(--text-main);

line-height: 1.7;
}


/* HEADER */

header {

position: sticky;

top: 0;

z-index: 999;

width: 100%;

backdrop-filter: blur(10px);

background: rgba(255,255,255,.92);

border-bottom: 1px solid var(--border);

}


/* NAVIGATION */

nav {

max-width: var(--maxwidth);

margin: auto;

display: flex;

justify-content: center;

gap: 46px;

padding: 20px;

flex-wrap: wrap;

font-weight: 600;

font-size: 15px;

letter-spacing: .4px;

}


nav a {

text-decoration: none;

color: var(--text-main);

position: relative;

transition: .25s ease;

}


nav a::after {

content: "";

position: absolute;

left: 0;

bottom: -6px;

height: 2px;

width: 0%;

background: var(--primary);

transition: .25s ease;

}


nav a:hover {

color: var(--primary);

}


nav a:hover::after {

width: 100%;

}


/* CTA BUTTON */

nav a.cta {

background: var(--primary);

color: white;

padding: 8px 14px;

border-radius: 8px;

}


nav a.cta:hover {

background: var(--primary-strong);

}


/* HERO */

.hero {

background:

linear-gradient(
180deg,
#eaf8f3,
#ffffff
);

padding:

130px
20px
80px;

text-align: center;

}


.hero h1 {

font-size: 46px;

font-weight: 600;

margin-bottom: 12px;

letter-spacing: -.5px;

color: var(--primary-strong);

}


.hero p {

color: var(--text-muted);

font-size: 18px;

}


/* SECTIONS */

section {

max-width: var(--maxwidth);

margin: auto;

padding:

80px
28px;

}


section h2 {

font-size: 32px;

margin-bottom: 30px;

position: relative;

}


section h2::after {

content: "";

display: block;

width: 52px;

height: 3px;

background: var(--primary);

margin-top: 12px;

border-radius: 2px;

}


/* STAFF CARDS */

.staff-member {

display: grid;

grid-template-columns: 280px 1fr;

gap: 38px;

background: var(--white);

padding: 36px;

border-radius: var(--radius);

box-shadow: var(--shadow-soft);

margin-bottom: 46px;

transition:

transform .25s ease,
box-shadow .25s ease;

}


.staff-member:hover {

transform: translateY(-6px);

box-shadow: var(--shadow-card);

}


.staff-member img {

width: 100%;

max-width: 280px;

border-radius: 14px;

object-fit: cover;

aspect-ratio: 4/5;

}


.staff-member h3 {

margin-top: 0;

font-size: 24px;

}


.staff-member strong {

color: var(--primary-strong);

}


/* MAP */

.map {

width: 100%;

height: 440px;

border: none;

border-radius: var(--radius);

box-shadow: var(--shadow-soft);

margin-top: 26px;

}


/* DOWNLOAD BUTTON */

.download-btn {

display: inline-block;

padding: 12px 18px;

background: var(--primary);

color: white;

border-radius: 10px;

font-weight: 600;

text-decoration: none;

transition: .2s ease;

}


.download-btn:hover {

background: var(--primary-strong);

}


/* FOOTER */

footer {

background: var(--white);

border-top: 1px solid var(--border);

text-align: center;

padding: 42px 20px;

margin-top: 60px;

font-size: 14px;

color: var(--text-muted);

}


/* GDPR PAGE */

section h3 {

margin-top: 36px;

font-size: 21px;

color: var(--primary);

}


/* LINKS */

a {

color: var(--primary);

text-decoration: none;

}


a:hover {

text-decoration: underline;

}


/* MOBILE MENU FIX */

@media (max-width: 600px) {

nav {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 10px;

padding: 12px;

}

nav a {

background: white;

padding: 10px;

border-radius: 8px;

border: 1px solid var(--border);

text-align: center;

}

nav a.cta {

background: var(--primary);

color: white;

border: none;

}

}


/* MOBILE STAFF CARDS */

@media (max-width: 900px) {

.staff-member {

grid-template-columns: 1fr;

text-align: center;

}

.staff-member img {

max-width: 220px;

margin: auto;

}

.hero h1 {

font-size: 32px;

}

}


/* PRINT VERSION */

@media print {

nav,
footer {

display: none;

}

body {

background: white;

}

}