/* Warm editorial surfaces and a tapered five-rail rhythm derived from the favicon. */
:root {
  --brand-navy: #06112d;
  --brand-gold: #c7a870;
  --brand-paper: #fffaf0;
  --brand-sand: #f4ecd9;
  --brand-surface: rgba(255, 252, 243, 0.88);
  --brand-shadow: 0 24px 64px rgba(6, 17, 45, 0.1);
  --brand-shadow-soft: 0 14px 38px rgba(6, 17, 45, 0.065);
}

body {
  background:
    radial-gradient(ellipse at 4% 12%, rgba(199, 168, 112, 0.11), transparent 32rem),
    radial-gradient(ellipse at 96% 62%, rgba(6, 17, 45, 0.055), transparent 38rem),
    var(--brand-paper);
}

.banner-brand-graphic,
.brand-mark,
.brand-mark-light {
  display: none !important;
  background: none !important;
}

/* A custom five-rail composition: related to the favicon, never the favicon artwork. */
.editorial-banner {
  background:
    radial-gradient(ellipse at 82% 15%, rgba(199, 168, 112, 0.12), transparent 32%),
    linear-gradient(118deg, #06112d 0%, #0d1d3d 72%, #13274c 100%);
  box-shadow: inset 0 -1px rgba(255, 250, 234, 0.12);
}

.banner-mosaic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 168px;
  height: 132px;
  opacity: 0.9;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.16));
}

.banner-mosaic span {
  display: block !important;
  width: 8px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 250, 234, 0.82);
  transform-origin: center;
  animation: signal-breathe 8s ease-in-out infinite;
  animation-play-state: paused;
}

.banner-mosaic span:nth-child(1) { height: 58px; clip-path: polygon(50% 0, 77% 17%, 77% 70%, 100% 57%, 50% 100%, 23% 86%, 23% 24%); }
.banner-mosaic span:nth-child(2) { height: 94px; clip-path: polygon(50% 0, 100% 20%, 76% 24%, 76% 100%, 24% 100%, 24% 15%); animation-delay: -1.2s; }
.banner-mosaic span:nth-child(3) { height: 128px; width: 7px; background: var(--brand-gold); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation-delay: -2.4s; }
.banner-mosaic span:nth-child(4) { height: 94px; clip-path: polygon(50% 0, 76% 15%, 76% 100%, 24% 100%, 24% 24%, 0 20%); animation-delay: -3.6s; }
.banner-mosaic span:nth-child(5) { height: 58px; clip-path: polygon(50% 0, 77% 24%, 77% 86%, 50% 100%, 0 57%, 23% 70%, 23% 17%); animation-delay: -4.8s; }
.editorial-banner[data-motion-active="true"] .banner-mosaic span { animation-play-state: running; }

