/* A2M Production — v1
   Layout rebuilt from the supplied desktop references.
   The background video stays the hero; UI is deliberately minimal. */

:root {
  --sidebar-alpha: .64;
  --panel-alpha: .48;
  --cooperation-alpha: .50;
  --contact-alpha: .52;

  --sidebar-left: clamp(52px, 7.65vw, 150px);
  --sidebar-width: clamp(178px, 12.55vw, 244px);

  --white: rgba(255,255,255,.94);
  --soft-white: rgba(255,255,255,.72);
  --hairline: rgba(255,255,255,.12);
  --red: #b44646;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #050608;
}

body {
  overflow: hidden;
  color: var(--white);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-weight: 300;
}

button,
input,
textarea {
  font: inherit;
}

.site {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #050608 url("../assets/images/background-poster.jpg") center center / cover no-repeat;
}

.background-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: transparent;
}

.background-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.08), transparent 20%, transparent 82%, rgba(0,0,0,.06)),
    linear-gradient(180deg, rgba(0,0,0,.07), transparent 30%, rgba(0,0,0,.08));
}

.sidebar {
  position: absolute;
  z-index: 20;
  top: 0;
  bottom: 0;
  left: var(--sidebar-left);
  width: var(--sidebar-width);
  background: rgba(0,0,0,var(--sidebar-alpha));
  border-left: 1px solid rgba(255,255,255,.012);
  border-right: 1px solid rgba(255,255,255,.018);
  backdrop-filter: blur(.35px);
  -webkit-backdrop-filter: blur(.35px);
}

.brand {
  position: absolute;
  top: 7.3vh;
  left: 50%;
  width: clamp(45px, 3.15vw, 62px);
  transform: translateX(-50%);
  opacity: .98;
  transition: opacity .18s ease, transform .18s ease;
}

.brand:hover,
.brand:focus-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1.045);
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.nav-icons {
  position: absolute;
  top: 24.1vh;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.nav-button {
  /* Desktop calibration from the supplied original screenshots:
     64 px wrapper -> SVG circle is ~51 px, matching the old Muse icons. */
  --edge-inset: 6.5px;

  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  opacity: .82;
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
  transform-origin: 50% 50%;
  transition:
    transform .20s cubic-bezier(.2,.7,.25,1),
    opacity .18s ease,
    filter .18s ease;
}

/* Light travels ON the circular edge, rather than orbiting outside it.
   The pseudo-element is masked into a thin ring aligned with the SVG circle. */
.nav-button::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: var(--edge-inset);
  border-radius: 50%;
  padding: 1.6px;
  pointer-events: none;
  opacity: 0;

  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,0) 0deg,
      rgba(255,255,255,0) 250deg,
      rgba(255,255,255,.08) 278deg,
      rgba(255,255,255,.55) 302deg,
      rgba(255,255,255,1) 320deg,
      rgba(255,255,255,.62) 334deg,
      rgba(255,255,255,.12) 350deg,
      rgba(255,255,255,0) 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(255,255,255,.32));
}

.nav-button img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  transition: filter .18s ease;
}

/* Selected section has only a restrained static glow. */
.nav-button.is-active {
  opacity: 1;
  transform: scale(1.00);
}

.nav-button.is-active img {
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.72))
    drop-shadow(0 0 4px rgba(255,255,255,.13));
}

/* EVERY icon, including the currently active Contact icon,
   enlarges by exactly the same amount on hover. */
.nav-button:hover,
.nav-button:focus-visible,
.nav-button.is-active:hover,
.nav-button.is-active:focus-visible {
  opacity: 1;
  transform: scale(1.11);
  outline: none;
}

.nav-button:hover::before,
.nav-button:focus-visible::before,
.nav-button.is-active:hover::before,
.nav-button.is-active:focus-visible::before {
  opacity: 1;
  animation: a2m-edge-travel 1.15s linear infinite;
}

.nav-button:hover img,
.nav-button:focus-visible img,
.nav-button.is-active:hover img,
.nav-button.is-active:focus-visible img {
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.96))
    drop-shadow(0 0 4px rgba(255,255,255,.22))
    drop-shadow(0 0 8px rgba(255,255,255,.09));
}

@keyframes a2m-edge-travel {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.social-link.is-placeholder {
  cursor: default;
}

.copyright {
  position: absolute;
  left: 50%;
  bottom: 20.5vh;
  width: 90%;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(7px, .53vw, 10px);
  line-height: 1.26;
  letter-spacing: .02em;
  color: rgba(255,255,255,.88);
  text-transform: uppercase;
}

.cookie-link {
  display: inline-block;
  margin-top: 5px;
  color: rgba(255,255,255,.48);
  text-decoration: none;
  font-size: .9em;
  letter-spacing: .12em;
  transition: color .15s ease;
}

.cookie-link:hover,
.cookie-link:focus-visible {
  color: white;
  outline: none;
}

.content-stage {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(var(--sidebar-left) + var(--sidebar-width));
  overflow: hidden;
}

.panel {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
  transition:
    opacity .24s ease,
    transform .28s ease,
    visibility 0s linear .28s;
  overflow: hidden;
}

.panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}


/* Connected horizontal UI bars.
   They begin exactly at the right edge of the vertical sidebar,
   so there is no visible gap between panels. */
