/* Shared styles for the redesigned pages: type, colour, header, footer, content blocks, motion. */

@font-face {
  font-family: "Onest";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}
@font-face {
  font-family: "Onest";
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}
@font-face {
  font-family: "Onest";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}

:root {
  --bg: #dde4ec;
  --surface: #e7ecf2;
  --rule: #c2cedb;
  --ink: #0f2448;
  --ink-muted: #46597a;
  --ink-faint: #8b9db5;
  --blue: #2c5aa6;
  --blue-soft: #7b97c3;
  --brass: #c09443; /* small accents only: markers, active states, pads */
  --brass-deep: #9c7428;

  --pad-x: clamp(1.1rem, 4.5vw, 4rem);
  --topbar-h: 64px;

  /* Long, soft deceleration — no overshoot. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Onest", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
}

h1,
h2 {
  line-height: 1;
  text-wrap: balance;
}

p {
  line-height: 1.55;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--pad-x);
  z-index: 20;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
}

.skip-link:focus {
  top: 0.6rem;
}

/* ---------- Controls ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0 1.15rem;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: #f4f7fb;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

.button:hover {
  border-color: var(--blue);
  background: var(--blue);
}

.button-quiet {
  background: transparent;
  color: var(--ink);
}

.button-quiet:hover {
  border-color: var(--ink);
  background: rgba(15, 36, 72, 0.06);
}

.arrow-link {
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(44, 90, 166, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 160ms ease;
}

.arrow-link:hover {
  text-decoration-color: currentColor;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.6rem;
}

/* ---------- Top bar ---------- */

/* Three equal tracks keep the menu exactly on the page axis. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  min-height: var(--topbar-h);
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.topbar > .brand {
  justify-self: start;
}

.topbar > .button {
  justify-self: end;
}

.topnav {
  display: flex;
  justify-content: center;
  gap: 1.8rem;
}

.topnav a {
  color: var(--ink-muted);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 160ms ease;
}

.topnav a:hover,
.topnav a[aria-current] {
  color: var(--ink);
}

.topnav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* Directions flyout: a full-width panel under the bar while the pointer or keyboard focus is in
   the group. The group spans the full bar height so the pointer never leaves it on the way down. */
.topnav {
  align-self: stretch;
  align-items: stretch;
}

.topnav > a:not(.nav-cta),
.nav-group > a {
  display: flex;
  align-items: center;
}

.nav-group {
  display: flex;
}

.nav-flyout {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  padding: clamp(1.6rem, 3vw, 2.4rem) var(--pad-x) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  box-shadow: 0 32px 48px -32px rgba(15, 36, 72, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -6px, 0);
  transition:
    opacity 260ms var(--ease-out),
    transform 420ms var(--ease-out),
    visibility 0s linear 260ms;
}

.nav-group:not([data-dismissed]):is(:hover, :focus-within) .nav-flyout {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* A short delay on the way in: a pointer crossing the bar does not flash the panel. */
  transition-delay: 90ms, 90ms, 0s;
}

.flyout-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.flyout-list > li {
  border-top: 1px solid var(--rule);
}

.topnav .flyout-list a {
  display: block;
  text-decoration: none;
}

.topnav .flyout-title {
  padding: 1.1rem 0 0.7rem;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}

.flyout-sub {
  margin: 0;
  padding: 0 0 1.3rem;
  list-style: none;
}

.topnav .flyout-sub a {
  padding: 0.22rem 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.topnav .flyout-list a:hover,
.topnav .flyout-title[aria-current] {
  color: var(--blue);
}

@media (prefers-reduced-motion: reduce) {
  .nav-flyout {
    transform: none;
    transition: none;
  }
}

/* ---------- Inner page layout ---------- */

.page-head {
  display: grid;
  justify-items: center;
  padding: clamp(3rem, 8vw, 6.5rem) var(--pad-x) clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--ink-faint);
}

.crumbs a {
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
}

.page-head h1 {
  max-width: 16ch;
  margin-inline: auto;
  margin-bottom: 1.6rem;
  font-size: clamp(2.5rem, 6vw, 5.4rem);
}

.lead {
  max-width: 46ch;
  margin: 0 auto 2rem;
  color: var(--ink-muted);
  font-size: 1.15rem;
}

.status {
  margin: 0 0 1.4rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-wrap: balance;
}

/* Inline dot so it wraps together with the first word. */
.status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--brass);
  vertical-align: 0.05em;
}

