/* ===================================================================
   Hero — the lit sphere.

   The background carries the richness so the foreground can stay plain:
   headline, one paragraph, one button, three figures and the clients
   along the base. Rings are painted on the orb itself and clipped by its
   border-radius, which is what keeps the edge crisp instead of hazing
   into black.
   =================================================================== */

/* ==================================================================
   04 — ORB
   The background does the expensive work so the foreground can stay
   plain. A lit sphere with concentric rings, clipped to itself by a
   border-radius — the rings are painted on the orb, not on the page,
   which is what keeps its edge crisp instead of hazing into black.
   ================================================================== */

/* A taller first screen, but deliberately short of the fold: the section
   below has to show its edge, or the page reads as a slideshow. */
.hero-block {
  min-height: min(88vh, 900px);
}

/* The authored vertical rule marked the gap of a two-column hero. There is
   no second column any more, so it has nothing to divide.

   Doubled class: the page's own inline <style> turns it back on between
   768 and 900px, and that block sits later in the cascade at equal
   specificity — which is why the rule reappeared on tablets only. */
.hero-block.hero-block::after {
  display: none;
}

/* Нижний хайрлайн hero разделял его со следующей секцией. Пока видеоблок
   скрыт, hero стыкуется с .fit-section, у которой свой чёрный фон — линия
   висела в пустоте отдельной светлой полоской. Двойной класс — чтобы
   перебить инлайновый <style> страницы (768–900px возвращает display: block). */
.hero-block.hero-block::before {
  display: none;
}

.hero-block .hero-content {
  display: flex;
  flex: 1 1 auto;
}

.hero-orb {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  /* Flex items default to min-width:auto, so without this the grid inside
     pushes the column wider than the shell and drags the background with
     it. */
  min-width: 0;
}

/* The reach upward is tied to the header rather than typed in: a fixed
   -170px cleared the bar on desktop but stopped 14px short of the window
   on a phone, which is what left a black band across the top. */
.hero-orb__bg {
  position: absolute;
  left: 50%;
  top: calc(-1 * (var(--site-header-height, 96px) + 80px));
  bottom: -40px;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  /* Without this the sphere ends on the box edge and reads as a slice
     taken out of the corner. */
  -webkit-mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%);
}

.hero-orb__orb {
  position: absolute;
  left: -26%;
  top: -58%;
  width: min(1900px, 148%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  /* The steel ramp pulled toward the brand blue — roughly a 15% mix at the
     lit end, tapering to none at the rim so the sphere still dissolves
     into the page background rather than ending on a colour. */
  background: radial-gradient(
    circle at 30% 88%,
    #486d9d 0%,
    #33517e 15%,
    #223b61 30%,
    #172b49 45%,
    #102039 62%,
    #0d1727 78%,
    #0e0e10 100%
  );
}

/* The rings breathe outward and back. This is the movement you actually
   notice — geometry rather than glow — and because it is a slow scale on
   a clipped child it stays inside the sphere and stays on the
   compositor. */
.hero-orb__rings {
  position: absolute;
  inset: -12%;
  background: repeating-radial-gradient(
    circle at 30% 88%,
    transparent 0 62px,
    rgba(255, 255, 255, 0.032) 62px 63px
  );
  transform-origin: 30% 88%;
  animation: hero-orb-breathe 19s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes hero-orb-breathe {
  from {
    transform: scale(1);
    opacity: 0.55;
  }
  to {
    transform: scale(1.11);
    opacity: 1;
  }
}

/* A sheen turning inside the sphere, behind the rings. */
.hero-orb__sheen {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg at 30% 88%,
    transparent 0deg,
    rgba(255, 255, 255, 0.07) 40deg,
    transparent 92deg,
    transparent 226deg,
    rgba(90, 145, 255, 0.075) 284deg,
    transparent 338deg
  );
  animation: hero-orb-turn 44s linear infinite;
  will-change: transform;
}

@keyframes hero-orb-turn {
  to {
    transform: rotate(1turn);
  }
}

/* The specular hit that says the object is lit, drifting and breathing
   so the surface never looks like a printed gradient. */
.hero-orb__spec {
  position: absolute;
  left: 16%;
  top: 2%;
  width: min(480px, 38%);
  aspect-ratio: 1.35;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), transparent 72%);
  filter: blur(24px);
  animation: hero-orb-drift 15s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes hero-orb-drift {
  from {
    transform: translate3d(-7%, -5%, 0) scale(0.86);
    opacity: 0.5;
  }
  to {
    transform: translate3d(12%, 9%, 0) scale(1.14);
    opacity: 1;
  }
}