.panel-contact::before,
.panel-about::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,var(--sidebar-alpha));
  pointer-events: none;
}

.panel-contact::before {
  width: min(70vw, 820px);
  height: clamp(330px, 36vh, 365px);
}

.panel-about::before {
  width: min(86vw, 1120px);
  height: clamp(255px, 30vh, 300px);
}

/* Contact */
.panel-contact {
  justify-items: start;
}

.contact-box {
  position: relative;
  z-index: 2;
  width: min(50.5vw, 505px);
  margin-left: clamp(70px, 13.5vw, 260px);
  margin-top: 12px;
  padding: 12px 10px 10px;
  background: transparent;
}

.field {
  margin: 0 0 8px;
}

.field label {
  display: block;
  margin: 0 0 2px;
  color: rgba(255,255,255,.87);
  font-size: clamp(10px, .78vw, 14px);
  line-height: 1.05;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 0;
  outline: 0;
  background: rgba(255,255,255,.91);
  color: #111;
  font-size: clamp(10px, .76vw, 14px);
  font-style: italic;
  padding: 5px 7px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.field input {
  height: 25px;
}

.field textarea {
  min-height: 65px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  background: #fff;
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(30,30,30,.36);
}

.hp-field {
  position: fixed !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.turnstile-mount {
  min-height: 0;
  margin: 2px 0 6px;
  transform-origin: left top;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.send-button {
  width: 104px;
  height: 26px;
  border: 0;
  background: rgba(180,70,70,.78);
  color: rgba(255,255,255,.82);
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: background .15s ease, color .15s ease;
}

.send-button:hover,
.send-button:focus-visible {
  background: rgba(190,72,72,.98);
  color: #fff;
  outline: none;
}

.send-button:disabled {
  opacity: .5;
  cursor: wait;
}

.form-status {
  min-height: 1.1em;
  color: rgba(255,255,255,.75);
  font-size: 10px;
  line-height: 1.2;
}

/* Cooperation */
.panel-cooperation {
  justify-items: stretch;
}

.cooperation-strip {
  width: 100%;
  min-height: clamp(145px, 21vh, 205px);
  display: grid;
  align-items: center;
  padding: 22px clamp(35px, 4.5vw, 86px);
  background: rgba(0,0,0,var(--sidebar-alpha));
  box-shadow:
    inset 0 1px rgba(255,255,255,.01),
    inset 0 -1px rgba(255,255,255,.01);
}

.client-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  align-items: center;
  gap: clamp(10px, 1.2vw, 24px);
}

.client-grid img {
  display: block;
  width: 100%;
  max-height: 62px;
  object-fit: contain;
  opacity: .98;
}

/* About */
.panel-about {
  justify-items: center;
}

.about-copy {
  position: relative;
  z-index: 2;
  width: min(50vw, 610px);
  max-width: calc(100% - 120px);
  margin-left: -2vw;
  margin-top: 0;
  padding: 18px 22px;
  background: transparent;
  text-align: center;
  color: rgba(255,255,255,.80);
  font-size: clamp(13px, 1vw, 18px);
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  overflow-wrap: break-word;
  word-break: normal;
}

.about-copy p {
  margin: 0 0 .95em;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

.noscript {
  position: fixed;
  z-index: 100;
  inset: auto 20px 20px;
  padding: 10px 14px;
  background: #111;
  color: #fff;
}

/* Tablet */
@media (max-width: 1000px) {
  .nav-button {
    --edge-inset: 5.7px;
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .nav-icons {
    gap: 30px;
  }

  :root {
    --sidebar-left: clamp(28px, 5vw, 60px);
    --sidebar-width: clamp(138px, 18vw, 180px);
  }

  .contact-box {
    width: min(62vw, 510px);
    margin-left: clamp(30px, 8vw, 80px);
  }

  .about-copy {
    width: min(66vw, 575px);
    max-width: calc(100% - 60px);
    margin-left: 0;
  }

  .client-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
    row-gap: 18px;
  }

  .cooperation-strip {
    width: 100%;
    min-height: 255px;
  }
}

/* Phone */
@media (max-width: 640px) {
  :root {
    --sidebar-left: 10px;
    --sidebar-width: 78px;
  }

  .sidebar {
    background: rgba(0,0,0,var(--sidebar-alpha));
  }

  .brand {
    top: 5.5vh;
    width: 50px;
  }

  .nav-icons {
    top: 19vh;
    gap: clamp(18px, 4.7vh, 34px);
  }

  .nav-button {
    --edge-inset: 4.45px;
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .copyright {
    bottom: max(5.5vh, env(safe-area-inset-bottom));
    font-size: 6px;
    line-height: 1.23;
  }

  .cookie-link {
    margin-top: 4px;
    font-size: 5.8px;
  }

  .content-stage {
    left: calc(var(--sidebar-left) + var(--sidebar-width));
  }

  .panel {
    overflow: hidden;
  }

  .panel-contact::before,
  .panel-about::before {
    width: 100%;
    max-width: none;
  }

  .panel-contact::before {
    height: min(82vh, 560px);
  }

  .panel-about::before {
    height: min(82vh, 540px);
  }

  .contact-box {
    width: calc(100% - 18px);
    margin: 10px 9px 0;
    padding: 12px 9px 10px;
  }

  .field {
    margin-bottom: 7px;
  }

  .field label {
    font-size: 10px;
  }

  .field input,
  .field textarea {
    font-size: 11px;
  }

  .field input {
    height: 30px;
  }

  .field textarea {
    min-height: 86px;
    max-height: 28vh;
  }

  .send-button {
    width: 92px;
    height: 29px;
  }

  .form-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .turnstile-mount {
    transform: scale(.78);
    width: 250px;
    margin-bottom: -10px;
  }

  .cooperation-strip {
    min-height: min(72vh, 560px);
    width: 100%;
    padding: 22px 13px;
    overflow: auto;
    scrollbar-width: thin;
  }

  .client-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    row-gap: 24px;
    column-gap: 10px;
  }

  .client-grid img {
    max-height: 55px;
  }

  .about-copy {
    width: calc(100% - 24px);
    max-width: none;
    max-height: 74vh;
    overflow: auto;
    margin: 0 12px;
    padding: 18px 12px;
    font-size: clamp(11px, 3.2vw, 14px);
    line-height: 1.24;
  }
}

@media (max-height: 640px) and (orientation: landscape) {
  .brand {
    top: 4vh;
    width: 42px;
  }

  .nav-icons {
    top: 18vh;
    gap: 3vh;
  }

  .nav-button {
    width: 35px;
  }

  .copyright {
    bottom: 2.5vh;
    font-size: 5.7px;
  }

  .contact-box {
    transform: scale(.88);
    transform-origin: center left;
  }

  .about-copy {
    max-height: 80vh;
    overflow: auto;
  }

  .cooperation-strip {
    min-height: 76vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* v1.6 — cursor-driven icon light + pixel dispersion */
.fx-particles {
  position: fixed;
  z-index: 80;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.nav-button::before {
  display: none !important;
}

.nav-button:hover,
.nav-button:focus-visible,
.nav-button.is-active:hover,
.nav-button.is-active:focus-visible {
  transform: scale(1.11);
  filter: none;
}

.nav-button.fx-hover img {
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.98))
    drop-shadow(0 0 5px rgba(255,255,255,.28))
    drop-shadow(0 0 11px rgba(255,255,255,.10));
}

.security-preview {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: 2px 0 7px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.70);
  font-size: 9px;
  line-height: 1.12;
}

.security-preview strong {
  display: block;
  color: rgba(255,255,255,.88);
  font-size: 9px;
  letter-spacing: .08em;
}

.security-preview small {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,.45);
  font-size: 8px;
}

.security-shield {
  font-size: 15px;
  color: rgba(255,255,255,.88);
  text-shadow: 0 0 7px rgba(255,255,255,.18);
}


/* v1.7 — hover: zoom + soft blur + subtle mist */
.nav-button {
  transform-origin: 50% 50%;
  will-change: transform, filter;
}

.nav-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%) scale(.72);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  filter: blur(11px);
  background:
    radial-gradient(circle at 38% 42%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 22%,
      rgba(255,255,255,.035) 48%,
      rgba(255,255,255,0) 72%);
  transition:
    opacity .26s ease,
    transform .32s cubic-bezier(.18,.7,.22,1),
    filter .32s ease;
}