/* A block is one centred column: heading and intro on the axis, content below. */
.block {
  display: grid;
  justify-items: center;
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(4rem, 9vw, 7rem) var(--pad-x);
  border-top: 1px solid var(--rule);
}

.block > * {
  width: 100%;
  max-width: 860px;
}

.block-head {
  text-align: center;
}

.block h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.block-intro {
  max-width: 44ch;
  margin: 1.1rem auto 0;
  color: var(--ink-muted);
  font-size: 1.08rem;
}

.block-note {
  max-width: 54ch;
  margin: 1.6rem auto 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
  text-align: center;
}

/* Editorial rows: title left, text right, separated by rules. */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}

.rows > li {
  display: grid;
  grid-template-columns: minmax(10rem, 0.6fr) minmax(0, 1fr);
  gap: 0.5rem 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}

.rows h3 {
  font-size: 1.2rem;
  line-height: 1.3;
}

.rows p {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-muted);
}

.rows-plain > li {
  grid-template-columns: 1fr;
}

/* Disclosures: native <details>, work without JS. */
.disclosures {
  border-bottom: 1px solid var(--rule);
}

.disclosure {
  border-top: 1px solid var(--rule);
}

.disclosure summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.disclosure-summary {
  grid-column: 1;
  color: var(--ink-muted);
}

.disclosure-icon {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 18px;
  height: 18px;
}

.disclosure-icon::before,
.disclosure-icon::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  transition: transform 400ms var(--ease-out);
}

.disclosure-icon::after {
  transform: rotate(90deg);
}

.disclosure[open] .disclosure-icon::after {
  transform: rotate(0deg);
}

.disclosure-body {
  max-width: 60ch;
  padding: 0 0 1.6rem;
  color: var(--ink-muted);
}

.disclosure-body p {
  margin: 0 0 0.6rem;
}

.disclosure-body strong {
  color: var(--ink);
  font-weight: 500;
}

.toggle-all {
  justify-self: center;
  margin-bottom: 1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.toggle-all[hidden] {
  display: none;
}

/* Media */
.media {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
}

.media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.media-credit {
  max-width: 70ch;
  margin: 0.9rem 0 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.sequence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.sequence li + li::before {
  content: "→";
  margin-right: 0.9rem;
  color: var(--ink-faint);
}

.note {
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--rule);
}

.note {
  text-align: center;
}

.note summary {
  padding: 1.2rem 0 0;
  color: var(--blue);
  font-weight: 500;
  cursor: pointer;
}

.note p {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--ink-muted);
}

/* ---------- Contact and footer ---------- */

.contact {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding: clamp(4rem, 9vw, 7rem) var(--pad-x);
  text-align: center;
  border-top: 1px solid var(--rule);
  background: var(--bg);
}

.contact h2 {
  margin-bottom: 1.2rem;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
}

.contact p {
  max-width: 46ch;
  margin: 0 auto 1.6rem;
  color: var(--ink-muted);
}

