/* =====================================================================
   Neon — shared hero system.

   One source of truth for the first screen of index.html, neon-x/ and
   neon-tg/. Loaded LAST on every page so it wins over whatever each page
   stylesheet used to declare for its own hero.

   Two rules keep the three pages looking like one product:

   1. Geometry is reserved, not content-driven. The eyebrow, headline, lead,
      button row and trust row each get a slot of a fixed height, derived
      from the column width rather than from the copy. Wording can change
      freely — the CTA row still lands on the same pixel on all three pages.
   2. Colour, gradients, type and motion come from the variables below.
      Only the background photo and the fade-out colour are per page.
   ===================================================================== */

:root{
  /* Brand ramps — every gradient on the first screen comes from these. */
  --grad-accent:linear-gradient(90deg,#0968ff,#52d4ff);
  --grad-btn:linear-gradient(135deg,#2799ff 0%,#0968ff 58%,#0647e8 100%);
  --grad-title-ink:linear-gradient(105deg,#07112f 0%,#07112f 28%,#123b7b 42%,#269cff 50%,#0e2d67 59%,#07112f 73%,#07112f 100%);
  --grad-title-accent:linear-gradient(105deg,#0b57f5 0%,#187cfb 28%,#64ddff 49%,#198cff 61%,#1546eb 77%,#0b57f5 100%);

  /* Display face. neon-x used to fall back to Inter for its headings while
     the other two pages used Bricolage Grotesque — same stack everywhere now. */
  --font-display:"Bricolage Grotesque",Inter,"Segoe UI",Arial,sans-serif;

  /* The header's flow box. The hero cancels exactly this much with its
     negative top margin, so the banner starts at y = 0 on every page. */
  --header-h:68px;
  --header-gap:18px;
}

/* Headings share one display face across the three pages. */
h1,h2{font-family:var(--font-display);font-weight:700}

/* neon-x pinned .header to 80px, index.html shrank .header__inner to 60px
   below 900px, neon-tg did neither — three different header block heights for
   the hero's one negative margin to cancel. One figure now. */
.header{height:var(--header-h);margin-bottom:var(--header-gap)}
.header__inner{height:var(--header-h)}

/* ---------------------------------------------------------------- banner */

.hero{
  /* Geometry lives on .hero rather than :root: the responsive blocks at the
     bottom retune --hero-gutter / --hero-content-vw here, and a custom
     property is substituted on the element that declares it, so the derived
     values (--hero-avail, --hero-title-size) have to be declared here too. */
  --hero-h:760px;
  --hero-pad-top:227px;
  --hero-pad-bottom:108px;
  --hero-gutter:max(52px,calc((100vw - 1380px)/2 - 7.5px));
  --hero-content-w:50%;
  /* Same figure as --hero-content-w in vw, so the headline size below can be
     derived from the real width the copy has to fit into. */
  --hero-content-vw:50vw;
  --hero-avail:calc(var(--hero-content-vw) - var(--hero-gutter));

  /* Reserved slots — the reason the CTA row never moves between pages. */
  --hero-eyebrow-h:16px;
  --hero-title-lines:2;
  --hero-lead-lines:3;
  --hero-title-gap-top:20px;
  --hero-title-gap-bottom:18px;
  --hero-actions-gap:28px;
  --hero-btn-h:56px;
  --hero-actions-h:var(--hero-btn-h);
  --hero-trust-gap:18px;
  --hero-trust-h:18px;

  /* Type scale. The headline is driven by the column width, not by the
     viewport, so each page keeps its two lines unbroken without hand-tuning. */
  --hero-title-size:clamp(30px,calc(var(--hero-avail) * .075),54px);
  --hero-title-lh:1.06;
  --hero-lead-size:15px;
  --hero-lead-lh:1.72;
  --hero-lead-w:540px;

  position:relative;
  isolation:isolate;
  z-index:0;
  display:block;
  width:100%;
  max-width:none;
  height:var(--hero-h);
  min-height:0;
  max-height:none;
  margin:calc(-1 * (var(--header-h) + var(--header-gap))) 0 0;
  padding:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
  /* Per-page overrides live on the .hero--* modifiers below. */
  --hero-tint:#eef6ff;
  --hero-fade-end:#eef6ff;
  --hero-image:none;
  --hero-image-pos:center;
  background:var(--hero-tint);
}

/* The only per-page values: the photo, and the colour the bottom fade has to
   land on (each page's own background picks up where the banner stops). */
.hero--eco{
  --hero-image:url("images/ecosystem-hero-reception-v1.webp");
  --hero-fade-end:#f1f6ff;
}
.hero--x{
  --hero-image:url("../neon-x/assets/images/hero/neon-x-office-v1.webp");
}
.hero--tg{
  --hero-image:url("images/6b12c20d-1463-49ab-aa8a-b593eb7d6649.webp");
}
/* Neon Hub. Снимок временный — ресепшен главной, пока нет своего кадра
   с вывеской Neon Hub (как у Neon X). Кадрирование то же, что у главной. */
.hero--hub{
  --hero-image:url("images/ecosystem-hero-reception-v1.webp");
  --hero-fade-end:#f1f6ff;
}

.hero__image{
  position:absolute;
  z-index:-3;
  inset:0;
  background:var(--hero-image) var(--hero-image-pos)/cover no-repeat;
  transform:scale(1.015);
  animation:heroBreath 18s ease-in-out infinite alternate;
}
@keyframes heroBreath{to{transform:scale(1.045) translate3d(-8px,-3px,0)}}

/* Left scrim: keeps the copy readable over the photo. */
.hero:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:none;
  background:linear-gradient(90deg,
    var(--hero-tint) 0%,
    color-mix(in srgb,var(--hero-tint) 96%,transparent) 17%,
    color-mix(in srgb,var(--hero-tint) 60%,transparent) 33%,
    color-mix(in srgb,var(--hero-tint) 9%,transparent) 49%,
    transparent 62%);
}

/* Bottom fade: hands the banner over to the page background below. */
.hero:after{
  content:"";
  display:block;
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  top:auto;
  bottom:-1px;
  width:100%;
  height:172px;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:none;
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb,var(--hero-fade-end) 38%,transparent) 38%,
    color-mix(in srgb,var(--hero-fade-end) 90%,transparent) 78%,
    var(--hero-fade-end) 100%);
}

/* --------------------------------------------------------------- content */

.hero__content{
  position:relative;
  z-index:2;
  display:grid;
  align-content:start;
  justify-items:start;
  grid-template-rows:
    var(--hero-eyebrow-h)
    calc(var(--hero-title-gap-top) + var(--hero-title-block) + var(--hero-title-gap-bottom))
    var(--hero-lead-block)
    calc(var(--hero-actions-gap) + var(--hero-actions-h))
    auto;
  width:var(--hero-content-w);
  max-width:none;
  height:100%;
  min-height:0;
  padding:var(--hero-pad-top) 0 var(--hero-pad-bottom) var(--hero-gutter);
  /* Row heights have to be resolved in px, not in the em of a child that
     does not exist yet, so the two text blocks are pre-multiplied here. */
  --hero-title-block:calc(var(--hero-title-lines) * var(--hero-title-lh) * var(--hero-title-size));
  --hero-lead-block:calc(var(--hero-lead-lines) * var(--hero-lead-lh) * var(--hero-lead-size));
}

/* Section kicker — same size, tracking and rule everywhere on the site. */
.eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  color:var(--blue,#0968ff);
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.eyebrow>span{
  flex:none;
  width:24px;
  height:2px;
  background:var(--grad-accent);
}
.hero .eyebrow{
  height:var(--hero-eyebrow-h);
  line-height:var(--hero-eyebrow-h);
  white-space:nowrap;
}

.hero h1{
  width:100%;
  max-width:none;
  height:var(--hero-title-block);
  margin:var(--hero-title-gap-top) 0 var(--hero-title-gap-bottom);
  font-family:var(--font-display);
  font-size:var(--hero-title-size);
  font-weight:700;
  line-height:var(--hero-title-lh);
  letter-spacing:-.046em;
  overflow:visible;
}

/* Exactly two lines on every page: line 1 in ink, line 2 in the accent
   ramp. Both carry the same slow shimmer so the three pages animate alike. */
.hero__title-line{
  display:block;
  white-space:nowrap;
  font-style:normal;
  background-repeat:no-repeat;
  background-size:280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  will-change:background-position;
  animation:neonTextSweep 7.8s ease-in-out infinite;
}
.hero__title-line:not(em){background-image:var(--grad-title-ink)}
em.hero__title-line{
  background-image:var(--grad-title-accent);
  filter:drop-shadow(0 7px 18px rgba(35,139,255,.08));
}
@keyframes neonTextSweep{
  0%,100%{background-position:0 50%}
  50%{background-position:100% 50%}
}

.hero__lead{
  height:var(--hero-lead-block);
  max-width:var(--hero-lead-w);
  margin:0;
  color:#4e5f7d;
  font-size:var(--hero-lead-size);
  line-height:var(--hero-lead-lh);
}

.hero__actions{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:12px;
  height:var(--hero-actions-h);
  margin-top:var(--hero-actions-gap);
}
.hero__actions .btn{height:var(--hero-btn-h);min-height:var(--hero-btn-h)}

.hero__trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  min-height:var(--hero-trust-h);
  margin-top:var(--hero-trust-gap);
  color:#687893;
  font-size:11px;
  font-weight:700;
}
.hero__trust span{display:flex;align-items:center;gap:6px}
.hero__trust i{
  display:grid;
  place-items:center;
  flex:none;
  width:17px;
  height:17px;
  border-radius:50%;
  background:rgba(18,157,111,.1);
  color:#18a26f;
  font-style:normal;
  font-size:9px;
}

/* --------------------------------------------------------------- buttons */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:13px;
  font-size:13px;
  font-weight:800;
  letter-spacing:-.01em;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background .24s ease,color .24s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--large{min-height:56px;padding:0 27px;border-radius:15px;font-size:13.5px}

.btn--primary{
  color:#fff;
  background:var(--grad-btn);
  box-shadow:0 14px 30px rgba(9,104,255,.25),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{box-shadow:0 18px 40px rgba(9,104,255,.35);filter:none}
.btn--primary:before{
  content:"";
  position:absolute;
  top:0;
  left:-60%;
  width:40%;
  height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);
  transition:left .65s cubic-bezier(.16,1,.3,1);
}
.btn--primary:hover:before{left:130%}

.btn--ghost,.btn--glass{
  border-color:rgba(38,108,204,.18);
  background:rgba(255,255,255,.76);
  color:#263b65;
  box-shadow:0 12px 28px rgba(25,76,145,.08);
  backdrop-filter:blur(12px);
}
.btn--ghost:hover,.btn--glass:hover{
  border-color:rgba(9,104,255,.36);
  background:#fff;
  color:var(--blue,#0968ff);
}

/* Trailing arrow on the primary CTA — same affordance on all three pages. */
.btn b{font-weight:700;transition:transform .24s ease}
.btn:hover b{transform:translateX(3px)}

.btn:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 6px rgba(27,132,255,.38);
}

/* ----------------------------------------------------------- responsive */

@media(max-width:1180px){
  .hero{
    --hero-content-vw:48vw;
    --hero-gutter:38px;
    --hero-content-w:48%;
    /* The lead column drops below ~500px here and the copy needs a fourth
       line. Reserved, not discovered at runtime — same on all three pages. */
    --hero-lead-lines:4;
    --hero-avail:calc(48vw - 38px);
    --hero-title-size:clamp(30px,calc(var(--hero-avail) * .075),54px);
  }
  .hero--eco,.hero--hub{--hero-image-pos:57% center}
}

@media(max-width:900px){
  .hero{
    --hero-h:650px;
    --hero-content-vw:57vw;
    --hero-content-w:57%;
    --hero-lead-lines:4;
    --hero-avail:calc(57vw - 38px);
    /* Slightly tighter ratio here: the column is narrow enough that the
       longest headline line would otherwise run out of room. */
    --hero-title-size:clamp(26px,calc(var(--hero-avail) * .07),54px);
  }
  .hero:before{
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--hero-tint) 80%,transparent),
      color-mix(in srgb,var(--hero-tint) 47%,transparent) 48%,
      transparent 76%);
  }
  .hero--eco,.hero--hub{--hero-image-pos:66% bottom}
  .hero--x,.hero--tg{--hero-image-pos:62% center}
}