.nav-button:hover,
.nav-button:focus-visible,
.nav-button.is-active:hover,
.nav-button.is-active:focus-visible {
  transform: scale(1.13);
}

.nav-button:hover::after,
.nav-button:focus-visible::after,
.nav-button.is-active:hover::after,
.nav-button.is-active:focus-visible::after {
  opacity: .72;
  transform: translate(-50%, -50%) scale(1.08);
  filter: blur(14px);
  animation: a2m-mist-breathe 2.8s ease-in-out infinite alternate;
}

.nav-button:hover img,
.nav-button:focus-visible img,
.nav-button.is-active:hover img,
.nav-button.is-active:focus-visible img {
  filter:
    blur(.28px)
    drop-shadow(0 0 1px rgba(255,255,255,.98))
    drop-shadow(0 0 5px rgba(255,255,255,.34))
    drop-shadow(0 0 11px rgba(255,255,255,.13));
}

@keyframes a2m-mist-breathe {
  0% {
    opacity: .48;
    transform: translate(-50%, -50%) scale(.96);
  }
  50% {
    opacity: .72;
    transform: translate(-48.5%, -51%) scale(1.08);
  }
  100% {
    opacity: .56;
    transform: translate(-51%, -49%) scale(1.02);
  }
}


/* =========================================================
   A2M v1.8 — FINAL OVERRIDES
   ========================================================= */

/* ---- LEFT NAV: same white level for every icon at rest ---- */
.nav-button,
.nav-button.is-active {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter: none !important;
}

.nav-button img,
.nav-button.is-active img {
  opacity: .72 !important;
  filter: none !important;
}

/* No active-state whitening. Only hover/focus becomes brighter. */
.nav-button:hover,
.nav-button:focus-visible,
.nav-button.is-active:hover,
.nav-button.is-active:focus-visible {
  transform: scale(1.13) !important;
}

