:root {
color-scheme: light;
--header-height: 73px;
--stable-vh: 1vh;
--story-font: Georgia, "Times New Roman", Times, serif;
--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: 100svh) {
:root {
--stable-vh: 1svh;
}
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
overflow-x: hidden;
}
body {
margin: 0;
padding-top: var(--header-height);
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;
overflow-x: hidden;
}
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);
}
}
main > [id] {
scroll-margin-top: 0;
}
#top {
scroll-margin-top: 0;
}
.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: fixed;
top: 0;
right: 0;
left: 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;
}
.story-hero,
.updates-hero {
padding: 120px 0 90px;
}
.story-hero-grid,
.updates-hero-grid,
.story-now-grid,
.story-next-grid,
.updates-process-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
gap: clamp(28px, 5vw, 72px);
align-items: end;
}
.story-hero h1,
.updates-hero h1 {
max-width: 13ch;
}
.story-hero-copy,
.updates-hero-grid > p,
.story-next-grid > p {
color: var(--muted);
font-size: 1.08rem;
}
.story-hero-copy p:last-child {
margin-bottom: 0;
}
.story-now {
border-bottom: 1px solid rgba(13, 29, 34, 0.08);
}
.story-now-grid {
align-items: stretch;
}
.story-now-card {
padding: 26px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-light);
}
.story-now-card span,
.update-meta span {
display: inline-flex;
margin-bottom: 12px;
color: var(--accent-strong);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.story-layout {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: clamp(28px, 6vw, 86px);
}
.story-rail {
position: sticky;
top: calc(var(--header-height) + 28px);
align-self: start;
display: grid;
gap: 10px;
padding-top: 4px;
}
.story-rail a {
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.story-rail a:hover {
color: var(--ink);
}
.story-timeline {
position: relative;
display: grid;
gap: 28px;
}
.story-timeline::before {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
left: 13px;
width: 1px;
background: linear-gradient(180deg, rgba(244, 251, 251, 0.62), rgba(244, 251, 251, 0.08));
}
.story-event {
position: relative;
margin-left: 48px;
padding: 28px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-md);
background: rgba(9, 28, 36, 0.74);
box-shadow: var(--shadow);
}
.story-event::before {
content: "";
position: absolute;
top: 32px;
left: -42px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #9ad4d1;
box-shadow: 0 0 0 8px rgba(154, 212, 209, 0.12);
}
.story-event--major {
padding: clamp(30px, 5vw, 46px);
background: rgba(244, 251, 251, 0.08);
}
.story-date,
.update-meta time {
display: block;
margin-bottom: 12px;
color: var(--muted);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.story-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
}
.story-tags span {
display: inline-flex;
padding: 6px 10px;
border: 1px solid rgba(244, 251, 251, 0.16);
border-radius: 999px;
color: var(--muted);
font-size: 0.78rem;
}
.story-next-grid {
align-items: center;
}
.updates-layout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.update-card {
min-height: 280px;
padding: 26px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-light);
display: flex;
flex-direction: column;
}
.update-card--featured {
grid-column: span 3;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 22px;
align-items: start;
}
.update-card--featured h2 {
margin-bottom: 0;
}
.linkedin-copy {
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--border-light);
color: var(--accent-strong);
font-weight: 600;
}
.updates-process-grid {
align-items: start;
}
.process-list {
display: grid;
gap: 14px;
}
.process-list p {
margin: 0;
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-sm);
background: rgba(244, 251, 251, 0.06);
}
.story-panel {
min-height: calc(var(--stable-vh, 1vh) * 92);
display: flex;
align-items: center;
padding: clamp(86px, 12vh, 150px) 0;
transition: background 0.6s ease, color 0.6s ease;
}
.story-panel--deep {
background:
radial-gradient(circle at 50% 82%, rgba(77, 143, 138, 0.2), transparent 38%),
radial-gradient(circle at 16% 18%, rgba(77, 143, 138, 0.18), transparent 34%),
linear-gradient(160deg, #0c252c 0%, #123943 56%, #1f5551 100%);
color: #eef7f6;
}
.story-panel--mist {
background: linear-gradient(180deg, #eef7f5 0%, #dceae7 100%);
color: #10262c;
}
.story-panel--paper {
background: linear-gradient(180deg, #f8fbf8 0%, #eaf2ee 100%);
color: #11282d;
}
.story-panel--sage {
background: linear-gradient(180deg, #d8e8df 0%, #9fbfb4 100%);
color: #10262c;
}
.story-hero {
min-height: calc(var(--stable-vh, 1vh) * 120);
--intro-progress: 0;
display: block;
padding: 0;
}
.story-no-header {
--header-height: 0px;
}
.story-static-header {
padding-top: 0;
}
.story-static-header .site-header {
position: relative;
}
.story-static-header {
scrollbar-color: rgba(3, 12, 15, 0.46) #0c252c;
}
.story-static-header::-webkit-scrollbar {
width: 8px;
}
.story-static-header::-webkit-scrollbar-track {
background: #0c252c;
}
.story-static-header::-webkit-scrollbar-thumb {
background: rgba(3, 12, 15, 0.42);
border: 2px solid transparent;
background-clip: content-box;
border-radius: 999px;
}
.story-static-header::-webkit-scrollbar-thumb:hover {
background: rgba(3, 12, 15, 0.58);
background-clip: content-box;
}
html:has(body.story-static-header) {
background: #0c252c;
scrollbar-color: rgba(3, 12, 15, 0.46) #0c252c;
}
html:has(body.story-static-header)::-webkit-scrollbar {
width: 8px;
}
html:has(body.story-static-header)::-webkit-scrollbar-track {
background: #0c252c;
}
html:has(body.story-static-header)::-webkit-scrollbar-thumb {
background: rgba(3, 12, 15, 0.42);
border: 2px solid transparent;
background-clip: content-box;
border-radius: 999px;
}
html:has(body.story-static-header)::-webkit-scrollbar-thumb:hover {
background: rgba(3, 12, 15, 0.58);
background-clip: content-box;
}
.story-panel-grid {
display: grid;
grid-template-columns: minmax(160px, 0.34fr) minmax(0, 0.66fr);
gap: clamp(28px, 8vw, 118px);
align-items: center;
}
.story-panel-grid--center {
display: flex;
justify-content: center;
text-align: center;
}
.story-hero .story-panel-grid--center {
position: sticky;
top: var(--header-height);
min-height: calc(var(--stable-vh, 1vh) * 100 - var(--header-height));
width: 100%;
align-items: stretch;
}
.story-kicker,
.story-period {
position: sticky;
top: calc(var(--header-height) + 36px);
align-self: start;
display: grid;
gap: 12px;
padding-top: 8px;
color: currentColor;
}
.story-kicker span,
.story-period span {
width: fit-content;
padding: 7px 10px;
border: 1px solid currentColor;
border-radius: 999px;
opacity: 0.72;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.story-kicker strong,
.story-period small {
color: currentColor;
opacity: 0.58;
font-size: 0.86rem;
font-weight: 600;
}
.story-copy {
max-width: 760px;
}
.story-hero .story-copy {
font-family: Georgia, "Times New Roman", Times, serif;
}
.story-hero .eyebrow {
font-size: 0.68rem;
letter-spacing: 0.18em;
opacity: 0.58;
}
.story-panel-grid--center .story-copy {
max-width: 820px;
}
.story-title-group h1,
.story-copy h2 {
max-width: 16ch;
margin-top: 18px;
margin-bottom: 38px;
font-family: var(--story-font);
font-size: clamp(1.9rem, 3vw, 3rem);
line-height: 1.08;
letter-spacing: 0;
font-weight: 400;
}
.story-copy h2 {
font-size: clamp(2.4rem, 5vw, 4.7rem);
}
.story-copy p {
max-width: 58ch;
margin-top: 0;
margin-bottom: 24px;
color: currentColor;
opacity: 0.76;
font-size: clamp(1.05rem, 1.8vw, 1.32rem);
line-height: 1.75;
}
.story-copy p + p {
margin-top: 42px;
}
.story-intro-stage {
position: relative;
display: grid;
min-height: calc(var(--stable-vh, 1vh) * 100 - var(--header-height));
width: 100%;
}
.story-title-group {
align-self: center;
justify-self: center;
transform: translateY(-4vh);
}
.story-cinematic-entry {
position: absolute;
right: clamp(18px, 3vw, 44px);
bottom: clamp(20px, 4vh, 40px);
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid rgba(143, 212, 196, 0.14);
border-radius: 999px;
background:
linear-gradient(135deg, rgba(143, 212, 196, 0.12), rgba(236, 197, 120, 0.06)),
rgba(8, 14, 18, 0.58);
color: rgba(244, 246, 244, 0.74);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(14px) saturate(1.08);
transition: border-color 180ms ease, color 180ms ease, background 180ms ease,
transform 180ms ease;
}
.story-cinematic-entry:hover,
.story-cinematic-entry:focus-visible {
border-color: rgba(236, 197, 120, 0.28);
color: rgba(255, 243, 215, 0.95);
background:
linear-gradient(135deg, rgba(236, 197, 120, 0.12), rgba(143, 212, 196, 0.08)),
rgba(8, 14, 18, 0.72);
transform: translateY(-1px);
}
.story-cinematic-entry:focus-visible {
outline: 2px solid rgba(207, 250, 244, 0.92);
outline-offset: 3px;
}
.story-cinematic-entry svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.story-cinematic-entry::after {
content: attr(data-tooltip);
position: absolute;
right: 0;
bottom: calc(100% + 8px);
width: max-content;
max-width: 180px;
padding: 6px 8px;
border: 1px solid rgba(226, 240, 218, 0.1);
border-radius: 6px;
background: rgba(8, 14, 18, 0.86);
color: rgba(244, 246, 244, 0.82);
font-size: 0.62rem;
font-weight: 650;
letter-spacing: 0;
line-height: 1;
white-space: nowrap;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
opacity: 0;
pointer-events: none;
transform: translateY(4px);
transition: opacity 160ms ease, transform 160ms ease;
}
.story-cinematic-entry:hover::after,
.story-cinematic-entry:focus-visible::after {
opacity: 1;
transform: translateY(0);
}
.story-intro-stage > p {
position: absolute;
bottom: clamp(54px, 11vh, 112px);
left: 50%;
margin-right: 0;
margin-left: 0;
}
.story-copy .story-intro-main {
width: min(820px, 90vw);
max-width: none;
font-size: clamp(1.1rem, 1.45vw, 1.42rem);
line-height: 1.56;
font-weight: 400;
opacity: calc(1 - min(var(--intro-progress) / 0.36, 1));
transform: translate(-50%, calc(var(--intro-progress) * -12px));
transition: transform 160ms ease;
}
.story-copy .story-intro-note {
width: min(760px, 90vw);
max-width: none;
opacity: calc(max((var(--intro-progress) - 0.42) / 0.58, 0) * 0.92);
font-size: clamp(1.08rem, 1.36vw, 1.28rem);
line-height: 1.68;
transform: translate(-50%, calc(8px + (1 - var(--intro-progress)) * 10px));
transition: transform 160ms ease;
}
.story-panel-grid--center .story-copy h1,
.story-panel-grid--center .story-copy p {
margin-right: auto;
margin-left: auto;
}
.story-intro-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: clamp(54px, 12vh, 118px);
}
.story-intro-links.is-hidden {
display: none;
}
.story-intro-links a {
color: currentColor;
opacity: 0.54;
font-size: 0.82rem;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
text-decoration: none;
}
.story-intro-links a:hover,
.story-intro-links a:focus-visible {
opacity: 1;
}
.story-copy .btn {
margin-top: 14px;
}
.update-card {
box-shadow: 0 12px 34px rgba(15, 40, 50, 0.08);
}
.update-card .update-meta span {
border: 1px solid rgba(36, 111, 107, 0.24);
border-radius: 999px;
padding: 5px 9px;
}
.update-card--featured {
background:
linear-gradient(135deg, rgba(47, 143, 138, 0.08), rgba(255, 255, 255, 0) 46%),
#fff;
}
.updates-hero {
background:
radial-gradient(circle at 78% 22%, rgba(154, 212, 209, 0.16), transparent 32%),
linear-gradient(160deg, #102f38 0%, #173f47 64%, #235457 100%);
}
.story-scroll {
position: relative;
min-height: calc(var(--stable-vh, 1vh) * 820);
--story-bg-a: 13 34 40;
--story-bg-b: 17 47 54;
--story-bg-c: 25 66 66;
--story-fg: 238 247 246;
color: rgb(var(--story-fg));
background:
linear-gradient(180deg, #1f5551 0%, rgb(var(--story-bg-a)) 34%, transparent 58%),
linear-gradient(180deg, transparent 84%, rgba(12, 35, 43, 0.96) 100%),
linear-gradient(180deg, rgb(16 47 56 / 0.18), transparent 18%),
linear-gradient(
180deg,
rgb(var(--story-bg-a)) 0%,
rgb(var(--story-bg-b)) 52%,
rgb(var(--story-bg-c)) 100%
);
overflow: visible;
}
.story-scroll.is-tone-deep {
color: rgb(var(--story-fg));
}
.story-scroll.is-tone-mist {
color: rgb(var(--story-fg));
}
.story-scroll.is-tone-paper {
color: rgb(var(--story-fg));
}
.story-scroll.is-tone-sage {
color: rgb(var(--story-fg));
}
.story-scroll-visual {
position: fixed;
top: -6vh;
right: 0;
left: 0;
z-index: 1;
height: calc(var(--stable-vh, 1vh) * 112);
opacity: 0;
overflow: hidden;
visibility: hidden;
transition: opacity 260ms ease, visibility 260ms ease;
pointer-events: none;
}
.story-scroll.is-copy-visible .story-scroll-visual {
opacity: 1;
visibility: visible;
}
.story-graphic {
position: absolute;
inset: 0;
transition: opacity 900ms ease, transform 900ms ease;
}
.story-graphic--wash {
display: none;
}
.story-illustration {
position: absolute;
inset: 0;
color: rgb(var(--story-fg));
opacity: 0.72;
transform: translateZ(0);
}
.story-illustration::before {
content: "";
position: absolute;
inset: 12% 7%;
background:
radial-gradient(circle at 18% 24%, rgb(var(--story-fg) / 0.12), transparent 30%),
radial-gradient(circle at 82% 68%, rgb(var(--story-fg) / 0.1), transparent 34%);
filter: blur(2px);
opacity: 0.7;
}
.story-visual {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(18px) scale(0.985);
transition: opacity 680ms ease, transform 780ms ease;
}
.story-visual svg {
position: absolute;
inset: 3% 0 auto;
width: 100%;
height: 94%;
fill: none;
stroke: currentColor;
stroke-width: 1.35;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.05;
transform: translateX(18%);
}
.story-visual svg path,
.story-visual svg circle,
.story-visual svg rect,
.story-visual svg ellipse {
vector-effect: non-scaling-stroke;
}
.story-scroll[data-visual="network"] .story-visual--network,
.story-scroll[data-visual="code"] .story-visual--code,
.story-scroll[data-visual="office"] .story-visual--office,
.story-scroll[data-visual="flight"] .story-visual--flight,
.story-scroll[data-visual="pressure"] .story-visual--pressure,
.story-scroll[data-visual="mobile"] .story-visual--mobile,
.story-scroll[data-visual="people"] .story-visual--people,
.story-scroll[data-visual="travel"] .story-visual--travel,
.story-scroll[data-visual="helicopter"] .story-visual--helicopter,
.story-scroll[data-visual="event"] .story-visual--event,
.story-scroll[data-visual="server"] .story-visual--server,
.story-scroll[data-visual="identity"] .story-visual--identity,
.story-scroll[data-visual="video"] .story-visual--video,
.story-scroll[data-visual="delivery"] .story-visual--delivery {
opacity: 1;
transform: translateY(0) scale(1);
}
.story-visual--network {
background:
linear-gradient(28deg, transparent 25%, rgb(var(--story-fg) / 0.04) 25.1%, transparent 25.8%),
linear-gradient(145deg, transparent 34%, rgb(var(--story-fg) / 0.035) 34.1%, transparent 35%);
mask-image: radial-gradient(circle at 50% 52%, #000 0%, transparent 70%);
}
.story-visual--network span {
position: absolute;
width: clamp(92px, 13vw, 180px);
aspect-ratio: 1;
border: 1px solid rgb(var(--story-fg) / 0.08);
border-radius: 50%;
box-shadow: inset 0 0 34px rgb(var(--story-fg) / 0.04);
}
.story-visual--network span::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 8px;
aspect-ratio: 1;
border-radius: 50%;
background: currentColor;
opacity: 0.16;
transform: translate(-50%, -50%);
}
.story-visual--network span:nth-child(1) {
top: 18%;
left: 13%;
}
.story-visual--network span:nth-child(2) {
top: 27%;
right: 15%;
width: clamp(74px, 10vw, 132px);
}
.story-visual--network span:nth-child(3) {
right: 25%;
bottom: 16%;
width: clamp(112px, 15vw, 210px);
}
.story-visual--network span:nth-child(4) {
bottom: 22%;
left: 24%;
width: clamp(58px, 8vw, 104px);
}
.story-visual--network span:nth-child(5) {
top: 46%;
left: 48%;
width: clamp(46px, 6vw, 86px);
}
.story-code-window {
position: absolute;
right: clamp(34px, 12vw, 180px);
bottom: clamp(58px, 13vh, 140px);
width: min(460px, 36vw);
aspect-ratio: 1.35;
border: 1px solid rgb(var(--story-fg) / 0.3);
border-radius: 16px;
background:
linear-gradient(180deg, rgb(var(--story-fg) / 0.08), transparent 20%),
rgb(0 0 0 / 0.08);
box-shadow: 0 28px 90px rgb(0 0 0 / 0.12);
}
.story-code-window::before {
content: "";
position: absolute;
top: 18px;
left: 20px;
width: 42px;
height: 8px;
border-radius: 999px;
background: currentColor;
opacity: 0.28;
box-shadow: 56px 0 0 rgb(var(--story-fg) / 0.18), 98px 0 0 rgb(var(--story-fg) / 0.12);
}
.story-code-window i {
position: absolute;
left: 34px;
right: 42px;
height: 1px;
background: currentColor;
opacity: 0.14;
}
.story-code-window i:nth-child(1) {
top: 34%;
right: 22%;
}
.story-code-window i:nth-child(2) {
top: 46%;
right: 35%;
}
.story-code-window i:nth-child(3) {
top: 58%;
right: 16%;
}
.story-code-window i:nth-child(4) {
top: 70%;
right: 46%;
}
.story-visual--office {
inset: 11% 8%;
}
.story-visual--office span {
position: absolute;
bottom: 18%;
width: clamp(120px, 17vw, 240px);
height: clamp(150px, 22vw, 310px);
border: 1px solid rgb(var(--story-fg) / 0.3);
border-radius: 7px 7px 2px 2px;
background:
repeating-linear-gradient(180deg, transparent 0 22px, rgb(var(--story-fg) / 0.08) 23px 24px),
rgb(var(--story-fg) / 0.025);
}
.story-visual--office span:nth-child(1) {
left: 14%;
height: clamp(120px, 18vw, 250px);
}
.story-visual--office span:nth-child(2) {
left: 38%;
bottom: 11%;
}
.story-visual--office span:nth-child(3) {
right: 14%;
height: clamp(94px, 14vw, 190px);
}
.story-visual--flight {
background:
radial-gradient(ellipse at 22% 78%, transparent 0 18%, rgb(var(--story-fg) / 0.14) 18.2% 18.8%, transparent 19%),
linear-gradient(150deg, transparent 43%, rgb(var(--story-fg) / 0.16) 43.1%, transparent 44%),
linear-gradient(165deg, transparent 48%, rgb(var(--story-fg) / 0.12) 48.1%, transparent 48.8%);
}
.story-visual--flight span:first-child {
position: absolute;
top: 28%;
left: 18%;
width: min(380px, 33vw);
height: 1px;
background: currentColor;
opacity: 0.42;
transform: rotate(-12deg);
}
.story-visual--flight span:first-child::before {
content: "";
position: absolute;
right: -18px;
top: -9px;
width: 64px;
height: 18px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: skewX(-24deg);
}
.story-visual--flight span:last-child {
position: absolute;
right: 10%;
bottom: 13%;
width: min(380px, 34vw);
height: min(210px, 20vw);
border-bottom: 1px solid rgb(var(--story-fg) / 0.26);
border-left: 1px solid rgb(var(--story-fg) / 0.18);
transform: skewX(-20deg);
}
.story-visual--pressure {
inset: 13% 8%;
background:
linear-gradient(180deg, transparent 22%, rgb(var(--story-fg) / 0.1) 22.1%, transparent 22.8%),
linear-gradient(180deg, transparent 48%, rgb(var(--story-fg) / 0.08) 48.1%, transparent 48.8%),
linear-gradient(180deg, transparent 74%, rgb(var(--story-fg) / 0.08) 74.1%, transparent 74.8%);
}
.story-visual--pressure span {
position: absolute;
left: 20%;
right: 20%;
height: 1px;
background: currentColor;
opacity: 0.26;
transform: rotate(-4deg);
}
.story-visual--pressure span:nth-child(1) {
top: 32%;
}
.story-visual--pressure span:nth-child(2) {
top: 50%;
transform: rotate(3deg);
}
.story-visual--pressure span:nth-child(3) {
top: 68%;
transform: rotate(-7deg);
}
.story-visual--mobile span:first-child {
position: absolute;
left: 13%;
bottom: 12%;
width: min(250px, 22vw);
aspect-ratio: 0.56;
border: 1px solid rgb(var(--story-fg) / 0.3);
border-radius: 28px;
background: linear-gradient(180deg, rgb(var(--story-fg) / 0.055), transparent);
}
.story-visual--mobile span:first-child::after {
content: "";
position: absolute;
left: 22%;
right: 22%;
bottom: 22px;
height: 4px;
border-radius: 999px;
background: currentColor;
opacity: 0.16;
}
.story-visual--mobile span:nth-child(2) {
position: absolute;
top: 22%;
right: 19%;
width: min(340px, 30vw);
aspect-ratio: 1.5;
border: 1px solid rgb(var(--story-fg) / 0.18);
border-radius: 999px;
}
.story-visual--mobile span:nth-child(3) {
position: absolute;
top: 50%;
right: 27%;
width: min(160px, 14vw);
aspect-ratio: 1;
border: 1px solid rgb(var(--story-fg) / 0.2);
border-radius: 50%;
box-shadow: 0 0 0 24px rgb(var(--story-fg) / 0.045);
}
.story-illustration {
opacity: 0.82;
}
.story-illustration::before {
inset: 8% 4%;
opacity: 0.5;
}
.story-visual--office {
inset: 7% 6%;
}
.story-visual--office span {
display: none;
}
.story-visual--office svg {
opacity: 0.065;
transform: translateY(12%);
}
.story-visual--office span {
bottom: 9%;
background:
repeating-linear-gradient(180deg, transparent 0 20px, rgb(var(--story-fg) / 0.11) 21px 22px),
linear-gradient(180deg, rgb(var(--story-fg) / 0.045), transparent);
box-shadow: 0 36px 90px rgb(0 0 0 / 0.12);
}
.story-visual--office span:nth-child(1) {
left: 7%;
}
.story-visual--office span:nth-child(2) {
left: auto;
right: 24%;
bottom: 5%;
}
.story-visual--office span:nth-child(3) {
right: 7%;
}
.story-visual--flight {
background:
radial-gradient(ellipse at 72% 24%, transparent 0 16%, rgb(var(--story-fg) / 0.17) 16.2% 16.8%, transparent 17%),
radial-gradient(ellipse at 23% 72%, transparent 0 20%, rgb(var(--story-fg) / 0.13) 20.2% 20.8%, transparent 21%),
linear-gradient(150deg, transparent 40%, rgb(var(--story-fg) / 0.16) 40.1%, transparent 41%);
}
.story-visual--flight span:first-child {
top: 22%;
left: 56%;
width: min(300px, 28vw);
opacity: 0.5;
}
.story-visual--flight span:first-child::after {
content: "";
position: absolute;
right: 18px;
top: -18px;
width: 76px;
height: 1px;
background: currentColor;
opacity: 0.55;
transform: rotate(10deg);
}
.story-visual--flight span:last-child {
right: auto;
left: 12%;
bottom: 14%;
opacity: 0.9;
}
.story-visual--pressure span {
left: 12%;
right: 12%;
opacity: 0.34;
}
.story-visual--pressure span:nth-child(1) {
top: 25%;
}
.story-visual--pressure span:nth-child(2) {
top: 52%;
}
.story-visual--pressure span:nth-child(3) {
top: 79%;
}
.story-visual--mobile span:first-child {
left: auto;
right: 12%;
bottom: 8%;
width: min(280px, 24vw);
box-shadow: 0 34px 90px rgb(0 0 0 / 0.12);
}
.story-visual--mobile span:nth-child(2) {
top: 18%;
right: auto;
left: 12%;
border-color: rgb(var(--story-fg) / 0.24);
}
.story-visual--mobile span:nth-child(3) {
top: 42%;
right: auto;
left: 25%;
border-color: rgb(var(--story-fg) / 0.25);
}
.story-visual--people span,
.story-visual--travel span,
.story-visual--helicopter span,
.story-visual--event span,
.story-visual--server span,
.story-visual--identity span,
.story-visual--video span,
.story-visual--delivery span {
display: none;
}
.story-visual--travel {
mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%);
}
.story-visual--helicopter svg {
inset: 0 -20% auto auto;
width: 102%;
opacity: 0.055;
transform: translate(22%, -10%);
}
.story-visual--people svg,
.story-visual--event svg {
opacity: 0.06;
transform: translateY(10%);
}
.story-visual--travel svg {
opacity: 0.05;
transform: translateX(-22%);
}
.story-visual--server svg,
.story-visual--delivery svg {
transform: translateX(22%);
}
.story-visual--server svg {
opacity: 0.06;
transform: none;
}
.story-visual--identity svg,
.story-visual--video svg {
opacity: 0.065;
transform: none;
}
.story-visual--pressure {
background:
linear-gradient(180deg, transparent 22%, rgb(var(--story-fg) / 0.035) 22.1%, transparent 22.8%),
linear-gradient(180deg, transparent 48%, rgb(var(--story-fg) / 0.03) 48.1%, transparent 48.8%),
linear-gradient(180deg, transparent 74%, rgb(var(--story-fg) / 0.03) 74.1%, transparent 74.8%);
}
.story-visual--pressure span {
opacity: 0.08;
}
.story-visual--delivery {
background:
linear-gradient(135deg, transparent 32%, rgb(var(--story-fg) / 0.018) 32.1%, transparent 33%);
}
.story-graphic--grid {
opacity: 0.18;
background-image:
linear-gradient(currentColor 1px, transparent 1px),
linear-gradient(90deg, currentColor 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 78%, transparent 100%);
}
.story-graphic--path {
top: 18%;
left: 9%;
right: 9%;
height: 52%;
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
opacity: 0.28;
transform: skewY(-7deg);
}
.story-graphic--path::before,
.story-graphic--path::after {
content: "";
position: absolute;
width: 34%;
height: 1px;
background: currentColor;
opacity: 0.8;
}
.story-graphic--path::before {
top: 28%;
left: 8%;
transform: rotate(9deg);
}
.story-graphic--path::after {
right: 5%;
bottom: 24%;
transform: rotate(-11deg);
}
.story-graphic--blocks {
inset: auto 8% 12% auto;
display: grid;
grid-template-columns: repeat(4, minmax(44px, 7vw));
gap: 12px;
opacity: 0.38;
}
.story-graphic--blocks span {
display: block;
height: clamp(46px, 8vw, 110px);
border: 1px solid currentColor;
border-radius: 2px;
opacity: 0.65;
}
.story-graphic--blocks span:nth-child(2) {
transform: translateY(-28%);
}
.story-graphic--blocks span:nth-child(3) {
transform: translateY(18%);
}
.story-scroll.is-tone-mist .story-graphic--grid,
.story-scroll.is-tone-paper .story-graphic--grid,
.story-scroll.is-tone-sage .story-graphic--grid {
opacity: 0.1;
}
.story-scroll-copy {
position: fixed;
top: var(--header-height);
left: 50%;
z-index: 2;
width: min(1120px, 92vw);
height: calc(var(--stable-vh, 1vh) * 100 - var(--header-height));
display: grid;
place-items: center;
opacity: 0;
visibility: hidden;
transform: translateX(-50%);
transition: opacity 220ms ease, visibility 220ms ease;
pointer-events: none;
}
.story-scroll.is-copy-visible .story-scroll-copy {
opacity: 1;
visibility: visible;
}
.story-beat {
grid-area: 1 / 1;
display: grid;
align-content: center;
justify-items: center;
min-height: auto;
max-width: min(720px, 88vw);
text-align: center;
opacity: 0;
transform: translateY(18px);
transition: opacity 420ms ease, transform 520ms ease;
pointer-events: none;
}
.story-beat.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.story-beat.is-past {
opacity: 0;
transform: translateY(-18px);
transition-duration: 180ms, 220ms;
}
.story-beat:not(.is-active):not(.is-past) {
transition-duration: 180ms, 220ms;
}
.story-beat span {
display: inline-flex;
width: fit-content;
margin-bottom: 20px;
padding: 0;
border-bottom: 0;
opacity: 0.58;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.story-beat p:not(.story-beat-note) {
max-width: 38ch;
margin: 0;
color: currentColor;
font-family: var(--story-font);
font-size: clamp(1.25rem, 2vw, 1.85rem);
line-height: 1.56;
letter-spacing: 0;
font-weight: 400;
text-shadow: 0 12px 34px rgb(0 0 0 / 0.18);
}
.story-beat-note {
max-width: 50ch;
margin: 18px 0 0;
color: currentColor;
opacity: 0.72;
font-size: clamp(0.92rem, 1.2vw, 1.05rem);
line-height: 1.65;
text-shadow: 0 10px 28px rgb(0 0 0 / 0.14);
}
.story-beat .btn {
width: fit-content;
margin-top: 28px;
}
.story-beat#current-work {
padding-top: clamp(48px, 8vh, 84px);
}
.story-beat .story-cta {
margin-top: 42px;
padding: 9px 18px;
border-color: rgb(238 247 246 / 0.16);
border-radius: 999px;
background: rgb(238 247 246 / 0.055);
color: currentColor;
opacity: 0.72;
box-shadow: none;
}
.story-beat .story-cta:hover {
border-color: rgb(238 247 246 / 0.28);
background: rgb(238 247 246 / 0.09);
opacity: 0.92;
text-decoration: none;
transform: translateY(-1px);
box-shadow: none;
}
.story-spacer {
height: calc(var(--stable-vh, 1vh) * 92);
pointer-events: none;
}
.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) {
.story-hero-grid,
.updates-hero-grid,
.story-now-grid,
.story-next-grid,
.updates-process-grid,
.update-card--featured {
grid-template-columns: 1fr;
}
.story-layout {
grid-template-columns: 1fr;
}
.story-rail {
position: static;
display: flex;
flex-wrap: wrap;
}
.updates-layout {
grid-template-columns: 1fr;
}
.update-card--featured {
grid-column: auto;
}
.story-panel {
min-height: auto;
}
.story-panel-grid {
grid-template-columns: 1fr;
}
.story-kicker,
.story-period {
position: static;
}
.story-scroll {
min-height: auto;
}
.story-scroll-visual {
height: calc(var(--stable-vh, 1vh) * 76);
}
.story-scroll-copy {
margin-top: calc(var(--stable-vh, 1vh) * -76 + var(--header-height));
}
.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;
}
.story-hero,
.updates-hero {
padding: 84px 0 66px;
}
.story-hero {
padding: 0;
}
.story-cinematic-entry {
right: 16px;
bottom: max(16px, env(safe-area-inset-bottom));
}
.story-event {
margin-left: 30px;
padding: 22px;
}
.story-event::before {
left: -36px;
}
.story-timeline::before {
left: 0;
}
.story-copy h1,
.story-copy h2 {
max-width: 100%;
}
.story-beat {
min-height: calc(var(--stable-vh, 1vh) * 86);
}
.story-beat p:not(.story-beat-note) {
max-width: 30ch;
}
.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: 600px) {
.story-scroll-visual {
height: calc(var(--stable-vh, 1vh) * 100 - var(--header-height));
}
.story-illustration {
opacity: 0.48;
}
.story-code-window,
.story-visual--office span,
.story-visual--flight span:last-child,
.story-visual--mobile span:first-child {
transform: scale(0.82);
transform-origin: center;
}
.story-visual--network span:nth-child(1),
.story-visual--network span:nth-child(4),
.story-visual--office span:nth-child(1),
.story-visual--office span:nth-child(3),
.story-visual--mobile span:nth-child(2) {
display: none;
}
.story-visual--office span:nth-child(2) {
right: -8%;
bottom: 2%;
}
.story-visual--flight span:first-child {
top: 18%;
left: 50%;
width: 170px;
}
.story-visual--flight span:last-child {
left: -16%;
bottom: 10%;
}
.story-visual--pressure span {
left: -4%;
right: -4%;
opacity: 0.05;
}
.story-visual--mobile span:first-child {
right: -5%;
bottom: 4%;
}
.story-visual--mobile span:nth-child(3) {
left: 10%;
}
.story-visual svg {
opacity: 0.045;
transform: translateX(24%);
}
.story-visual--people svg,
.story-visual--event svg {
opacity: 0.055;
transform: translateY(12%);
}
.story-visual--travel svg {
opacity: 0.045;
transform: translateX(-24%);
}
.story-visual--office svg {
opacity: 0.055;
transform: translateY(14%);
}
.story-visual--server svg,
.story-visual--identity svg,
.story-visual--video svg {
opacity: 0.055;
transform: none;
}
.story-visual--helicopter svg {
opacity: 0.05;
transform: translate(28%, -10%);
}
}
@media (max-width: 336px) {
.map-controls {
bottom: 40px;
}
}
.story-illustration::before {
inset: 5% -8%;
opacity: 0.62;
}
.story-code-window {
right: clamp(-120px, -5vw, -48px);
bottom: clamp(36px, 8vh, 100px);
width: min(440px, 34vw);
border-color: rgb(var(--story-fg) / 0.08);
background:
linear-gradient(180deg, rgb(var(--story-fg) / 0.025), transparent 20%),
rgb(0 0 0 / 0.025);
box-shadow: 0 28px 90px rgb(0 0 0 / 0.05);
opacity: 0.62;
}
.story-code-window::before {
opacity: 0.12;
box-shadow: 56px 0 0 rgb(var(--story-fg) / 0.08), 98px 0 0 rgb(var(--story-fg) / 0.06);
}
.story-code-window i {
opacity: 0.07;
}
.story-visual svg {
transform: translateX(31%);
}
.story-visual--office svg {
opacity: 0.075;
transform: translateY(36%);
}
.story-visual--people svg,
.story-visual--event svg {
opacity: 0.06;
transform: translateY(38%);
}
.story-visual--travel svg {
opacity: 0.05;
transform: translateX(-34%);
}
.story-visual--helicopter svg {
opacity: 0.09;
transform: translate(-8%, -2%) scale(0.78);
transform-origin: center;
}
.story-helicopter-asset {
position: absolute;
left: 50%;
top: 5%;
width: min(400px, 34vw);
height: auto;
opacity: 0.12;
transform: translateX(-50%) rotate(-7deg);
filter: drop-shadow(0 32px 90px rgb(0 0 0 / 0.16));
}
.story-visual--server svg {
opacity: 0.06;
transform: translateX(28%);
}
.story-visual--identity svg,
.story-visual--video svg {
opacity: 0.065;
transform: translateX(26%);
}
.story-illustration {
opacity: 0.9;
}
.story-scroll-copy {
margin-top: 0;
}
.story-visual svg {
opacity: 0.075;
}
.story-code-window {
opacity: 0.72;
}
.story-visual--network {
background:
linear-gradient(28deg, transparent 20%, rgb(var(--story-fg) / 0.065) 20.1%, transparent 20.7%),
linear-gradient(145deg, transparent 38%, rgb(var(--story-fg) / 0.045) 38.1%, transparent 38.7%),
linear-gradient(162deg, transparent 56%, rgb(var(--story-fg) / 0.038) 56.1%, transparent 56.6%);
}
.story-visual--network span {
display: none;
}
.story-visual--network span::after {
display: none;
}
.story-scroll[data-beat="early-clients"] .story-visual--people svg {
opacity: 0.085;
transform: translateY(38%);
}
.story-scroll[data-beat="team"] .story-visual--people svg {
opacity: 0.085;
transform: translateY(38%);
}
.story-scroll[data-beat="edona"] .story-visual--people svg {
opacity: 0.085;
transform: translateY(38%);
}
.story-scroll[data-beat="office"] .story-visual--office svg {
opacity: 0.085;
transform: translateY(36%);
}
.story-scroll[data-beat="resilience"] .story-visual--travel svg {
opacity: 0.086;
transform: none;
}
.story-scroll[data-beat="resilience"] .story-visual--travel svg > :nth-child(3),
.story-scroll[data-beat="resilience"] .story-visual--travel svg > :nth-child(4) {
transform: translateX(-92px);
}
.story-scroll[data-beat="resilience"] .story-visual--travel svg > :nth-child(n + 5):nth-child(-n + 8) {
opacity: 0.22;
}
.story-scroll[data-beat="resilience"] .story-visual--travel svg > :nth-child(n + 9) {
transform: translateX(20px);
}
.story-scroll[data-beat="helicopter-training"] .story-visual--helicopter svg {
opacity: 0.09;
transform: translate(-8%, -2%) scale(0.78);
transform-origin: center;
}
.story-scroll[data-beat="helicopter-training"] .story-helicopter-asset {
opacity: 0.1;
}
.story-scroll[data-beat="mallorca-flight"] .story-visual--event svg {
opacity: 0.078;
transform: translateY(34%) scale(0.78);
transform-origin: center;
}
.story-scroll[data-beat="mallorca-flight"] .story-visual--event svg > :nth-child(-n + 3) {
transform: translateX(150px);
}
.story-visual--server svg {
opacity: 0.085;
transform: translateY(5%);
}
.story-visual--server svg > :first-child {
transform: translate(-250px, 12px) scale(0.96);
transform-origin: center;
}
.story-visual--server svg > :nth-child(2),
.story-visual--server svg > :nth-child(n + 12) {
opacity: 0.42;
}
.story-visual--server svg > :nth-child(n + 3):nth-child(-n + 11) {
transform: translateX(160px);
}
.story-visual--identity svg {
opacity: 0.085;
transform: none;
}
.story-visual--identity svg > :nth-child(-n + 2) {
transform: translateX(-170px);
}
.story-visual--identity svg > :nth-child(n + 3) {
transform: translateX(270px);
}
.story-visual--video svg {
opacity: 0.085;
transform: none;
}
.story-visual--video svg > :nth-child(-n + 2) {
transform: translate(640px, -48px);
}
.story-visual--video svg > :nth-child(n + 3) {
transform: translateX(-500px);
}
@media (max-width: 600px) {
.story-code-window {
right: -150px;
bottom: 8%;
width: 310px;
}
.story-visual svg {
transform: translateX(36%);
}
.story-visual--people svg,
.story-visual--event svg {
opacity: 0.055;
transform: translateY(26%);
}
.story-visual--office svg {
opacity: 0.055;
transform: translateY(27%);
}
.story-visual--travel svg {
transform: translateX(-36%);
}
.story-visual--helicopter svg {
transform: translate(38%, -10%);
}
.story-visual--server svg,
.story-visual--identity svg,
.story-visual--video svg {
transform: translateX(32%);
}
.story-illustration {
opacity: 0.56;
}
.story-visual svg {
opacity: 0.064;
}
.story-scroll[data-beat="early-clients"] .story-visual--people svg {
opacity: 0.07;
transform: translateY(36%);
}
.story-scroll[data-beat="office"] .story-visual--office svg {
opacity: 0.07;
transform: translateY(37%);
}
.story-scroll[data-beat="mallorca-flight"] .story-visual--event svg {
opacity: 0.07;
transform: translateY(28%);
}
.story-scroll[data-beat="mallorca-flight"] .story-visual--event svg > :nth-child(-n + 3) {
transform: translateX(120px);
}
.story-visual--server svg,
.story-visual--identity svg {
opacity: 0.07;
transform: none;
}
.story-visual--video svg {
opacity: 0.07;
transform: none;
}
.story-visual--video svg > :nth-child(-n + 2) {
transform: translateX(520px);
}
.story-visual--video svg > :nth-child(n + 3) {
transform: translateX(-420px);
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.reveal {
transition: none;
}
.story-cinematic-entry {
transition: none;
}
}
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 100;
padding: 10px 14px;
border-radius: 6px;
background: #f4fbfb;
color: #0d1d22;
font-size: 0.8rem;
font-weight: 700;
transform: translateY(-160%);
transition: transform 180ms ease;
}
.skip-link:focus {
transform: translateY(0);
outline: 2px solid #8fd4c4;
outline-offset: 3px;
}