/* Contact form: one centred column, labels above fields, text left-aligned inside it. */
.contact-form {
  display: grid;
  gap: 1.3rem;
  width: min(36rem, 100%);
  margin: 0.6rem auto 0;
  text-align: left;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field label {
  font-size: 0.95rem;
  font-weight: 500;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  transition: border-color 160ms ease;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--blue-soft);
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.field [aria-invalid="true"] {
  border-color: #b3261e;
}

.contact .field-hint {
  max-width: none;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

/* Honeypot: out of sight and out of the tab order, still in the form for bots. */
.field-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  color: var(--ink-muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.consent input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ink);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
}

.form-actions .button {
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
}

.form-actions .button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.contact .form-status {
  max-width: none;
  margin: 0;
  font-size: 0.92rem;
}

.form-status[data-state="error"] {
  color: #b3261e;
}

.form-status[data-state="ok"] {
  color: var(--blue);
}

.footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem var(--pad-x) 2rem;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer a {
  text-decoration: none;
}

.footer a:hover {
  color: var(--ink);
}

/* ---------- Motion (classes set by page.js only when motion is allowed) ---------- */

/* Enter: rise and fade on a long soft curve, one after another. */
.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 1100ms var(--ease-out),
    transform 1300ms var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Scroll-linked: --exit and --enter go 0 → 1 and are written by page.js. */
.motion [data-exit] {
  opacity: calc(1 - var(--exit, 0) * 0.9);
  transform: translate3d(0, calc(var(--exit, 0) * -40px), 0) scale(calc(1 - var(--exit, 0) * 0.04));
  transform-origin: 50% 100%;
}

.motion [data-zoom] img {
  transform: scale(calc(1.12 - var(--enter, 0) * 0.12));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Native cross-document transitions between pages, where supported. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 450ms;
  animation-timing-function: var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  @view-transition {
    navigation: none;
  }
}

/* ---------- Responsive ---------- */

.menu-toggle {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Without JS the menu stays visible as a second row. */
@media (max-width: 900px) {
  html:not(.js) {
    --topbar-h: 104px;
  }

  html:not(.js) .topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1rem;
    padding-top: 0.7rem;
  }

  html:not(.js) .topnav {
    order: 3;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 0.7rem 0 0.8rem;
    overflow-x: auto;
    gap: 1.4rem;
    white-space: nowrap;
  }

  /* With JS: one slim row, the menu opens as a panel under it. */
  .js {
    --topbar-h: 56px;
  }

  .js .topbar {
    display: flex;
    align-items: center;
  }

  .js .topbar > .brand {
    min-height: var(--topbar-h);
  }

  .js .topnav,
  .js .topbar > .button {
    display: none;
  }

  .js .menu-toggle {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }

  .menu-icon,
  .menu-icon::before {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 400ms var(--ease-out);
  }

  .menu-icon {
    top: 18px;
  }

  .menu-icon::before {
    content: "";
    top: 7px;
    left: 0;
  }

  .topbar[data-open] .menu-icon {
    transform: translateY(3.5px) rotate(45deg);
  }

  .topbar[data-open] .menu-icon::before {
    transform: translateY(-7px) rotate(-90deg);
  }

  /* The open menu is a panel over the page, so nothing below jumps. */
  .js .topbar[data-open] .topnav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.2rem var(--pad-x) 1.4rem;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    box-shadow: 0 24px 40px -24px rgba(15, 36, 72, 0.25);
    max-height: calc(100dvh - var(--topbar-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: menu-in 500ms var(--ease-out) both;
  }

  .js .topbar[data-open] .topnav a:not(.button) {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-size: 1.2rem;
    text-decoration: none;
  }

  .nav-flyout {
    display: none;
  }

  /* In the phone menu the directions are always listed under their label. */
  .js .topbar[data-open] .nav-group {
    display: block;
  }

  .js .topbar[data-open] .nav-group > a {
    display: block;
  }

  .js .topbar[data-open] .nav-flyout {
    position: static;
    display: block;
    padding: 0.3rem 0 0.6rem 1rem;
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .js .topbar[data-open] .flyout-list {
    display: block;
  }

  .js .topbar[data-open] .flyout-list > li {
    border-top: 0;
  }

  .js .topbar[data-open] .topnav .flyout-title {
    padding: 0.55rem 0;
    border-bottom: 0;
    color: var(--ink-muted);
    font-size: 1rem;
    font-weight: 400;
  }

  .js .topbar[data-open] .topnav .flyout-title[aria-current] {
    color: var(--blue);
  }

  .js .topbar[data-open] .flyout-sub {
    display: none;
  }

  .js .topbar[data-open] .nav-cta {
    display: flex;
    justify-content: center;
    min-height: 3rem;
    margin-top: 1.2rem;
    color: #f4f7fb;
    font-size: 1rem;
  }
}

.nav-cta {
  display: none;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .js .topbar[data-open] .topnav,
  .js .topbar[data-open] > .button {
    animation: none;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .rows > li {
    grid-template-columns: 1fr;
  }

  .footer {
    flex-direction: column;
  }
}