.nav-button:hover img,
.nav-button:focus-visible img,
.nav-button.is-active:hover img,
.nav-button.is-active:focus-visible img,
.nav-button.fx-hover img {
  opacity: 1 !important;
  filter:
    blur(.22px)
    drop-shadow(0 0 1px rgba(255,255,255,.98))
    drop-shadow(0 0 5px rgba(255,255,255,.28))
    drop-shadow(0 0 11px rgba(255,255,255,.10)) !important;
}

/* keep the soft mist requested earlier */
.nav-button:hover::after,
.nav-button:focus-visible::after,
.nav-button.is-active:hover::after,
.nav-button.is-active:focus-visible::after {
  opacity: .58 !important;
}

/* particle canvas removed; edge-light canvas uses this class instead */
.fx-particles {
  display: none !important;
}

.fx-edge-light {
  position: fixed;
  z-index: 80;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* ---- ABOUT ---- */
.panel-about {
  justify-items: center;
}

.panel-about::before {
  width: 82%;
  height: clamp(235px, 27vh, 285px);
  background: rgba(0,0,0,var(--sidebar-alpha));
}

.about-copy {
  width: min(760px, 56vw);
  max-width: calc(82% - 90px);
  margin-left: -7.5vw;
  margin-top: -1.5vh;
  padding: 22px 30px;
  color: rgba(255,255,255,.92);
  font-size: clamp(15px, 1.08vw, 20px);
  line-height: 1.22;
  font-weight: 300;
  letter-spacing: .002em;
  text-shadow: 0 1px 3px rgba(0,0,0,.44);
}

.about-copy p {
  margin: 0 0 1.05em;
}

/* ---- COOPERATION ---- */
.panel-cooperation {
  justify-items: start;
}

.cooperation-strip {
  width: 86%;
  min-height: clamp(160px, 20vh, 195px);
  padding: 24px clamp(28px, 3.8vw, 72px);
  background: rgba(0,0,0,var(--sidebar-alpha));
  overflow: hidden;
}

.client-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(10px, 1.0vw, 20px);
}

.client-grid img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 76px;
  object-fit: contain;
  opacity: 1;
}

/* ---- CONTACT + HUMAN VERIFICATION ---- */
.panel-contact::before {
  width: min(72vw, 870px);
  height: clamp(405px, 45vh, 455px);
}

.contact-box {
  width: min(50.5vw, 505px);
  margin-left: clamp(70px, 13.5vw, 260px);
  margin-top: 0;
  padding: 14px 10px 12px;
}

.human-check {
  margin: 3px 0 9px;
}

.human-check-label {
  margin-bottom: 4px;
  color: rgba(255,255,255,.64);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .10em;
}

.turnstile-mount {
  min-height: 65px;
  margin: 0;
  transform-origin: left top;
}

.security-preview {
  width: 300px;
  min-height: 65px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8,9,11,.90);
  color: rgba(255,255,255,.78);
}

.security-preview::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid rgba(255,255,255,.45);
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

.security-preview strong {
  display: block;
  color: rgba(255,255,255,.90);
  font-size: 10px;
  letter-spacing: .04em;
}

.security-preview small {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.50);
  font-size: 8.5px;
  line-height: 1.25;
}

.send-button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

/* tablet */
@media (max-width: 1000px) {
  .panel-about::before {
    width: 100%;
  }

  .about-copy {
    width: min(680px, calc(100% - 50px));
    max-width: none;
    margin-left: 0;
    font-size: clamp(14px, 1.8vw, 18px);
  }

  .cooperation-strip {
    width: 100%;
    min-height: 300px;
  }

  .client-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 25px;
  }

  .client-grid img {
    max-height: 70px;
  }
}

/* phone */
@media (max-width: 640px) {
  .panel-about::before {
    width: 100%;
    height: min(82vh, 540px);
  }

  .about-copy {
    width: calc(100% - 24px);
    max-width: none;
    margin: 0 12px;
    padding: 18px 12px;
    font-size: clamp(11px, 3.25vw, 14px);
    line-height: 1.25;
  }

  .cooperation-strip {
    width: 100%;
    min-height: min(78vh, 610px);
    padding: 24px 13px;
  }

  .client-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    row-gap: 22px;
  }

  .client-grid img {
    max-height: 58px;
  }

  .panel-contact::before {
    width: 100%;
    height: min(92vh, 690px);
  }

  .turnstile-mount {
    transform: scale(.78);
    width: 300px;
    margin-bottom: -13px;
  }

  .security-preview {
    width: 300px;
  }
}


/* =========================================================
   A2M v1.9 — SIDEBAR / RESPONSIVE / MOBILE TOUCH
   ========================================================= */

:root {
  /* Zmierzone względem przesłanych screenów starej strony:
     bar zaczyna się mniej więcej 4.7% od lewej i ma ok. 15.3% szerokości. */
  --sidebar-left: clamp(72px, 4.7vw, 100px);
  --sidebar-width: clamp(236px, 15.3vw, 314px);

  /* Rozmiar ikon reaguje również na wysokość viewportu.
     Dzięki temu przy zoomie przeglądarki nie wchodzą na copyright. */
  --desktop-icon-box: clamp(48px, 5.85vh, 64px);
  --desktop-nav-gap: clamp(18px, 3.30vh, 36px);
  --desktop-footer-space: clamp(52px, 20.5vh, 224px);
}