@media(max-width:720px){
  :root{--header-h:60px}

  /* Copy moves above the photo and the column goes full width. The reserved
     slots stay — same headline shape, same CTA position, same three pages. */
  .hero{
    --hero-h:auto;
    --hero-content-w:100%;
    --hero-content-vw:100vw;
    --hero-gutter:20px;
    /* Both gutters, plus an allowance for a classic (non-overlay) scrollbar,
       which 100vw counts but the column never gets. */
    --hero-avail:calc(100vw - 56px);
    --hero-title-size:clamp(19px,calc(var(--hero-avail) * .0755),44px);
    --hero-lead-lines:4;
    --hero-lead-size:13.5px;
    --hero-lead-w:520px;
    /* Two full-width buttons stacked, plus the 12px gap between them. */
    --hero-actions-h:calc(var(--hero-btn-h) * 2 + 12px);
    /* The kicker is allowed a second line on a phone-width column; the slot
       reserves both so the headline below it never shifts. */
    --hero-eyebrow-h:34px;
    min-height:720px;
  }
  .hero .eyebrow{align-items:flex-start;line-height:1.5;white-space:normal}
  .hero .eyebrow>span{margin-top:7px}
  .hero:before{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--hero-tint) 98%,transparent) 0%,
      color-mix(in srgb,var(--hero-tint) 92%,transparent) 48%,
      color-mix(in srgb,var(--hero-tint) 24%,transparent) 80%,
      transparent 100%);
  }
  .hero--eco,.hero--hub{--hero-image-pos:72% bottom}
  .hero--x,.hero--tg{--hero-image-pos:66% bottom}
  .hero__content{
    justify-items:stretch;
    height:auto;
    padding:88px var(--hero-gutter) 300px;
  }
  .hero__actions{flex-direction:column;max-width:440px}
  .hero__trust{gap:8px 13px}
}

