@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
unicode-range: U+0100-017F, U+0218-021B;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url('../fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter UK name';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url('../fonts/inter-uk-name.woff2') format('woff2');
}
:root {
--brand:      #2B46FC;
--brand-ink:  #1B2FD8;
--tri-1: var(--brand);
--tri-2: #D2212B;
--tri-3: #F0B72B;
--tri-a: 33.333%;
--tri-b: 66.667%;
--tri-h: 6px;
--tri: linear-gradient(90deg,
var(--tri-1) 0 var(--tri-a),
var(--tri-2) var(--tri-a) var(--tri-b),
var(--tri-3) var(--tri-b) 100%);
--tri-1-lift: #4E7BFF;
--white:     #FFFFFF;
--paper-bg:  #FFFFFF;
--mist:      #F2F3F7;
--deep:      #091135;
--deep-2:    #1C2F8D;
--card-dark: #171A2E;
--lavender:  #5A66A8;
--ink:    #15161C;
--ink-2:  #6A6C75;
--ink-3:  #6E6F75;
--line:   rgba(21, 22, 28, 0.12);
--field-line: rgba(21, 22, 28, 0.48);
--error: #DC1419;
--paper:       var(--paper-bg);
--fg:          var(--ink);
--fg-2:        var(--ink-2);
--fg-3:        var(--ink-3);
--hairline:    var(--line);
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--fs-display: clamp(2.35rem, 5.1vw, 4.5rem);
--fs-h2:      clamp(2rem, 4.1vw, 3.5rem);
--fs-h3:      clamp(1.3rem, 2vw, 1.95rem);
--fs-lead:    clamp(1.15rem, 1.7vw, 1.6rem);
--fs-stat:    clamp(2.6rem, 4.8vw, 4rem);
--fs-body:    1.0625rem;
--fs-small:   0.9375rem;
--fs-micro:   0.75rem;
--gutter:    clamp(1.25rem, 4.4vw, 4rem);
--shell:     1400px;
--section-y: clamp(4rem, 7.5vw, 7.5rem);
--btn-hover-bg: var(--brand-ink);
--btn-hover-fg: var(--white);
--r-sheet: 18px;
--r-card: 24px;
--r-btn:  999px;
--r-field: 8px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--header-h: clamp(58px, 5.2vw, 76px);
}
.sec--white { --paper: var(--paper-bg); --fg: var(--ink);   --fg-2: var(--ink-2); --hairline: var(--line); }
.sec--mist  { --paper: var(--mist);  --fg: var(--ink);   --fg-2: var(--ink-2); --hairline: rgba(21,22,28,.14); }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper-bg); }
.consent {
position: fixed;
left: var(--gutter);
bottom: clamp(1rem, 2.4vw, 1.75rem);
z-index: 140;
width: min(400px, calc(100% - 2 * var(--gutter)));
max-height: calc(100svh - 2rem);
overflow-y: auto;
padding: 1.15rem 1.25rem 1.25rem;
border-radius: 22px;
background: var(--paper-bg);
color: var(--ink);
border: 1px solid rgba(9, 17, 53, 0.08);
box-shadow: 0 28px 60px -22px rgba(9, 17, 53, 0.45), 0 2px 8px rgba(9, 17, 53, 0.06);
opacity: 0;
transform: translateY(14px);
transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.consent.is-in { opacity: 1; transform: none; }
.consent__link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.consent__link:hover { color: var(--brand); }
.consent__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.consent__head { display: flex; align-items: center; gap: 0.7rem; }
.consent__icon {
flex: none;
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 50%;
color: var(--deep);
background: var(--mist);
}
.consent__title { flex: 1 1 auto; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.consent__more {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 32px;
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.8125rem;
color: var(--ink-2);
border: 1px solid var(--line);
transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.consent__more:hover, .consent__more[aria-expanded="true"] { color: var(--ink); background: var(--mist); border-color: var(--mist); }
.consent__more:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.consent__text { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.consent .consent__btn {
justify-content: center;
min-width: 0;
padding: 0.8rem 0.9rem;
font-size: 0.875rem;
background: var(--deep);
color: #FFFFFF;
--btn-hover-bg: var(--brand);
--btn-hover-fg: #FFFFFF;
}
.consent .consent__save {
grid-column: 1 / -1;
justify-content: center;
padding: 0.8rem 0.9rem;
font-size: 0.875rem;
background: transparent;
color: var(--deep);
border-color: var(--deep);
--btn-hover-bg: var(--deep);
--btn-hover-fg: #FFFFFF;
}
.consent .consent__save[hidden] { display: none; }
.consent__btn:focus-visible, .consent__save:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.consent__panel { margin-top: 0.9rem; }
.consent__fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.consent__row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding-block: 0.75rem;
border-top: 1px solid var(--line);
}
.consent__label { flex: 1 1 8rem; min-width: 0; }
.consent__name { font-size: 0.875rem; font-weight: 600; }
.consent__desc { margin-top: 0.15rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); }
.consent__control { display: flex; align-items: center; gap: 0.6rem; flex: 0 1 auto; min-width: 0; }
.consent__always { font-size: var(--fs-micro); color: var(--ink-2); }
.consent__switch {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: none;
width: 44px;
height: 26px;
margin: 0;
border-radius: 999px;
border: 1px solid var(--ink-2);
background: #FFFFFF;
cursor: pointer;
transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.consent__switch::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ink-2);
transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.consent__switch:checked { background: var(--brand); border-color: var(--brand); }
.consent__switch:checked::after { background: #FFFFFF; transform: translateX(18px); }
.consent__switch:disabled { cursor: default; opacity: 0.5; }
.consent__switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.footer__consent {
color: inherit;
font: inherit;
text-decoration: underline;
text-underline-offset: 3px;
padding-block: 0.6rem;
margin-block: -0.6rem;
}
.footer__consent:hover { color: #FFFFFF; }
@media (min-width: 600px) and (max-width: 1279px) {
.consent { left: auto; right: var(--gutter); }
}
@media (max-width: 1279px) {
.consent__more { position: relative; }
.consent__more::after { content: ''; position: absolute; inset: -6px -2px; }
.consent__panel:not([hidden]) ~ .consent__actions {
position: sticky;
bottom: -1.25rem;
z-index: 1;
margin: 0.4rem 0 -1.25rem;
padding-block: 0.6rem 1.25rem;
background: var(--paper-bg);
box-shadow: 0 -12px 16px -12px rgba(9, 17, 53, 0.18);
}
}
@media (max-width: 599.98px) {
.consent {
left: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto;
max-height: calc(100svh - 1rem);
padding: 0.75rem 0.85rem 0.8rem;
border-radius: 20px;
}
.consent__icon { width: 30px; height: 30px; }
.consent__icon svg { width: 17px; height: 17px; }
.consent__title { font-size: 0.9375rem; }
.consent__text { margin-top: 0.4rem; font-size: 0.8125rem; line-height: 1.45; }
.consent__actions { margin-top: 0.6rem; }
.consent .consent__btn, .consent .consent__save { min-height: 44px; padding: 0.65rem 0.5rem; }
.consent__panel:not([hidden]) ~ .consent__actions { bottom: -0.8rem; margin-bottom: -0.8rem; padding-bottom: 0.8rem; }
.consent__head { flex-wrap: wrap; }
.consent__title { flex-basis: 5rem; }
.consent__more { margin-left: auto; max-width: 100%; }
.consent__link { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 379px) {
.consent .consent__btn { font-size: 0.8125rem; padding-inline: 0.35rem; }
.consent__more { padding-inline: 0.6rem; }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) and (max-width: 1279px) {
.consent:not([hidden]) {
left: var(--gutter); right: var(--gutter); bottom: 0.5rem; width: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 1rem;
align-items: center;
padding: 0.75rem 1rem;
}
.consent__head, .consent__text { grid-column: 1; }
.consent__text { margin-top: 0.25rem; }
.consent__actions { grid-column: 2; grid-row: 1 / 3; margin-top: 0; grid-template-columns: auto auto; }
.consent__panel { grid-column: 1 / -1; }
.consent__panel:not([hidden]) ~ .consent__actions {
grid-column: 1 / -1; grid-row: auto;
bottom: -0.75rem; margin-bottom: -0.75rem; padding-bottom: 0.75rem;
}
}
@media (forced-colors: active) {
.sheet::before, .footer::before { display: none; }
.ccode { border: 1px solid; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
font-family: var(--font);
font-size: var(--fs-body);
line-height: 1.6;
font-weight: 400;
overflow-wrap: break-word;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis: none;
overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[tabindex="-1"]:focus-visible { outline: none; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; box-shadow: 0 0 0 3px #FFFFFF; }
::selection { background: var(--ink); color: var(--white); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%);
z-index: 1000; padding: 0.75rem 1.25rem; background: var(--ink); color: var(--white);
font-size: var(--fs-small); transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }
@media (max-width: 1279px) {
.skip-link {
top: 0.5rem;
display: inline-flex; align-items: center; min-height: 44px;
border-radius: var(--r-btn);
transform: translate(-50%, calc(-100% - 1rem));
}
.skip-link:focus-visible { z-index: 9001; }
}
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 1080px; }
.section {
position: relative;
padding-block: var(--section-y);
background: var(--paper);
color: var(--fg);
}
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 1.7vw, 1.75rem); }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.012em; line-height: 1.1; text-wrap: balance; }
.t-h2      { font-size: var(--fs-h2);      line-height: 1.1;  letter-spacing: -0.014em; font-weight: 400; }
.t-center { max-width: 24ch; margin-inline: auto; text-align: center; text-wrap: balance; }
.t-h3      { font-size: var(--fs-h3);      line-height: 1.2;  letter-spacing: -0.01em;  font-weight: 400; }
.t-lead    { font-size: var(--fs-lead);    line-height: 1.38; letter-spacing: -0.014em; text-wrap: pretty; }
.t-body    { font-size: var(--fs-body);    color: var(--fg-2); text-wrap: pretty; }
.t-body + .t-body { margin-top: 1em; }
.t-small   { font-size: var(--fs-small);   color: var(--fg-2); }
.t-micro   { font-size: var(--fs-micro);   color: var(--fg-2); }
[data-highlight] { color: var(--fg); }
.hl__word {
color: var(--fg-3);
transition: color 0.28s linear;
}
.hl__word.is-lit { color: var(--fg); }
.media { position: relative; overflow: hidden; background: var(--mist); border-radius: var(--r-card); }
.media > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); border-radius: inherit; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media__note { display: none; }
.media.is-empty {
background: color-mix(in srgb, var(--fg) 7%, var(--paper));
box-shadow: inset 0 0 0 1px var(--hairline);
}
.media.is-empty .media__note {
position: absolute;
inset: 0;
display: grid;
place-content: center;
font-size: var(--fs-micro);
color: var(--fg-2);
text-align: center;
line-height: 1.7;
padding: 1rem;
}
.media.is-empty .media__note, .media__path { overflow-wrap: anywhere; }
.media__path { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.6875rem; }
.btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.9rem 2.1rem;
border-radius: var(--r-btn);
font-size: var(--fs-small);
font-weight: 400;
line-height: 1.2;
background: var(--brand);
color: var(--white);
border: 1px solid transparent;
max-width: 100%;
text-align: center;
flex-wrap: wrap;
justify-content: center;
}
.btn--outline { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-body); padding-block: 0.55rem; margin-block: -0.55rem; }
.link-arrow svg { transition: transform 0.35s var(--ease); }
h1, h2, h3, .card__title, .fcard__title, .shift__from, .shift__to { hyphens: none; }
.sec-bar {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: space-between;
align-items: baseline;
}
.sec-bar > * { min-width: 0; }
.header {
position: fixed;
inset: 0 0 auto 0;
z-index: 120;
min-height: var(--header-h);
display: flex;
align-items: center;
color: var(--ink);
background: var(--white);
transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.no-js .header { position: absolute; }
.header.is-scrolled { border-bottom: 1px solid var(--line); }
.header__inner {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.5rem;
}
.wordmark {
justify-self: start;
padding-block: 0.4rem;
margin-block: -0.4rem;
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: clamp(1rem, 1.25vw, 1.25rem);
font-weight: 500;
letter-spacing: -0.01em;
white-space: nowrap;
}
.wordmark__mark {
width: clamp(28px, 2.3vw, 34px);
height: clamp(28px, 2.3vw, 34px);
flex: none;
padding: 2px;
background: var(--white);
border-radius: 50%;
object-fit: contain;
}
.nav { justify-self: center; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem); }
.nav__link { position: relative; font-size: var(--fs-small); padding-block: 0.35rem; opacity: 0.8; transition: opacity 0.25s var(--ease); }
.nav__link:hover { opacity: 1; }
.nav__link[aria-current='page'] { opacity: 1; }
.header__actions { justify-self: end; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: clamp(0.6rem, 1.4vw, 1.25rem); }
.header__cta {
white-space: nowrap;
padding: 0.62rem 1.5rem;
font-size: var(--fs-small);
background: transparent;
color: var(--ink);
border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.header__cta:hover { border-color: var(--ink); }
.lang { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-micro); letter-spacing: 0.06em; }
.lang__item {
opacity: 0.62;
transition: opacity 0.25s var(--ease);
padding: 0.7rem 0.4rem;
margin: -0.7rem -0.4rem;
}
.lang__item:hover, .lang__item.is-active { opacity: 1; }
.burger {
display: none;
place-items: center;
width: 44px; height: 44px;
border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
border-radius: var(--r-btn);
}
.burger__bars { position: relative; width: 16px; height: 9px; }
.burger__bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease); }
.burger__bars span:first-child { top: 0; }
.burger__bars span:last-child { bottom: 0; }
.menu-open .burger__bars span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-open .burger__bars span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu {
position: fixed;
inset: 0;
z-index: 110;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2rem;
padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
background: var(--deep);
color: #FFFFFF;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.7s var(--ease);
pointer-events: none;
overflow-y: auto;
}
.menu-open .menu { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu-open .header { color: #FFFFFF; background: transparent; border-bottom-color: transparent; }
.menu-open .wordmark, .menu-open .burger { color: #FFFFFF; }
.menu-open .header__cta { display: none; }
.menu__list { display: flex; flex-direction: column; gap: 0.35rem; }
.menu__item { overflow: hidden; }
.menu__link {
display: block;
font-size: clamp(2rem, 7vw, 3.75rem);
line-height: 1.16;
letter-spacing: -0.022em;
transform: translateY(110%);
transition: transform 0.75s var(--ease), opacity 0.3s var(--ease);
transition-delay: calc(var(--i, 0) * 0.05s);
opacity: 0.92;
}
.menu-open .menu__link { transform: translateY(0); }
.menu__link:hover { opacity: 1; }
.menu__link:focus-visible { outline-offset: -2px; }
.menu__foot a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
.menu__foot > *, .bigcard__foot > * { min-width: 0; }
.menu__lang { display: none; flex-basis: 100%; color: #FFFFFF; }
.menu__foot {
margin-top: auto;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.16);
display: flex;
flex-wrap: wrap;
gap: 1rem 2.5rem;
justify-content: space-between;
font-size: var(--fs-small);
color: #A9B6D0;
}
.hero {
position: relative;
min-height: calc(100svh + var(--r-sheet));
display: flex;
flex-direction: column;
align-items: stretch;
padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem));
padding-bottom: clamp(5rem, 9vw, 8rem);
--paper: var(--deep);
--fg: #FFFFFF;
--fg-3: rgba(255, 255, 255, 0.46);
--btn-hover-bg: var(--white);
--btn-hover-fg: var(--ink);
color: var(--fg);
background:
radial-gradient(64% 52% at -4% -16%, var(--lavender) 0%, transparent 66%),
linear-gradient(158deg, var(--deep-2) 0%, #0B1440 44%, #050716 100%);
overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__slides { position: absolute; inset: -2% 0; isolation: isolate; }
.hero__bg .media { position: absolute; inset: 0; border-radius: 0; background: transparent; }
.hero__bg .media > img { border-radius: 0; }
.hero__slide { opacity: 0; visibility: hidden; transition: opacity 0s linear 1.4s, visibility 0s linear 1.4s; }
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.4s var(--ease); }
.hero__slide > img { object-position: var(--focus, 50% 50%); }
.hero__scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,.42) 0%, rgba(0,0,0,.20) 34%, rgba(0,0,0,.70) 100%);
}
.hero__bg:not(:has(.hero__slide:not(.is-empty))) .hero__scrim { display: none; }
.hero--photos .hero__scrim {
background:
linear-gradient(90deg, rgba(5, 7, 22, 0.28) 0%, rgba(5, 7, 22, 0) 62%),
linear-gradient(180deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.6) 30%,
rgba(0, 0, 0, 0.64) 48%, rgba(0, 0, 0, 0.72) 100%);
}
.hero--photos { --fg-3: rgba(255, 255, 255, 0.62); }
@media (min-width: 768px) {
.hero--photos .hero__controls {
bottom: auto;
top: min(calc(100% - var(--r-sheet) - clamp(1rem, 2.4vw, 2rem) - 48px),
calc(100svh - 48px - 1.25rem));
}
.hero--photos .hero__controls.is-low { top: auto; bottom: calc(var(--r-sheet) + clamp(1rem, 2.4vw, 2rem)); }
}
.hero__bg .media.is-empty { box-shadow: none; background: transparent; }
.hero__bg .hero__slide { background-size: cover; background-position: center; background-repeat: no-repeat; }
@media (max-width: 1279px) and (orientation: portrait) {
.hero--photos { padding-top: calc(var(--header-h) + 48vw); }
.hero--photos .hero__slides { inset: 0; }
.hero--photos .hero__bg .hero__slide > img {
position: absolute;
top: var(--header-h); left: 0;
width: 100%; height: auto;
aspect-ratio: var(--ar, 1.5);
-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.hero--photos .hero__scrim {
background: linear-gradient(180deg,
rgba(5, 7, 22, 0.35) 0, rgba(5, 7, 22, 0.08) var(--header-h),
rgba(5, 7, 22, 0.08) calc(var(--header-h) + 30vw),
rgba(5, 7, 22, 0.68) calc(var(--header-h) + 46vw), rgba(5, 7, 22, 0.74) calc(var(--header-h) + 72vw));
}
.hero--photos .hero__inner { padding-top: 0.75rem; }
}
.hero__bg .media.is-empty .media__note { display: none; }
.hero__controls {
position: absolute;
left: 0; right: 0;
bottom: calc(var(--r-sheet) + clamp(1rem, 2.4vw, 2rem));
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.hero__controls[hidden] { display: none; }
.hero__bar { display: flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; height: 48px; }
.hero__dots { display: flex; align-items: center; height: 36px; }
.hero__dot { flex: none; width: 24px; height: 36px; display: grid; place-items: center; border-radius: 999px; transition: width 0.45s var(--ease); }
.hero__dot[aria-current="true"] { width: 40px; }
.hero__dot:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
.hero__dot[hidden] { display: none; }
.hero__dot span {
position: relative;
display: block;
width: 8px;
height: 8px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 0 1px rgba(5, 7, 22, 0.18), 0 1px 4px rgba(0, 0, 0, 0.35);
transition: width 0.45s var(--ease), background-color 0.25s var(--ease);
}
.hero__dot[aria-current="true"] span { width: 28px; }
.hero__dot span::after { content: ''; position: absolute; inset: 0; background: #FFFFFF; transform: scaleX(0); transform-origin: left center; }
.hero__dot:hover span { background: rgba(255, 255, 255, 0.85); }
.hero__dot[aria-current="true"] span { background: rgba(255, 255, 255, 0.6); }
.hero__controls.is-paused .hero__dot[aria-current="true"] span::after { transform: scaleX(1); }
.hero__controls.is-playing .hero__dot[aria-current="true"] span::after { animation: hero-progress var(--carousel-ms, 2s) linear both; }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.hero__dot, .hero__dot span { transition: none; }
}
@media (pointer: coarse) and (max-width: 1279px) {
.hero__dots { height: 44px; }
.hero__dot { width: 44px; height: 44px; }
.hero__dot[aria-current="true"] { width: 52px; }
}
.hero__inner { position: relative; z-index: 2; text-align: left; margin-block: auto; padding-block: clamp(2rem, 6vw, 5rem); }
.hero__title {
font-size: var(--fs-display);
line-height: 1.1;
letter-spacing: -0.016em;
font-weight: 400;
max-width: 17ch;
}
.hero__lead {
margin-top: clamp(1.25rem, 2.2vw, 2rem);
max-width: 46ch;
font-size: var(--fs-body);
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
}
.hero__buttons {
margin-top: clamp(1.75rem, 3vw, 2.75rem);
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: flex-start;
}
@media (max-width: 599.98px) and (orientation: portrait) {
.hero__buttons { flex-direction: column; align-items: stretch; }
.hero__buttons .btn { font-size: 1rem; padding-block: 1rem; }
}
@media (min-width: 600px) and (max-width: 1279px) and (orientation: portrait) {
.hero__title { font-size: clamp(2.6rem, 6vw, 3.4rem); }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1279px) {
.hero {
min-height: 0;
padding-top: calc(var(--header-h) + 1rem);
padding-bottom: calc(var(--r-sheet) + 5.5rem);
}
.hero__inner { margin-block: 0; padding-block: 1rem 0; }
.hero__title { max-width: 24ch; }
.hero__lead { margin-top: 0.75rem; max-width: 60ch; }
.hero__buttons { margin-top: 1.25rem; }
}
.sheet {
position: relative;
z-index: 3;
margin-top: calc(var(--r-sheet) * -1);
border-start-start-radius: var(--r-sheet);
border-start-end-radius: var(--r-sheet);
}
.sheet::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--tri-h);
background: var(--tri);
border-start-start-radius: inherit;
border-start-end-radius: inherit;
z-index: 4;
}
.legal { max-width: 46rem; }
.legal__sec { margin-top: clamp(2rem, 4vw, 3rem); }
.legal__sec > * + * { margin-top: 0.9rem; }
.legal p, .legal li { font-size: var(--fs-body); line-height: 1.65; color: var(--ink); }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal li + li { margin-top: 0.35rem; }
.legal a:not(.btn) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ctable { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.ctable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ctable table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.45; }
.ctable th, .ctable td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.ctable thead th { border-top: 0; font-weight: 600; background: var(--mist); }
.ctable tbody th { font-weight: 600; color: var(--ink-2); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; background: #FAFAFC; }
.ctable td:first-child:not(.ctable__none) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; white-space: nowrap; }
.ctable__none { color: var(--ink-2); }
@media (max-width: 599.98px) {
.ctable { overflow: visible; }
.ctable table { min-width: 0; }
.ctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ctable table, .ctable tbody, .ctable tr, .ctable td, .ctable tbody th { display: block; }
.ctable td { border-top: 0; padding: 0.3rem 0.9rem; }
.ctable tbody tr:not(:first-child) { border-top: 1px solid var(--line); padding-block: 0.75rem; }
.ctable td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-2); font-family: var(--font); font-size: 0.8125rem; font-weight: 400; }
.ctable td:first-child:not(.ctable__none) { font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
}
.pagehead {
padding-top: calc(var(--header-h) + clamp(4rem, 8vw, 7rem));
padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
background: var(--white);
color: var(--ink);
text-align: center;
}
.pagehead__title { font-size: var(--fs-display); line-height: 1.1; letter-spacing: -0.016em; max-width: 17ch; margin-inline: auto; }
.pagehead__lead { margin-top: clamp(1rem,1.8vw,1.5rem); max-width: 52ch; margin-inline: auto; color: var(--ink-2); }
.pagehead--404 { min-height: 66svh; display: flex; align-items: center; }
.logos__head {
margin-bottom: clamp(1.25rem, 2.6vw, 2.25rem);
padding-top: clamp(0.75rem, 1.6vw, 1.25rem);
}
.logos__title {
font-size: var(--fs-lead);
line-height: 1.2;
letter-spacing: -0.012em;
}
.logos__all { font-size: var(--fs-small); color: var(--fg-2); }
.logos__all:hover { color: var(--fg); }
.marquee {
position: relative;
overflow: hidden;
width: 100%;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; }
.marquee.is-ready .marquee__track {
animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
will-change: transform;
}
@keyframes marquee-scroll {
from { transform: translate3d(0, 0, 0); }
to   { transform: translate3d(calc(-1 * var(--marquee-unit, 0px)), 0, 0); }
}
@media (hover: hover) and (pointer: fine) {
.marquee:hover .marquee__track { animation-play-state: paused; }
}
.marquee__group {
display: flex;
align-items: center;
flex: none;
}
.marquee__item {
display: flex;
align-items: center;
justify-content: center;
flex: none;
min-width: clamp(180px, 17vw, 260px);
height: 104px;
padding-inline: clamp(1rem, 2vw, 2rem);
}
.marquee__link { display: block; border-radius: var(--r-field); }
.marquee__link img { transition: transform 0.4s var(--ease); }
@media (hover: hover) { .marquee__link:hover img { transform: scale(1.05); } }
.tile { scroll-margin-top: calc(var(--header-h) + 2rem); }
.tile:target { outline: 2px solid var(--brand); outline-offset: -2px; }
.marquee__item img {
max-height: 96px;
max-width: 100%;
width: auto;
object-fit: contain;
}
.partner__wordmark {
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--fg-3, var(--ink-3));
white-space: nowrap;
transition: color 0.4s var(--ease);
}
.marquee__item:hover .partner__wordmark { color: var(--ink); }
.about {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: stretch;
}
.about__media { position: relative; }
.about__media .media { position: absolute; inset: 0; aspect-ratio: auto; }
.about__title { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.016em; max-width: 14ch; }
.about__lead {
margin-top: clamp(1.5rem, 3vw, 2.5rem);
max-width: 34ch;
font-size: var(--fs-h3);
line-height: 1.32;
letter-spacing: -0.01em;
color: var(--fg);
}
.about__text {
margin-top: 1.25rem;
max-width: 48ch;
color: var(--fg-2);
line-height: 1.62;
}
.about__foot {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.75rem clamp(1.5rem, 3vw, 3rem);
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: clamp(1rem, 2vw, 1.5rem);
border-top: 1px solid var(--hairline);
}
.about__places { display: flex; flex-wrap: wrap; gap: 0.5rem clamp(1.25rem, 2.5vw, 2.25rem); list-style: none; }
.about__place { min-width: 0; font-size: var(--fs-small); }
.about__place .ccode { margin-right: 0.5rem; }
.ccode {
display: inline-block;
vertical-align: 0.06em;
font-size: var(--fs-micro);
line-height: 1;
padding: 0.3em 0.45em 0.25em;
border-radius: 4px;
background: var(--brand-ink);
color: #FFFFFF;
white-space: nowrap;
}
.ccode--sk { background: var(--tri-1); color: #FFFFFF; }
.ccode--cz { background: var(--tri-2); color: #FFFFFF; }
.ccode--ua { background: var(--tri-3); color: var(--ink); }
.about__cta { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.statement {
margin-top: clamp(4rem, 9vw, 8rem);
padding-top: clamp(2rem, 4vw, 3.5rem);
border-top: 1px solid var(--hairline);
}
.statement__text {
max-width: 54ch;
margin-inline: auto;
text-align: center;
text-wrap: balance;
font-size: var(--fs-h3);
line-height: 1.38;
letter-spacing: -0.01em;
}
.panel, .slab {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--r-card);
--card-pad: clamp(1.75rem, 4vw, 4rem);
padding: var(--card-pad);
min-height: clamp(460px, 52vw, 680px);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(2.5rem, 6vw, 5rem);
color: #FFFFFF;
--fg: #FFFFFF;
--fg-2: rgba(255, 255, 255, 0.72);
--fg-3: rgba(255, 255, 255, 0.46);
--hairline: rgba(255, 255, 255, 0.18);
}
.grainient {
position: absolute;
inset: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 0.6s var(--ease);
}
.has-grainient > .grainient { opacity: 1; }
@media (forced-colors: active) { .grainient { display: none; } }
.panel.has-grainient::before,
.panel.has-grainient::after,
.card--featured-date.has-grainient::before { display: none; }
.panel {
isolation: isolate;
background: linear-gradient(160deg, #03040A 0%, #060A1F 42%, #0A1550 78%, #0E1F78 100%);
}
.panel::before,
.panel::after {
content: '';
position: absolute;
inset: -16% -12% -20%;
z-index: 0;
pointer-events: none;
will-change: transform;
}
.panel::before {
mix-blend-mode: screen;
background:
radial-gradient(56% 44% at 50% 88%, rgba(43, 70, 252, 0.9) 0%, rgba(43, 70, 252, 0.3) 48%, transparent 76%),
radial-gradient(26% 16% at 52% 86%, rgba(118, 152, 255, 0.55) 0%, transparent 72%),
radial-gradient(30% 28% at 74% 40%, rgba(43, 70, 252, 0.2) 0%, transparent 70%);
animation: panel-drift-a 34s ease-in-out infinite alternate;
}
.panel::after {
mix-blend-mode: screen;
background:
radial-gradient(26% 28% at 88% 84%, rgba(43, 70, 252, 0.6) 0%, rgba(30, 50, 200, 0.22) 46%, transparent 74%),
radial-gradient(44% 36% at 80% 16%, rgba(78, 123, 255, 0.16) 0%, transparent 70%);
animation: panel-drift-b 27s ease-in-out infinite alternate;
}
@media (max-width: 900.98px) {
.panel::before {
background:
radial-gradient(60% 40% at 64% 90%, rgba(43, 70, 252, 0.78) 0%, rgba(43, 70, 252, 0.26) 48%, transparent 76%),
radial-gradient(26% 14% at 66% 88%, rgba(118, 152, 255, 0.4) 0%, transparent 72%),
radial-gradient(30% 28% at 74% 40%, rgba(43, 70, 252, 0.2) 0%, transparent 70%);
}
}
@keyframes panel-drift-a {
from { transform: translate3d(-3%, 2%, 0) scale(1); }
to   { transform: translate3d(5%, -3%, 0) scale(1.14); }
}
@keyframes panel-drift-b {
from { transform: translate3d(4%, -1%, 0) scale(1.1); }
to   { transform: translate3d(-4%, 3%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.consent { transform: none; transition: none; }
.consent__switch, .consent__switch::after { transition: none; }
.panel::before { animation: none; transform: translate3d(1%, 0, 0) scale(1.07); }
.panel::after  { animation: none; transform: translate3d(0, 1%, 0) scale(1.05); }
}
.slab {
background:
radial-gradient(70% 55% at 92% 108%, rgba(43, 70, 252, 0.42) 0%, rgba(43, 70, 252, 0.12) 50%, transparent 76%),
radial-gradient(40% 30% at 8% -6%, rgba(78, 123, 255, 0.10) 0%, transparent 70%),
linear-gradient(160deg, #03040A 0%, #060A1F 46%, #0A1550 84%, #0D1C6C 100%);
}
.panel__title { position: relative; z-index: 1; font-size: var(--fs-h2); line-height: 1.1; max-width: 15ch; }
.panel__foot { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-end; gap: clamp(1.5rem, 3vw, 3rem); flex-wrap: wrap; }
.stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
gap: 0;
align-items: start;
}
.stat {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 0 clamp(1rem, 2vw, 2rem);
border-left: 1px solid var(--hairline);
min-width: 0;
}
.stat:first-child { padding-left: 0; border-left: 0; }
.stat__value {
display: block;
font-size: var(--fs-stat);
line-height: 1;
letter-spacing: -0.02em;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.stat__label { display: block; font-size: var(--fs-micro); line-height: 1.45; color: var(--fg); max-width: 22ch; }
.circle-btn { flex: none; }
.bigcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.7vw, 1.5rem); }
.bigcard {
position: relative;
display: block;
aspect-ratio: 16 / 11;
border-radius: var(--r-card);
overflow: hidden;
background: var(--card-dark);
}
.bigcard .media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.bigcard .media > img { border-radius: 0; transform-origin: var(--focus, 50% 50%); transition: transform 0.9s var(--ease); }
.bigcard:hover .media > img { transform: scale(1.02); }
.bigcard__scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 68%, rgba(0,0,0,.8) 100%);
}
.bigcard .media.is-empty ~ .bigcard__scrim { display: none; }
.bigcard .media.is-empty ~ .bigcard__foot { color: var(--ink); }
.bigcard__foot {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: clamp(1.25rem, 2.2vw, 2rem);
color: #FFFFFF;
}
.bigcard__title { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.017em; }
.bigcard__arrow { flex: none; transition: transform 0.4s var(--ease); }
.bigcard:hover .bigcard__arrow { transform: translateX(5px); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.7vw, 1.5rem); }
.fcard {
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(1.75rem, 2.8vw, 2.75rem);
background: var(--white);
border-radius: var(--r-card);
min-height: clamp(320px, 26vw, 380px);
}
.fcard__icon { width: 34px; height: 34px; stroke: var(--ink); fill: none; stroke-width: 1.5; }
.fcard__title { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.017em; color: var(--ink); }
.fcard__list { margin-top: auto; }
.fcard__list li {
position: relative;
padding-left: 1.4rem;
padding-block: 0.85rem;
border-bottom: 1px solid var(--line);
font-size: var(--fs-small);
color: var(--ink);
}
.fcard__list li::before { content: '•'; position: absolute; left: 0.2rem; color: var(--ink-3); }
.fphoto { border-radius: var(--r-card); overflow: hidden; min-height: clamp(320px, 26vw, 380px); }
.fphoto .media { height: 100%; border-radius: 0; }
.shift { justify-content: flex-start; min-height: 0; gap: clamp(2.5rem, 5vw, 4.5rem); }
.shift__title { position: relative; max-width: 15ch; margin-inline: auto; text-align: center; text-wrap: balance; }
.shift__table { position: relative; }
.shift__heads,
.shift__row {
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr) 3.25rem minmax(0, 1.15fr);
column-gap: clamp(1rem, 2.6vw, 2.75rem);
align-items: center;
}
.shift__heads { padding-bottom: clamp(1rem, 1.6vw, 1.4rem); }
.shift__head { font-size: var(--fs-body); font-weight: 500; letter-spacing: -0.005em; }
.shift__head--from { grid-column: 2; color: var(--fg-2); }
.shift__head--to { grid-column: 4; color: #FFFFFF; display: flex; align-items: center; gap: 0.6rem; }
.shift__head--to::before {
content: '';
width: 0.5rem; height: 0.5rem;
border-radius: 50%;
background: var(--tri-1-lift);
box-shadow: 0 0 0 4px rgba(78, 123, 255, 0.22);
}
.shift__list { border-bottom: 1px solid var(--hairline); }
.shift__row {
position: relative;
padding-block: clamp(1.1rem, 1.9vw, 1.65rem);
border-top: 1px solid var(--hairline);
}
.shift__row::before {
content: '';
position: absolute;
inset: -1px calc(var(--card-pad) * -1);
z-index: -1;
background: linear-gradient(90deg, transparent 0%, rgba(43, 70, 252, 0.10) 45%, rgba(43, 70, 252, 0.22) 100%);
opacity: 0;
transition: opacity 0.5s var(--ease);
pointer-events: none;
}
.shift__list { position: relative; z-index: 0; }
.shift__num {
font-size: var(--fs-small);
color: var(--fg-2);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
transition: color 0.6s var(--ease), transform 0.6s var(--ease);
}
.shift__from,
.shift__to {
font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
font-weight: 400;
line-height: 1.38;
letter-spacing: -0.008em;
transition: color 0.6s var(--ease), transform 0.7s var(--ease);
}
.shift__from { color: var(--fg-2); }
.shift__to { color: #FFFFFF; }
.shift__line {
background: linear-gradient(var(--tri-1-lift), var(--tri-1-lift)) 0 100% / 0% 1px no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding-bottom: 0.12em;
transition: background-size 0.7s var(--ease) 0.08s;
}
.shift__arrow {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
place-items: center;
width: 3.25rem; height: 3.25rem;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.45);
color: #FFFFFF;
transition: border-color 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.shift__arrow::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--brand);
transform: scale(0);
transition: transform 0.6s var(--ease);
}
.shift__arrow svg {
grid-area: 1 / 1;
transition: transform 0.6s var(--ease), opacity 0.45s var(--ease);
}
.shift__arrow svg + svg { transform: translate3d(-260%, 0, 0); opacity: 0; }
.card { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.card__media { border-radius: var(--r-card); overflow: hidden; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: var(--fs-micro); color: var(--fg-2); }
.card__title { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.017em; line-height: 1.22; }
.card__text { font-size: var(--fs-small); color: var(--fg-2); }
.people {
--team-pad: clamp(1.75rem, 3.2vw, 2.75rem);
--team-gap: clamp(1rem, 1.6vw, 1.5rem);
display: grid;
grid-auto-rows: 1fr;
gap: var(--team-gap);
max-width: 64rem;
margin-inline: auto;
}
.person {
--person-photo: clamp(13.5rem, 22vw, 20rem);
display: grid;
grid-template-columns: min(var(--person-photo), 32%) minmax(0, 1fr);
background: var(--mist);
border-radius: var(--r-card);
overflow: hidden;
}
.person__media.media {
aspect-ratio: auto;
min-height: calc(var(--person-photo) * 1.25);
border-radius: 0;
background: radial-gradient(85% 75% at 46% 34%, #FBFBFD 0%, #E9ECF2 58%, var(--mist) 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0 62%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0 62%, transparent 100%);
}
.person__media > img { position: absolute; inset: 0; object-position: 50% 0; }
.person__body {
align-self: start;
min-width: 0;
padding: var(--team-pad) clamp(1.75rem, 4vw, 3.5rem) var(--team-pad) clamp(1.25rem, 2vw, 1.75rem);
}
.person__name {
font-size: clamp(1.75rem, 2.4vw, 2.125rem);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.022em;
color: var(--deep);
}
.person__role {
margin-top: 0.5rem;
max-width: 34rem;
font-size: var(--fs-body);
line-height: 1.45;
color: var(--brand);
text-wrap: balance;
}
.person__office { display: block; }
.person__bio {
margin-top: clamp(1rem, 1.6vw, 1.375rem);
max-width: 34rem;
font-size: var(--fs-body);
line-height: 1.65;
color: var(--fg-2);
text-wrap: pretty;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.person__body { padding-right: clamp(1.5rem, 3vw, 2rem); }
.person__media.media {
-webkit-mask-image: linear-gradient(90deg, #000 0 80%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0 80%, transparent 100%);
}
.person__bio { font-size: 1rem; line-height: 1.62; }
}
@media (max-width: 767.98px) {
.people { grid-auto-rows: auto; }
.person {
--person-photo: clamp(6rem, 30vw, 9.5rem);
grid-template-columns: var(--person-photo) minmax(0, 1fr);
grid-template-areas: "photo head" "bio bio";
align-items: center;
}
.person__body { display: contents; }
.person__media.media {
grid-area: photo;
align-self: stretch;
-webkit-mask-image: linear-gradient(90deg, #000 0 66%, transparent 100%), linear-gradient(180deg, #000 0 70%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0 66%, transparent 100%), linear-gradient(180deg, #000 0 70%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.person__head { grid-area: head; padding: 1.25rem 1.25rem 1rem 0.75rem; }
.person__name { font-size: clamp(1.375rem, 4.6vw, 1.625rem); line-height: 1.18; }
.person__role { margin-top: 0.375rem; font-size: clamp(0.875rem, 2.2vw, 0.9375rem); line-height: 1.45; text-wrap: pretty; }
.person__bio {
grid-area: bio;
margin: 0;
padding: 0.25rem 1.25rem 1.5rem;
max-width: none;
font-size: 1rem;
line-height: 1.62;
}
}
@media (max-width: 379px) {
.person { --person-photo: 5.5rem; }
.person__name { font-size: 1.25rem; }
.person__head { padding-right: 1rem; padding-left: 0.5rem; }
.person__bio { padding-inline: 1rem; }
}
.card__link::after { content: ''; position: absolute; inset: 0; }
.tag { display: inline-flex; padding: 0.3rem 0.65rem; border: 1px solid var(--hairline); border-radius: 999px; font-size: var(--fs-micro); color: var(--fg-2); }
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
background: var(--paper);
border-top: 1px solid var(--hairline);
border-left: 1px solid var(--hairline);
border-radius: var(--r-card);
overflow: hidden;
}
.tile {
display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
min-height: 210px; padding: clamp(1.25rem, 1.8vw, 1.75rem);
border-right: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.tile__logo { display: grid; place-items: center; flex: 1; }
.tile__logo img { max-height: 150px; max-width: 100%; width: auto; object-fit: contain; }
.tile__name { font-size: var(--fs-micro); color: var(--fg-2); }
.tile__country { font-size: var(--fs-micro); color: var(--fg-3, var(--fg-2)); }
.tile__meta { display: flex; justify-content: space-between; gap: 1rem; }
.areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.area {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 0.85rem;
min-height: clamp(300px, 27vw, 400px);
padding: clamp(1.5rem, 2.4vw, 2.25rem);
border-radius: var(--r-card);
background: var(--white);
transition: color 0.5s var(--ease);
}
.area::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(80% 60% at 100% 100%, rgba(43, 70, 252, 0.45) 0%, transparent 70%),
linear-gradient(160deg, #03040A 0%, #060A1F 45%, #0A1550 85%, #0E1F78 100%);
opacity: 0;
transition: opacity 0.5s var(--ease);
}
.area__num {
margin-bottom: clamp(2rem, 4.5vw, 4rem);
font-size: clamp(3rem, 4.6vw, 4.5rem);
font-weight: 300;
line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
color: var(--brand);
transition: color 0.5s var(--ease), transform 0.6s var(--ease);
}
.area__title { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; letter-spacing: -0.012em; }
.area__text { font-size: var(--fs-small); color: var(--fg-2); transition: color 0.5s var(--ease); }
.area__bar {
position: absolute;
left: 0; right: 0; bottom: 0;
height: var(--tri-h);
overflow: hidden;
transform: translate3d(-100%, 0, 0);
transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.area__bar::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
var(--tri-1-lift) 0 var(--tri-a),
var(--tri-2) var(--tri-a) var(--tri-b),
var(--tri-3) var(--tri-b) 100%);
transform: translate3d(100%, 0, 0);
transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.area, .area::before, .area__num, .area__text { transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
@media (hover: hover) {
.area:hover { color: #FFFFFF; }
.area:hover::before { opacity: 1; }
.area:hover .area__num { color: #FFFFFF; transform: translate3d(0, -4px, 0); }
.area:hover .area__text { color: rgba(255, 255, 255, 0.76); }
.area:hover .area__bar, .area:hover .area__bar::before { transform: none; transition-delay: 0.12s; }
}
@media (hover: none) {
.areas.is-in .area__bar, .areas.is-in .area__bar::before { transform: none; transition-delay: calc(0.4s + var(--i, 0) * 0.12s); }
.area__bar::before { background: var(--tri); }
}
.newstile {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.2vw, 2rem) calc(clamp(1.25rem, 2.2vw, 2rem) + var(--tri-h));
border-radius: var(--r-card);
background:
radial-gradient(75% 65% at var(--gx, 100%) var(--gy, 0%), rgba(43, 70, 252, 0.5) 0%, transparent 70%),
linear-gradient(160deg, #03040A 0%, #060A1F 45%, #0A1550 85%, #0E1F78 100%);
color: #FFFFFF;
}
.newstile { aspect-ratio: 3 / 2; }
.newstile::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: var(--tri-h);
background: var(--tri);
}
.newstile__date {
font-size: clamp(1.5rem, 2.4vw, 2.25rem);
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.02em;
}
.card__body { display: flex; flex-direction: column; gap: 1rem; }
.newsfeature { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.card--featured {
--card-pad: clamp(1.5rem, 3.6vw, 3.5rem);
--inset: 0.625rem;
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
grid-template-rows: 1fr auto;
grid-template-areas: "body day" "go month";
--gap-y: clamp(1.75rem, 3vw, 2.5rem);
gap: var(--gap-y) clamp(2rem, 4vw, 4rem);
min-height: clamp(24rem, 30vw, 28rem);
padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) + var(--tri-h));
border-radius: var(--r-card);
background: linear-gradient(160deg, #03040A 0%, #060A1F 42%, #0A1550 78%, #0E1F78 100%);
color: #FFFFFF;
--fg: #FFFFFF;
--fg-2: rgba(255, 255, 255, 0.74);
--hairline: rgba(255, 255, 255, 0.2);
--paper: #060A1F;
--tri: linear-gradient(90deg,
var(--tri-1-lift) 0 var(--tri-a),
var(--tri-2) var(--tri-a) var(--tri-b),
var(--tri-3) var(--tri-b) 100%);
}
.card--featured-photo { grid-template-areas: "body photo" "go photo"; }
.card--featured::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: var(--tri-h);
background: var(--tri);
}
.card--featured-date::before {
content: '';
position: absolute;
inset: -22% -16% -24% 38%;
z-index: -1;
pointer-events: none;
mix-blend-mode: screen;
background:
radial-gradient(58% 52% at 58% 58%, rgba(43, 70, 252, 0.9) 0%, rgba(43, 70, 252, 0.32) 48%, transparent 78%),
radial-gradient(34% 26% at 62% 70%, rgba(118, 152, 255, 0.5) 0%, transparent 72%),
radial-gradient(46% 40% at 78% 18%, rgba(78, 123, 255, 0.3) 0%, transparent 72%);
opacity: 0.85;
animation: panel-drift-a 34s ease-in-out infinite alternate;
will-change: transform;
}
.card--featured .card__body { grid-area: body; gap: 1.1rem; min-width: 0; }
.card--featured .tag { font-size: 0.8125rem; padding: 0.35rem 0.75rem; border-color: rgba(255, 255, 255, 0.42); color: rgba(255, 255, 255, 0.88); }
.card--featured .card__meta { font-size: 0.8125rem; }
.card--featured .card__title { margin-top: 0.4rem; font-size: clamp(1.875rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -0.024em; text-wrap: balance; }
.card--featured .card__text { font-size: var(--fs-body); line-height: 1.55; max-width: 50ch; }
.newsfeature__date { display: contents; }
.newsfeature__day {
grid-area: day;
align-self: end;
justify-self: end;
margin-bottom: calc(clamp(0.75rem, 1.2vw, 1.125rem) - var(--gap-y));
font-size: clamp(3.5rem, 6.2vw, 5.75rem);
font-weight: 200;
line-height: 0.8;
letter-spacing: -0.05em;
white-space: nowrap;
}
.newsfeature__month {
grid-area: month;
align-self: baseline;
justify-self: end;
font-size: clamp(1.125rem, 1.5vw, 1.375rem);
font-weight: 300;
line-height: 1.2;
letter-spacing: -0.012em;
white-space: nowrap;
}
.card--featured-date .newsfeature__when {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.newsfeature__photo.media {
grid-area: photo;
aspect-ratio: auto;
min-height: 0;
margin: calc(var(--inset) - var(--card-pad)) calc(var(--inset) - var(--card-pad)) calc(var(--inset) - var(--card-pad)) 0;
border-radius: calc(var(--r-card) - var(--inset));
background: rgba(255, 255, 255, 0.06);
}
.card--featured-photo .card__media img { position: absolute; inset: 0; }
.card__go {
grid-area: go;
align-self: baseline;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 1rem;
font-size: var(--fs-small);
color: #FFFFFF;
}
.card__go-label { position: relative; }
.card__go-label::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -0.3em;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--ease);
}
.card--news .card__link, .card--featured .card__link, .nextcard__hl {
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
transition: background-size 0.6s var(--ease), color 0.4s var(--ease);
}
@media (hover: hover) {
.card--news:hover .card__link { color: var(--brand); }
.card--news:hover .card__link, .card--featured:hover .card__link, .nextcard:hover .nextcard__hl { background-size: 100% 1px; }
.card--featured:hover .card__go-label::after { transform: scaleX(1); }
}
.card--featured:has(.card__link:focus-visible) { outline: 2px solid var(--brand); outline-offset: 4px; }
.nextcard:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
@supports selector(:has(a)) {
.card--featured .card__link:focus-visible { outline: none; }
}
.newsgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.4vw, 2rem); }
.slab.nextcard {
display: grid;
grid-template-columns: minmax(0, 1fr);
min-height: 0;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: center;
}
.slab.nextcard { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.nextcard:has(.nextcard__media) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.nextcard:has(.nextcard__media) .nextcard__go { grid-column: 1; grid-row: 2; }
.nextcard__body { display: flex; flex-direction: column; gap: 1.1rem; max-width: 46rem; }
.nextcard .tag { border-color: var(--hairline); color: var(--fg-2); }
.nextcard__title { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; }
.nextcard__lead { font-size: var(--fs-body); color: var(--fg-2); max-width: 52ch; }
.nextcard__go { display: inline-flex; align-items: center; gap: 1rem; font-size: var(--fs-small); color: #FFFFFF; white-space: nowrap; }
.nextcard__media .media { border-radius: var(--r-card); }
.form { display: grid; gap: clamp(1.25rem, 2.2vw, 1.75rem); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.2vw, 1.75rem); }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field__label { font-size: var(--fs-small); color: var(--fg-2); }
.field__opt { color: var(--fg-3, var(--fg-2)); }
.field__error { font-size: var(--fs-small); line-height: 1.4; color: var(--error); }
.field.is-invalid .field__input,
.field.is-invalid .field__textarea { border-color: var(--error); }
.field.is-invalid .field__input:focus,
.field.is-invalid .field__textarea:focus { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.form__trap {
position: absolute;
width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap;
}
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__note { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.form__note a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.form__status { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); max-width: 46ch; }
.form__status:empty { display: none; }
.form__status.is-error { color: var(--error); }
.form__status.is-ok { color: var(--ink); }
.field__input, .field__textarea {
width: 100%; padding: 0.8rem 0.9rem;
background: var(--white); color: var(--ink);
border: 1px solid var(--field-line); border-radius: var(--r-field);
transition: border-color 0.3s var(--ease);
}
.field__input::placeholder, .field__textarea::placeholder { color: var(--ink-3); }
.field__input:focus, .field__textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.field__textarea { resize: vertical; min-height: 8rem; }
.dl { border-top: 1px solid var(--hairline); }
.dl__row { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr; gap: 0.75rem 2rem; padding-block: 0.95rem; border-bottom: 1px solid var(--hairline); }
.dl__key { font-size: var(--fs-small); color: var(--fg-2); }
.dl__val { font-size: var(--fs-small); }
.article__body > .t-body { margin-top: 1.1em; }
.article__h { margin-top: 2.2rem; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 400; color: var(--fg); text-wrap: balance; }
.article__h + .t-body { margin-top: 0.75em; }
.contact__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.ccard {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem 1.25rem;
padding: clamp(1.25rem, 2vw, 1.75rem);
border-radius: var(--r-card);
background: var(--mist);
color: var(--ink);
}
.ccard--link { transition: background-color 0.3s var(--ease); }
.ccard--link:hover { background: #E9EBF2; }
.ccard--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ccard__icon {
flex: none;
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--hairline);
color: var(--deep);
}
.ccard__body { flex: 1 1 12rem; display: grid; gap: 0.3rem; min-width: 0; }
.ccard__label { font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.ccard__value { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--deep); overflow-wrap: anywhere; }
.ccard__note { font-size: var(--fs-small); color: var(--fg-2); }
.gmap {
position: relative;
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--r-card);
border: 1px solid var(--hairline);
background: var(--mist);
}
.gmap > * { grid-area: 1 / 1; }
.gmap iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; }
.gmap.is-blocked iframe { visibility: hidden; }
.no-js .gmap iframe[data-src] { display: none; }
.gmap__alt { position: relative; display: grid; place-items: center; padding: 1.25rem; }
.gmap__streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.gmap__block { fill: #EEF0F5; }
.gmap__park { fill: #DDEBDD; }
.gmap__river { fill: none; stroke: #CFE0F2; stroke-width: 22; stroke-linecap: round; }
.gmap__road { fill: none; stroke: #FFFFFF; stroke-width: 7; stroke-linecap: round; }
.gmap__road--main { stroke-width: 13; }
.gmap__card {
position: relative;
display: grid;
justify-items: center;
gap: 0.5rem;
max-width: 100%;
padding: 1.1rem 1.4rem;
border-radius: var(--r-card);
background: var(--white);
box-shadow: 0 12px 30px -14px rgba(9, 17, 53, 0.35);
text-align: center;
}
.gmap__pin { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--brand); color: #FFFFFF; }
.gmap__where { font-weight: 500; color: var(--deep); overflow-wrap: anywhere; }
.gmap__open { font-size: var(--fs-small); }
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--tri-h);
background: var(--tri);
}
.footer {
position: relative;
--tri: linear-gradient(90deg,
var(--tri-1-lift) 0 var(--tri-a),
var(--tri-2) var(--tri-a) var(--tri-b),
var(--tri-3) var(--tri-b) 100%);
--paper: var(--deep);
--fg: #FFFFFF;
--fg-2: #A9B6D0;
--hairline: rgba(255, 255, 255, 0.16);
--btn-hover-bg: var(--mist);
--btn-hover-fg: var(--ink);
background: var(--paper);
color: var(--fg);
padding-block: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
}
.footer__cta { text-align: center; padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid rgba(255,255,255,.16); }
.footer__cta-title { font-size: var(--fs-display); line-height: 1.1; letter-spacing: -0.022em; max-width: 18ch; margin-inline: auto; }
.footer__cta-text { margin: 1.25rem auto 0; max-width: 52ch; color: #A9B6D0; }
.footer__cta-buttons { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.footer__cols > * { min-width: 0; }
.footer__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.25rem, 2.2vw, 2rem); padding-block: clamp(2.5rem, 5vw, 4rem); }
.footer__brand { grid-column: span 4; display: flex; flex-direction: column; gap: 1rem; }
.footer .wordmark { white-space: normal; flex-wrap: wrap; }
.footer .wordmark span { min-width: 0; }
.footer__col { grid-column: span 2; display: flex; flex-direction: column; gap: 0.7rem; }
.footer__brand + .footer__col { grid-column: 7 / span 2; }
.footer__col-title { font-size: var(--fs-micro); color: #8C9DC2; margin-bottom: 0.3rem; }
summary.footer__col-title { padding-block: 0.7rem; margin-block: -0.4rem; }
.footer__link { font-size: var(--fs-small); color: #A9B6D0; transition: color 0.25s var(--ease); }
a.footer__link { padding-block: 0.6rem; margin-block: -0.35rem; }
.footer__link:hover { color: #FFFFFF; }
.footer__link[lang="uk"] { font-family: 'Inter UK name', var(--font); }
.footer__bar a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
.footer__bar { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.16); font-size: var(--fs-micro); color: #8C9DC2; }
.socials { display: flex; gap: 0.5rem; }
.social { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-btn); transition: background-color .3s var(--ease), color .3s var(--ease); }
.social:hover { background: #FFFFFF; color: var(--ink); }
.preloader {
position: fixed; inset: 0; z-index: 9000;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
background: var(--deep); color: #FFFFFF;
transform: translate3d(0, 0, 0);
transition: transform 850ms cubic-bezier(0.65, 0, 0.35, 1);
}
.preloader.is-done { transform: translate3d(0, -105%, 0); }
.preloader__mark {
width: 4.5rem; height: 4.5rem;
opacity: 0; transform: translate3d(0, 1rem, 0);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.preloader.is-in .preloader__mark { opacity: 1; transform: none; }
.preloader__logo { display: block; width: 100%; height: 100%; border-radius: 50%; background: #FFFFFF; padding: 6%; }
.preloader__bar { width: 10rem; height: 1px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.15); }
.preloader__fill {
height: 100%; background: #FFFFFF;
transform: scaleX(0); transform-origin: left center;
transition: transform 1280ms cubic-bezier(0.65, 0, 0.35, 1);
}
.preloader.is-started .preloader__fill { transform: scaleX(1); }
html.is-loading, html.is-loading body { overflow: hidden; }
@media (max-width: 1023.98px) {
.preloader__mark { width: clamp(6.5rem, 30vw, 8rem); height: clamp(6.5rem, 30vw, 8rem); }
.preloader__bar { width: clamp(8rem, 40vw, 12rem); }
}
[data-reveal] {
opacity: 0;
transform: translateY(44px);
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal='fade'] { transform: none; }
.card--news[data-reveal] { transform: translate3d(0, 24px, 0); transition-duration: 0.6s; }
.card--news[data-reveal].is-in { transform: none; }
[data-reveal='scale'] {
opacity: 1;
transform: none;
position: relative;
overflow: hidden;
contain: paint;
}
[data-reveal='scale']::after {
content: '';
position: absolute;
inset: -1px;
z-index: 3;
background: var(--paper);
transform: translateY(0);
transition: transform 1s var(--ease);
}
[data-reveal='scale'].is-in::after { transform: translateY(-101%); }
[data-reveal='scale'] img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
[data-reveal='scale'].is-in img { transform: scale(1); }
.split__mask {
display: inline-block;
overflow: hidden;
overflow-wrap: break-word;
max-width: 100%;
vertical-align: bottom;
padding-bottom: 0.1em;
margin-bottom: -0.1em;
}
.split__word {
display: inline-block;
overflow-wrap: break-word;
max-width: 100%;
transform: translateY(105%);
transition: transform 0.95s var(--ease);
transition-delay: calc(var(--i, 0) * 0.035s);
}
[data-split].is-in .split__word { transform: translateY(0); }
[data-stagger] > * {
opacity: 0;
transform: translateY(36px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
transition-delay: calc(var(--i, 0) * 0.09s);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
.btn {
position: relative;
overflow: hidden;
transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
border-color 0.35s var(--ease), box-shadow 0.4s var(--ease);
}
.btn__label {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
.btn__label-in {
display: block;
transition: transform 0.45s var(--ease);
}
.btn__label::after {
content: attr(data-label);
position: absolute;
inset: 0;
transform: translateY(105%);
transition: transform 0.45s var(--ease);
}
.btn:hover .btn__label-in { transform: translateY(-105%); }
.btn:hover .btn__label::after { transform: translateY(0); }
.btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55); }
.btn--outline:hover { background: var(--fg); color: var(--paper); border-color: var(--fg); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn:active { box-shadow: none; }
.btn svg { transition: transform 0.45s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.link-arrow:hover .btn__label-in { transform: translateY(-105%); }
.link-arrow:hover .btn__label::after { transform: translateY(0); }
.link-arrow:hover svg { transform: translateX(5px); }
.nav__link::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.fcard { transition: transform 0.5s var(--ease); }
.fcard:hover { transform: translateY(-3px); }
.tile { transition: background-color 0.35s var(--ease), transform 0.4s var(--ease); }
.tile:hover { background: color-mix(in srgb, var(--fg) 4%, var(--paper)); }
@media (hover: hover) {
.shift__row:hover::before { opacity: 1; }
.shift__row:hover .shift__num { color: #FFFFFF; transform: translate3d(4px, 0, 0); }
.shift__row:hover .shift__from { color: rgba(255, 255, 255, 0.58); transform: translate3d(-4px, 0, 0); }
.shift__row:hover .shift__to { transform: translate3d(8px, 0, 0); }
.shift__row:hover .shift__line { background-size: 100% 1px; }
}
@media (hover: hover) {
.shift__row:hover .shift__arrow, a.shift__arrow:hover,
.card--featured:hover .shift__arrow, .nextcard:hover .shift__arrow {
border-color: var(--brand);
transform: scale(1.06);
box-shadow: 0 0 0 6px rgba(43, 70, 252, 0.18), 0 10px 30px -8px rgba(43, 70, 252, 0.7);
}
.shift__row:hover .shift__arrow::before, a.shift__arrow:hover::before,
.card--featured:hover .shift__arrow::before, .nextcard:hover .shift__arrow::before { transform: scale(1); }
.shift__row:hover .shift__arrow svg:first-child, a.shift__arrow:hover svg:first-child,
.card--featured:hover .shift__arrow svg:first-child, .nextcard:hover .shift__arrow svg:first-child { transform: translate3d(260%, 0, 0); opacity: 0; }
.shift__row:hover .shift__arrow svg + svg, a.shift__arrow:hover svg + svg,
.card--featured:hover .shift__arrow svg + svg, .nextcard:hover .shift__arrow svg + svg { transform: none; opacity: 1; }
}
a.shift__arrow:focus-visible, .card--featured:focus-within .shift__arrow, .nextcard:focus-visible .shift__arrow {
border-color: var(--brand);
transform: scale(1.06);
box-shadow: 0 0 0 6px rgba(43, 70, 252, 0.18), 0 10px 30px -8px rgba(43, 70, 252, 0.7);
}
a.shift__arrow:focus-visible::before, .card--featured:focus-within .shift__arrow::before, .nextcard:focus-visible .shift__arrow::before { transform: scale(1); }
a.shift__arrow:focus-visible svg:first-child, .card--featured:focus-within .shift__arrow svg:first-child,
.nextcard:focus-visible .shift__arrow svg:first-child { transform: translate3d(260%, 0, 0); opacity: 0; }
a.shift__arrow:focus-visible svg + svg, .card--featured:focus-within .shift__arrow svg + svg,
.nextcard:focus-visible .shift__arrow svg + svg { transform: none; opacity: 1; }
@media (hover: none), (max-width: 599.98px) {
a.shift__arrow, .card--featured .shift__arrow, .nextcard .shift__arrow { border-color: var(--brand); }
a.shift__arrow::before, .card--featured .shift__arrow::before, .nextcard .shift__arrow::before { transform: scale(1); }
}
@media (hover: none) {
.shift__list.is-in .shift__line { background-size: 100% 1px; transition-delay: calc(0.8s + var(--i, 0) * 0.14s); }
.shift__list.is-in .shift__arrow { border-color: var(--brand); transition-delay: calc(0.65s + var(--i, 0) * 0.14s); }
.shift__list.is-in .shift__arrow::before { transform: scale(1); transition-delay: calc(0.65s + var(--i, 0) * 0.14s); }
}
@view-transition { navigation: auto; }
.header { view-transition-name: site-header; }
::view-transition-old(root) { animation: page-out 0.22s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: page-in-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both; }
::view-transition-group(site-header) { animation-duration: 0.3s; }
@keyframes page-out { to { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes page-in-rise { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
html.is-leaving body { opacity: 0; transition: opacity 0.3s ease; }
body { opacity: 1; transition: opacity 0.45s ease; }
@supports not (view-transition-class: a) {
body { animation: page-in 0.55s ease both; }
}
@keyframes page-in { from { opacity: 0; } }
.no-js [data-reveal],
.no-js [data-stagger] > * { opacity: 1; transform: none; clip-path: none; }
.no-js [data-reveal='scale']::after { display: none; }
.has-smooth-scroll { scroll-behavior: auto; }
.no-js .preloader { display: none; }
.map3d {
--map-depth: 18;
--map-lift: 10;
}
.map3d__head { align-items: end; row-gap: clamp(1rem, 2vw, 1.5rem); }
.map3d__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }
.map3d__chip {
display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.5rem 1.1rem;
border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px;
color: var(--fg); font-size: var(--fs-small);
transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.map3d__chip:hover { border-color: rgba(255, 255, 255, 0.6); }
.map3d__chip[aria-pressed="true"] { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
.map3d__chip:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.map3d__body { position: relative; display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.map3d__stage {
position: relative; aspect-ratio: 1.85 / 1; overflow: hidden; overflow: clip;
margin-inline: calc(-1 * var(--card-pad, 0px));
perspective: 1700px; perspective-origin: 50% 0%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%),
linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%),
linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-composite: intersect;
}
.map3d__plane {
position: absolute; left: 0.5%; right: 2%; top: -14%; bottom: -6%;
transform-origin: 50% 50%;
transform: rotateX(44deg) rotateZ(-4deg);
transition: transform 1.1s var(--ease), opacity 1s var(--ease);
}
.map3d__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.map3d__ground path {
fill: rgba(255, 255, 255, 0.035); stroke: rgba(255, 255, 255, 0.12); stroke-width: 0.8; stroke-linejoin: round;
transform: translateY(calc(var(--map-depth) * 1px));
}
.map3d__land {
--lift: 0;
--sink: var(--map-depth);
cursor: zoom-in;
}
.map3d__land.is-picked { --sink: 0; }
.map3d__land.is-picked, .map3d.has-pick .map3d__ground { cursor: zoom-out; }
.map3d__side, .map3d__top, .map3d__marks, .map3d__ground path { transition: transform 0.9s var(--ease), fill 0.35s var(--ease), opacity 0.35s var(--ease); }
.map3d__side {
fill: hsl(230 58% calc(30% - var(--k, 1) * 1.8%));
stroke: hsl(230 58% calc(30% - var(--k, 1) * 1.8%)); stroke-width: 1.4; stroke-linejoin: round;
transform: translateY(calc((var(--sink, 0) - var(--lift, 0)
+ var(--k, 1) / 10 * (var(--map-depth) - var(--sink, 0) + var(--lift, 0))) * 1px));
}
.map3d__top {
fill: url(#map-light); stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; stroke-linejoin: round;
transform: translateY(calc((var(--sink, 0) - var(--lift, 0)) * 1px));
}
.map3d__marks { transform: translateY(calc((var(--sink, 0) - var(--lift, 0)) * 1px)); }
.map3d__anchor { fill: none; }
.map3d__land.is-hover .map3d__top { fill: url(#map-light-hi); }
.map3d__land.is-picked { --lift: var(--map-lift); }
.map3d__land.is-picked .map3d__top { fill: url(#map-light-hi); stroke: #FFFFFF; stroke-width: 1.4; }
.map3d.has-pick .map3d__land:not(.is-picked):not(.is-hover) .map3d__top { fill: #1A2564; }
.map3d.has-pick .map3d__land:not(.is-picked) .map3d__side { opacity: 0.7; }
.map3d.is-ready:not(.is-in) .map3d__plane { opacity: 0; transform: rotateX(72deg) rotateZ(-10deg) translateY(4%); }
.map3d.is-ready .map3d__land { transition: opacity 0.8s var(--ease) calc(0.25s + var(--i, 0) * 0.14s); }
.map3d.is-ready:not(.is-in) .map3d__land { opacity: 0; }
.map3d.is-ready:not(.is-settled) .map3d__label, .map3d.is-ready:not(.is-settled) .map3d__pin { transition-delay: 0.95s; }
.map3d.is-ready:not(.is-in) .map3d__label, .map3d.is-ready:not(.is-in) .map3d__pin { opacity: 0; }
.map3d__overlay { position: absolute; inset: 0; pointer-events: none; }
.map3d__label {
position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
color: #FFFFFF; text-shadow: 0 1px 8px rgba(5, 7, 22, 0.8);
transition: opacity 0.35s var(--ease);
}
.map3d.has-pick .map3d__label:not(.is-picked) { opacity: 0.45; }
.map3d__pin {
--stem: 18px;
--size: 28px;
position: absolute; left: 0; top: 0;
width: var(--size); height: var(--size);
margin: calc(-1 * var(--stem) - var(--size) / 2) 0 0 calc(var(--size) / -2);
display: grid; place-items: center; border-radius: 50%;
pointer-events: auto; cursor: pointer;
transition: opacity 0.35s var(--ease);
}
.map3d__pin::before, .map3d__pin::after { content: ''; position: absolute; left: 50%; pointer-events: none; }
.map3d__pin::before {
top: 50%; width: 2px; height: var(--stem); margin-left: -1px;
background: linear-gradient(#FFFFFF, rgba(255, 255, 255, 0.2)); border-radius: 2px;
}
.map3d__pin::after {
top: calc(50% + var(--stem) - 2px); width: 10px; height: 4px; margin-left: -5px;
border-radius: 50%; background: rgba(5, 7, 22, 0.55);
}
.map3d__pin-head {
position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%;
background: #FFFFFF; box-shadow: 0 0 0 3px var(--brand), 0 4px 14px rgba(0, 0, 0, 0.45);
transition: transform 0.35s var(--ease);
}
.map3d__pin:hover .map3d__pin-head { box-shadow: 0 0 0 3px #FFFFFF, 0 4px 14px rgba(0, 0, 0, 0.45); background: var(--brand); }
.map3d__pin.is-active .map3d__pin-head { transform: scale(1.3); }
.map3d__pin:focus-visible { outline: 2px solid transparent; }
.map3d__pin:focus-visible .map3d__pin-head { box-shadow: 0 0 0 3px var(--brand), 0 0 0 6px #FFFFFF; }
.map3d.has-pick .map3d__pin:not(.is-picked) { opacity: 0.35; }
.map3d.has-pick .map3d__pin:focus-visible { opacity: 1; }
.map3d__panel { min-height: 9rem; }
@media (max-width: 1279px) {
.map3d__panel { min-height: 0; max-width: 40rem; }
}
@media (min-width: 1300px) {
.map3d__panel {
position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 2;
width: 20rem; min-height: 0; max-height: calc(100% - 2.5rem); overflow: auto;
scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
padding: 1.25rem 1.4rem; border-radius: 16px;
background: #090D26; border: 1px solid var(--hairline);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.map3d__panel .map3d__title { font-size: var(--fs-lead); }
.map3d__panel.is-more {
-webkit-mask-image: linear-gradient(#000 calc(100% - 3rem), transparent);
mask-image: linear-gradient(#000 calc(100% - 3rem), transparent);
}
}
.map3d__view > :first-child { margin-top: 0; }
.map3d__view { animation: map3d-view 0.45s var(--ease) both; }
@keyframes map3d-view { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.map3d__hint, .map3d__text, .map3d__meta { margin-top: 0.75rem; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; }
.map3d__title { margin-top: 0.6rem; font-size: var(--fs-h3); line-height: 1.2; color: var(--fg); }
.map3d__title:focus { outline: none; }
.map3d__title:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }
.map3d__list { margin-top: 1.25rem; border-top: 1px solid var(--hairline); }
.map3d__item {
display: flex; flex-direction: column; gap: 0.15rem; width: 100%; min-height: 44px; padding: 0.7rem 0;
border-bottom: 1px solid var(--hairline); text-align: left; color: var(--fg);
}
.map3d__item:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.map3d__item:focus-visible, .map3d__back:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.map3d__item-meta { font-size: var(--fs-micro); color: var(--fg-2); }
.map3d__back { min-height: 44px; color: var(--fg-2); font-size: var(--fs-small); }
.map3d__back:hover { color: var(--fg); }
.map3d__more { margin-top: 1rem; color: var(--fg); }
.no-js .map3d__chips, .no-js .map3d__overlay, .no-js [data-map-view="all"], .no-js .map3d__back { display: none; }
.no-js .map3d__view[data-map-view^="pt-"][hidden] { display: block; }
.no-js .map3d__view + .map3d__view { margin-top: 1.5rem; }
@media (max-width: 1099px) {
.map3d__label, .map3d.has-pick .map3d__label:not(.is-picked) { opacity: 0; }
.map3d.has-pick .map3d__label.is-picked { opacity: 1; }
}
@media (max-width: 767.98px) {
.map3d__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr)); }
.map3d__chip { justify-content: center; padding-inline: 0.75rem; }
.map3d__stage { aspect-ratio: 1.6 / 1; perspective: 1100px; }
.map3d__plane { left: -1%; right: -1%; top: -6%; bottom: -6%; transform: rotateX(34deg) rotateZ(-3deg); }
.map3d__label { font-size: 0.625rem; letter-spacing: 0.12em; }
.map3d__pin {
--stem: 12px;
--size: 24px;
}
.map3d__pin-head { width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--brand), 0 3px 10px rgba(0, 0, 0, 0.45); }
}
@media (max-width: 379px) {
.map3d__chip { font-size: 0.875rem; gap: 0.4rem; padding-inline: 0.5rem; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1279px) {
.map3d__stage { aspect-ratio: auto; height: calc(100svh - var(--header-h) - 1.5rem); }
}
@media (prefers-reduced-motion: reduce) {
.map3d__side, .map3d__top, .map3d__marks, .map3d__ground path, .map3d__view, .map3d__plane { transition: none; animation: none; }
}
@media (forced-colors: active) {
.map3d__pin:focus-visible .map3d__pin-head { outline: 2px solid Highlight; outline-offset: 2px; }
.map3d__chip[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}
.col-4 { grid-column-end: span 4; }
.col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; }
.col-7 { grid-column-end: span 7; }
.start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; }
.sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 1279px) {
:root {
--gutter: clamp(20px, 4.4vw, 4rem);
--fs-micro: 0.8125rem;
}
.header__cta { min-height: 44px; }
.footer .wordmark { font-size: 1.125rem; gap: 0.75rem; }
.footer .wordmark__mark { width: 48px; height: 48px; }
.section.sec--white + .section.sec--white { padding-top: calc(var(--section-y) * 0.5); }
.pagehead + .section { padding-top: calc(var(--section-y) * 0.5); }
.stat__label { font-size: 0.875rem; max-width: 26ch; }
.media.is-empty .media__note br, .media.is-empty .media__path { display: none; }
.legal .legal__updated { font-size: var(--fs-small); color: var(--ink-2); }
summary.footer__col-title { padding-block: 0.75rem; margin-block: -0.45rem; }
.footer__bar .footer__consent {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-block: 0;
margin-block: 0;
vertical-align: middle;
}
.nowrap { white-space: nowrap; }
.form { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) and (max-width: 1279px) {
.nav__link::before { content: ''; position: absolute; inset: -0.45rem -0.3rem; }
.header__actions .lang__item { position: relative; }
.header__actions .lang__item::before { content: ''; position: absolute; inset: -0.45rem -0.35rem; }
}
@media (min-width: 600px) and (max-width: 1279px) {
:root {
--fs-display: clamp(2.6rem, 5.1vw, 4.5rem);
--fs-h2:      clamp(2.25rem, 4.1vw, 3.5rem);
--fs-h3:      clamp(1.375rem, 2vw, 1.95rem);
--fs-lead:    clamp(1.1875rem, 1.7vw, 1.6rem);
--section-y:  clamp(4.5rem, 7.5vw, 7.5rem);
}
.legal { margin-inline: auto; }
.article__body, .article__body + p { max-width: 38rem; margin-inline: auto; }
.media--21x9:not(.is-empty) { aspect-ratio: 16 / 9; }
.form__row { grid-template-rows: auto auto auto; row-gap: 0; }
.form__row > .field { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0.5rem; }
.form__row .field__label { align-self: end; }
.footer__bar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: 2rem;
row-gap: 0.75rem;
}
.footer__bar > :first-child { grid-column: 1 / -1; }
.footer__bar > a[href="#top"] {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-block: 0;
margin-block: 0;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
:root {
--header-h: max(64px, 5.2vw);
}
.header__inner { column-gap: 1rem; }
.header .wordmark__mark { width: 40px; height: 40px; }
}
@media (min-width: 901px) and (max-width: 1279px) {
.footer__cols > .footer__col--nav { grid-column: 6 / span 2; }
.footer__cols > .footer__col--contact { grid-column: span 3; }
}
@media (max-width: 1099px) {
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
.stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (min-width: 600px) and (max-width: 1099px) {
.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { min-height: 0; }
}
@media (max-width: 63.99875em) {
.nav { display: none; }
.burger { display: grid; }
.header__inner { grid-template-columns: minmax(0, 1fr) auto; }
.header__actions .lang { display: none; }
.menu__lang { display: flex; }
.menu-open .header { background: var(--deep); }
.menu { justify-content: flex-start; }
.menu > * { flex-shrink: 0; }
.menu-open .consent { visibility: hidden; }
.menu__list { margin-top: auto; gap: 0.1rem; }
.menu__link { padding-block: 0.2rem; }
.menu__link:not([aria-current]) { opacity: 0.72; }
.menu__link:hover, .menu__link[aria-current="page"] { opacity: 1; }
.menu__link[aria-current="page"]::after {
content: '';
display: inline-block;
width: 0.2em; height: 0.2em;
margin-left: 0.3em;
vertical-align: 0.3em;
border-radius: 50%;
background: var(--tri-1-lift);
}
.menu .menu__cta {
align-self: flex-start;
margin: -0.5rem 0 auto;
min-height: 52px;
font-size: 1rem;
--btn-hover-bg: #FFFFFF;
--btn-hover-fg: var(--ink);
opacity: 0;
translate: 0 1rem;
transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease),
box-shadow 0.4s var(--ease), opacity 0.6s var(--ease) 0.3s, translate 0.75s var(--ease) 0.3s;
}
.menu-open .menu .menu__cta { opacity: 1; translate: none; }
.menu__foot { margin-top: 0; }
.menu__lang { gap: 0.5rem; }
.menu__lang > span[aria-hidden] { display: none; }
.menu__lang .lang__item {
display: grid; place-items: center;
min-width: 44px; min-height: 44px;
margin: 0; padding: 0 0.6rem;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--r-btn);
font-size: 0.9375rem;
letter-spacing: 0.04em;
opacity: 1;
}
.menu__lang .lang__item.is-active { background: #FFFFFF; color: var(--deep); border-color: #FFFFFF; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
:root {
--header-h: 72px;
}
.header .wordmark { font-size: 1.125rem; gap: 0.75rem; }
.header .wordmark__mark { width: 48px; height: 48px; }
.burger { width: 48px; height: 48px; }
}
@media (max-width: 900.98px) {
.areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.area { min-height: 260px; }
.slab.nextcard, .nextcard:has(.nextcard__media) { grid-template-columns: minmax(0, 1fr); align-items: start; }
.nextcard:has(.nextcard__media) .nextcard__go { grid-column: auto; grid-row: auto; }
.grid { grid-template-columns: minmax(0, 1fr); }
.grid:not(.map3d__head) { row-gap: 2rem; }
.col-4, .col-5, .col-6, .col-7 { grid-column-end: span 1; }
.start-8, .start-9 { grid-column-start: auto; }
.grid .t-body, .grid .t-lead { max-width: 40rem; }
.sticky { position: static; }
.statement__text { text-align: left; text-wrap: pretty; }
.about__title, .about__lead, .about__text, .statement__text { max-width: none; }
.panel { min-height: 0; }
.contact__aside { order: -1; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
.grid--cards > * { grid-column-start: auto; grid-column-end: span 1; }
.grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.grid--cards > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.grid--cards > :first-child:nth-last-child(odd) > .card {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto auto 1fr;
column-gap: 1.5rem;
row-gap: 1rem;
align-content: start;
}
.grid--cards > :first-child:nth-last-child(odd) > .card > * { grid-column: 2; }
.grid--cards > :first-child:nth-last-child(odd) > .card > .card__media { grid-column: 1; grid-row: 1 / -1; align-self: start; }
}
@media (min-width: 600px) and (max-width: 900.98px) {
.contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gmap { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.footer__cols { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); }
.footer__brand { grid-column: 1 / -1; }
.footer__col, .footer__brand + .footer__col { grid-column: auto; }
}
@media (max-width: 599.98px) {
.areas, .newsgrid { grid-template-columns: minmax(0, 1fr); }
.area { min-height: 0; }
.area__num { margin-bottom: 1.25rem; }
:root {
--fs-display: clamp(1.9rem, 0.65rem + 6.4vw, 2.625rem);
--fs-h2:      clamp(1.75rem, 1.2rem + 2.8vw, 2.25rem);
--fs-lead:    1.1875rem;
--section-y:  3.5rem;
--header-h:   64px;
}
.header .wordmark { font-size: 1.0625rem; gap: 0.625rem; white-space: normal; min-width: 0; line-height: 1.15; }
.header .wordmark span { min-width: 0; }
.header .wordmark__mark { width: 44px; height: 44px; }
.header__cta { display: none; }
.menu .menu__cta { align-self: stretch; }
.t-small, .card__text, .fcard__list li, .about__place,
.dl__val, .form__note, .map3d__text, .map3d__hint, .map3d__meta { font-size: 1rem; }
.pagehead { padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: 2rem; }
.about, .bigcards, .fgrid { grid-template-columns: minmax(0, 1fr); }
.about__media .media { position: relative; inset: auto; aspect-ratio: 4 / 3; }
.shift { gap: 2rem; }
.shift__heads, .shift__row { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.85rem; }
.shift__heads { row-gap: 0.35rem; padding-bottom: 1rem; }
.shift__head--from, .shift__head--to { grid-column: 2; }
.shift__row { grid-template-areas: "num from" "arrow to"; row-gap: 0.65rem; align-items: start; padding-block: 1.15rem; }
.shift__num { grid-area: num; padding-top: 0.15rem; }
.shift__from { grid-area: from; }
.shift__row .shift__arrow { grid-area: arrow; width: 2.25rem; height: 2.25rem; }
.shift__row .shift__arrow svg { width: 14px; height: 14px; }
.shift__to { grid-area: to; align-self: center; }
.shift__from, .shift__to { font-size: 1.0625rem; }
.form__row { grid-template-columns: minmax(0, 1fr); }
.dl__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
.marquee__item { min-width: 168px; height: 96px; padding-inline: 0.625rem; }
.marquee__item img { max-height: 80px; }
.panel, .slab {
--card-pad: clamp(1.25rem, 5vw, 2rem);
}
.stats { grid-template-columns: repeat(auto-fit, minmax(max(6.5rem, 40%), 1fr)); column-gap: 1rem; row-gap: 1.75rem; }
.stat, .stat:first-child { padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--hairline); }
.stat:nth-child(-n+2) { padding-top: 0; border-top: 0; }
.fgrid > :nth-child(3) { order: 4; }
.fphoto { min-height: 0; }
.fphoto .media { height: auto; aspect-ratio: 4 / 3; }
.card__media.media--3x2 { aspect-ratio: 16 / 9; }
.card__media.media--3x2.is-empty { aspect-ratio: 21 / 9; }
.card--featured { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "body" "go"; row-gap: 1.75rem; min-height: 0; }
.card--featured-photo { grid-template-areas: "photo" "body" "go"; }
.newsfeature__day, .newsfeature__month { display: none; }
.card--featured-date .newsfeature__when { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
.card--featured-date::before { inset: -40% -40% 35% 10%; }
.card--featured .card__body { gap: 1rem; }
.card--featured .card__title { margin-top: 0.25rem; font-size: 1.75rem; line-height: 1.12; }
.card--featured .card__text { font-size: 1rem; line-height: 1.5; }
.newsfeature__photo.media { aspect-ratio: 16 / 10; margin: calc(var(--inset) - var(--card-pad)) calc(var(--inset) - var(--card-pad)) 0; }
.pillar { padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.media--21x9:not(.is-empty) { aspect-ratio: 3 / 2; }
.tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
border: 1px solid var(--hairline);
background-color: var(--paper);
background-image: linear-gradient(var(--hairline), var(--hairline));
background-clip: padding-box;
}
.tile { min-height: 0; padding: 1rem; gap: 0.875rem; border: 0; background-color: var(--paper); }
.tile__logo { flex: none; aspect-ratio: 2 / 1; }
.tile__logo img { width: 100%; max-width: 10rem; max-height: none; }
.tile__meta { margin-top: auto; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
main > article > .section--tight { padding-bottom: 0; }
.article__body > .t-body:first-child { margin-top: 0; }
.article__back {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px;
margin-block: 0;
padding: 0.75rem 1.25rem;
border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
border-radius: var(--r-btn);
font-size: var(--fs-small);
}
.form__foot .btn { flex: 1 1 100%; font-size: 1rem; }
.footer { padding-block: 3rem 1.5rem; }
.footer__cta { padding-bottom: 2.5rem; }
.footer__cta-buttons { flex-direction: column; align-items: stretch; max-width: 22rem; margin-inline: auto; }
.footer__cta-buttons .btn { font-size: 1rem; }
.footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; padding-block: 2.5rem 2rem; }
.footer__brand { grid-column: 1 / -1; }
.footer__cols > .footer__col--nav { grid-column: 1; }
.footer__cols > .footer__col--lang { grid-column: 2; }
.footer__cols > .footer__col--contact { grid-column: 1 / -1; order: 3; }
.footer__bar { flex-direction: column; align-items: flex-start; gap: 0.75rem; line-height: 1.5; }
.footer__bar > a[href="#top"] {
align-self: stretch;
display: flex; align-items: center; justify-content: center;
min-height: 44px;
margin: 0; padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--r-btn);
color: #FFFFFF;
}
}
@media (max-width: 379px) {
.btn { padding-inline: 1.5rem; }
.slab {
--card-pad: 1rem;
}
.stat__label { font-size: 0.8125rem; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1279px) {
:root {
--header-h: 56px;
--fs-display: clamp(1.75rem, 3.6vw, 2.4rem);
}
.header .wordmark__mark { width: 40px; height: 40px; }
.burger { width: 44px; height: 44px; }
.header__cta { padding-block: 0.5rem; }
.pagehead { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 1.5rem; }
.pagehead--404 { min-height: 0; }
.pagehead__title { max-width: 24ch; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1023.98px) {
.menu { padding-top: calc(var(--header-h) + 1rem); gap: 1.25rem; }
.menu__link { font-size: clamp(1.5rem, 9svh, 2.25rem); }
.menu .menu__cta { margin-top: -0.25rem; min-height: 44px; }
.menu__foot { padding-top: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
[data-reveal], .card--news[data-reveal] { transform: translate3d(0, 10px, 0); transition-duration: 0.7s; }
.card--news[data-reveal].is-in { transform: none; }
[data-stagger] > * { transform: translate3d(0, 8px, 0); transition-duration: 0.6s; }
[data-reveal='scale'], [data-reveal='fade'] { transform: none; }
[data-reveal='scale']::after { transform: none; opacity: 1; transition: opacity 0.9s var(--ease); }
[data-reveal='scale'].is-in::after { transform: none; opacity: 0; }
[data-reveal='scale'] img, [data-reveal='scale'].is-in img { transform: none; transition: none; }
.split__word { transform: none; opacity: 0; transition: opacity 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 0.03s); }
[data-split].is-in .split__word { transform: none; opacity: 1; }
.preloader { transition: opacity 0.6s ease; }
.menu { clip-path: none; opacity: 0; transition: opacity 0.4s var(--ease); }
.menu-open .menu { opacity: 1; }
.menu__link, .menu-open .menu__link { transform: none; }
.menu .menu__cta, .menu-open .menu .menu__cta { translate: none; }
.preloader.is-done { transform: none; opacity: 0; }
.preloader__mark { transform: none; }
.marquee.is-ready .marquee__track { animation: none; }
.marquee { -webkit-mask-image: none; mask-image: none; }
.card--featured-date::before { animation: none; transform: translate3d(1%, 0, 0) scale(1.07); }
::view-transition-old(root) { animation-name: page-fade-out; }
::view-transition-new(root) { animation-name: page-in; }
.btn__label::after { display: none; }
.btn__label-in { transform: none !important; }
}
@keyframes page-fade-out { to { opacity: 0; } }
@media print {
.header, .menu, .preloader, .consent { display: none !important; }
.sheet::before, .footer::before, .ccode {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body { background: #fff; color: #000; opacity: 1 !important; }
[data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}