/* Pionowa belka: grid zamiast niezależnych absolutnych pozycji.
   To rezerwuje osobne miejsce dla logo, menu i copyrightu. */
.sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: start;
  justify-items: center;
  padding-top: clamp(46px, 7.3vh, 80px);
  padding-bottom: var(--desktop-footer-space);
}

/* Zachowujemy pozycję logo jak w starej stronie, ale w bezpiecznym gridzie. */
.brand {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: clamp(48px, 3.15vw, 64px);
  justify-self: center;
}

.brand:hover,
.brand:focus-visible {
  transform: scale(1.045);
}

/* Menu zajmuje środkowy, elastyczny pas — nie może wejść na copyright. */
.nav-icons {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--desktop-nav-gap);
  min-height: 0;
}

/* Zachowujemy optyczny rozmiar ikon z oryginalnych screenów przy normalnej wysokości,
   ale pozwalamy im nieco maleć, gdy użytkownik mocno powiększy stronę. */
.nav-button {
  width: var(--desktop-icon-box) !important;
  height: var(--desktop-icon-box) !important;
  flex: 0 0 var(--desktop-icon-box) !important;
}

/* Copyright ma teraz własny wiersz i nie może wejść między ikony. */
.copyright {
  position: static;
  left: auto;
  bottom: auto;
  width: 90%;
  transform: none;
  justify-self: center;
  align-self: end;
  margin: 0;
}

/* Cooperation: optyczna skala per logo, edytowana w js/config.js. */
.client-grid img {
  transform: scale(var(--client-scale, 1));
  transform-origin: center;
}

/* Przy niższych viewportach (np. browser zoom 125–175%) jeszcze ciaśniejszy układ. */
@media (max-height: 820px) and (min-width: 641px) {
  :root {
    --desktop-icon-box: clamp(44px, 6.2vh, 52px);
    --desktop-nav-gap: clamp(13px, 2.4vh, 20px);
    --desktop-footer-space: clamp(28px, 8vh, 64px);
  }

  .sidebar {
    padding-top: clamp(26px, 5vh, 40px);
  }

  .brand {
    width: clamp(44px, 6vh, 52px);
  }

  .copyright {
    font-size: clamp(6px, .70vw, 8px);
  }
}

/* Telefon — zachowujemy pionową koncepcję, ale nie miniaturyzujemy przycisków.
   58×58 px daje wygodny obszar dotyku palcem. */