@media(max-width:480px){
  /* One more line of lead copy fits on a phone-width column. */
  .hero{--hero-lead-lines:5}
  .hero__trust{font-size:9.5px}
}

@media(prefers-reduced-motion:reduce){
  .hero__image{animation:none!important}
  .hero__title-line{animation:none;background-position:50% 50%}
  .btn{transition:none}
}

/* -------------------------------------------------------- section bridge */

/* The handoff between two sections: three concentric arcs, a soft glow and
   the product mark. Was copied into all three page stylesheets with three
   different mark colours and two different reveal behaviours; one component
   now.

   The base state is fully painted. A bridge only animates in if the page
   opts into a scroll reveal by carrying [data-section-bridge] — which the
   first bridge under the hero deliberately does not, so the transition out
   of the banner is already there when the page opens.

   Тот первый мост — особый случай, см. ниже `.hero + .section-bridge`. */
.section-bridge{
  position:relative;
  z-index:3;
  height:132px;
  margin:-18px 0 -24px;
  overflow:hidden;
  background:#f4f9ff;
  pointer-events:none;
}
.section-bridge--flow{margin:-60px 0 -52px;background:transparent}
.section-bridge:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:560px;
  height:84px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(89,199,255,.2),rgba(70,151,255,.07) 42%,transparent 72%);
  filter:blur(9px);
  transform:translate(-50%,-50%);
}
.section-bridge__wave{
  position:absolute;
  height:150px;
  border:1px solid rgba(94,182,255,.3);
  border-radius:50%;
  box-shadow:0 -1px 0 rgba(255,255,255,.88),0 0 16px rgba(87,182,255,.12);
}
.section-bridge__wave--left{width:78vw;left:-8vw;top:54px;transform:rotate(2deg)}
.section-bridge__wave--right{width:78vw;right:-8vw;top:54px;transform:rotate(-2deg)}
.section-bridge__wave--wide{width:116vw;left:50%;top:78px;border-color:rgba(123,203,255,.2);transform:translateX(-50%)}
.section-bridge__mark{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  border:1px solid rgba(84,193,255,.7);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(211,242,255,.92));
  box-shadow:0 0 0 7px rgba(77,184,255,.08),0 0 30px rgba(54,165,255,.24),inset 0 0 18px rgba(86,201,255,.15);
  color:#56bdff;
  /* Sized so a two-letter mark (TG) sits in the same circle as a one-letter
     one (N, X) without a per-page override. */
  font-size:23px;
  font-weight:850;
  letter-spacing:-.02em;
  line-height:1;
  text-shadow:0 0 12px rgba(60,177,255,.45);
  transform:translate(-50%,-50%);
  animation:bridgeMarkPulse 4.6s ease-in-out infinite;
}
@keyframes bridgeMarkPulse{
  0%,100%{box-shadow:0 0 0 7px rgba(77,184,255,.08),0 0 30px rgba(54,165,255,.24),inset 0 0 18px rgba(86,201,255,.15)}
  50%{box-shadow:0 0 0 12px rgba(77,184,255,.025),0 0 44px rgba(54,165,255,.34),inset 0 0 24px rgba(86,201,255,.22)}
}