.hero-orb__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(40px, 6vw, 92px);
  padding: clamp(40px, 6vw, 104px) 0 clamp(24px, 3vw, 40px);
}

.hero-orb__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 17vw, 240px);
  align-items: start;
  column-gap: clamp(36px, 5vw, 92px);
}

.hero-orb__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-orb__title {
  max-width: 17ch;
  margin: 0;
  font-family: "RF Dewi Extended", sans-serif;
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: rgba(255, 255, 255, 0.98);
}

.hero-orb__title span {
  display: block;
}

/* Grey at any opacity reads as faded white — the tail looked switched
   off rather than set apart. The same lifted brand blue the figure icons
   use makes it a deliberate second voice, and at 4.7:1 on the sphere it
   clears AA for text this size with room to spare. */
.hero-orb__title-soft {
  color: rgba(150, 187, 255, 0.95);
}

.hero-orb__lead {
  max-width: 54ch;
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.6;
  /* 0.58 measured 5.6:1 — over the AA line but thin at this size on a
     lit ground. 0.78 reads as body copy rather than a caption. */
  color: rgba(255, 255, 255, 0.78);
}

.hero-orb__act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(26px, 3.2vw, 42px);
}

.hero-orb__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  font-family: "Gilroy", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #12161c;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.24s ease;
}

/* The label and the arrow have to be lifted: the sheen below is
   positioned, and positioned boxes paint over plain inline content. */
.hero-orb__cta > * {
  position: relative;
  z-index: 1;
}

.hero-orb__cta i {
  font-style: normal;
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* A tinted band, not a white one — a white sheen on a white button is
   invisible. It idles across every few seconds and crosses once, faster,
   on hover. */
.hero-orb__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(0, 89, 255, 0.14) 50%,
    transparent 66%
  );
  transform: translateX(-130%);
  animation: hero-orb-idle-sheen 6.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hero-orb-idle-sheen {
  0%,
  72% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

.hero-orb__cta:hover,
.hero-orb__cta:focus-visible {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.8);
}

.hero-orb__cta:hover i,
.hero-orb__cta:focus-visible i {
  transform: translateX(4px);
}

.hero-orb__cta:hover::after,
.hero-orb__cta:focus-visible::after {
  animation: hero-orb-sheen 0.62s ease-out;
}

@keyframes hero-orb-sheen {
  from {
    transform: translateX(-130%);
  }
  to {
    transform: translateX(130%);
  }
}

.hero-orb__cta:active {
  transform: translateY(1px);
  box-shadow: none;
}

.hero-orb__cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
}

.hero-orb__when {
  display: flex;
  align-items: center;
  gap: 13px;
}

/* 0.42 measured 3.25:1 — the lowest reading on the screen. */
.hero-orb__when > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.62);
}

.hero-orb__when b {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
}

/* Sitting on a lit sphere, the portrait needs a rim and a shadow of its
   own — flat on the gradient it read as a smudge. */
.hero-orb__face {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 14%;
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 8px 20px -10px rgba(0, 0, 0, 0.8);
}

/* The figures keep the right side occupied, but as type on hairlines
   rather than bordered plates: boxes were the only enclosed objects on a
   screen that is otherwise type on a gradient, which is what made them
   read as widgets stuck onto a photograph. */
.hero-orb__figures {
  display: flex;
  flex-direction: column;
  padding-top: clamp(6px, 0.8vw, 12px);
}