@media (max-width: 640px) {
  :root {
    --sidebar-left: 6px;
    --sidebar-width: 92px;
  }

  .sidebar {
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .brand {
    width: 50px;
  }

  .nav-icons {
    gap: clamp(10px, 2.2vh, 18px);
  }

  .nav-button {
    --edge-inset: 5.9px;
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
  }

  .copyright {
    width: 88px;
    font-size: 5.6px;
    line-height: 1.20;
  }

  .cookie-link {
    font-size: 5.4px;
  }

  .content-stage {
    left: calc(var(--sidebar-left) + var(--sidebar-width));
  }
}

/* Bardzo wąskie telefony. Nadal nie schodzimy poniżej 54 px touch-target. */
@media (max-width: 360px) {
  :root {
    --sidebar-left: 4px;
    --sidebar-width: 84px;
  }

  .brand {
    width: 46px;
  }

  .nav-button {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
  }

  .nav-icons {
    gap: 9px;
  }

  .copyright {
    width: 80px;
    font-size: 5.2px;
  }
}

/* Niski telefon w poziomie: menu dalej pozostaje klikalne,
   ale copyright jest minimalny i trzyma się własnego miejsca. */
@media (max-height: 520px) and (max-width: 900px) {
  .sidebar {
    padding-top: 10px;
    padding-bottom: 8px;
  }

  .brand {
    width: 38px;
  }

  .nav-icons {
    gap: 4px;
  }

  .nav-button {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .copyright {
    font-size: 4.5px;
    line-height: 1.08;
  }

  .cookie-link {
    display: none;
  }
}


/* =========================================================
   A2M v1.10 — SEQUENTIAL CLIENT LOGO REVEAL
   First opening of Cooperation: each logo lights up once,
   left-to-right / DOM order, then returns to its normal state.
   No hover interaction is added to client logos.
   ========================================================= */

.client-grid img {
  transition:
    filter .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

/* Triggered only by JS on the first opening of Cooperation. */
.client-grid.client-sequence img {
  animation-name: a2m-client-glow-pass;
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  animation-fill-mode: both;
}

/* One logo finishes before the next starts. */
.client-grid.client-sequence img:nth-child(1) { animation-delay: 0ms; }
.client-grid.client-sequence img:nth-child(2) { animation-delay: 650ms; }
.client-grid.client-sequence img:nth-child(3) { animation-delay: 1300ms; }
.client-grid.client-sequence img:nth-child(4) { animation-delay: 1950ms; }
.client-grid.client-sequence img:nth-child(5) { animation-delay: 2600ms; }
.client-grid.client-sequence img:nth-child(6) { animation-delay: 3250ms; }
.client-grid.client-sequence img:nth-child(7) { animation-delay: 3900ms; }
.client-grid.client-sequence img:nth-child(8) { animation-delay: 4550ms; }
.client-grid.client-sequence img:nth-child(9) { animation-delay: 5200ms; }
.client-grid.client-sequence img:nth-child(10) { animation-delay: 5850ms; }
.client-grid.client-sequence img:nth-child(11) { animation-delay: 6500ms; }
.client-grid.client-sequence img:nth-child(12) { animation-delay: 7150ms; }

@keyframes a2m-client-glow-pass {
  0% {
    opacity: .94;
    filter: none;
  }

  22% {
    opacity: 1;
    filter:
      brightness(1.20)
      drop-shadow(0 0 2px rgba(255,255,255,.55));
  }

  48% {
    opacity: 1;
    filter:
      brightness(1.78)
      contrast(1.04)
      drop-shadow(0 0 4px rgba(255,255,255,.95))
      drop-shadow(0 0 10px rgba(255,255,255,.34));
  }

  72% {
    opacity: 1;
    filter:
      brightness(1.18)
      drop-shadow(0 0 3px rgba(255,255,255,.36));
  }

  100% {
    opacity: .98;
    filter: none;
  }
}

/* Client logos remain non-interactive on hover, exactly as requested. */
.client-grid img:hover {
  filter: none;
}

/* Respect accessibility preference. */
@media (prefers-reduced-motion: reduce) {
  .client-grid.client-sequence img {
    animation: none !important;
  }
}


/* =========================================================
   A2M v1.11 — ABOUT readability
   ========================================================= */
.about-copy {
  color: rgba(255,255,255,.965) !important;
  text-shadow:
    0 0 1px rgba(255,255,255,.30),
    0 0 5px rgba(255,255,255,.055),
    0 1px 3px rgba(0,0,0,.50) !important;
}


/* =========================================================
   A2M v1.11 — smoother Cooperation logo glow sequence
   ========================================================= */
.client-grid.client-sequence img {
  animation-name: a2m-client-glow-pass-v11 !important;
  animation-duration: 1080ms !important;
  animation-timing-function: cubic-bezier(.22,.62,.30,1) !important;
  animation-fill-mode: both !important;
}

/* Następne logo zaczyna się dopiero, gdy poprzednie praktycznie wygasło. */
.client-grid.client-sequence img:nth-child(1)  { animation-delay: 0ms !important; }
.client-grid.client-sequence img:nth-child(2)  { animation-delay: 1120ms !important; }
.client-grid.client-sequence img:nth-child(3)  { animation-delay: 2240ms !important; }
.client-grid.client-sequence img:nth-child(4)  { animation-delay: 3360ms !important; }
.client-grid.client-sequence img:nth-child(5)  { animation-delay: 4480ms !important; }
.client-grid.client-sequence img:nth-child(6)  { animation-delay: 5600ms !important; }
.client-grid.client-sequence img:nth-child(7)  { animation-delay: 6720ms !important; }
.client-grid.client-sequence img:nth-child(8)  { animation-delay: 7840ms !important; }
.client-grid.client-sequence img:nth-child(9)  { animation-delay: 8960ms !important; }
.client-grid.client-sequence img:nth-child(10) { animation-delay: 10080ms !important; }
.client-grid.client-sequence img:nth-child(11) { animation-delay: 11200ms !important; }
.client-grid.client-sequence img:nth-child(12) { animation-delay: 12320ms !important; }

@keyframes a2m-client-glow-pass-v11 {
  0% {
    opacity: .98;
    filter:
      brightness(1)
      drop-shadow(0 0 0 rgba(255,255,255,0));
  }

  18% {
    opacity: 1;
    filter:
      brightness(1.10)
      drop-shadow(0 0 2px rgba(255,255,255,.18));
  }

  42% {
    opacity: 1;
    filter:
      brightness(1.48)
      drop-shadow(0 0 3px rgba(255,255,255,.58))
      drop-shadow(0 0 9px rgba(255,255,255,.18));
  }

  58% {
    opacity: 1;
    filter:
      brightness(1.58)
      drop-shadow(0 0 4px rgba(255,255,255,.72))
      drop-shadow(0 0 12px rgba(255,255,255,.22));
  }

  74% {
    opacity: 1;
    filter:
      brightness(1.30)
      drop-shadow(0 0 3px rgba(255,255,255,.36))
      drop-shadow(0 0 8px rgba(255,255,255,.10));
  }

  90% {
    opacity: .995;
    filter:
      brightness(1.08)
      drop-shadow(0 0 2px rgba(255,255,255,.10));
  }

  100% {
    opacity: .98;
    filter:
      brightness(1)
      drop-shadow(0 0 0 rgba(255,255,255,0));
  }
}
/* =========================================================
   A2M v1.11 — COOPERATION VISUAL PATCH
   Only Cooperation is changed:
   - slightly more breathing room on desktop
   - equal subdued resting brightness
   - softer sequential highlight with a short hold
   - slightly smaller mobile logos
   - ninth mobile logo centered across both columns

   Animation timing intentionally fits the original v1.11 JS timer,
   so this CSS works whether or not the earlier main.js timer fix
   has already been uploaded.
   ========================================================= */

/* Desktop: preserve the same black strip and 9-logo row. */
@media (min-width: 1001px) {
  .cooperation-strip {
    width: 86% !important;
    padding-left: clamp(34px, 4.15vw, 78px) !important;
    padding-right: clamp(34px, 4.15vw, 78px) !important;
  }

  .client-grid {
    column-gap: clamp(14px, 1.15vw, 22px) !important;
  }

  .client-grid img {
    max-height: 72px !important;
  }
}

/* All logos start at the same calm visual level. */
.client-grid img {
  opacity: .86;
  filter:
    grayscale(1)
    brightness(.90)
    contrast(1.02);

  transition:
    filter .28s ease,
    opacity .28s ease !important;
}

/* No hover highlight on client logos. */
.client-grid img:hover {
  opacity: .86;
  filter:
    grayscale(1)
    brightness(.90)
    contrast(1.02);
}

/*
  Elegant one-by-one pass:
  soft rise -> subtle white glow -> brief hold -> soft return.
  630 ms duration + 650 ms step keeps all 9 logos inside the
  original v1.11 sequence cleanup window.
*/
.client-grid.client-sequence img {
  animation-name: a2m-client-glow-pass-refined !important;
  animation-duration: 630ms !important;
  animation-timing-function: cubic-bezier(.22,.58,.30,1) !important;
  animation-fill-mode: both !important;
}

.client-grid.client-sequence img:nth-child(1)  { animation-delay: 0ms !important; }
.client-grid.client-sequence img:nth-child(2)  { animation-delay: 650ms !important; }
.client-grid.client-sequence img:nth-child(3)  { animation-delay: 1300ms !important; }
.client-grid.client-sequence img:nth-child(4)  { animation-delay: 1950ms !important; }
.client-grid.client-sequence img:nth-child(5)  { animation-delay: 2600ms !important; }
.client-grid.client-sequence img:nth-child(6)  { animation-delay: 3250ms !important; }
.client-grid.client-sequence img:nth-child(7)  { animation-delay: 3900ms !important; }
.client-grid.client-sequence img:nth-child(8)  { animation-delay: 4550ms !important; }
.client-grid.client-sequence img:nth-child(9)  { animation-delay: 5200ms !important; }
.client-grid.client-sequence img:nth-child(10) { animation-delay: 5850ms !important; }
.client-grid.client-sequence img:nth-child(11) { animation-delay: 6500ms !important; }
.client-grid.client-sequence img:nth-child(12) { animation-delay: 7150ms !important; }

@keyframes a2m-client-glow-pass-refined {
  0% {
    opacity: .86;
    filter:
      grayscale(1)
      brightness(.90)
      contrast(1.02)
      drop-shadow(0 0 0 rgba(255,255,255,0));
  }

  28% {
    opacity: .96;
    filter:
      grayscale(1)
      brightness(1.10)
      contrast(1.02)
      drop-shadow(0 0 2px rgba(255,255,255,.18));
  }

  43% {
    opacity: 1;
    filter:
      grayscale(1)
      brightness(1.28)
      contrast(1.025)
      drop-shadow(0 0 3px rgba(255,255,255,.34))
      drop-shadow(0 0 8px rgba(255,255,255,.10));
  }

  /* short readable hold */
  58% {
    opacity: 1;
    filter:
      grayscale(1)
      brightness(1.28)
      contrast(1.025)
      drop-shadow(0 0 3px rgba(255,255,255,.34))
      drop-shadow(0 0 8px rgba(255,255,255,.10));
  }

  78% {
    opacity: .94;
    filter:
      grayscale(1)
      brightness(1.06)
      contrast(1.02)
      drop-shadow(0 0 2px rgba(255,255,255,.10));
  }

  100% {
    opacity: .86;
    filter:
      grayscale(1)
      brightness(.90)
      contrast(1.02)
      drop-shadow(0 0 0 rgba(255,255,255,0));
  }
}

/* Phone: slightly smaller logos and more air.
   The final ninth logo is centered over both columns. */
@media (max-width: 640px) {
  .cooperation-strip {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .client-grid {
    column-gap: 14px !important;
    row-gap: 25px !important;
  }

  .client-grid img {
    max-width: 88% !important;
    max-height: 50px !important;
  }

  .client-grid img:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 56% !important;
    max-height: 64px !important;
  }
}

/* Very narrow phones: one more small reduction. */
@media (max-width: 360px) {
  .client-grid {
    column-gap: 12px !important;
    row-gap: 23px !important;
  }

  .client-grid img {
    max-width: 84% !important;
    max-height: 46px !important;
  }

  .client-grid img:last-child:nth-child(odd) {
    max-width: 54% !important;
    max-height: 60px !important;
  }
}

/* Keep reduced-motion accessibility intact. */
@media (prefers-reduced-motion: reduce) {
  .client-grid.client-sequence img {
    animation: none !important;
  }
}
/* =========================================================
   A2M v1.11 — COOPERATION SPACING CORRECTION
   Desktop only.
   Equal-width grid cells made logo CENTERS regular, but the
   visible edge-to-edge gaps were uneven because every logo has
   a different aspect ratio. This switches the desktop row to
   flex and assigns optical widths so the VISIBLE gaps are equal.
   Source logo files are not modified.
   ========================================================= */
@media (min-width: 1001px) {
  .client-grid {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;

    /* Equal visible space between every neighbouring logo. */
    gap: 2.05% !important;
  }

  .client-grid img {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    max-width: none !important;

    /* Scaling by transform does not affect layout spacing.
       Disable it on desktop and size each original logo box directly. */
    transform: none !important;
  }

  /* Optical widths — total leaves the same gap between every logo. */
  .client-grid img:nth-child(1) { width: 12.0% !important; } /* Inter Cars */
  .client-grid img:nth-child(2) { width: 10.5% !important; } /* Holtrade */
  .client-grid img:nth-child(3) { width: 10.5% !important; } /* Koleje Mazowieckie */
  .client-grid img:nth-child(4) { width: 11.0% !important; } /* Polnord */
  .client-grid img:nth-child(5) { width: 10.5% !important; } /* Scholl */
  .client-grid img:nth-child(6) { width:  9.5% !important; } /* Żabka */
  .client-grid img:nth-child(7) { width: 10.5% !important; } /* Zbyszko */
  .client-grid img:nth-child(8) { width:  8.0% !important; } /* DoubleTree */
  .client-grid img:nth-child(9) { width:  6.3% !important; } /* Wielki Człowiek */
}
/* =========================================================
   A2M v1.11 — COOPERATION DESKTOP SIZE REFINEMENT
   Reduce all desktop client logos by ~12% while preserving
   the same optical proportions and equal-spacing layout.
   Mobile remains unchanged.
   ========================================================= */
@media (min-width: 1001px) {
  .client-grid img:nth-child(1) { width: 10.56% !important; } /* Inter Cars */
  .client-grid img:nth-child(2) { width:  9.24% !important; } /* Holtrade */
  .client-grid img:nth-child(3) { width:  9.24% !important; } /* Koleje Mazowieckie */
  .client-grid img:nth-child(4) { width:  9.68% !important; } /* Polnord */
  .client-grid img:nth-child(5) { width:  9.24% !important; } /* Scholl */
  .client-grid img:nth-child(6) { width:  8.36% !important; } /* Żabka */
  .client-grid img:nth-child(7) { width:  9.24% !important; } /* Zbyszko */
  .client-grid img:nth-child(8) { width:  7.04% !important; } /* DoubleTree */
  .client-grid img:nth-child(9) { width:  5.54% !important; } /* Wielki Człowiek */
}
/* =========================================================
   A2M v1.11 — MOBILE COOPERATION ANIMATION + DOUBLETREE FIX
   - force the Cooperation highlight sequence on phones too
   - slightly enlarge DoubleTree on mobile
   - keep all previous desktop refinements intact
   ========================================================= */

@media (max-width: 640px) {
  /* Force the same soft highlight sequence on mobile too. */
  .client-grid.client-sequence img {
    animation-name: a2m-client-glow-pass-refined !important;
    animation-duration: 630ms !important;
    animation-timing-function: cubic-bezier(.22,.58,.30,1) !important;
    animation-fill-mode: both !important;
  }

  /* DoubleTree: slightly larger so it matches the row better. */
  .client-grid img:nth-child(8) {
    max-width: 94% !important;
    max-height: 58px !important;
  }
}

@media (max-width: 360px) {
  .client-grid.client-sequence img {
    animation-name: a2m-client-glow-pass-refined !important;
    animation-duration: 630ms !important;
    animation-timing-function: cubic-bezier(.22,.58,.30,1) !important;
    animation-fill-mode: both !important;
  }

  .client-grid img:nth-child(8) {
    max-width: 92% !important;
    max-height: 54px !important;
  }
}
/* =========================================================
   A2M v1.11 — DESKTOP COOPERATION HIGHLIGHT RESTORE
   Restores the soft one-by-one highlight on desktop explicitly,
   while keeping the current spacing/size fixes intact.
   ========================================================= */
@media (min-width: 1001px) {
  .client-grid.client-sequence img {
    animation-name: a2m-client-glow-pass-refined !important;
    animation-duration: 630ms !important;
    animation-timing-function: cubic-bezier(.22,.58,.30,1) !important;
    animation-fill-mode: both !important;
  }

  .client-grid.client-sequence img:nth-child(1)  { animation-delay: 0ms !important; }
  .client-grid.client-sequence img:nth-child(2)  { animation-delay: 650ms !important; }
  .client-grid.client-sequence img:nth-child(3)  { animation-delay: 1300ms !important; }
  .client-grid.client-sequence img:nth-child(4)  { animation-delay: 1950ms !important; }
  .client-grid.client-sequence img:nth-child(5)  { animation-delay: 2600ms !important; }
  .client-grid.client-sequence img:nth-child(6)  { animation-delay: 3250ms !important; }
  .client-grid.client-sequence img:nth-child(7)  { animation-delay: 3900ms !important; }
  .client-grid.client-sequence img:nth-child(8)  { animation-delay: 4550ms !important; }
  .client-grid.client-sequence img:nth-child(9)  { animation-delay: 5200ms !important; }
}


/* =========================================================
   A2M v1.11 — COOPERATION ANIMATION FIX
   Important: resting opacity/filter are intentionally NOT
   !important. CSS keyframes must be allowed to override them.
   Layout, spacing, sizes and mobile tuning remain unchanged.
   ========================================================= */