:root {
color-scheme: light;
--header-height: 73px;
--stable-vh: 1vh;
--bg: #0f2f38;
--bg-alt: #123743;
--bg-light: #f4fbfb;
--bg-light-alt: #e6f1f0;
--bg-dark-gradient: radial-gradient(circle at 16% 18%, rgba(38, 93, 90, 0.55), transparent 52%),
radial-gradient(circle at 82% 12%, rgba(18, 63, 76, 0.6), transparent 48%),
radial-gradient(circle at 42% 78%, rgba(35, 84, 87, 0.35), transparent 58%),
linear-gradient(
160deg,
#102f38 0%,
#0f394d 28%,
#123f4c 52%,
#235457 74%,
#265d5a 100%
);
--ink: #eef7f6;
--muted: #c2d4d6;
--ink-dark: #0d1d22;
--muted-dark: #4e5c5f;
--accent: #2f8f8a;
--accent-strong: #246f6b;
--accent-soft: rgba(47, 143, 138, 0.18);
--card: #143a44;
--card-light: #ffffff;
--border: rgba(255, 255, 255, 0.2);
--border-light: #d5e2e0;
--shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
--shadow-light: 0 24px 60px rgba(15, 29, 29, 0.12);
--radius-lg: 28px;
--radius-md: 18px;
--radius-sm: 12px;
--step-gap: 24px;
}
@supports (height: 100lvh) {
:root {
--stable-vh: 1lvh;
}
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(180deg, #0f2f38 0%, #0b242c 100%);
color: var(--ink);
line-height: 1.6;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
.container {
width: min(1120px, 92vw);
margin: 0 auto;
}
.section {
padding: 90px 0;
}
.section.light {
--ink: var(--ink-dark);
--muted: var(--muted-dark);
--card: var(--card-light);
--border: var(--border-light);
--shadow: var(--shadow-light);
--bg-alt: var(--bg-light-alt);
background: var(--bg-light);
color: var(--ink);
}
.section.dark {
background: var(--bg-dark-gradient);
color: var(--ink);
}
.global-section {
background: #0f2f38;
color: var(--ink);
position: relative;
min-height: clamp(860px, calc(var(--stable-vh, 1vh) * 125), 1280px);
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
@supports (height: 100svh) {
.global-section {
min-height: clamp(860px, calc(var(--stable-vh, 1svh) * 125), 1280px);
}
}
#global {
scroll-margin-top: -1px;
}
.global-section .container {
position: relative;
z-index: 6;
padding-top: 110px;
padding-bottom: 48px;
pointer-events: none;
}
.global-section .container.global-details {
pointer-events: auto;
}
.global-section .section-head {
grid-template-columns: 1fr;
gap: 18px;
max-width: min(720px, 92vw);
background: rgba(8, 20, 24, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
padding: 24px 26px;
backdrop-filter: blur(10px);
pointer-events: none;
z-index: 7;
}
.global-details.is-hidden {
display: none;
}
.section.hero {
background: var(--bg-dark-gradient);
padding: 70px 0 60px;
min-height: calc(var(--stable-vh, 1vh) * 100 - var(--header-height));
display: flex;
align-items: center;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.72rem;
font-weight: 600;
color: var(--muted);
margin: 0 0 14px;
}
h1,
h2,
h3,
h4 {
font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", sans-serif;
line-height: 1.1;
margin: 0 0 16px;
}
h1 {
font-size: clamp(2.6rem, 4vw, 3.8rem);
}
h2 {
font-size: clamp(2rem, 3vw, 2.8rem);
}
h3 {
font-size: 1.4rem;
}
h4 {
font-size: 1.2rem;
margin-bottom: 8px;
}
p {
margin: 0 0 16px;
color: var(--muted);
}
.lead {
font-size: 1.05rem;
color: var(--ink);
max-width: 52ch;
}
.microcopy {
font-size: 0.9rem;
color: var(--muted);
}
.site-header {
position: sticky;
top: 0;
z-index: 10;
height: var(--header-height);
background: linear-gradient(
90deg,
rgba(38, 93, 90, 0.55) 0%,
rgba(18, 63, 76, 0.06) 45%,
rgba(15, 57, 77, 0.04) 100%
),
rgba(12, 35, 43, 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
height: 100%;
padding: 0;
position: relative;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 600;
color: var(--ink);
}
.brand--text {
font-size: 1.05rem;
letter-spacing: 0.04em;
text-transform: none;
}
.nav-links {
display: flex;
gap: 16px;
justify-content: flex-end;
flex-wrap: wrap;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.72rem;
}
.nav-links a {
position: relative;
color: rgba(238, 247, 246, 0.72);
padding: 8px 14px 10px;
border-radius: 999px;
transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.nav-links a::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 4px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(62, 208, 165, 0.9), rgba(47, 143, 138, 0.3));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
.nav-links a:hover {
color: #ffffff;
transform: translateY(-1px);
}
.nav-links a:hover::after {
transform: scaleX(1);
}
.nav-links .nav-cta {
display: none;
}
.nav-links .nav-cta::after {
display: none;
}
.btn.nav-desktop-cta {
display: inline-flex;
justify-self: end;
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.06);
color: #eaf6f4;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.2s ease, border 0.2s ease, background 0.2s ease;
}
.nav-toggle:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 992px) {
:root {
--header-height: 67px;
}
.site-header .container {
width: min(1120px, 92vw);
}
.nav {
grid-template-columns: auto 1fr;
}
.btn.nav-desktop-cta {
display: none;
}
.nav-links {
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
width: auto;
transform: none;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin: 0;
padding-top: 16px;
padding-bottom: 20px;
--menu-safe-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));
padding-left: calc(max(4vw, 24px) + var(--menu-safe-inline));
padding-right: calc(max(4vw, 24px) + var(--menu-safe-inline));
background: linear-gradient(
90deg,
rgba(38, 93, 90, 0.55) 0%,
rgba(18, 63, 76, 0.06) 45%,
rgba(15, 57, 77, 0.04) 100%
),
rgba(12, 35, 43, 0.98);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0 0 18px 18px;
display: none;
z-index: 12;
}
.nav-links.is-open {
display: flex;
}
.nav-links a {
width: 100%;
}
.nav-links .nav-cta {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
margin-left: 0;
margin-top: 6px;
padding: 10px 16px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.nav-toggle {
display: inline-flex;
justify-self: end;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
border-radius: 999px;
border: 1px solid transparent;
font-weight: 600;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn.primary {
background: #f4fbfb;
color: #0d1d22;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.btn.primary:hover {
background: #e6f1f0;
border-color: rgba(255, 255, 255, 0.7);
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.nav .btn.primary {
height: 40px;
padding: 0 18px;
font-size: 0.85rem;
letter-spacing: 0.02em;
}
.btn.ghost {
border-color: var(--border);
color: var(--ink);
background: transparent;
}
.btn.ghost:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-1px);
}
:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])) {
-webkit-tap-highlight-color: transparent;
}
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(47, 143, 138, 0.28);
}
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
@supports selector(:has(*)) {
:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible:has(:where(img, svg, picture)) {
outline: none;
box-shadow: none;
}
}
:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible :where(img, svg, picture) {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 8px;
box-shadow: 0 0 0 3px rgba(47, 143, 138, 0.24);
}
:where(img, svg, picture):focus,
:where(img, svg, picture):focus-visible {
outline: none !important;
box-shadow: none !important;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: center;
}
.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 24px 0 12px;
}
.logo-strip {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
align-items: center;
filter: grayscale(1) brightness(1.6);
opacity: 0.8;
}
.logo-strip img {
max-height: 28px;
object-fit: contain;
}
.hero-image {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
height: clamp(320px, calc(var(--stable-vh, 1vh) * 55), 560px);
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 0;
}
.hero-image picture {
display: block;
width: 100%;
height: 100%;
}
.card-title {
color: var(--ink);
font-weight: 600;
margin-bottom: 8px;
}
.section-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 40px;
align-items: end;
}
.section-subtitle {
max-width: 46ch;
}
.goals-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.goal-card {
background: var(--card);
padding: 26px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
box-shadow: var(--shadow);
display: grid;
gap: 10px;
}
.goal-card span {
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--muted);
font-weight: 600;
}
.community-home {
background: transparent;
padding: 90px 0;
font-family: inherit;
}
.community-home .container {
position: relative;
}
.community-home h2,
.community-home h3 {
font-family: inherit;
}
.community-home-header {
text-align: center;
max-width: 760px;
margin: 0 auto 40px;
}
.community-home-kicker {
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted-dark);
margin-bottom: 12px;
}
.community-home-title {
font-size: 30px;
color: var(--ink-dark);
font-weight: 600;
margin-bottom: 12px;
}
.community-home-subtitle {
font-size: 16px;
color: var(--muted-dark);
line-height: 1.6;
margin: 0;
}
.community-home-spotlight {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 24px;
align-items: center;
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
padding: 24px;
}
.community-home-copy {
display: flex;
flex-direction: column;
padding: 0;
gap: 14px;
}
.community-home-quote-label {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted-dark);
}
.community-home-quote-short {
font-size: 0.98rem;
color: var(--ink-dark);
line-height: 1.6;
margin: 0;
}
.community-home-quote-details {
font-size: 0.88rem;
color: var(--muted-dark);
display: grid;
gap: 10px;
}
.community-home-quote-toggle {
cursor: pointer;
font-size: 0.74rem;
text-transform: none;
letter-spacing: 0.08em;
color: var(--muted-dark);
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
padding: 0;
background: transparent;
}
.community-home-quote-details p {
margin: 0;
line-height: 1.6;
letter-spacing: 0.01em;
}
.community-home-quote-details .community-home-quote-short {
display: block;
}
.community-home-quote-details .community-home-quote-full {
display: none;
}
.community-home-quote-details.is-open .community-home-quote-short {
display: none;
}
.community-home-quote-details.is-open .community-home-quote-full {
display: block;
}
.local-variant {
margin-top: 26px;
}
.local-variant:first-of-type {
margin-top: 0;
}
.local-variant-label {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted-dark);
margin: 0 0 12px;
}
.local-tag {
display: inline-flex;
padding: 6px 12px;
border-radius: 999px;
background: rgba(21, 58, 69, 0.08);
color: #153a45;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
}
.local-split {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 24px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: 22px;
align-items: center;
}
.local-split-copy h3 {
margin: 12px 0 10px;
color: var(--ink-dark);
}
.local-split-copy p {
color: var(--muted-dark);
margin-bottom: 16px;
}
.local-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.local-stats strong {
display: block;
color: var(--ink-dark);
font-size: 1.05rem;
}
.local-stats span {
color: var(--muted-dark);
font-size: 0.82rem;
}
.local-split-media {
position: relative;
}
.local-split-media img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 18px;
}
.local-split-quote {
position: absolute;
left: 16px;
bottom: 16px;
right: 16px;
background: rgba(8, 20, 24, 0.78);
color: #f3fbfa;
padding: 12px 14px;
border-radius: 14px;
font-size: 0.85rem;
}
.local-center {
text-align: center;
padding: 28px 24px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--card);
box-shadow: var(--shadow);
display: grid;
gap: 16px;
justify-items: center;
}
.local-center img {
width: 120px;
height: 120px;
border-radius: 18px;
object-fit: cover;
}
.local-center blockquote {
margin: 0;
font-size: 1rem;
color: var(--ink-dark);
line-height: 1.6;
}
.local-center-meta {
font-size: 0.8rem;
color: var(--muted-dark);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.local-overlay {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
gap: 0;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--shadow);
background: var(--card);
}
.local-overlay-media img {
width: 100%;
height: 100%;
min-height: 240px;
object-fit: cover;
}
.local-overlay-copy {
padding: 24px;
display: grid;
gap: 12px;
align-content: center;
}
.local-overlay-copy h3 {
margin: 0;
color: var(--ink-dark);
}
.local-overlay-copy p {
color: var(--muted-dark);
margin: 0;
}
.local-timeline {
display: grid;
gap: 16px;
position: relative;
padding-left: 18px;
}
.local-timeline::before {
content: "";
position: absolute;
left: 6px;
top: 0;
bottom: 0;
width: 2px;
background: rgba(21, 58, 69, 0.12);
}
.local-timeline-item {
position: relative;
display: grid;
gap: 8px;
}
.local-timeline-dot {
position: absolute;
left: -1px;
top: 6px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #2a8f86;
}
.local-timeline-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 16px 18px;
box-shadow: var(--shadow);
}
.local-timeline-card p {
margin: 8px 0 0;
color: var(--muted-dark);
}
.local-rail {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 20px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow);
align-items: center;
}
.local-rail img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 16px;
}
.local-rail-copy h3 {
margin: 10px 0;
color: var(--ink-dark);
}
.local-rail-copy p {
color: var(--muted-dark);
}
.local-rail-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.local-rail-tags span {
background: rgba(21, 58, 69, 0.08);
color: #153a45;
padding: 6px 10px;
border-radius: 999px;
font-size: 0.72rem;
}
.local-duo {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
gap: 20px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 22px;
box-shadow: var(--shadow);
}
.local-duo-quote h3 {
margin: 0 0 10px;
color: var(--ink-dark);
}
.local-duo-quote p {
color: var(--muted-dark);
margin: 0 0 12px;
}
.local-duo-source {
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-dark);
}
.local-duo-stats {
display: grid;
gap: 12px;
align-content: center;
}
.local-duo-stats strong {
display: block;
color: var(--ink-dark);
font-size: 1.05rem;
}
.local-duo-stats span {
color: var(--muted-dark);
font-size: 0.82rem;
}
.local-quote-hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
gap: 20px;
align-items: center;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 22px;
box-shadow: var(--shadow);
}
.local-quote-hero img {
width: 100%;
height: 200px;
border-radius: 16px;
object-fit: cover;
}
.local-quote-hero blockquote {
margin: 12px 0;
font-size: 1.05rem;
color: var(--ink-dark);
line-height: 1.6;
}
.local-quote-hero-meta {
color: var(--muted-dark);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.local-mini-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.local-mini-grid--spaced {
margin-top: 28px;
}
.local-mini-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 18px;
box-shadow: var(--shadow);
}
.local-mini-card h4 {
margin-bottom: 8px;
color: var(--ink-dark);
}
.local-mini-card p {
margin: 0;
color: var(--muted-dark);
font-size: 0.9rem;
}
.local-gallery {
display: grid;
gap: 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 22px;
box-shadow: var(--shadow);
}
.local-gallery-images {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.local-gallery-images img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 14px;
}
.local-gallery-copy h3 {
margin: 0 0 8px;
color: var(--ink-dark);
}
.local-gallery-copy p {
margin: 0;
color: var(--muted-dark);
}
.local-stack {
display: grid;
gap: 14px;
}
.local-stack-card {
display: grid;
grid-template-columns: 120px 1fr;
gap: 16px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px;
box-shadow: var(--shadow);
align-items: center;
}
.local-stack-card img {
width: 120px;
height: 90px;
border-radius: 14px;
object-fit: cover;
}
.local-stack-card h3 {
margin: 10px 0 6px;
color: var(--ink-dark);
}
.local-stack-card p {
margin: 0;
color: var(--muted-dark);
}
.local-side {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 16px;
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
overflow: hidden;
}
.local-side-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0 -18px;
}
.local-side-media {
position: relative;
height: 300px;
}
.local-media-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(8, 20, 24, 0.75), rgba(8, 20, 24, 0.5));
color: #f3fbfa;
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 10px 14px;
text-align: center;
border-radius: 0 0 18px 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.local-side-copy {
padding: 14px;
display: grid;
gap: 8px;
align-content: center;
}
.local-side-copy h3 {
margin: 0;
color: var(--ink-dark);
}
.launches-cinematic {
background: transparent;
border-radius: 24px;
padding: 34px 0 28px;
overflow: visible;
position: relative;
left: 50%;
right: 50%;
width: 100vw;
margin-left: -50vw;
margin-right: -50vw;
}
.launches-cinematic-track {
display: flex;
gap: 22px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 24px 0 44px;
}
#local-support .section-head {
margin-bottom: 28px;
}
#local-support .local-variant {
margin-top: 16px;
}
#local-support .launches-cinematic {
padding: 18px 0 14px;
}
#local-support .launches-cinematic-track {
padding: 14px 0 30px;
}
.launches-cinematic-track::-webkit-scrollbar {
display: none;
}
.launches-cinematic-track::before,
.launches-cinematic-track::after {
content: "";
flex: 0 0 max(16px, calc((100vw - 1160px) / 2));
}
.launches-cinematic-card {
position: relative;
min-width: 380px;
height: 380px;
border-radius: 18px;
overflow: hidden;
scroll-snap-align: center;
border: 1px solid rgba(15, 40, 50, 0.12);
box-shadow: 0 10px 28px rgba(15, 40, 50, 0.12);
display: grid;
grid-template-rows: minmax(0, 1fr) 140px;
background: transparent;
text-decoration: none;
color: inherit;
}
.launches-cinematic-media {
position: relative;
width: 100%;
min-height: 0;
border-radius: 0;
overflow: hidden;
}
.launches-cinematic-media > img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 0;
align-self: stretch;
display: block;
}
.launches-cinematic-media > picture {
width: 100%;
height: 100%;
min-height: 0;
align-self: stretch;
display: block;
}
.launches-cinematic-media > picture > img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 0;
display: block;
}
.launches-cinematic-card.is-logo .launches-cinematic-media > img {
object-fit: contain;
background: #f6f2ea;
padding: 32px;
}
.launches-cinematic-card.is-logo .launches-cinematic-media > picture > img {
object-fit: contain;
background: #f6f2ea;
padding: 32px;
}
.launches-cinematic-card.is-logo.is-white .launches-cinematic-media > img {
background: #ffffff;
padding: 36px;
}
.launches-cinematic-card.is-logo.is-white .launches-cinematic-media > picture > img {
background: #ffffff;
padding: 36px;
}
.launches-cinematic-logo {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(8, 20, 24, 0.35);
opacity: 0;
transition: opacity 0.25s ease;
border-radius: 0;
}
.launches-cinematic-card:hover .launches-cinematic-logo {
opacity: 1;
}
.launches-cinematic-logo-inner {
width: 100%;
height: 100%;
border-radius: 0;
background: rgba(246, 242, 234, 0.9);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
}
.launches-cinematic-logo img {
width: 70%;
height: auto;
max-width: 220px;
max-height: 160px;
object-fit: contain;
}
.launches-cinematic-card.is-logo.is-white .launches-cinematic-logo-inner,
.launches-cinematic-card--more .launches-cinematic-logo-inner {
background: #ffffff;
}
.launches-cinematic-card.is-logo.is-white .launches-cinematic-media > img.fidola-launch-image {
object-fit: cover;
padding: 0 26px;
object-position: 0 36px;
}
.launches-cinematic-card.is-logo.is-white .launches-cinematic-media > picture > img.fidola-launch-image {
object-fit: cover;
padding: 0 26px;
object-position: 0 36px;
}
.launches-cinematic-card--fionas .launches-cinematic-logo-inner {
background: rgb(253 204 210);
}
.launches-cinematic-card--wingchun .launches-cinematic-logo-inner {
background: #fff;
}
.launches-cinematic-card--fidola .launches-cinematic-logo-inner {
padding: 64px;
}
.launches-cinematic-overlay {
position: static;
padding: 16px 18px 18px;
background: #fff;
color: #0f2f38;
border-radius: 0;
}
.launches-cinematic-overlay h3 {
margin: 0 0 6px;
font-size: 1.1rem;
max-width: 18ch;
}
.launches-cinematic-overlay span {
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.8;
}
.launches-cinematic-overlay p {
margin: 6px 0 0;
font-size: 0.85rem;
line-height: 1.45;
opacity: 0.9;
max-width: 38ch;
}
.launches-cinematic-card--more {
display: flex;
align-items: stretch;
background: linear-gradient(135deg, rgba(21, 58, 69, 0.06), rgba(40, 168, 101, 0.08));
border: 1px dashed #dce5ec;
}
.launches-cinematic-more {
padding: 22px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
color: #0f2f38;
}
.launches-cinematic-more h3 {
margin: 0;
font-size: 1.1rem;
}
.launches-cinematic-pill {
display: inline-flex;
align-self: flex-start;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: rgba(40, 168, 101, 0.16);
color: #1f7b52;
font-weight: 600;
}
.launches-cinematic-meta {
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(15, 47, 56, 0.65);
}
.launches-cinematic-icon {
width: 26px;
height: 26px;
display: block;
flex: 0 0 auto;
color: #1f7b52;
}
.launches-cinematic-icon path {
fill: currentColor;
}
.local-side-copy p {
margin: 0;
color: var(--muted-dark);
}
.local-side-pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.local-side-pills span {
background: rgba(21, 58, 69, 0.08);
color: #153a45;
padding: 6px 10px;
border-radius: 999px;
font-size: 0.72rem;
}
.local-combo {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 24px;
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
padding: 22px;
align-items: center;
}
.local-combo-media img {
width: 100%;
height: 260px;
object-fit: cover;
border-radius: 18px;
}
.local-combo-copy h3 {
margin: 12px 0 10px;
color: var(--ink-dark);
}
.local-combo-copy p {
margin: 0 0 16px;
color: var(--muted-dark);
}
.local-combo-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.local-combo-meta strong {
display: block;
color: var(--ink-dark);
font-size: 1.02rem;
}
.local-combo-meta span {
color: var(--muted-dark);
font-size: 0.82rem;
}
.local-quote-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
gap: 20px;
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
padding: 22px;
align-items: center;
}
.local-quote-main blockquote {
margin: 0;
font-size: 1.05rem;
line-height: 1.6;
color: var(--ink-dark);
}
.local-quote-source {
display: block;
margin-top: 12px;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-dark);
}
.local-quote-meta {
display: grid;
gap: 12px;
}
.local-quote-meta strong {
display: block;
color: var(--ink-dark);
font-size: 1rem;
}
.local-quote-meta span {
color: var(--muted-dark);
font-size: 0.82rem;
}
.community-home-media img {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(15, 40, 50, 0.12);
}
.community-home-caption {
margin-top: 12px;
margin-bottom: 0;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-dark);
}
.community-home-projects-header {
margin-top: 56px;
text-align: center;
}
.community-home-toggle {
border: none;
background: linear-gradient(
180deg,
rgba(18, 63, 76, 0) 0%,
rgba(18, 63, 76, 0.08) 100%
);
color: var(--ink-dark);
padding: 12px 28px;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
transition: color 0.2s ease, transform 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
}
.community-home-toggle-icon svg {
width: 12px;
height: 8px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.2s ease;
}
.community-home-toggle[aria-expanded="true"] .community-home-toggle-icon svg {
transform: rotate(180deg);
}
.community-home-toggle:hover {
color: #0d1d22;
transform: translateY(-1px);
background: rgba(13, 29, 34, 0.12);
}
.community-home-projects {
margin-top: 34px;
max-height: 0;
opacity: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
transition: max-height 0.45s ease, opacity 0.35s ease;
}
.community-home-projects.is-open {
opacity: 1;
overflow-x: auto;
scroll-behavior: auto;
padding: 12px 0 24px;
scroll-snap-type: none;
}
.community-home-projects--static {
max-height: none;
opacity: 1;
overflow-x: auto;
padding: 12px 0 24px;
transition: none;
}
.community-home-projects-inner {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
padding: 18px 12px 24px;
}
.community-home-projects-inner.is-scroll {
display: flex;
gap: 20px;
}
.community-home-projects-inner.is-scroll::before,
.community-home-projects-inner.is-scroll::after {
content: "";
flex: 0 0 max(16px, calc((100vw - 1160px) / 2));
}
.community-home-projects-inner.is-scroll .community-project-card {
min-width: 280px;
scroll-snap-align: start;
}
.community-project-card {
background: #ffffff;
border-radius: 18px;
padding: 22px;
border: 1px solid #dce5ec;
box-shadow: 0 12px 30px rgba(15, 40, 50, 0.08);
display: flex;
flex-direction: column;
min-height: 260px;
}
.community-project-card--link {
text-decoration: none;
color: inherit;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.community-project-card--link:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(15, 40, 50, 0.12);
}
.community-project-image {
height: 140px;
border-radius: 14px;
overflow: hidden;
background: #eef3f6;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.community-project-image > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.community-project-image--contain > img {
object-fit: contain;
padding: 16px;
background: #fff;
}
.community-project-card--logo-overlay .community-project-logo {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(8, 20, 24, 0.35);
opacity: 0;
transition: opacity 0.25s ease;
}
.community-project-card--logo-overlay:hover .community-project-logo {
opacity: 1;
}
.community-project-logo-image {
width: 100%;
height: 100%;
object-fit: contain;
padding: 0.6rem;
}
.community-project-logo-inner {
width: 100%;
height: 100%;
border-radius: 12px;
background: rgba(246, 242, 234, 0.9);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.community-project-card--fidola .community-project-logo-inner {
background: #ffffff;
}
.community-project-card--wingchun .community-project-logo-inner {
background: #ffffff;
}
.community-project-card--fionas .community-project-logo-inner {
background: rgb(253 204 210);
}
.community-project-card--fidola .community-project-image {
background: transparent;
}
.community-project-status {
align-self: flex-start;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 999px;
background: rgba(21, 58, 69, 0.12);
color: #153a45;
font-weight: 600;
}
.community-project-title {
font-size: 18px;
color: #153a45;
margin: 12px 0 6px;
}
.community-project-meta {
display: block;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7a8c94;
margin-bottom: 10px;
}
.community-project-card p {
font-size: 14px;
color: #3b5b66;
line-height: 1.6;
margin-bottom: 0;
}
.community-project-note {
margin-top: 10px;
font-size: 12px;
color: #5b6d75;
font-style: italic;
line-height: 1.5;
}
.community-project-card--more {
background: linear-gradient(135deg, rgba(21, 58, 69, 0.06), rgba(40, 168, 101, 0.08));
border-style: dashed;
align-items: flex-start;
text-align: left;
justify-content: center;
}
.community-project-card--more .community-project-status {
background: rgba(40, 168, 101, 0.15);
color: #1f7b52;
align-self: flex-start;
}
.community-project-icon {
font-size: 28px;
color: #1f7b52;
margin-bottom: 12px;
}
@media (max-width: 1180px) {
.community-home-quote-short {
font-size: 0.95rem;
}
}
@media (max-width: 992px) {
.community-home-media img {
height: 220px;
}
}
@media (max-width: 930px) {
.community-home-spotlight {
grid-template-columns: 1fr;
}
.local-split {
grid-template-columns: 1fr;
}
.local-overlay {
grid-template-columns: 1fr;
}
.local-rail,
.local-duo,
.local-quote-hero {
grid-template-columns: 1fr;
}
.local-side,
.local-quote-grid,
.local-combo {
grid-template-columns: 1fr;
}
.local-stack-card {
grid-template-columns: 1fr;
}
.local-stack-card img {
width: 100%;
height: 160px;
}
.local-mini-grid {
grid-template-columns: 1fr;
}
.local-gallery-images {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.community-home-media img {
height: 200px;
}
}
@media (max-width: 700px) {
.community-home-quote-short {
font-size: 0.9rem;
}
}
@media (max-width: 520px) {
.start-grid,
.footer-grid,
.footer-grid--compact {
grid-template-columns: 1fr;
}
.footer-grid > div:last-child {
text-align: left;
}
}
@media (max-width: 480px) {
.testimonial-hover-card {
max-width: min(300px, 86vw);
}
.testimonial-hover-avatar img {
width: 46px;
height: 46px;
}
.testimonial-hover-avatar.avatar--tl {
left: 4%;
}
.testimonial-hover-avatar.avatar--tr {
right: 4%;
}
.testimonial-hover-avatar.avatar--bl {
left: 6%;
}
.testimonial-hover-avatar.avatar--br {
right: 6%;
}
}
@media (max-width: 640px) {
.community-home-spotlight {
padding: 20px;
}
.community-home-copy {
text-align: left;
}
.local-center img {
width: 100%;
height: 180px;
}
}
.work-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.work-card {
background: var(--card);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--shadow);
display: grid;
grid-template-columns: 1fr;
}
.work-media {
padding: 28px;
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.logo-panel {
align-items: center;
background: #e8f4f3;
}
.logo-panel img {
width: 120px;
}
.accent-panel {
background: linear-gradient(140deg, #0f1d1d, #1f3a38);
color: #fff;
}
.neutral-panel {
background: linear-gradient(140deg, #eef5f4, #dde8e7);
}
.image-panel {
padding: 0;
}
.image-panel img {
width: 100%;
height: 220px;
object-fit: cover;
}
.badge {
background: rgba(255, 255, 255, 0.2);
color: inherit;
display: inline-flex;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.work-body {
padding: 26px 28px 30px;
}
.meta {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
font-size: 0.85rem;
color: var(--muted);
margin-bottom: 12px;
}
.outcome {
color: var(--ink);
font-weight: 500;
}
.stack {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.stack span {
background: var(--bg-alt);
color: var(--ink);
border: 1px solid var(--border);
padding: 6px 10px;
border-radius: 999px;
font-size: 0.8rem;
}
.launch-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
font-size: 0.85rem;
color: var(--muted);
}
.launch-highlight {
font-weight: 600;
color: var(--ink);
}
.map-grid {
position: absolute;
inset: 0;
}
.map-panel {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
display: grid;
gap: 18px;
}
.map-bleed {
position: absolute;
inset: 0;
width: 100%;
left: 0;
transform: none;
overflow: hidden;
}
.global-section .map-bleed.reveal,
.global-section .map-bleed.reveal.is-visible {
transform: none;
}
.map-controls {
position: absolute;
left: 50%;
bottom: 58px;
transform: translateX(-50%);
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
max-width: min(1160px, 94vw);
padding: 10px 12px;
border-radius: 18px;
background: rgba(13, 29, 34, 0.65);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(6px);
z-index: 3;
pointer-events: none;
}
.map-legend {
position: absolute;
left: 50%;
bottom: 140px;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 14px;
background: rgba(13, 29, 34, 0.68);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(243, 251, 250, 0.7);
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(6px);
z-index: 5;
pointer-events: none;
}
.map-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.map-legend-swatch {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.map-legend-swatch--active {
background: rgba(62, 208, 165, 0.85);
border-color: rgba(255, 255, 255, 0.14);
}
.map-legend-swatch--previous {
background: rgba(88, 170, 128, 0.35);
border-color: rgba(255, 255, 255, 0.28);
}
.map-legend-swatch--neutral {
background: rgba(88, 170, 128, 0.08);
border-color: rgba(255, 255, 255, 0.08);
}
.map-region-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
justify-content: center;
width: 100%;
pointer-events: auto;
}
.map-view-toggle {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
padding-right: 8px;
margin-right: 4px;
border-right: 1px solid rgba(255, 255, 255, 0.18);
pointer-events: auto;
}
.map-control {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.35);
color: #eef7f6;
border-radius: 999px;
padding: 6px 10px;
font-size: 0.72rem;
white-space: nowrap;
cursor: pointer;
transition: none;
pointer-events: auto;
}
.map-control:hover {
border-color: var(--accent);
}
.map-control.is-active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.map-control[data-region-control] {
border: none;
background: transparent;
padding: 4px 6px;
color: rgba(233, 247, 245, 0.72);
font-size: 0.68rem;
letter-spacing: 0.04em;
}
.map-control[data-region-control]:hover {
color: #fff;
border-color: transparent;
}
.map-control[data-region-control].is-active {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: none;
}
.map-surface {
position: relative;
height: 100%;
min-height: 100%;
border-radius: var(--radius-md);
background: radial-gradient(circle at 20% 20%, rgba(25, 120, 150, 0.35), transparent 55%),
radial-gradient(circle at 80% 10%, rgba(10, 70, 110, 0.5), transparent 50%),
linear-gradient(160deg, #0b3a4b 0%, #092634 55%, #081e28 100%);
overflow: hidden;
border: 1px solid var(--border);
}
.map-surface::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
#0f2f38 0%,
rgba(15, 47, 56, 0.9) 10%,
rgba(15, 47, 56, 0) 35%,
rgba(15, 47, 56, 0) 65%,
rgba(15, 47, 56, 0.9) 90%,
#0f2f38 100%
);
z-index: 2;
pointer-events: none;
}
.map-surface--bleed {
border-radius: 0;
border: none;
}
.map-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.map-globe-preview {
position: absolute;
right: 28px;
bottom: 120px;
width: 180px;
height: 180px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
background: radial-gradient(circle at 25% 20%, rgba(18, 63, 76, 0.45), transparent 55%),
radial-gradient(circle at 70% 80%, rgba(6, 18, 24, 0.4), transparent 60%),
rgba(8, 20, 24, 0.75);
backdrop-filter: blur(6px);
z-index: 6;
display: grid;
place-items: center;
pointer-events: none;
box-shadow: 0 16px 26px rgba(0, 0, 0, 0.28);
overflow: hidden;
}
.map-globe-preview--global {
left: -72px;
top: 96px;
right: auto;
bottom: auto;
width: 72px;
height: 72px;
background: radial-gradient(circle at 25% 20%, rgba(18, 63, 76, 0.65), transparent 55%),
radial-gradient(circle at 70% 75%, rgba(6, 18, 24, 0.55), transparent 60%),
#09293a;
border-color: rgba(9, 41, 58, 0.6);
z-index: 8;
opacity: 0;
transform: translateY(6px) scale(0.94);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.map-globe-svg {
width: 100%;
height: 100%;
}
.map-globe-label {
display: none;
}
.map-globe-svg {
border-radius: 50%;
}
.map-globe-preview::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 55%);
opacity: 0.65;
}
.global-section .section-head:hover + .map-globe-preview--global,
.global-section .section-head:hover ~ .map-globe-preview--global {
opacity: 1;
transform: translateY(0) scale(1);
}
.globe-land {
fill: rgba(88, 170, 128, 0.12);
stroke: rgba(255, 255, 255, 0.1);
stroke-width: 0.5;
}
.globe-land--previous {
fill: rgba(88, 170, 128, 0.35);
}
.globe-land--active {
fill: rgba(62, 208, 165, 0.85);
}
.map-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.map-tooltip {
position: fixed;
z-index: 50;
display: grid;
gap: 10px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(5, 12, 16, 0.992);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #f3fbfa;
font-size: 0.75rem;
letter-spacing: 0.02em;
width: min(360px, 84vw);
max-height: 560px;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.36);
backdrop-filter: blur(8px) saturate(115%);
-webkit-backdrop-filter: blur(8px) saturate(115%);
overflow: hidden;
}
.map-tooltip-overlay {
position: fixed;
inset: 0;
z-index: 49;
background: rgba(6, 14, 18, 0.52);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.map-tooltip-overlay.is-visible {
opacity: 1;
pointer-events: auto;
}
.map-tooltip.is-visible {
opacity: 1;
transform: translate(-50%, -50%);
pointer-events: auto;
}
.map-tooltip.map-tooltip--modal {
left: 50vw;
top: calc(var(--stable-vh, 1vh) * 50);
width: min(440px, calc(100vw - 18px));
max-height: min(calc(var(--stable-vh, 1vh) * 80), 720px);
padding: 0;
transform: translate(-50%, -50%) scale(0.98);
background: rgba(4, 10, 14, 0.996);
border-color: rgba(255, 255, 255, 0.16);
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
backdrop-filter: blur(10px) saturate(118%);
-webkit-backdrop-filter: blur(10px) saturate(118%);
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.map-tooltip.map-tooltip--modal.is-visible {
transform: translate(-50%, -50%) scale(1);
}
.map-tooltip.map-tooltip--modal .map-tooltip-header {
position: sticky;
top: 0;
z-index: 3;
padding: 14px 16px 10px;
background: #040a0e;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 1px 0 rgba(4, 10, 14, 0.98);
}
.map-tooltip.map-tooltip--modal .map-tooltip-empty {
padding: 0 16px calc(14px + env(safe-area-inset-bottom));
}
.map-tooltip-header {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
.map-tooltip-flag {
font-size: 1rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.map-tooltip-close {
border: none;
background: rgba(255, 255, 255, 0.12);
color: #f3fbfa;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 0.85rem;
cursor: pointer;
pointer-events: auto;
}
.map-tooltip-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.map-tooltip.map-tooltip--modal .map-tooltip-close {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.map-tooltip.map-tooltip--modal .map-tooltip-close:hover {
background: rgba(255, 255, 255, 0.16);
}
.map-tooltip-name {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-right: auto;
}
.map-tooltip-count {
font-size: 0.65rem;
color: rgba(243, 251, 250, 0.6);
}
.map-tooltip-list {
display: grid;
gap: 8px;
max-height: 440px;
overflow-y: auto;
overflow-x: hidden;
margin-right: -16px;
padding-right: 16px;
scrollbar-gutter: stable;
}
.map-tooltip.map-tooltip--modal .map-tooltip-list {
max-height: none;
overflow: visible;
overflow-y: visible;
margin-right: 0;
padding: 2px 16px calc(14px + env(safe-area-inset-bottom));
}
.map-tooltip-item {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 10px;
display: grid;
gap: 6px;
}
.map-tooltip-item--link {
color: inherit;
text-decoration: none;
}
.map-tooltip-item--link:hover {
border-color: rgba(72, 216, 176, 0.45);
background: rgba(72, 216, 176, 0.09);
}
.map-tooltip-item--note {
border-color: rgba(72, 216, 176, 0.35);
background: rgba(72, 216, 176, 0.08);
}
.map-tooltip-item-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.map-tooltip-item-title {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.map-tooltip-logo {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 6px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
flex-shrink: 0;
}
.map-tooltip-logo img {
display: block;
max-height: 14px;
max-width: 64px;
object-fit: contain;
}
.map-tooltip-title {
font-size: 0.72rem;
font-weight: 600;
color: #f3fbfa;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.map-tooltip-nda {
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: rgba(243, 251, 250, 0.8);
}
.map-tooltip-meta {
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(243, 251, 250, 0.55);
}
.map-tooltip-desc {
font-size: 0.68rem;
color: rgba(243, 251, 250, 0.75);
line-height: 1.45;
margin: 0;
}
.map-tooltip-desc summary {
cursor: pointer;
list-style: none;
color: #f3fbfa;
font-weight: 600;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.map-tooltip-desc summary::-webkit-details-marker {
display: none;
}
.map-tooltip-desc p {
margin: 0;
}
.map-tooltip-empty {
font-size: 0.68rem;
color: rgba(243, 251, 250, 0.65);
}
.map-globe-ring {
fill: none;
stroke: transparent;
stroke-width: 0;
filter: none;
pointer-events: none;
}
.map-land--kosovo {
filter: drop-shadow(0 0 14px rgba(72, 216, 176, 0.72));
}
.map-land--kosovo.pulse-once {
animation: kosovoLandGlow 2.2s ease-in-out 0s 5;
}
@keyframes kosovoLandGlow {
0% {
filter: drop-shadow(0 0 0 rgba(72, 216, 176, 0));
fill: rgba(62, 208, 165, 0.78);
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 0.5;
}
50% {
filter: drop-shadow(0 0 30px rgba(72, 216, 176, 1));
fill: rgba(72, 216, 176, 0.92);
stroke: rgba(255, 255, 255, 0.08);
stroke-width: 0.5;
}
100% {
filter: drop-shadow(0 0 0 rgba(72, 216, 176, 0));
fill: rgba(62, 208, 165, 0.78);
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 0.5;
}
}
.map-kosovo-label {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
fill: rgba(195, 240, 255, 0.95);
paint-order: stroke;
stroke: rgba(7, 24, 28, 0.8);
stroke-width: 3;
text-anchor: middle;
pointer-events: none;
}
.map-kosovo-hit {
fill: transparent;
stroke: none;
pointer-events: auto;
cursor: pointer;
touch-action: manipulation;
}
.map-land {
fill: rgba(88, 170, 128, 0.08);
stroke: rgba(255, 255, 255, 0.02);
stroke-width: 0.6;
transition: fill 0.2s ease, stroke 0.2s ease, filter 0.2s ease, transform 0.2s ease;
pointer-events: none;
transform-box: fill-box;
transform-origin: center;
}
.map-land--previous,
.map-land--active {
cursor: pointer;
pointer-events: auto;
touch-action: manipulation;
}
.map-land--previous {
fill: rgba(88, 170, 128, 0.3);
stroke: rgba(255, 255, 255, 0.05);
}
.map-land--active {
fill: rgba(62, 208, 165, 0.85);
stroke: rgba(255, 255, 255, 0.08);
}
.map-land--previous:hover,
.map-land--active:hover {
fill: rgba(62, 208, 165, 0.95);
stroke: rgba(255, 255, 255, 0.1);
filter: drop-shadow(0 0 12px rgba(62, 208, 165, 0.6));
transform: scale(1.015);
}
.map-land.is-active {
fill: rgba(62, 208, 165, 0.95);
stroke: rgba(255, 255, 255, 0.1);
transform: scale(1.02);
}
.map-land.is-active:hover {
transform: scale(1.05);
}
.map-state {
fill: rgba(88, 170, 128, 0.08);
stroke: rgba(255, 255, 255, 0.02);
stroke-width: 0.7;
transition: fill 0.2s ease, stroke 0.2s ease, filter 0.2s ease, transform 0.2s ease;
pointer-events: none;
transform-box: fill-box;
transform-origin: center;
}
.map-state--previous,
.map-state--active {
pointer-events: auto;
cursor: pointer;
touch-action: manipulation;
}
.map-state--previous {
fill: rgba(88, 170, 128, 0.3);
stroke: rgba(255, 255, 255, 0.05);
}
.map-state--active {
fill: rgba(62, 208, 165, 0.85);
stroke: rgba(255, 255, 255, 0.08);
}
.map-state--previous:hover,
.map-state--active:hover {
fill: rgba(62, 208, 165, 0.95);
stroke: rgba(255, 255, 255, 0.1);
filter: drop-shadow(0 0 10px rgba(47, 143, 138, 0.55));
transform: scale(1.03);
}
.map-state.is-active {
fill: rgba(47, 143, 138, 0.8);
stroke: rgba(255, 255, 255, 0.12);
transform: scale(1.04);
}
.map-state.is-active:hover {
transform: scale(1.07);
}
.client-panel {
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
padding: 24px;
display: grid;
gap: 16px;
}
.client-region {
display: grid;
gap: 16px;
}
.client-list {
display: grid;
gap: 12px;
}
.client-item {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
display: grid;
gap: 4px;
background: var(--bg-alt);
}
.client-item strong {
color: var(--ink);
font-size: 0.95rem;
}
.client-item span {
color: var(--muted);
font-size: 0.82rem;
}
.logo-wall {
margin-top: 32px;
padding: 18px 0 0;
border-top: 1px solid var(--border);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
align-items: center;
filter: grayscale(1) brightness(0.6);
opacity: 0.8;
}
.logo-wall img {
max-height: 30px;
object-fit: contain;
}
.logo-wall a {
display: flex;
align-items: center;
justify-content: center;
}
.service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.service-card {
background: var(--card);
padding: 28px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.service-card ul {
margin: 16px 0 0;
padding-left: 18px;
color: var(--muted);
font-size: 0.98rem;
}
.steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--step-gap);
}
.step {
background: var(--card);
padding: 26px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.step-number {
font-weight: 700;
color: var(--accent);
display: inline-block;
margin-bottom: 8px;
}
.testimonial-variant {
margin-top: 26px;
}
.testimonial-variant:first-of-type {
margin-top: 0;
}
.testimonial-variant-label {
font-size: 0.82rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 14px;
}
.testimonial-ceo-note {
margin: 20px 0 28px;
padding: 20px 22px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
max-width: 720px;
}
.testimonial-ceo-label {
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 10px;
}
.testimonial-ceo-text {
color: var(--ink);
font-size: 1rem;
margin: 0 0 10px;
}
.testimonial-ceo-sign {
margin: 0;
color: var(--muted);
font-size: 0.9rem;
}
.testimonial-grid {
display: grid;
gap: 22px;
}
.testimonial-grid--pill {
display: flex;
flex-direction: column;
align-items: stretch;
}
.testimonial-grid--split {
display: flex;
flex-direction: column;
gap: 18px;
}
.testimonial-grid--line {
display: flex;
flex-direction: column;
gap: 16px;
align-items: stretch;
}
.testimonial-grid--minimal {
display: flex;
flex-direction: column;
gap: 16px;
}
.testimonial-grid--tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.testimonial {
background: var(--card);
padding: 22px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
box-shadow: var(--shadow);
display: flex;
align-items: flex-start;
gap: 16px;
}
.testimonial img {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.testimonial blockquote {
margin: 0;
font-size: 1rem;
color: var(--ink);
font-style: italic;
line-height: 1.55;
}
.testimonial figcaption {
font-size: 0.88rem;
color: var(--ink);
line-height: 1.4;
}
.testimonial figcaption b {
font-weight: 600;
color: var(--ink);
}
.testimonial--pill {
padding: 12px 28px 12px 12px;
border-radius: 999px;
align-items: center;
gap: 20px;
max-width: 860px;
align-self: flex-start;
}
.testimonial--pill img {
width: 96px;
height: 96px;
}
.testimonial--wide {
max-width: 900px;
}
.testimonial--mid {
max-width: 780px;
}
.testimonial--center {
align-self: center;
}
.testimonial--right {
align-self: flex-end;
}
.testimonial--split {
border-radius: 24px;
padding: 22px 26px;
align-items: center;
}
.testimonial--split img {
width: 92px;
height: 92px;
}
.testimonial--tile {
border-radius: 22px;
flex-direction: column;
align-items: flex-start;
gap: 14px;
position: relative;
padding-top: 32px;
}
.testimonial--tile blockquote {
font-style: normal;
position: relative;
padding-top: 10px;
}
.testimonial--tile blockquote::before {
content: "“";
position: absolute;
left: 0;
top: -24px;
font-size: 2.4rem;
color: rgba(21, 58, 69, 0.3);
font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", sans-serif;
}
.testimonial--tile img {
width: 72px;
height: 72px;
margin-top: 6px;
}
.testimonial--line {
background: transparent;
border: none;
box-shadow: none;
padding: 8px 0;
position: relative;
align-items: center;
gap: 18px;
max-width: 880px;
}
.testimonial--line img {
width: 70px;
height: 70px;
}
.testimonial--line-left {
align-self: flex-start;
text-align: left;
}
.testimonial--line-right {
align-self: flex-end;
text-align: right;
flex-direction: row-reverse;
}
.testimonial-line-rail,
.testimonial-line-tilt {
position: absolute;
top: calc(100% + 6px);
height: 4px;
background: rgba(21, 58, 69, 0.22);
filter: blur(1px);
box-shadow: 0 0 18px rgba(21, 58, 69, 0.25);
pointer-events: none;
}
.testimonial-line-rail {
width: 120vw;
}
.testimonial-line-tilt {
width: 70px;
}
.testimonial--line-left .testimonial-line-rail {
left: 100%;
}
.testimonial--line-left .testimonial-line-tilt {
left: calc(100% + 4px);
transform: rotate(45deg);
transform-origin: left center;
}
.testimonial--line-right .testimonial-line-rail {
right: 100%;
}
.testimonial--line-right .testimonial-line-tilt {
right: calc(100% + 4px);
transform: rotate(135deg);
transform-origin: right center;
}
.testimonial--minimal {
background: transparent;
border: none;
box-shadow: none;
padding: 14px 0 14px 18px;
border-left: 2px solid rgba(21, 58, 69, 0.18);
}
.testimonial--minimal img {
width: 60px;
height: 60px;
}
.testimonial-vision {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 24px;
align-items: center;
}
.testimonial-vision-text {
font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", sans-serif;
font-size: clamp(2rem, 3.2vw, 2.8rem);
color: var(--ink);
line-height: 1.08;
}
.testimonial-vision-line {
display: block;
}
.testimonial-vision-meta {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border-radius: 999px;
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.testimonial-vision-meta img {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-vision-meta strong {
display: block;
color: var(--ink);
font-size: 1rem;
}
.testimonial-vision-meta span {
color: var(--muted);
font-size: 0.9rem;
}
.testimonial-optikka {
display: grid;
grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
gap: 26px;
align-items: center;
}
.testimonial-optikka-meta {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 18px;
border-radius: 20px;
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.testimonial-optikka-meta img {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-optikka-meta strong {
display: block;
color: var(--ink);
font-size: 1rem;
line-height: 1.1;
}
.testimonial-optikka-meta span {
color: var(--muted);
font-size: 0.9rem;
}
.testimonial-optikka-title {
font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", sans-serif;
font-size: clamp(1.9rem, 3vw, 2.6rem);
color: var(--ink);
margin: 0;
line-height: 1.12;
}
.testimonial-optikka-title .js-title-line {
display: block;
}
.testimonial-optikka-title .espresso {
color: #173b45;
}
.testimonial-optikka-title .vivid-ember {
color: #2a8f86;
}
.testimonial-optikka--offset {
grid-template-columns: 1fr;
gap: 18px;
}
.testimonial-optikka-row {
display: grid;
gap: 12px;
justify-items: start;
}
.testimonial-optikka-row.is-right {
justify-items: end;
text-align: right;
}
.testimonial-optikka-title--offset {
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
max-width: 34ch;
margin-left: clamp(32px, 5vw, 80px);
}
.testimonial-optikka--offset .testimonial-optikka-meta {
max-width: 320px;
}
.testimonial-optikka-row.is-right .testimonial-optikka-title--offset {
margin-left: 0;
margin-right: clamp(32px, 5vw, 80px);
}
.testimonial-optikka-row.is-right .testimonial-optikka-meta {
margin-left: auto;
}
.testimonial-optikka-carousel {
display: flex;
gap: 18px;
overflow-x: auto;
padding: 4px 0 8px;
scroll-snap-type: x mandatory;
}
.testimonial-optikka-carousel::-webkit-scrollbar {
height: 6px;
}
.testimonial-optikka-carousel::-webkit-scrollbar-thumb {
background: rgba(21, 58, 69, 0.2);
border-radius: 999px;
}
.testimonial-optikka-card {
min-width: min(440px, 82vw);
scroll-snap-align: start;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px 22px;
box-shadow: var(--shadow);
display: grid;
gap: 16px;
}
.testimonial-hover {
position: relative;
min-height: 320px;
display: block;
padding-bottom: 44px;
}
.testimonial-hover-avatars {
position: absolute;
inset: 0;
pointer-events: none;
}
.testimonial-hover-avatar {
position: absolute;
pointer-events: auto;
background: transparent;
border: none;
padding: 8px;
border-radius: 999px;
animation: avatarFloat 6s ease-in-out infinite;
}
.testimonial-hover-avatar.avatar--tl {
top: 8%;
left: 8%;
animation-delay: 0s;
}
.testimonial-hover-avatar.avatar--tr {
top: 8%;
right: 8%;
animation-delay: 1s;
}
.testimonial-hover-avatar.avatar--bl {
bottom: 14%;
left: 12%;
animation-delay: 2s;
}
.testimonial-hover-avatar.avatar--br {
bottom: 14%;
right: 12%;
animation-delay: 3s;
}
.testimonial-hover-avatar img {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border);
box-shadow: var(--shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
opacity: 0.85;
}
.testimonial-hover-avatar {
transition: transform 0.25s ease, opacity 0.25s ease;
opacity: 0.4;
}
.testimonial-hover-avatar.is-active {
opacity: 1;
transform: translateY(-6px);
z-index: 2;
}
.testimonial-hover-avatar.is-active img,
.testimonial-hover-avatar:hover img {
transform: scale(1.08);
opacity: 1;
box-shadow: 0 14px 26px rgba(15, 40, 50, 0.2);
animation-play-state: paused;
}
.testimonial-hover-avatar:focus-visible img {
transform: scale(1.08);
opacity: 1;
box-shadow: 0 0 0 3px rgba(47, 143, 138, 0.38), 0 14px 26px rgba(15, 40, 50, 0.2);
animation-play-state: paused;
}
.testimonial-hover-cards {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.testimonial-hover-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px 26px;
box-shadow: var(--shadow);
max-width: min(480px, 86vw);
opacity: 0;
transform: translateY(12px) scale(0.98);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
position: absolute;
display: grid;
gap: 12px;
}
.testimonial-hover-card.is-active {
opacity: 1;
transform: translateY(0) scale(1);
}
.testimonial-hover-author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-hover-author img {
width: 58px;
height: 58px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-hover-author strong {
display: block;
color: var(--ink);
font-size: 0.98rem;
}
.testimonial-hover-author span {
display: block;
color: var(--muted);
font-size: 0.86rem;
line-height: 1.3;
}
.testimonial-hover-dots {
display: flex;
justify-content: center;
gap: 8px;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
margin-top: 0;
}
.testimonial-hover-dot {
width: 8px;
height: 8px;
border-radius: 999px;
border: none;
background: rgba(21, 58, 69, 0.25);
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.testimonial-hover-dot.is-active {
background: rgba(21, 58, 69, 0.8);
transform: scale(1.3);
width: 18px;
}
@keyframes avatarFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
.testimonial-hover {
display: grid;
gap: 18px;
}
.testimonial-hover-avatars {
display: flex;
gap: 12px;
align-items: center;
}
.testimonial-hover-avatar {
border: none;
background: transparent;
padding: 0;
cursor: pointer;
border-radius: 999px;
}
.testimonial-hover-avatar img {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border);
box-shadow: var(--shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-hover-avatar.is-active img,
.testimonial-hover-avatar:hover img {
transform: scale(1.06);
box-shadow: 0 12px 24px rgba(15, 40, 50, 0.18);
}
.testimonial-hover-avatar:focus-visible img {
transform: scale(1.06);
box-shadow: 0 0 0 3px rgba(47, 143, 138, 0.38), 0 12px 24px rgba(15, 40, 50, 0.18);
}
.testimonial-hover-cards {
position: relative;
min-height: 220px;
}
.testimonial-hover-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 22px 24px;
box-shadow: var(--shadow);
opacity: 0;
max-height: 0;
overflow: hidden;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.3s ease;
}
.testimonial-hover-card.is-active {
opacity: 1;
transform: translateY(0);
max-height: 300px;
}
.start-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 36px;
align-items: center;
}
.start-copy {
max-width: 560px;
}
.contact-card {
margin-top: 24px;
padding: 20px;
border-radius: var(--radius-md);
background: var(--bg-alt);
border: 1px solid var(--border);
}
.booking-card {
background: var(--card);
padding: 28px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
display: grid;
gap: 12px;
width: min(420px, 100%);
margin-top: 0;
}
.booking-card .card-title {
margin: 0;
font-size: 1.18rem;
}
.booking-meta {
font-size: 0.9rem;
color: var(--muted);
}
.booking-card .microcopy {
font-size: 1.05rem;
margin-top: -4px;
margin-bottom: 0;
}
.site-footer {
padding: 50px 0;
border-top: 1px solid var(--border);
background: linear-gradient(
90deg,
rgba(38, 93, 90, 0.35) 0%,
rgba(18, 63, 76, 0.08) 55%,
rgba(15, 57, 77, 0.04) 100%
),
rgba(12, 35, 43, 0.96);
}
.footer-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
}
.footer-grid--compact {
grid-template-columns: 1fr 1fr;
}
.footer-grid > div:last-child {
text-align: right;
}
.footer-brand-block,
.footer-contact-block {
display: grid;
align-content: start;
}
.footer-brand-block {
justify-items: start;
}
.footer-contact-block {
justify-items: end;
text-align: right;
}
.footer-brand-block .brand {
min-height: 30px;
line-height: 0;
margin-bottom: 12px;
}
.footer-brand-block .microcopy {
margin: 0;
line-height: 1.6;
}
.footer-title {
font-weight: 600;
margin-bottom: 12px;
}
.footer-contact-block .footer-title {
min-height: 30px;
margin: 0 0 12px;
display: inline-flex;
align-items: center;
}
.footer-grid a,
.footer-grid span {
display: block;
margin-bottom: 10px;
color: var(--muted);
font-size: 0.9rem;
}
.footer-contact-block a {
margin-bottom: 0;
line-height: 1.6;
}
.footer-socials-block {
display: grid;
gap: 4px;
justify-items: center;
}
.footer-socials-icons {
display: inline-flex;
gap: 8px;
align-items: center;
justify-content: center;
margin-top: -20px;
}
.footer-socials-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0.8;
}
.footer-socials-icons a:hover {
transform: translateY(-1px);
opacity: 1;
}
.footer-socials-icons svg {
width: 32px;
height: 32px;
}
.footer-socials-icons svg circle {
stroke: transparent;
}
.footer-meta {
font-size: 0.85rem;
color: var(--muted);
margin: 10px 0 0;
}
.footer-socials-line {
display: flex;
justify-content: center;
padding-top: 32px;
margin: 16px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-socials-line .footer-socials-icons {
margin-top: 0;
}
.footer-meta--center {
text-align: center;
margin: 16px 0 0;
}
.footer-meta #year {
display: inline-block;
}
.email-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 200;
}
.email-modal.is-open {
display: flex;
}
.email-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(6, 16, 20, 0.6);
backdrop-filter: blur(6px);
}
.email-modal-card {
position: relative;
z-index: 1;
background: rgba(12, 35, 43, 0.98);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-lg);
padding: 28px;
width: min(420px, 92vw);
color: var(--ink);
display: grid;
gap: 12px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}
.email-modal-card .eyebrow {
margin: 0 0 4px;
}
.email-modal-card h3 {
margin: 0;
}
.email-modal-text {
color: var(--muted);
margin: 4px 0 0;
}
.email-modal-actions {
display: grid;
gap: 10px;
margin-top: 6px;
}
.email-modal-close {
position: absolute;
top: 14px;
right: 14px;
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
}
.email-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.6s ease, transform 0.6s ease;
transition-delay: var(--delay, 0s);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 960px) {
.hero-grid {
display: flex;
flex-direction: column;
align-items: stretch;
}
.hero-media {
order: -1;
}
.hero-media,
.hero-copy {
width: 100%;
}
.hero-grid,
.section-head,
.work-grid,
.goals-grid,
.map-grid,
.service-grid,
.steps,
.testimonial-grid,
.testimonial-vision,
.testimonial-optikka {
grid-template-columns: 1fr;
}
.logo-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.logo-wall {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.community-home-projects-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-image img {
min-height: 0;
}
.testimonial-grid--pill,
.testimonial-grid--split {
gap: 20px;
}
.testimonial-grid--line,
.testimonial-grid--minimal {
gap: 18px;
}
.testimonial-grid--tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.testimonial--pill,
.testimonial--center,
.testimonial--right {
max-width: 100%;
align-self: stretch;
}
.testimonial--line {
max-width: 100%;
}
.testimonial-vision-meta,
.testimonial-optikka-meta {
width: 100%;
}
.testimonial-optikka-title--offset {
margin-left: 0;
}
.testimonial-optikka-row.is-right .testimonial-optikka-title--offset {
margin-right: 0;
}
.testimonial-optikka-carousel {
scroll-snap-type: x proximity;
}
}
@media (max-width: 1200px) {
.testimonial-grid--tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.map-legend {
bottom: 190px;
}
.map-controls {
bottom: 48px;
}
}
@media (max-width: 768px) {
.hero-grid {
display: flex;
flex-direction: column;
}
.hero-media {
order: -1;
}
.start-grid {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.start-copy {
max-width: 620px;
}
.map-legend {
bottom: 190px;
}
.map-controls {
bottom: 40px;
}
#local-support.section {
padding-top: 62px;
padding-bottom: 58px;
}
#local-support .section-head {
margin-bottom: 18px;
gap: 16px;
}
#local-support .local-variant {
margin-top: 10px;
}
#local-support .launches-cinematic {
padding: 8px 0 8px;
}
#local-support .launches-cinematic-track {
gap: 14px;
padding: 8px 0 20px;
}
#local-support .launches-cinematic-card {
min-width: min(320px, 84vw);
height: 340px;
grid-template-rows: minmax(0, 1fr) 130px;
}
#proof .testimonial-hover {
touch-action: pan-y;
}
}
@media (max-width: 860px) {
.testimonial-hover-avatar.avatar--tl {
top: 6%;
left: 5%;
}
.testimonial-hover-avatar.avatar--tr {
top: 6%;
right: 5%;
}
.testimonial-hover-avatar.avatar--bl {
bottom: 11%;
left: 8%;
}
.testimonial-hover-avatar.avatar--br {
bottom: 11%;
right: 8%;
}
}
@media (max-width: 700px) {
.booking-card {
margin-left: auto;
margin-right: auto;
}
.testimonial-hover {
min-height: 340px;
padding-bottom: 52px;
}
.testimonial-hover-card {
max-width: min(340px, 86vw);
padding: 22px 22px;
}
.testimonial-hover-avatar img {
width: 52px;
height: 52px;
}
.testimonial-hover-author img {
width: 54px;
height: 54px;
}
.testimonial-hover-author strong {
font-size: 0.96rem;
}
.testimonial-hover-author span {
font-size: 0.82rem;
}
.testimonial-hover-card blockquote {
font-size: 0.98rem;
line-height: 1.45;
margin: 0;
}
.testimonial-hover-avatar.avatar--tl {
top: 5%;
left: 5%;
}
.testimonial-hover-avatar.avatar--tr {
top: 5%;
right: 5%;
}
.testimonial-hover-avatar.avatar--bl {
bottom: 10%;
left: 7%;
}
.testimonial-hover-avatar.avatar--br {
bottom: 10%;
right: 7%;
}
.testimonial-hover-cards {
position: absolute;
inset: 0;
}
}
@media (max-width: 600px) {
.section {
padding: 70px 0;
}
.section.hero {
padding: 60px 0 50px;
}
.btn {
width: 100%;
}
.hero-actions {
flex-direction: column;
}
.hero-image {
height: clamp(260px, calc(var(--stable-vh, 1vh) * 42), 380px);
}
.global-section .container {
padding-top: 10px;
}
.map-legend {
bottom: 180px;
width: 280px;
max-width: none;
}
.map-controls {
bottom: 60px;
width: calc(100% - 32px);
max-width: none;
}
.map-layer {
transform: translateY(16px);
}
.map-tooltip.map-tooltip--modal {
width: min(420px, calc(100vw - 16px));
max-height: min(calc(var(--stable-vh, 1vh) * 78), 620px);
padding: 0;
border-radius: 16px;
}
.map-tooltip.map-tooltip--modal .map-tooltip-name {
font-size: 0.74rem;
letter-spacing: 0.08em;
}
.map-tooltip.map-tooltip--modal .map-tooltip-list {
max-height: none;
overflow: visible;
overflow-y: visible;
margin-right: 0;
padding: 2px 15px calc(14px + env(safe-area-inset-bottom));
}
.map-kosovo-label {
font-size: 0.52rem;
letter-spacing: 0.04em;
}
.map-control[data-region-control="pristina"] {
padding: 6px 10px;
font-size: 0.72rem;
color: #f3fbfa;
background: rgba(255, 255, 255, 0.08);
}
.community-home-projects-inner {
grid-template-columns: 1fr;
}
.testimonial {
flex-direction: column;
align-items: flex-start;
border-radius: 22px;
padding: 18px;
}
.testimonial-grid--tiles {
grid-template-columns: 1fr;
}
.testimonial--pill {
padding: 16px;
border-radius: 22px;
align-items: flex-start;
}
.testimonial--pill img,
.testimonial--split img {
width: 76px;
height: 76px;
}
.testimonial--line {
flex-direction: column;
align-items: flex-start;
}
.testimonial--line-right {
flex-direction: column;
text-align: left;
align-items: flex-start;
}
.testimonial-line-rail,
.testimonial-line-tilt {
display: none;
}
.testimonial--minimal {
padding-left: 16px;
}
.testimonial-vision-meta {
border-radius: 22px;
}
.testimonial-optikka-meta {
border-radius: 18px;
}
.testimonial--split {
padding: 18px;
}
.testimonial-ceo-note {
padding: 16px 18px;
}
.testimonial-ceo-text {
font-size: 0.95rem;
}
.testimonial-ceo-label {
font-size: 0.68rem;
}
}
@media (max-width: 590px) {
.testimonial-hover {
padding-bottom: 40px;
}
.testimonial-hover-avatar img {
width: 46px;
height: 46px;
}
.testimonial-hover-card {
padding: 20px 20px;
}
.testimonial-hover-author img {
width: 50px;
height: 50px;
}
.testimonial-hover-author strong {
font-size: 0.92rem;
}
.testimonial-hover-author span {
font-size: 0.8rem;
}
.testimonial-hover-card blockquote {
font-size: 0.93rem;
}
.testimonial-hover-avatar.avatar--tl {
top: 5%;
left: 4%;
}
.testimonial-hover-avatar.avatar--tr {
top: 5%;
right: 4%;
}
.testimonial-hover-avatar.avatar--bl {
bottom: 9%;
left: 6%;
}
.testimonial-hover-avatar.avatar--br {
bottom: 9%;
right: 6%;
}
.testimonial-ceo-note {
padding: 14px 16px;
}
.testimonial-ceo-text {
font-size: 0.92rem;
}
.testimonial-ceo-sign {
font-size: 0.82rem;
}
}
@media (max-width: 520px) {
.footer-grid.footer-grid--compact {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.footer-brand-block,
.footer-contact-block {
width: 100%;
justify-items: center;
text-align: center;
}
.footer-brand-block .brand {
margin-left: auto;
margin-right: auto;
}
.footer-contact-block {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2px;
}
.footer-contact-block .footer-title {
min-height: 0;
margin: 0 0 8px;
display: block;
}
.footer-contact-block a {
display: block;
width: auto;
text-align: center;
}
.footer-grid > div:last-child {
text-align: center;
}
}
@media (max-width: 420px) {
.map-legend {
bottom: 200px;
}
}
@media (max-width: 336px) {
.map-controls {
bottom: 40px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.reveal {
transition: none;
}
}