/* Edge-bound five-rail fields give sections depth without floating decoration. */
:where(#main > .section:not(.hero):not(.document-closing), .page-content > .section:not(.document-intro):not(.document-closing)) {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

:where(#main > .section:not(.hero):not(.document-closing), .page-content > .section:not(.document-intro):not(.document-closing)) > .container {
  position: relative;
  z-index: 1;
}

:where(#main > .section:not(.hero):not(.document-closing), .page-content > .section:not(.document-intro):not(.document-closing))::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 11% 0 11% auto;
  width: min(20vw, 250px);
  background:
    linear-gradient(to bottom, transparent 30%, rgba(6, 17, 45, 0.07) 30% 70%, transparent 70%) 18% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, transparent 20%, rgba(6, 17, 45, 0.08) 20% 80%, transparent 80%) 34% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, transparent 8%, rgba(199, 168, 112, 0.22) 8% 92%, transparent 92%) 50% 0 / 2px 100% no-repeat,
    linear-gradient(to bottom, transparent 20%, rgba(6, 17, 45, 0.08) 20% 80%, transparent 80%) 66% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, transparent 30%, rgba(6, 17, 45, 0.07) 30% 70%, transparent 70%) 82% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, transparent, rgba(199, 168, 112, 0.055));
  -webkit-mask-image: linear-gradient(to left, #000, transparent 92%);
  mask-image: linear-gradient(to left, #000, transparent 92%);
  pointer-events: none;
}

:where(#main > .section:not(.hero):not(.document-closing), .page-content > .section:not(.document-intro):not(.document-closing)):nth-of-type(even)::before {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}

.eyebrow, .page-subtitle, .editorial-banner__copy > p {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before, .page-subtitle::before, .editorial-banner__copy > p::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 24px;
  flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask: url('../icons/brand-symbol-transparent.png') center / contain no-repeat;
  mask: url('../icons/brand-symbol-transparent.png') center / contain no-repeat;
}
.eyebrow > span:first-child:empty { display: none; }

/* Warm, layered introductions with an intentional image stage. */
.document-intro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 84% 32%, rgba(199, 168, 112, 0.15), transparent 27%),
    linear-gradient(112deg, #fffaf0 0%, #fffaf0 58%, #f4ecd9 100%);
}

.document-intro::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 9%;
  right: 5%;
  width: 210px;
  height: 82%;
  border: 0;
  background:
    linear-gradient(to bottom, transparent 31%, rgba(6, 17, 45, 0.06) 31% 69%, transparent 69%) 12% 0 / 2px 100% no-repeat,
    linear-gradient(to bottom, transparent 18%, rgba(6, 17, 45, 0.07) 18% 82%, transparent 82%) 31% 0 / 2px 100% no-repeat,
    linear-gradient(to bottom, transparent 4%, rgba(199, 168, 112, 0.24) 4% 96%, transparent 96%) 50% 0 / 3px 100% no-repeat,
    linear-gradient(to bottom, transparent 18%, rgba(6, 17, 45, 0.07) 18% 82%, transparent 82%) 69% 0 / 2px 100% no-repeat,
    linear-gradient(to bottom, transparent 31%, rgba(6, 17, 45, 0.06) 31% 69%, transparent 69%) 88% 0 / 2px 100% no-repeat;
  transform: none;
  pointer-events: none;
}

.document-intro::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 36%;
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--brand-gold));
  box-shadow: none;
  transform: none;
}

.document-intro .container { position: relative; z-index: 1; }

.section-media {
  position: relative;
  border: 1px solid rgba(6, 17, 45, 0.12);
  border-radius: 5px;
  background: var(--brand-paper);
  box-shadow: 18px 20px 0 rgba(199, 168, 112, 0.2), var(--brand-shadow);
  transition: transform 480ms var(--motion-ease), box-shadow 480ms var(--motion-ease), border-color 300ms;
}
.section-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -13px 24px 24px -13px;
  border: 1px solid rgba(6, 17, 45, 0.1);
  border-radius: 5px;
  pointer-events: none;
}
.section-media:hover {
  transform: translateY(-7px) rotate(-0.35deg);
  border-color: rgba(199, 168, 112, 0.72);
  box-shadow: 23px 25px 0 rgba(199, 168, 112, 0.22), 0 32px 66px rgba(6, 17, 45, 0.14);
}
.section-media img { border-radius: 4px; transition: transform 750ms var(--motion-ease), filter 400ms; }
.section-media:hover img { transform: scale(1.025); filter: saturate(1.04) contrast(1.02); }

.corporate-hero-visual {
  isolation: isolate;
  border-radius: 5px;
  box-shadow: 20px 22px 0 rgba(199, 168, 112, 0.24), 0 30px 68px rgba(6, 17, 45, 0.14);
  transition: transform 480ms var(--motion-ease), box-shadow 480ms var(--motion-ease);
}
.corporate-hero-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px 22px 22px -14px;
  border: 1px solid rgba(6, 17, 45, 0.12);
  border-radius: 5px;
}
.corporate-hero-visual:hover { transform: translateY(-7px); box-shadow: 24px 27px 0 rgba(199, 168, 112, 0.25), 0 36px 74px rgba(6, 17, 45, 0.17); }
.corporate-home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto auto -1px 0;
  width: 52%;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--brand-gold), transparent);
  animation: none;
}

