/* Mobile editorial navigation and the expanded company page. */

.about-page {
  padding-top: 0;
  background:
    radial-gradient(circle at 12% 24%, rgba(49, 87, 255, .08), transparent 28rem),
    #f4f4fb;
}

.about-editorial-hero,
.about-facts,
.about-story-section,
.about-director-section,
.about-media-section,
.about-contact-section {
  width: min(100%, 1200px);
  margin-inline: auto;
}

.about-editorial-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 32px;
  padding: 50px 22px 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(86, 98, 255, .2), transparent 22rem),
    radial-gradient(circle at 76% 78%, rgba(255, 127, 33, .16), transparent 18rem),
    #020617;
  color: #fff;
}

.about-kicker,
.about-section-intro > p:first-child,
.about-contact-copy > p:first-child {
  margin: 0 0 14px;
  color: #8ea0ff;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-hero-copy h1,
.about-section-intro h2,
.about-contact-copy h2 {
  margin: 0;
  color: #07102e;
  font-size: 38px;
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.05em;
}

.about-hero-copy h1 {
  color: #fff;
}

.about-hero-copy h1 span,
.about-section-intro h2 span,
.about-contact-copy h2 span {
  background: linear-gradient(100deg, #3157ff 0%, #8d72ec 52%, #ff7f21 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.about-hero-lead,
.about-section-intro > p:last-child {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 17px;
  line-height: 1.52;
}

.about-anchor-nav {
  display: flex;
  gap: 9px;
  margin-top: 26px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.about-anchor-nav::-webkit-scrollbar {
  display: none;
}

.about-anchor-nav a {
  min-height: 42px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.about-anchor-nav a:focus-visible {
  outline: 3px solid rgba(142, 160, 255, .46);
  outline-offset: 3px;
}

.about-hero-portrait {
  position: relative;
  width: min(100%, 360px);
  min-height: 390px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.about-hero-portrait::before {
  content: "";
  position: absolute;
  inset: 38px 0 0;
  border: 1px solid rgba(137, 151, 255, .28);
  border-radius: 44% 44% 0 0;
  background: linear-gradient(160deg, rgba(49, 87, 255, .16), rgba(255, 127, 33, .12));
}

.about-hero-portrait img {
  position: relative;
  z-index: 1;
  width: min(100%, 350px);
  height: auto;
  display: block;
}

.about-hero-portrait figcaption {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 3px;
  margin: 0 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(2, 6, 23, .76);
  backdrop-filter: blur(12px);
}

.about-hero-portrait figcaption b {
  font-size: 17px;
}

.about-hero-portrait figcaption span {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

.about-facts article {
  min-width: 0;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 16px;
  border: 1px solid rgba(49, 87, 255, .09);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(24, 34, 74, .06);
}

.about-facts strong {
  color: #3157ff;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.04em;
}

.about-facts span {
  color: #505978;
  font-size: 13px;
  line-height: 1.38;
}

.about-story-section,
.about-director-section,
.about-media-section,
.about-contact-section {
  padding: 54px 18px;
}

.about-section-intro {
  max-width: 720px;
}

.about-section-intro > p:last-child {
  color: #505978;
}

.about-story-grid,
.about-director-layout {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.about-story-grid article,
.about-director-layout article {
  min-width: 0;
  padding: 24px 21px;
  border: 1px solid rgba(49, 87, 255, .1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 15px 36px rgba(24, 34, 74, .07);
}

.about-story-grid article > span {
  color: #8d72ec;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .08em;
}

.about-story-grid h3,
.about-director-layout h3 {
  margin: 17px 0 12px;
  color: #07102e;
  font-size: 24px;
  line-height: 1.06;
}

.about-story-grid p,
.about-director-layout p,
.about-director-layout li,
.about-media-note,
.about-contact-copy > p:not(:first-child) {
  color: #505978;
  font-size: 16px;
  line-height: 1.55;
}

.about-director-section {
  width: 100%;
  max-width: none;
  background:
    radial-gradient(circle at 86% 20%, rgba(77, 92, 255, .22), transparent 25rem),
    #020617;
  color: #fff;
}

.about-director-section > * {
  width: min(100%, 1200px);
  margin-right: auto;
  margin-left: auto;
}

.about-section-intro-light h2 {
  color: #fff;
}

.about-director-layout article {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .07);
  box-shadow: none;
}

.about-director-layout h3 {
  color: #fff;
}

.about-director-role {
  color: #9cabff !important;
  font-weight: 800;
}

.about-director-layout p,
.about-director-layout li {
  color: rgba(255, 255, 255, .74);
}

.about-director-layout ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
}

.about-director-layout li {
  position: relative;
  padding-left: 28px;
}

.about-director-layout li::before {
  content: "";
  position: absolute;
  top: .36em;
  left: 0;
  width: 16px;
  height: 9px;
  border-bottom: 2px solid #ff8f3e;
  border-left: 2px solid #596fff;
  transform: rotate(-45deg);
}

.about-media-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
}

.about-media-list span {
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid rgba(49, 87, 255, .12);
  border-radius: 18px;
  background: #fff;
  color: #07102e;
  font-size: 15px;
  font-weight: 850;
  text-align: center;
  box-shadow: 0 12px 28px rgba(24, 34, 74, .055);
}

.about-media-list span:last-child {
  grid-column: 1 / -1;
}

.about-media-note {
  margin: 18px 0 0;
  padding: 18px 20px;
  border-left: 3px solid #ff7f21;
  border-radius: 4px 16px 16px 4px;
  background: #fff;
}

.about-contact-section {
  display: grid;
  gap: 26px;
  margin-bottom: 40px;
}

.about-contact-copy > p:not(:first-child) {
  margin: 24px 0 18px;
}

.about-contact-copy > a {
  display: block;
  width: fit-content;
  margin-top: 12px;
  color: #3157ff;
  font-size: 18px;
  font-weight: 850;
}

.about-contact-form {
  padding: 24px 20px;
  border: 1px solid rgba(49, 87, 255, .1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(24, 34, 74, .07);
}

@media (max-width: 767px) {
  /* The archive menu exists in the template; expose it as a compact rail. */
  .editorial-page .insight-filters {
    min-height: 0;
    display: flex;
    gap: 8px;
    padding: 16px 18px 6px;
    overflow-x: auto;
    background: #f4f4fb;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .editorial-page .insight-filters::-webkit-scrollbar {
    display: none;
  }

  .editorial-page .insight-filter {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 16px;
    border: 1px solid rgba(49, 87, 255, .16);
    border-radius: 999px;
    background: #fff;
    color: #253052;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    scroll-snap-align: start;
  }

  .editorial-page .insight-filter[aria-current="page"] {
    border-color: transparent;
    background: linear-gradient(100deg, #3157ff 0%, #8d72ec 58%, #ff7f21 120%);
    color: #fff;
  }

  .editorial-page .insight-filter:focus-visible {
    outline: 3px solid rgba(49, 87, 255, .3);
    outline-offset: 2px;
  }

  .editorial-page .insight-archive-card[hidden] {
    display: none;
  }

  /* Replace the four-service mobile ending with the accepted reading flow. */
  .article-shell .article-service-links {
    display: none;
  }

  .article-shell .article-desktop-ending {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0 18px 42px;
  }

  .article-shell .article-related {
    display: grid;
    gap: 16px;
    padding: 22px 18px;
    border-radius: 20px;
    background: #020617;
  }

  .article-shell .article-related h2 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.06;
  }

  .article-shell .article-related > div {
    display: grid;
    gap: 9px;
  }

  .article-shell .article-related a {
    min-height: 0;
    display: grid;
    gap: 6px;
    padding: 15px 14px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 14px;
    background: rgba(255, 255, 255, .075);
    color: #fff;
  }

  .article-shell .article-related a span {
    color: #9cabff;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .article-shell .article-related a b {
    font-size: 15px;
    line-height: 1.35;
  }

  .article-shell .article-topic-service {
    display: grid;
    gap: 16px;
    padding: 20px 18px;
    border: 1px solid rgba(49, 87, 255, .12);
    border-radius: 18px;
    background: #f8f9ff;
  }

  .article-shell .article-topic-service > p {
    margin: 0;
    color: #46506d;
    font-size: 15px;
    line-height: 1.5;
  }

  .article-shell .article-topic-cta {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-radius: 13px;
    background: linear-gradient(100deg, #3157ff 0%, #8d72ec 52%, #ff7f21 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(84, 80, 222, .2);
  }
}

@media (min-width: 768px) {
  .about-editorial-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    align-items: end;
    gap: 48px;
    padding: 94px 40px 0;
  }

  .about-hero-copy {
    align-self: center;
    padding-bottom: 70px;
  }

  .about-hero-copy h1,
  .about-section-intro h2,
  .about-contact-copy h2 {
    font-size: clamp(48px, 5.25vw, 68px);
  }

  .about-hero-lead,
  .about-section-intro > p:last-child {
    max-width: 700px;
    font-size: 18px;
  }

  .about-hero-portrait {
    min-height: 560px;
  }

  .about-hero-portrait img {
    width: min(100%, 500px);
  }

  .about-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 30px 40px;
  }

  .about-facts article {
    min-height: 170px;
    padding: 24px 21px;
  }

  .about-facts strong {
    font-size: 28px;
  }

  .about-facts span {
    font-size: 15px;
  }

  .about-story-section,
  .about-media-section,
  .about-contact-section {
    padding: 86px 40px;
  }

  .about-director-section {
    padding: 86px 40px;
  }

  .about-story-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 42px;
  }

  .about-story-grid article {
    min-height: 290px;
    padding: 30px 27px;
  }

  .about-director-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 42px;
  }

  .about-director-layout article {
    padding: 34px;
  }

  .about-media-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  .about-media-list span:last-child {
    grid-column: auto;
  }

  .about-media-note {
    max-width: 760px;
  }

  .about-contact-section {
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    align-items: start;
    gap: 56px;
  }

  .about-contact-form {
    padding: 30px;
  }
}

@media (min-width: 1024px) {
  .about-section-intro {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    column-gap: 56px;
    align-items: end;
  }

  .about-section-intro > p:first-child,
  .about-section-intro h2 {
    grid-column: 1;
  }

  .about-section-intro > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin: 0 0 6px;
  }

  .about-editorial-hero {
    min-height: 690px;
    padding: 130px 56px 0;
  }

  .about-story-section,
  .about-media-section,
  .about-contact-section {
    padding-right: 56px;
    padding-left: 56px;
  }

  .about-director-section {
    padding-right: max(56px, calc((100vw - 1200px) / 2 + 56px));
    padding-left: max(56px, calc((100vw - 1200px) / 2 + 56px));
  }
}

/* Common article archive controls and in-article reading sequence. */
.editorial-page .insight-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 24px max(18px, var(--relait-gutter, 18px)) 8px;
	background: #fff;
}

.editorial-page .insight-filter,
.editorial-page .insight-filters button {
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 18px;
	border: 1px solid rgba(49, 87, 255, .18);
	border-radius: 999px;
	background: #f4f6ff;
	color: #253052;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

.editorial-page .insight-filter[aria-current="page"],
.editorial-page .insight-filters button[aria-pressed="true"] {
	border-color: transparent;
	background: linear-gradient(100deg, #3157ff 0%, #8d72ec 58%, #ff7f21 120%);
	color: #fff;
}

.article-shell .article-sequence {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	margin-top: 22px;
	font-size: 14px;
	font-weight: 750;
}

.article-shell .article-sequence a {
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	color: #29214c;
	text-decoration: none;
}

.article-shell .article-sequence__all {
	justify-content: center;
	padding: 0 16px;
	border: 1px solid rgba(49, 87, 255, .2);
	border-radius: 999px;
	background: #fff;
	color: #4938dd;
}

.article-shell .article-sequence__next {
	justify-content: flex-end;
	text-align: right;
}

.article-shell .article-sequence a:hover,
.article-shell .article-sequence a:focus-visible {
	color: #4938dd;
}

@media (max-width: 640px) {
	.article-shell .article-sequence {
		grid-template-columns: 1fr 1fr;
	}

	.article-shell .article-sequence__all {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.article-shell .article-sequence__previous {
		grid-column: 1;
		grid-row: 2;
	}

	.article-shell .article-sequence__next {
		grid-column: 2;
		grid-row: 2;
	}

	.article-shell .article-sequence > span {
		display: none;
	}
}

/* Archive navigation is server-side so that every transferred article remains reachable. */
.editorial-page .insights-pagination {
  display: flex;
  justify-content: center;
  padding: 0 18px 54px;
}

.editorial-page .insights-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.editorial-page .insights-pagination a,
.editorial-page .insights-pagination span {
  display: inline-flex;
  min-width: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(36, 30, 72, .14);
  border-radius: 999px;
  background: #fff;
  color: #171427;
  font-size: 14px;
  font-weight: 750;
}

.editorial-page .insights-pagination .current {
  border-color: #4c38f2;
  background: linear-gradient(105deg, #4b3cff, #c83bb2);
  color: #fff;
}

.editorial-page .insights-pagination a:hover,
.editorial-page .insights-pagination a:focus-visible {
  border-color: #5b43ff;
  color: #4938dd;
}

.editorial-page .insights-pagination a:focus-visible {
  outline: 3px solid rgba(87, 50, 255, .35);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .editorial-page .insights-pagination {
    padding: 0 42px 64px;
  }
}

@media (min-width: 1024px) {
  .editorial-page .insights-pagination {
    padding: 0 76px 80px;
  }
}