:root {
	--bg: #f4f5f0;
	--panel: #fffef9;
	--ink: #131826;
	--muted: #4f586d;
	--line: #d8dacc;
	--accent: #0f8f97;
	--accent-dark: #0a5661;
	--warm: #f3b842;
	--shadow: 0 20px 50px rgba(19, 24, 38, 0.12);
}

* { box-sizing: border-box; }

html,body { height: 100%; }

body {
	font-family: "Manrope", sans-serif;
	margin: 0;
	color: var(--ink);
	background:
		radial-gradient(circle at 8% -10%, rgba(15, 143, 151, 0.12), transparent 38%),
		radial-gradient(circle at 95% 15%, rgba(243, 184, 66, 0.24), transparent 33%),
		linear-gradient(170deg, #f7f8f2 0%, #f2f0e9 45%, #f7f6f1 100%);
	line-height: 1.6;
}

.container { width: min(92%, 1160px); margin: 0 auto; }

a { color: inherit; }

.skip-link {
	position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
	left: 12px; top: 12px; width: auto; height: auto; padding: 8px 12px; background: #fff; border-radius: 6px; z-index: 9999; box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

header .top-nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px); background: rgba(247,248,242,0.86); border-bottom: 1px solid rgba(19,24,38,0.06); }

.top-nav .container { display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px; }

.logo { height:48px; }

.nav-pill { font-family:"Sora",sans-serif; font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-dark); background:rgba(15,143,151,0.12); border:1px solid rgba(15,143,151,0.28); padding:8px 14px; border-radius:999px; }

.top-links { display:flex; gap:14px; align-items:center; }
.top-links a { font-weight:600; color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px; }
.top-links a.primary { background:var(--accent); color:#fff; padding:8px 12px; }

.hero { padding: 0; min-height: 64vh; }

.hero-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0; align-items:stretch; }

.hero-main { padding: 80px 48px; display:flex; flex-direction:column; justify-content:center; background: linear-gradient(135deg, #5b2fff 0%, #ff7ea8 100%); color:#fff; }

.eyebrow { font-family: "Sora", sans-serif; text-transform:uppercase; letter-spacing:0.12em; font-size:0.9rem; color:rgba(255,255,255,0.95); margin:0 0 12px; }

h1,h2,h3 { font-family:"Sora",sans-serif; line-height:1.02; margin-top:0; }
h1 { font-size: clamp(2.2rem, 6.2vw, 4rem); margin:0 0 12px; color:#ffffff; line-height:1.02; font-weight:800; }

.hero-main p { margin:12px 0 0 0; font-size: clamp(0.98rem, 1.6vw, 1.1rem); color: rgba(255,255,255,0.9); max-width:48ch; }

.hero-panel { position:relative; overflow:hidden; display:flex; align-items:stretch; justify-content:center; background:transparent; }

.media-grid { width:100%; height:100%; display:grid; grid-template-rows:1fr 1fr; grid-template-columns:1fr 1fr; gap:6px; padding:18px; box-sizing:border-box; }
.media-grid img { width:100%; height:100%; object-fit:cover; display:block; }

.cta-row { margin-top:20px; display:flex; flex-wrap:wrap; gap:12px; }

.button { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border-radius:999px; text-decoration:none; border:1px solid transparent; font-weight:700; transition:transform .22s ease, box-shadow .22s ease; }
.button-primary { color:#fff; background:linear-gradient(120deg,var(--accent-dark),var(--accent)); box-shadow:0 10px 26px rgba(10,86,97,0.26); }
.button-secondary { color:var(--ink); border-color: rgba(19,24,38,0.12); background:#fff; }
.button:hover { transform:translateY(-2px); }

.metrics { position:absolute; top:18px; right:18px; display:grid; gap:10px; }
.metric { border:1px solid var(--line); background: rgba(255,255,255,0.92); border-radius:14px; padding:12px 14px; }
.metric strong { display:block; font-family:"Sora",sans-serif; font-size:1.2rem; color:var(--accent-dark); }
.metric span { color:var(--muted); font-size:0.86rem; }

.section { padding:36px 0; }
.section-head { text-align:center; margin-bottom:20px; }
.section-head h2 { margin-bottom:8px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.section-head p { margin:0 auto; color:var(--muted); max-width:70ch; }

.content-panel { border:1px solid rgba(19,24,38,0.08); background:var(--panel); border-radius:18px; padding:28px; box-shadow:var(--shadow); }
.card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:14px; }
.card { border-radius:12px; border:1px solid var(--line); background:#fff; padding:14px; transition:transform .28s ease, border-color .28s ease; }
.card h3 { margin-bottom:8px; font-size:1.05rem; }
.card p { margin:0; color:var(--muted); font-size:0.95rem; }
.card:hover { transform:translateY(-4px); border-color:var(--accent); }

.photo-strip { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:14px; }
.photo-strip figure { margin:0; position:relative; overflow:hidden; border-radius:12px; border:1px solid rgba(19,24,38,0.12); background:#f8f8f5; }
.photo-strip img { display:block; width:100%; height:160px; object-fit:cover; transition:transform .35s ease; }
.photo-strip figure:hover img { transform:scale(1.04); }
.photo-strip figcaption { position:absolute; left:10px; bottom:10px; padding:4px 8px; font-size:0.78rem; font-weight:700; letter-spacing:0.02em; border-radius:999px; color:#fff; background: rgba(10,86,97,0.86); }

.tag-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.tag { border:1px solid rgba(15,143,151,0.34); background:rgba(15,143,151,0.1); border-radius:999px; padding:8px 14px; font-size:0.9rem; color:var(--accent-dark); font-weight:700; }

.contact { text-align:center; }
.contact a { color:var(--accent-dark); font-weight:700; text-decoration:none; }

.footer { margin-top:26px; text-align:center; padding:22px; font-size:0.9rem; color:#f3f6ff; background: linear-gradient(120deg,#13203f,#0f3d50); }

.reveal { opacity:0; transform:translateY(14px); animation: rise .65s ease forwards; }
.delay-1 { animation-delay:0.08s; }
.delay-2 { animation-delay:0.16s; }
.delay-3 { animation-delay:0.24s; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

:focus { outline: 3px solid rgba(15,143,151,0.16); outline-offset:3px; }

@media (max-width:900px) {
	.hero-grid { grid-template-columns:1fr; }
	.media-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
	.photo-strip { grid-template-columns:1fr; }
	.hero-main, .hero-panel, .content-panel { padding:18px; }
	.top-nav .container { gap:8px; flex-direction:column; align-items:flex-start; }
	.logo { height:44px; }
}