/* Alternating warm surfaces form a connected editorial sequence. */
.method {
  background:
    radial-gradient(ellipse at 12% 20%, rgba(199, 168, 112, 0.09), transparent 34%),
    linear-gradient(118deg, rgba(6, 17, 45, 0.045), transparent 54%),
    #f6efdf;
  border-color: rgba(6, 17, 45, 0.11);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.64);
}
.page-content > .section:not(.document-intro):not(.method):not(.document-closing):nth-of-type(odd),
#main > .section:not(.hero):not(.method):nth-of-type(odd) {
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.3), rgba(199, 168, 112, 0.045));
}

.balanced-editorial {
  position: relative;
  margin-inline: 0;
  padding: clamp(32px, 4.8vw, 62px);
  border: 1px solid rgba(6, 17, 45, 0.11);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), transparent 55%), var(--brand-surface);
  box-shadow: var(--brand-shadow);
}
.balanced-editorial::after {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(32px, 4.8vw, 62px);
  width: 104px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-navy));
}
.story-highlight {
  position: relative;
  margin: 25px 0 0 -20px;
  padding: 22px 25px 4px 21px;
  border: 0;
  border-left: 3px solid var(--brand-gold);
  background: linear-gradient(90deg, rgba(199, 168, 112, 0.13), transparent 88%);
}
.two-column-copy {
  position: relative;
  padding: clamp(30px, 4.5vw, 54px);
  border: 1px solid rgba(6, 17, 45, 0.11);
  border-radius: 8px;
  background: rgba(255, 252, 243, 0.82);
  box-shadow: var(--brand-shadow-soft);
}
.two-column-copy::after {
  content: "";
  position: absolute;
  inset: -1px 48px auto auto;
  width: 92px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-gold));
}
.section-heading { position: relative; padding-left: 27px; }
.section-heading::before {
  content: "";
  position: absolute;
  inset: 5px auto 5px 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(var(--brand-gold), rgba(199, 168, 112, 0.12));
}
.page-slug-about .purpose-grid {
  overflow: hidden;
  border: 1px solid rgba(199, 168, 112, 0.24);
  border-radius: 8px;
  background: radial-gradient(ellipse at 85% 10%, rgba(199, 168, 112, 0.13), transparent 34%), linear-gradient(120deg, #06112d, #102247);
  box-shadow: 0 28px 66px rgba(6, 17, 45, 0.2);
}

/* Shared premium card material. */
.step, .principle, .service-tile:not(.service-featured), .bitrix-steps article, .discussion-list article, .fit-list li {
  border-color: rgba(6, 17, 45, 0.12);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 250, 234, 0.12)), var(--brand-paper);
  box-shadow: inset 0 2px rgba(199, 168, 112, 0.3), 0 12px 30px rgba(6, 17, 45, 0.055);
  transition: transform 320ms var(--motion-ease), box-shadow 320ms var(--motion-ease), border-color 260ms;
}
.principle::after { display: none; content: none; }
.step:hover, .principle:hover, .service-tile:not(.service-featured):hover, .bitrix-steps article:hover, .discussion-list article:hover, .fit-list li:hover {
  position: relative;
  z-index: 2;
  transform: translateY(-6px);
  border-color: rgba(199, 168, 112, 0.65);
  box-shadow: inset 0 3px var(--brand-gold), 0 22px 48px rgba(6, 17, 45, 0.11);
}
.steps { gap: 14px !important; border: 0; }
.steps > div + div .step { border-left: 1px solid rgba(6, 17, 45, 0.12); }
.step { border: 1px solid rgba(6, 17, 45, 0.12); }
.service-featured {
  border: 1px solid rgba(199, 168, 112, 0.34);
  border-radius: 8px;
  background: radial-gradient(ellipse at 82% 12%, rgba(199, 168, 112, 0.13), transparent 36%), linear-gradient(125deg, #06112d, #102247);
  box-shadow: 0 28px 64px rgba(6, 17, 45, 0.21);
}
.service-tile:not(.service-featured):hover .service-icon {
  transform: translateY(-3px) rotate(-3deg);
  border-color: rgba(199, 168, 112, 0.62);
  background: rgba(199, 168, 112, 0.15);
}
.bitrix-steps { gap: 12px; border: 0; }
.bitrix-steps article { border: 1px solid rgba(6, 17, 45, 0.12); }
.discussion-list { gap: 15px; }
.discussion-list article { border-left: 4px solid var(--brand-gold); }

/* Diagrams reuse the tapered, mirrored rail grammar without copying the mark. */
.concept-visual, .service-system-visual {
  border-radius: 8px;
  background: radial-gradient(ellipse at 65% 30%, rgba(199, 168, 112, 0.12), transparent 30%), linear-gradient(145deg, #06112d, #102247);
  box-shadow: 18px 20px 0 rgba(199, 168, 112, 0.16), var(--brand-shadow);
}
.concept-visual::before, .service-system-visual::before {
  background-image:
    linear-gradient(90deg, transparent, rgba(255, 250, 234, 0.035), transparent),
    linear-gradient(rgba(255, 250, 234, 0.055) 1px, transparent 1px);
  background-size: 100% 100%, 100% 54px;
}
.concept-visual span, .service-system-visual span {
  width: 16px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 250, 234, 0.22);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  clip-path: polygon(50% 0, 82% 10%, 82% 44%, 100% 38%, 50% 100%, 18% 90%, 18% 56%, 0 62%);
}
.concept-visual span:nth-child(1) { left: 24%; top: 25%; height: 120px; }
.concept-visual span:nth-child(2) { right: 34%; top: 17%; width: 13px; height: 190px; background: var(--brand-gold); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.concept-visual span:nth-child(3) { left: 62%; bottom: 18%; height: 92px; transform: scaleX(-1); }
.concept-visual i { border-color: rgba(255, 250, 234, 0.22); border-radius: 50% 0 50% 0; transform: rotate(45deg); }
.direction-concept i { border-radius: 50%; transform: none; }
.service-system-visual span:nth-child(1) { left: 20%; top: 20%; width: 12px; height: 100px; }
.service-system-visual span:nth-child(2) { right: 31%; top: 20%; width: 12px; height: 170px; background: var(--brand-gold); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.service-system-visual span:nth-child(3) { left: 48%; bottom: 15%; width: 12px; height: 80px; transform: scaleX(-1); }
.service-system-visual span:nth-child(4) { right: 17%; bottom: 20%; width: 12px; height: 116px; transform: scaleX(-1); }
.section[data-motion-active="true"] .concept-visual span:nth-child(odd), .section[data-motion-active="true"] .service-system-visual span:nth-child(odd) { animation: signal-float 9s ease-in-out infinite; }
.section[data-motion-active="true"] .concept-visual span:nth-child(even), .section[data-motion-active="true"] .service-system-visual span:nth-child(even) { animation: signal-float 11s ease-in-out -4s infinite reverse; }
.concept-visual:hover span:nth-child(3), .service-system-visual:hover span:nth-child(3), .service-system-visual:hover span:nth-child(4) { transform: scaleX(-1) translateY(-5px); }

/* Forms and navigation-like lists. */
.form-panel, .direct-contact {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(6, 17, 45, 0.12);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), transparent 56%), #f6efdf;
  box-shadow: var(--brand-shadow-soft);
}
.form-panel::after, .direct-contact::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0 auto;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-gold));
}
.form-panel > *, .direct-contact > * { position: relative; z-index: 1; }
input, textarea { transition: border-color 220ms, box-shadow 220ms, background-color 220ms; }
input:hover, textarea:hover { border-color: rgba(6, 17, 45, 0.45); }
input:focus, textarea:focus {
  border-color: var(--brand-gold);
  background: #fffdf8;
  outline: none;
  box-shadow: 0 0 0 4px rgba(199, 168, 112, 0.16);
}
.service-list a {
  position: relative;
  margin-block: 3px;
  padding-inline: 16px;
  border: 1px solid transparent;
}
.service-list a::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 999px;
  background: var(--brand-gold);
  transform: scaleY(0);
  transition: transform 260ms var(--motion-ease);
}
.service-list a:hover {
  padding-inline: 22px 16px;
  border-color: rgba(6, 17, 45, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 12px 30px rgba(6, 17, 45, 0.055);
}
.service-list a:hover::before { transform: scaleY(1); }
.process-flow span { transition: transform 250ms var(--motion-ease), background-color 250ms; }
.process-flow span:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.3); }