/* Первый мост стоит на стыке с фотографией баннера: общие для компонента
   отрицательные отступы поднимают его так, что знак (N, X, TG) приходится
   ровно на нижний край снимка, а кольца обрываются о него же. Разделитель
   при этом читается не как граница между экранами, а как значок, налипший
   на картинку.

   Сдвигаем его вниз, в светлый промежуток под баннером — туда, где граница
   и проходит. Именно transform, а не отступы: он не участвует в потоке,
   поэтому следующая секция остаётся ровно там, где стояла, и вся выверенная
   вертикаль страницы не съезжает. Мост прозрачный и не ловит курсор
   (pointer-events:none выше), так что заходить на территорию следующей
   секции ему нечем помешать.

   46px — предел, а не вкусовщина: у трёх лендингов следующая секция
   начинается на разной высоте, и самый тесный из них, Neon X, оставляет
   до своего заголовка всего 17px. Больше сдвинуть — знак упрётся в текст.
   Меньше — вернётся на край фотографии, с чего всё и началось.

   Остальные мосты ниже по странице не трогаем: они лежат между двумя
   обычными секциями, где отступы и так симметричны. */
.hero + .section-bridge{transform:translateY(46px)}

.section-bridge--signature{height:154px;margin:-66px 0 -58px;background:linear-gradient(180deg,transparent,rgba(241,247,255,.76) 48%,transparent)}
.section-bridge--signature:after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(55,160,255,.18) 12%,rgba(75,193,255,.54) 48%,rgba(55,160,255,.18) 88%,transparent);
}
.section-bridge__node{
  position:absolute;
  z-index:3;
  top:50%;
  width:9px;
  height:9px;
  border:1px solid rgba(71,184,255,.72);
  border-radius:50%;
  background:#f5fbff;
  box-shadow:0 0 0 5px rgba(70,179,255,.05),0 0 16px rgba(42,155,255,.36);
  transform:translate(-50%,-50%);
  animation:signatureNodePulse 3.8s ease-in-out infinite;
}
.section-bridge__node:nth-of-type(1){left:23%}
.section-bridge__node:nth-of-type(2){left:37%;animation-delay:2s}
.section-bridge__node:nth-of-type(3){left:63%;animation-delay:2s}
.section-bridge__node:nth-of-type(4){left:77%}
@keyframes signatureNodePulse{
  0%,100%{box-shadow:0 0 0 5px rgba(70,179,255,.05),0 0 16px rgba(42,155,255,.36)}
  50%{box-shadow:0 0 0 9px rgba(70,179,255,.02),0 0 24px rgba(42,155,255,.5)}
}