.hero-orb__figure {
  padding: clamp(14px, 1.7vw, 20px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.hero-orb__figure:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.hero-orb__figure-value {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "RF Dewi Extended", sans-serif;
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  /* A range broken over two lines stops being one number. */
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.95);
}

/* Drawn rather than filled, at a weight that matches the type next to
   them — a hairline icon beside a 700 numeral reads as a different set.
   Tinted toward the brand blue, but lifted well off #0059FF, which is
   near-black against the orb. */
.hero-orb__figure-icon {
  flex: 0 0 auto;
  width: 0.78em;
  height: 0.78em;
  fill: none;
  stroke: rgba(138, 176, 255, 0.92);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 0.44 measured 4.21:1 against the orb — under AA for body text. */
.hero-orb__figure p {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

/* Was a <br>. As elements the lines can be swapped out on narrow
   screens, where the three figures share one row and each caption has to
   hold to a single short line. */
.hero-orb__figure p span {
  display: block;
}

.hero-orb__figure p .hero-orb__figure-brief {
  display: none;
}

/* ---- base ---- */

.hero-orb__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  width: 100%;
  margin-top: 0;
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* 0.5 measured 3.36:1. */
.hero-orb__claim {
  flex: 0 0 auto;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.66);
}

.hero-orb__claim b {
  font-family: "RF Dewi Extended", sans-serif;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

/* Two identical tracks sliding right; when the first has travelled its
   own width the second is exactly where it started, so the seam never
   shows. Edges are faded so logos arrive and leave rather than pop. */
/* Bounded, not stretched: the strip keeps the footprint the static row
   had, and the logos slide out under its own edge fade.

   Same mechanism as .logo-strip further down the page — one reel holding
   two identical tracks, travelling exactly one track width so the loop
   has no seam. The fade is a mask rather than that section's solid
   gradient, because here the background is the sphere, not flat black. */
.hero-orb__marquee {
  display: flex;
  flex: 0 1 auto;
  width: min(620px, 62%);
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hero-orb__reel {
  display: flex;
  width: max-content;
  animation: hero-orb-slide 28s linear infinite;
  will-change: transform;
}

.hero-orb__track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(28px, 3.6vw, 56px);
  padding-right: clamp(28px, 3.6vw, 56px);
}

@keyframes hero-orb-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.hero-orb__marquee:hover .hero-orb__reel {
  animation-play-state: paused;
}

.hero-orb__track img {
  height: clamp(15px, 1.5vw, 20px);
  width: auto;
  opacity: 0.6;
  filter: grayscale(1);
}

@media (max-width: 1000px) {
  .hero-orb__top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(26px, 4vw, 40px);
  }

  .hero-orb__figures {
    flex-direction: row;
    gap: clamp(20px, 3vw, 34px);
  }

  .hero-orb__figure {
    flex: 1 1 0;
  }

  .hero-orb__figure:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 900px) {
  .hero-orb__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .hero-orb__marquee {
    width: 100%;
  }
}

/* Below the desktop layout the sphere has to be re-sized rather than
   re-positioned. The authored geometry is tuned to a wide, short box; as
   the viewport narrows and the section grows taller the circle stops
   covering it, and its rim cuts a visible arc across the content — worst
   on a phone, where it sliced through the client logos.

   Centred and sized past the box diagonal, the rim is always outside the
   frame, so the only edge left is the mask's own fade. The lit point
   moves up the sphere to keep the glow where it was on screen. */
@media (max-width: 1100px) {
  /* The fade also has to start much lower here: the logos sit near the
     bottom of a taller section, and a fade beginning at 72% left them
     stranded on flat black. */
  .hero-orb__bg {
    bottom: -90px;
    -webkit-mask-image: linear-gradient(180deg, #000 0 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 90%, transparent 100%);
  }

  .hero-orb__orb {
    left: 50%;
    top: 50%;
    /* 230% clears the diagonal at every width in this range; the floor
       keeps it honest on the narrowest phones. */
    width: max(230%, 1200px);
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle at 36% 66%,
      #486d9d 0%,
      #33517e 15%,
      #223b61 30%,
      #172b49 45%,
      #102039 62%,
      #0d1727 78%,
      #0e0e10 100%
    );
  }

  .hero-orb__rings {
    background: repeating-radial-gradient(
      circle at 36% 66%,
      transparent 0 96px,
      rgba(255, 255, 255, 0.032) 96px 98px
    );
    transform-origin: 36% 66%;
  }

  .hero-orb__sheen {
    background: conic-gradient(
      from 0deg at 36% 66%,
      transparent 0deg,
      rgba(255, 255, 255, 0.07) 40deg,
      transparent 92deg,
      transparent 226deg,
      rgba(90, 145, 255, 0.075) 284deg,
      transparent 338deg
    );
  }
}

@media (max-width: 767px) {
  .hero-orb__inner {
    padding: 20px 0 22px;
  }

  /* Centred as a column: on one narrow measure a left-ragged headline,
     paragraph and button read as three separate objects. */
  .hero-orb__copy {
    align-items: center;
    text-align: center;
  }

  .hero-orb__title {
    font-size: 34px;
    max-width: none;
  }

  /* The tail line stays where it was, a step under the statement above
     it — enlarging it too would flatten the pair back into one block. */
  .hero-orb__title-soft {
    font-size: 28px;
  }

  .hero-orb__lead {
    max-width: none;
  }

  .hero-orb__act {
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  /* Full width, because on a phone the primary action has no reason to
     be smaller than the text it follows. */
  .hero-orb__cta {
    width: 100%;
    height: 52px;
    justify-content: center;
  }

  /* The group is centred; the two lines inside stay left-aligned against
     the portrait, which is where the eye picks them up. */
  .hero-orb__when {
    justify-content: center;
    text-align: left;
  }

  /* One row of three. The second caption line stands down so the columns
     stay short — the icon carries the meaning the words would have.

     No rules: three separate hairlines over three short columns read as
     a broken line rather than a divider. Columns take their own width
     and the leftover is split evenly, so the space between the blocks is
     equal — on a fixed third each, the ragged caption widths made the
     middle gap look tighter than the first. */
  /* Grouped rather than spread: pushed out to both edges the three read
     as three separate items instead of one row. A fixed gap keeps the
     two spaces exactly equal, which was the point of sizing the columns
     to their own text in the first place. */
  /* The row needs its own air above it: with the rules gone it would
     otherwise sit right under the host line. */
  .hero-orb__top {
    row-gap: 44px;
  }

  .hero-orb__figures {
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    padding-top: 0;
  }

  .hero-orb__figure {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
    border-top: 0;
    border-bottom: 0;
  }

  .hero-orb__figure-value {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 19px;
  }

  .hero-orb__figure-icon {
    width: 17px;
    height: 17px;
  }

  .hero-orb__figure p {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.35;
  }

  /* The long captions stand down for one-line versions. Sized to their
     own content with the leftover split evenly, three lines of similar
     length are what make the two gaps read as equal. */
  .hero-orb__figure p .hero-orb__figure-wide {
    display: none;
  }

  .hero-orb__figure p .hero-orb__figure-brief {
    display: block;
  }

  .hero-orb__base {
    margin-top: 36px;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding-top: 0;
    border-top: 0;
  }

  /* One line here — the authored break left "since founding" orphaned
     under a centred line. */
  .hero-orb__claim br {
    display: none;
  }

  .hero-orb__track img {
    height: 17px;
  }

  .hero-orb__track {
    gap: 32px;
    padding-right: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb__rings,
  .hero-orb__sheen,
  .hero-orb__spec,
  .hero-orb__reel,
  .hero-orb__cta::after {
    animation: none;
  }
}

/* The header floats above the sphere, so its links need lifting off the
   lit part of it and the filled blue action would read as a sticker. */
.site-header .hero-nav__link,
.site-header .hero-date__value {
  color: rgba(255, 255, 255, 0.88);
}

.site-header .hero-date__caption {
  color: rgba(255, 255, 255, 0.45);
}

.site-header .hero-consultation {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.site-header .hero-consultation:hover,
.site-header .hero-consultation:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.site-header .hero-consultation::before {
  display: none;
}

/* The panel used a near-black plate with a blue bloom in the corner,
   which belonged to the old hero. Same lit-sphere ramp as the first
   screen instead, light in the bottom-left corner and rings over it, so
   opening the menu stays inside the same material.

   Two classes deep: the page's own inline <style> sits later in the
   cascade and would win at equal specificity. */
.hero-header .hero-mobile-menu__shell {
  background:
    repeating-radial-gradient(
      circle at 14% 96%,
      transparent 0 84px,
      rgba(255, 255, 255, 0.032) 84px 85px
    ),
    radial-gradient(
      circle at 14% 96%,
      #3a5a88 0%,
      #2a4569 15%,
      #1e3457 30%,
      #16273f 45%,
      #101c30 62%,
      #0b1220 80%,
      #090b10 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    -18px 0 52px rgba(0, 0, 0, 0.5);
}

.hero-header .hero-mobile-menu__link {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.hero-header .hero-mobile-menu__close {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* ===================================================================
   Site header

   Fixed, and it gets out of the way: scrolling down hides it, scrolling
   up brings it back. At the very top it stays flat, with a rule running
   the full width of the window; once the page has moved it becomes a
   contained glass bar and the rule goes with it.
   =================================================================== */

/* Centred on auto margins rather than translateX(-50%), and without a
   will-change: either one would make this box the containing block for
   the position:fixed mobile menu nested inside it, which is what pinned
   the menu 24px short of the window edge and stopped its backdrop from
   covering the screen. The bar no longer moves at all — it only changes
   its padding and picks up the glass once the page has scrolled. */
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 40;
  width: min(1290px, calc(100% - 48px));
  margin-inline: auto;
}

/* Edge to edge, and outside the bar so it contributes no height to it. */
.site-header__rule {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.13);
  transition: opacity 0.32s ease;
  pointer-events: none;
}

.site-header.is-floating .site-header__rule {
  opacity: 0;
}

.site-header__inner {
  position: relative;
  border-radius: 16px;
  transition: padding 0.32s ease;
}

/* Glass on a pseudo-element so it can fade rather than animating
   backdrop-filter, which repaints the whole strip every frame. */
.site-header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(18, 22, 30, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 40px -24px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

/* The glass is positioned, the header content is not — without lifting it
   the bar painted over the logo and the date. */
.site-header .hero-header {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 23px;
  padding-bottom: 23px;
  transition: padding 0.32s ease;
}

.site-header.is-floating {
  top: 12px;
}

.site-header.is-floating .site-header__inner {
  padding: 0 clamp(14px, 1.5vw, 22px);
}

.site-header.is-floating .site-header__inner::before {
  opacity: 1;
}

/* Floating height is the action button plus one even gap above and below,
   so nothing floats inside a taller box than it needs. */
.site-header.is-floating .hero-header {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* The header no longer takes space in the flow. */
.hero-block {
  padding-top: var(--site-header-height, 96px);
}

@media (max-width: 767px) {
  .site-header {
    width: calc(100% - 32px);
  }

  .site-header.is-floating .hero-header {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* Широкие экраны.

   Оболочка страницы упирается в 1290px, поэтому на 1440 и на 2560 блок
   героя одинаков — а цифры узкой колонкой у правого края оставляли между
   собой и текстом больше четырёхсот пикселей пустоты. На ноутбуках это
   привычная вёрстка и трогать её незачем; на широком мониторе дыра
   бросается в глаза.

   Растянуть прежнюю колонку было нельзя: линейки удлинились бы, а
   подписи под ними остались бы короткими — пустота просто переехала бы
   внутрь блока. Поэтому меняется не ширина, а раскладка строки: число
   слева, подпись справа от него в одну строку. Линейка длинная потому,
   что под ней действительно есть содержимое. */
@media (min-width: 1441px) {
  .hero-orb__top {
    grid-template-columns: minmax(0, 1fr) 496px;
    column-gap: clamp(40px, 3.5vw, 64px);
  }

  .hero-orb__figure {
    display: grid;
    grid-template-columns: 158px minmax(0, 1fr);
    align-items: center;
    column-gap: 24px;
  }

  .hero-orb__figure p {
    margin-top: 0;
  }

  /* Строки подписи были блоками, чтобы ломаться на узких экранах. Здесь
     они складываются в одну — пробел приходится дорисовывать, в разметке
     между спанами его нет. */
  .hero-orb__figure p span {
    display: inline;
  }

  .hero-orb__figure p span + span::before {
    content: " ";
  }
}