/* Closing panels use the favicon as their only decorative visual. */
.document-closing__panel, .contact-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(199, 168, 112, 0.25);
  border-radius: 8px;
  background: var(--navy);
  box-shadow: 0 30px 70px rgba(6, 17, 45, 0.21);
}
.document-closing__panel > *, .contact-panel > * { position: relative; z-index: 1; }
.document-closing__panel::after, .contact-panel::after { display: none; }
.cta-favicon {
  display: block;
  flex: 0 0 clamp(105px, 10vw, 140px);
  width: clamp(105px, 10vw, 140px);
  aspect-ratio: 1;
  overflow: hidden;
}
.cta-favicon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.45);
}
.button { position: relative; overflow: hidden; box-shadow: 0 10px 24px rgba(6, 17, 45, 0.12); }
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 250, 234, 0.18) 50%, transparent 75%);
  transform: translateX(-125%);
  transition: transform 650ms var(--motion-ease);
  pointer-events: none;
}
.button:hover::before { transform: translateX(125%); }

.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.site-footer > .container { position: relative; z-index: 1; }
.site-footer::before { display: none; }
.footer-favicon {
  display: block;
  width: 112px;
  aspect-ratio: 1;
  overflow: hidden;
}
.footer-favicon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.45);
}

/* Why InnovaFlare: a focused diagnostic checklist instead of stacked cards. */
.page-slug-why-innovaflare .why-friction > .container { padding-block: 0; background: transparent; }
.why-friction__shell {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  overflow: hidden;
  border: 1px solid rgba(6, 17, 45, .16);
  background: var(--cream);
  box-shadow: 0 24px 58px rgba(6, 17, 45, .1);
}
.why-friction__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 5vw, 68px);
  background: var(--navy);
  color: var(--cream);
}
.why-friction__intro .eyebrow { color: rgba(255, 250, 234, .62); }
.why-friction__intro h2 { max-width: 9ch; margin: 22px 0 24px; color: var(--cream); font-size: clamp(38px, 4.4vw, 58px); }
.why-friction__intro > p { max-width: 31rem; margin: 0; color: rgba(255, 250, 234, .68); font-size: 16px; line-height: 1.65; }
.why-friction__signals { padding: clamp(30px, 4vw, 54px); }
.why-friction__label { margin: 0 0 12px; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.why-friction__list { display: block; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: friction-signal; }
.why-friction__list li {
  counter-increment: friction-signal;
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 76px;
  padding: 18px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--navy);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.35;
  transition: padding 220ms var(--motion-ease), background-color 220ms;
}
.why-friction__list li > i {
  position: static;
  align-self: center;
  flex: 0 0 28px;
  width: 28px;
  color: rgba(6, 17, 45, .7);
  font-size: 15px;
  text-align: center;
}
.fit-list__content { display: block; flex: 1 1 0; min-width: 0; }
.fit-list__title, .fit-list__description { display: block; min-width: 0; }
.fit-list__description { margin-top: 5px; color: var(--muted); font-size: 15px; }
.why-friction__list li::before {
  content: counter(friction-signal, decimal-leading-zero);
  position: static;
  color: rgba(6, 17, 45, .46);
  font-size: 11px;
  letter-spacing: .12em;
  flex: 0 0 44px;
}
.why-friction__list li:hover { z-index: auto; padding-inline: 12px; transform: none; border-color: var(--line); background: rgba(6, 17, 45, .03); box-shadow: none; }
.why-friction__list li:last-child { border-bottom: 0; }