/* Opt-in scroll reveal. Transitions are scoped to the attribute so a bridge
   without it is painted instantly rather than starting from a hidden state. */
.section-bridge[data-section-bridge]{transition:opacity .65s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.section-bridge[data-section-bridge]:before{transition:opacity .8s .15s ease,transform 1.2s .15s cubic-bezier(.16,1,.3,1)}
.section-bridge[data-section-bridge] .section-bridge__wave{transition:opacity .7s ease,transform 1.25s cubic-bezier(.16,1,.3,1)}
.section-bridge[data-section-bridge] .section-bridge__mark{transition:opacity .5s .35s ease,transform .95s .28s cubic-bezier(.16,1,.3,1)}
.section-bridge--signature[data-section-bridge]:after{transition:opacity .7s .22s ease,transform 1.35s .16s cubic-bezier(.16,1,.3,1)}
.section-bridge[data-section-bridge] .section-bridge__node{transition:opacity .45s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.section-bridge[data-section-bridge] .section-bridge__node:nth-of-type(1){transition-delay:.42s}
.section-bridge[data-section-bridge] .section-bridge__node:nth-of-type(2),
.section-bridge[data-section-bridge] .section-bridge__node:nth-of-type(3){transition-delay:.55s}
.section-bridge[data-section-bridge] .section-bridge__node:nth-of-type(4){transition-delay:.42s}

.section-bridge[data-section-bridge]:not(.is-visible){opacity:0;transform:translateY(24px) scale(.96)}
.section-bridge[data-section-bridge]:not(.is-visible):before{opacity:0;transform:translate(-50%,-50%) scale(.72)}
.section-bridge[data-section-bridge]:not(.is-visible) .section-bridge__wave{opacity:0}
.section-bridge[data-section-bridge]:not(.is-visible) .section-bridge__wave--left{transform:rotate(2deg) translateX(-18%)}
.section-bridge[data-section-bridge]:not(.is-visible) .section-bridge__wave--right{transform:rotate(-2deg) translateX(18%)}
.section-bridge[data-section-bridge]:not(.is-visible) .section-bridge__wave--wide{transform:translateX(-50%) scaleX(.72)}
.section-bridge[data-section-bridge]:not(.is-visible) .section-bridge__mark{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-18deg);animation:none}
.section-bridge--signature[data-section-bridge]:not(.is-visible):after{opacity:0;transform:scaleX(.35)}
.section-bridge[data-section-bridge]:not(.is-visible) .section-bridge__node{opacity:0;transform:translate(-50%,-50%) scale(.2);animation:none}

@media(max-width:720px){
  .section-bridge{height:92px;margin:-14px 0 -16px}
  .section-bridge--flow{margin:-42px 0 -38px}
  .section-bridge:before{width:320px;height:62px}
  .section-bridge__wave{height:105px;top:42px}
  .section-bridge__wave--left,.section-bridge__wave--right{width:88vw}
  .section-bridge__wave--wide{width:125vw;top:58px}
  .section-bridge__mark{width:50px;height:50px;font-size:17px}
  .section-bridge--signature .section-bridge__node:nth-of-type(1){left:15%}
  .section-bridge--signature .section-bridge__node:nth-of-type(2){left:31%}
  .section-bridge--signature .section-bridge__node:nth-of-type(3){left:69%}
  .section-bridge--signature .section-bridge__node:nth-of-type(4){left:85%}
}

@media(prefers-reduced-motion:reduce){
  .section-bridge,
  .section-bridge:before,
  .section-bridge__wave,
  .section-bridge__mark,
  .section-bridge__node,
  .section-bridge--signature:after{transition:none!important;animation:none!important}
  /* The reveal never engages here: both page scripts mark every bridge
     visible up front when the user asks for reduced motion. */
}