/* Why InnovaFlare: business-first engagement, expressed as one continuous sequence. */
.why-business-first { border-block: 1px solid var(--line); background: var(--brand-paper); overflow: visible !important; }
.why-business-first__header {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: end;
  padding-bottom: clamp(38px, 5vw, 60px);
}
.why-business-first__title h2 { max-width: 11ch; margin: 22px 0 0; font-size: clamp(40px, 4.5vw, 60px); }
.why-business-first__copy { max-width: 38rem; padding-top: 8px; }
.why-business-first__copy p { color: var(--muted); font-size: 18px; line-height: 1.65; }
.why-business-first__copy p + p { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--navy); }
.why-business-first__sequence-label {
  position: relative !important;
  z-index: 4;
  display: block !important;
  min-height: 30px;
  padding: 0 0 12px !important;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 18px;
  text-transform: uppercase;
}
.why-business-first__sequence {
  position: relative !important;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--navy);
  list-style: none;
  overflow: visible !important;
}
.why-business-first__sequence li {
  display: block !important;
  min-height: 210px;
  padding: 25px clamp(18px, 2.5vw, 32px) !important;
  border-right: 1px solid var(--line);
  overflow: visible !important;
  transition: background-color 220ms var(--motion-ease);
}
.why-business-first__sequence li:last-child { border-right: 0; }
.why-business-first__sequence li:hover { background: rgba(6, 17, 45, .035); }
.why-business-first__sequence span { display: block !important; margin: 0 0 50px !important; color: var(--muted); font-size: 11px; letter-spacing: .12em; line-height: 18px; }
.why-business-first__sequence strong { display: block !important; font-family: var(--serif); font-size: clamp(25px, 2.1vw, 31px); font-weight: 400; line-height: 1.1; }
.why-business-first__sequence p { margin: 13px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
/* These editorial sections must never be hidden by the global scroll-reveal state. */
.why-business-first,
.why-business-first[data-motion-active="false"],
.why-business-first[data-motion-active="true"],
.why-business-first > .container,
.why-business-first__header,
.why-business-first__title,
.why-business-first__copy,
.why-business-first__sequence-label,
.why-business-first__sequence,
.why-business-first__sequence > li,
.why-business-first .motion-item,
.why-friction .motion-item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  translate: none !important;
}
.why-business-first .motion-item,
.why-friction .motion-item { transition: none !important; }

/* Keep the connected-engagement sequence completely static during page scroll. */
.why-business-first__sequence-label,
.why-business-first__sequence,
.why-business-first__sequence > li,
.why-business-first__sequence span,
.why-business-first__sequence strong,
.why-business-first__sequence p {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.why-business-first__sequence > li:hover { background: transparent; }

@keyframes signal-breathe {
  0%, 100% { transform: scaleY(0.88); opacity: 0.58; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes signal-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@keyframes signal-fade {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 0.72; }
}

@media (max-width: 991px) {
  .banner-mosaic { width: 126px; gap: 10px; }
  .document-intro::before { right: -20px; }
  .balanced-editorial { padding: 35px 28px; }
  .two-column-copy { padding: 35px 30px; }
  .bitrix-steps { gap: 10px; }
  .cta-favicon { flex-basis: 132px; width: 132px; }
  .why-friction__shell { grid-template-columns: 1fr; row-gap: 12px; }
  .why-friction__intro h2 { max-width: 13ch; }
  .why-business-first__header { grid-template-columns: 1fr; gap: 30px; }
  .why-business-first__title h2 { max-width: 14ch; }
  .why-business-first__sequence { grid-template-columns: 1fr 1fr; }
  .why-business-first__sequence li { min-height: 185px; }
  .why-business-first__sequence li:nth-child(2) { border-right: 0; }
  .why-business-first__sequence li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .editorial-banner__container { grid-template-columns: minmax(0, 1fr) 72px; }
  .banner-mosaic { width: 72px; height: 76px; gap: 5px; }
  .banner-mosaic span { width: 5px; }
  .banner-mosaic span:nth-child(1), .banner-mosaic span:nth-child(5) { height: 34px; }
  .banner-mosaic span:nth-child(2), .banner-mosaic span:nth-child(4) { height: 54px; }
  .banner-mosaic span:nth-child(3) { width: 4px; height: 72px; }
  :where(#main > .section:not(.hero):not(.document-closing), .page-content > .section:not(.document-intro):not(.document-closing))::before { width: 34vw; opacity: 0.56; }
  .document-intro::before { right: -95px; width: 150px; opacity: 0.58; }
  .section-media { box-shadow: 12px 14px 0 rgba(199, 168, 112, 0.19), 0 20px 44px rgba(6, 17, 45, 0.1); }
  .section-media::before { inset: -8px 15px 15px -8px; }
  .corporate-hero-visual { box-shadow: 12px 14px 0 rgba(199, 168, 112, 0.2), 0 22px 48px rgba(6, 17, 45, 0.12); }
  .corporate-hero-visual::before { inset: -8px 14px 14px -8px; }
  .balanced-editorial { margin-inline: -4px; padding: 28px 20px; box-shadow: 0 17px 40px rgba(6, 17, 45, 0.075); }
  .balanced-editorial::after { left: 20px; }
  .story-highlight { margin-left: 0; padding: 19px 18px 3px; }
  .two-column-copy { padding: 28px 22px; box-shadow: 0 14px 34px rgba(6, 17, 45, 0.065); }
  .section-heading { padding-left: 19px; }
  .steps, .bitrix-steps { gap: 10px !important; }
  .step, .principle, .service-tile:not(.service-featured), .bitrix-steps article, .discussion-list article, .fit-list li {
    box-shadow: inset 0 2px rgba(199, 168, 112, 0.26), 0 8px 22px rgba(6, 17, 45, 0.045);
  }
  .concept-visual span:nth-child(1) { height: 86px; }
  .concept-visual span:nth-child(2) { height: 136px; }
  .concept-visual span:nth-child(3) { height: 70px; }
  .form-panel, .direct-contact { box-shadow: 0 15px 36px rgba(6, 17, 45, 0.07); }
  .shared-cta .contact-panel { align-items: flex-start; flex-direction: column; }
  .cta-favicon { flex-basis: 96px; width: 96px; align-self: center; }
  .footer-favicon { flex: 0 0 88px; width: 88px; }
  .why-friction { padding-block: 40px; }
  .why-friction__intro, .why-friction__signals { padding: 30px 22px; }
  .why-friction__intro h2 { margin-block: 18px; font-size: 38px; }
  .why-friction__list li { gap: 10px; min-height: 0; padding-block: 17px; font-size: 17px; }
  .why-friction__list li::before { flex-basis: 34px; }
  .why-friction__list li > i { width: 24px; font-size: 13px; }
  .why-business-first__header { padding-bottom: 34px; }
  .why-business-first__title h2 { font-size: 39px; }
  .why-business-first__copy p { font-size: 17px; }
  .why-business-first__sequence { grid-template-columns: 1fr; }
  .why-business-first__sequence li { min-height: 0; padding: 21px 4px !important; border-right: 0; border-bottom: 1px solid var(--line); }
  .why-business-first__sequence li:nth-child(2) { border-right: 0; }
  .why-business-first__sequence li:last-child { border-bottom: 0; }
  .why-business-first__sequence span { margin-bottom: 18px !important; }
}

@media (hover: none) {
  .corporate-hero-visual:hover, .section-media:hover, .step:hover, .principle:hover, .service-tile:not(.service-featured):hover,
  .bitrix-steps article:hover, .discussion-list article:hover, .fit-list li:hover, .process-flow span:hover { transform: none; }
  .section-media:hover img { transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-mosaic span, .concept-visual span, .service-system-visual span {
    animation: none !important;
  }
}

/* Keep the Bitrix24 legal link label and arrow aligned as one compact action. */
.page-slug-bitrix24 .bitrix-legal .text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 0;
  vertical-align: baseline;
  white-space: nowrap;
}

.page-slug-bitrix24 .bitrix-legal .text-link > i {
  flex: 0 0 auto;
  font-size: 0.82em;
  line-height: 1;
}

/* Native scrolling and permanent section visibility across every page. */
html {
  overflow-y: auto !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  overscroll-behavior-y: auto !important;
}
body {
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  overscroll-behavior-y: auto !important;
}
main, #main, .page-content {
  overflow: visible !important;
}
main > section,
#main > section,
.page-content > section,
.page-content > .section {
  opacity: 1 !important;
  visibility: visible !important;
  content-visibility: visible !important;
  transform: none !important;
  translate: none !important;
}

/* No abstract line-and-shape panels: content and real IT photography only. */
.banner-mosaic,
.concept-visual,
.service-system-visual,
.transformation-visual {
  display: none !important;
}
.editorial-banner__container {
  grid-template-columns: minmax(0, 1fr) !important;
}
.balanced-editorial--copy-only {
  display: block;
}
.balanced-editorial--copy-only > .story {
  width: 100%;
  max-width: 850px;
  margin-inline: auto;
  padding: 0 !important;
}
.service-featured {
  display: block;
}
.service-featured .service-tile-content {
  max-width: 850px;
}
:where(#main > .section:not(.hero):not(.document-closing), .page-content > .section:not(.document-intro):not(.document-closing))::before,
.document-intro::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* This content section is intentionally static and must never participate in
   scroll reveals, clipping, masks, or compositor-driven visibility changes. */
.why-business-first {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  content-visibility: visible !important;
  contain: none !important;
  isolation: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  filter: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}
.why-business-first::before,
.why-business-first::after {
  display: none !important;
  content: none !important;
}
.why-business-first > .container,
.why-business-first .why-business-first__header,
.why-business-first .why-business-first__title,
.why-business-first .why-business-first__copy,
.why-business-first .why-business-first__sequence-label,
.why-business-first .why-business-first__sequence,
.why-business-first .why-business-first__sequence > li {
  opacity: 1 !important;
  visibility: visible !important;
  content-visibility: visible !important;
  contain: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  filter: none !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}
.why-business-first > .container {
  position: relative !important;
  z-index: 2 !important;
}

/* Bitrix24 closing panel: copy and CTA stay together; the mark anchors the corner. */
.page-slug-bitrix24 .document-closing__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: start;
  padding-right: clamp(180px, 20vw, 250px);
}

.page-slug-bitrix24 .document-closing__panel > div {
  max-width: 760px;
}

.page-slug-bitrix24 .document-closing__panel > .button {
  margin-top: 30px;
}

.page-slug-bitrix24 .document-closing__panel > .cta-favicon {
  position: absolute;
  top: 50%;
  right: clamp(32px, 4vw, 58px);
  width: clamp(96px, 9vw, 128px);
  height: auto;
  flex: none;
  transform: translateY(-50%);
}

@media (max-width: 991px) {
  .page-slug-bitrix24 .document-closing__panel {
    padding-right: 160px;
  }

  .page-slug-bitrix24 .document-closing__panel > .cta-favicon {
    top: 50%;
    right: 30px;
    width: 104px;
  }
}

@media (max-width: 600px) {
  .page-slug-bitrix24 .document-closing__panel {
    padding-top: 110px;
    padding-right: 24px;
  }

  .page-slug-bitrix24 .document-closing__panel > .cta-favicon {
    top: 22px;
    right: auto;
    left: 50%;
    width: 72px;
    transform: translateX(-50%);
  }

  .page-slug-bitrix24 .document-closing__panel > .button {
    width: 100%;
    margin-top: 24px;
  }
}