html.company-page {
  --title-size: clamp(22px, 2.2vw, 36px);
  --subtitle-size: clamp(15px, 1.08vw, 19px);
  --title-color: #f3f7fb;
  --text-color: rgba(233, 240, 246, 0.92);
  --eyebrow-color: rgba(170, 212, 238, 0.9);
  --company-shell-border: rgba(104, 148, 176, 0.34);
  --company-card-border: rgba(102, 146, 176, 0.4);
  --company-card-bg: linear-gradient(
    180deg,
    rgba(6, 14, 23, 0.9),
    rgba(4, 10, 18, 0.94)
  );
}

html.company-page body {
  background:
    radial-gradient(
      900px 540px at 8% 12%,
      rgba(43, 92, 128, 0.12),
      transparent 62%
    ),
    radial-gradient(
      820px 480px at 92% 86%,
      rgba(20, 88, 126, 0.11),
      transparent 58%
    ),
    linear-gradient(180deg, #03070c 0%, #06101a 100%);
}

html.company-page .pageHero,
html.company-page .aboutSplitSlide {
  position: relative;
  overflow: hidden;
}

html.company-page .pageHero__panel,
html.company-page .pageHero__bg,
html.company-page .pageHero__shade {
  display: none;
}

html.company-page .pageHero__inner,
html.company-page .aboutSplitSlide__wrap {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  padding-inline: clamp(16px, 1.6vw, 26px);
}

html.company-page .pageHero__inner {
  padding-top: clamp(5px, 1svh, 12px);
  padding-bottom: clamp(20px, 3.6svh, 34px);
}

html.company-page .aboutSplitSlide {
  padding: 0;
}

/* Width fix: slide 2 was narrower because .aboutSplitSlide__wrap also had the global .container width cap (1180px).
   Hero slide was using the shell width directly (1200px / viewport-based), so both slides ended up different.
   Make the About wrap full-width so both shells resolve from the same width rules. */
html.company-page .aboutSplitSlide__wrap.container {
  width: 100%;
  max-width: none;
}

html.company-page .pageHero__deck--company,
html.company-page .aboutSplitSlide__shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(1200px, calc(100vw - 34px));
  min-height: min(600px, calc(88svh - 122px));
  margin: 0 auto;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--company-shell-border);
  border-radius: 7px;
  background: rgba(6, 12, 18, 0.42);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 360px);
  grid-template-areas: "copy facts";
  align-content: center;
  align-items: center;
  column-gap: clamp(34px, 4.4vw, 74px);
}

html.company-page .pageHero__deck--company::before,
html.company-page .aboutSplitSlide__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: var(--company-shell-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  filter: blur(3px) saturate(0.92) contrast(1.02) brightness(0.84);
}

html.company-page .pageHero__deck--company::after,
html.company-page .aboutSplitSlide__shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

html.company-page .pageHero__deck--company::after {
  background:
    radial-gradient(
      28% 48% at 14% 24%,
      rgba(2, 7, 12, 0.82) 0%,
      rgba(2, 7, 12, 0.6) 38%,
      rgba(2, 7, 12, 0.16) 72%,
      transparent 100%
    ),
    radial-gradient(
      20% 34% at 38% 56%,
      rgba(3, 9, 15, 0.76) 0%,
      rgba(3, 9, 15, 0.24) 62%,
      transparent 100%
    ),
    radial-gradient(
      18% 24% at 88% 18%,
      rgba(5, 11, 18, 0.58) 0%,
      rgba(5, 11, 18, 0.08) 70%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgba(4, 9, 15, 0.82) 0%,
      rgba(4, 9, 15, 0.62) 28%,
      rgba(4, 9, 15, 0.34) 52%,
      rgba(4, 9, 15, 0.16) 66%,
      rgba(4, 9, 15, 0.3) 76%,
      rgba(4, 9, 15, 0.6) 100%
    ),
    linear-gradient(180deg, rgba(6, 12, 20, 0.2) 0%, rgba(6, 12, 20, 0.48) 100%);
}

html.company-page .pageHero__content--company,
html.company-page .aboutSplitSlide__content {
  grid-area: copy;
  min-width: 0;
  max-width: min(780px, 100%);
  display: grid;
  align-content: start;
  gap: clamp(18px, 2.4vh, 26px);
  padding: 0;
}

html.company-page .pageHero__aside,
html.company-page .aboutSplitSlide__rail {
  grid-area: facts;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  align-self: center;
}

html.company-page .pageHero__titleBlock,
html.company-page .aboutSplitSlide__titleBlock,
html.company-page .pageHero__copyBlock,
html.company-page .aboutSplitSlide__copyBlock {
  display: block;
  min-width: 0;
}

html.company-page .pageHero__content--company .pageHero__eyebrow,
html.company-page .aboutSplitSlide__eyebrow {
  margin: 0;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eyebrow-color);
}

html.company-page .pageHero__content--company .pageHero__title,
html.company-page .aboutSplitSlide__title {
  margin: 0;
  max-width: 95%;
  font-family:
    Rajdhani, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.3vw, 32px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--title-color);
  text-wrap: balance;
}

html.company-page .pageHero__text,
html.company-page .aboutSplitSlide__text {
  margin: 0;
  /* max-width: min(34ch, 100%); */
  /* max-width: 95%; */
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: clamp(17px, 1.16vw, 24px);
  /* font-size: 2.5dvh; */

  font-weight: 200;
  line-height: 1.45;
  color: var(--text-color);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

html.company-page .pageHero__note,
html.company-page .aboutSplitSlide__note {
  margin: 0;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(210, 222, 232, 0.86);
}

html.company-page .aboutSplitSlide__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html.company-page .aboutSplitSlide__pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(113, 157, 188, 0.34);
  border-radius: 999px;
  background: rgba(5, 10, 18, 0.48);
  color: rgba(230, 238, 245, 0.9);
  font:
    600 13px/1 Rajdhani,
    system-ui,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.company-page .pageHero__facts,
html.company-page .aboutSplitSlide__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(136px, 1fr);
  gap: 14px;
}

html.company-page .pageHero__factCard,
html.company-page .aboutSplitSlide__factCard {
  min-height: 136px;
  height: 100%;
  padding: 16px 16px 14px;
  border: 1px solid var(--company-card-border);
  border-radius: 12px;
  background: var(--company-card-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 8px 22px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

html.company-page .pageHero__factValue,
html.company-page .aboutSplitSlide__factValue {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: clamp(25px, 1.72vw, 28px);
  /* font-size: 3dvh; */
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #f7fbfd;
  text-transform: uppercase;
}

html.company-page .pageHero__factLabel,
html.company-page .aboutSplitSlide__factLabel {
  margin-top: 1px;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.14;
  text-transform: uppercase;
  color: rgba(239, 244, 247, 0.96);
}

html.company-page .pageHero__factSub,
html.company-page .aboutSplitSlide__factSub {
  margin-top: 8px;
  font-family: Rajdhani, system-ui, sans-serif;
  /* font-size: 2.3dvh; */
  font-size: clamp(16px, 1.72vw, 19px);

  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.18;
  color: rgba(180, 207, 225, 0.82);
}

html.company-page .pageHero__top,
html.company-page .pageHero__body,
html.company-page .aboutSplitSlide__top,
html.company-page .aboutSplitSlide__body {
  display: contents;
}

@media (max-width: 1240px) {
  html.company-page .pageHero__deck--company,
  html.company-page .aboutSplitSlide__shell {
    width: min(100%, calc(100vw - 24px));
    column-gap: 28px;
    transform: translateY(33px);
  }

}

@media (max-width: 980px) {
  html.company-page .pageHero__inner,
  html.company-page .aboutSplitSlide__wrap {
    padding-inline: 10px;
  }

  html.company-page .pageHero__deck--company,
  html.company-page .aboutSplitSlide__shell,
  html.company-page .aboutSplitSlide--rail-left .aboutSplitSlide__shell {
    /* width: min(100%, calc(100vw - 20px)); */
    width: 64dvh;
    min-height: min(760px, calc(100svh - 108px));
    padding: 24px 20px;
    border-radius: 22px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "facts";
    row-gap: 26px;
    align-content: center;
  }

  html.company-page .pageHero__content--company,
  html.company-page .aboutSplitSlide__content {
    max-width: none;
  }

}

@media (max-width: 640px) {
  html.company-page .pageHero__inner {
    padding-top: 86px;
    padding-bottom: 16px;
  }

  html.company-page .pageHero__deck--company,
  html.company-page .aboutSplitSlide__shell,
  html.company-page .aboutSplitSlide--rail-left .aboutSplitSlide__shell {
    min-height: min(760px, calc(100svh - 100px));
    padding: 20px 16px;
    border-radius: 18px;
    row-gap: 20px;
  }

  html.company-page .pageHero__content--company .pageHero__title,
  html.company-page .aboutSplitSlide__title {
    max-width: 40ch;
    font-size: 2.5dvh;
  }

  html.company-page .pageHero__text,
  html.company-page .aboutSplitSlide__text {
    font-size: 1.8dvh;
    line-height: 1.3;
  }

  html.company-page .pageHero__facts,
  html.company-page .aboutSplitSlide__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(112px, 1fr);
    gap: 10px;
  }

  html.company-page .pageHero__factCard,
  html.company-page .aboutSplitSlide__factCard {
    min-height: 112px;
    /* padding: 12px 12px 10px; */
    border-radius: 10px;
  }

  html.company-page .pageHero__factValue,
  html.company-page .aboutSplitSlide__factValue {
    font-size: clamp(16px, 5vw, 22px);
  }

  html.company-page .pageHero__factLabel,
  html.company-page .aboutSplitSlide__factLabel {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  html.company-page .pageHero__factSub,
  html.company-page .aboutSplitSlide__factSub {
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 430px) {
  html.company-page .pageHero__deck--company,
  html.company-page .aboutSplitSlide__shell,
  html.company-page .aboutSplitSlide--rail-left .aboutSplitSlide__shell {
    min-height: min(760px, calc(100svh - 94px));
  }

  html.company-page .pageHero__facts,
  html.company-page .aboutSplitSlide__facts {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(96px, 1fr);
  }

  html.company-page .pageHero__factCard,
  html.company-page .aboutSplitSlide__factCard {
    min-height: 96px;
  }
}

/* Company page: tall-phone portrait layouts should keep the fact cards in two columns
   instead of collapsing to a single vertical stack. This covers iPhone SE/390x844/414x896/430x932-style screens. */
@media (min-width: 360px) and (max-width: 430px) and (min-height: 660px) and (orientation: portrait) {
  html.company-page .pageHero__facts,
  html.company-page .aboutSplitSlide__facts {
    grid-template-columns: repeat(2, minmax(0, 50%));
    justify-content: space-between;
    align-content: start;
    grid-auto-rows: minmax(70px, auto);
    gap: 10px;
  }

  html.company-page .pageHero__factCard,
  html.company-page .aboutSplitSlide__factCard {
    min-height: 92px;
    padding: 12px 12px 10px;
    border-radius: 10px;
  }

  html.company-page .pageHero__factValue,
  html.company-page .aboutSplitSlide__factValue {
    font-size: 2.1dvh;
  }

  html.company-page .pageHero__factLabel,
  html.company-page .aboutSplitSlide__factLabel {
    margin-top: 7px;
    font-size: 1.6dvh;
    letter-spacing: 0.075em;
  }

  html.company-page .pageHero__factSub,
  html.company-page .aboutSplitSlide__factSub {
    margin-top: 5px;
    /* font-size: 9.5px; */
    font-size: 1.6dvh;
    line-height: 1.2;
  }
}

html.company-page .aboutSplitSlide__shell::after {
  background:
    radial-gradient(
      28% 48% at 14% 24%,
      rgba(2, 7, 12, 0.82) 0%,
      rgba(2, 7, 12, 0.6) 38%,
      rgba(2, 7, 12, 0.16) 72%,
      transparent 100%
    ),
    radial-gradient(
      20% 34% at 38% 56%,
      rgba(3, 9, 15, 0.76) 0%,
      rgba(3, 9, 15, 0.24) 62%,
      transparent 100%
    ),
    radial-gradient(
      18% 24% at 88% 18%,
      rgba(5, 11, 18, 0.58) 0%,
      rgba(5, 11, 18, 0.08) 70%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgba(4, 9, 15, 0.82) 0%,
      rgba(4, 9, 15, 0.62) 28%,
      rgba(4, 9, 15, 0.34) 52%,
      rgba(4, 9, 15, 0.16) 66%,
      rgba(4, 9, 15, 0.3) 76%,
      rgba(4, 9, 15, 0.6) 100%
    ),
    linear-gradient(180deg, rgba(6, 12, 20, 0.2) 0%, rgba(6, 12, 20, 0.48) 100%);
}

/* Company page: iPad Mini portrait and similar tall tablet portrait layouts.
   Keep the desktop-style right rail, but render the four fact cards as a 2x2 grid. */
   /* 1024x1366 */

/* @media (min-width: 700px) and (max-width: 860px) and (min-height: 960px) and (max-height: 1400px) and (orientation: portrait) { */
@media (min-width: 700px) and (max-width: 1024px) and (min-height: 960px) and (max-height: 1400px) and (orientation: portrait) {
  html.company-page .pageHero__inner,
  html.company-page .aboutSplitSlide__wrap {
    padding-inline: 10px;
  }

  html.company-page .pageHero__deck--company,
  html.company-page .aboutSplitSlide__shell,
  html.company-page .aboutSplitSlide--rail-left .aboutSplitSlide__shell {
    width: min(100%, calc(100vw - 20px));
    min-height: 100%;
    padding: 24px 20px;
    border-radius: 24px;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 340px);
    grid-template-areas: "copy facts";
    align-content: center;
    align-items: center;
    column-gap: 18px;
    row-gap: 0;
  }

  html.company-page .pageHero__content--company,
  html.company-page .aboutSplitSlide__content {
    grid-area: copy;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 340px);
    grid-template-areas:
      "title title"
      "copy .";
    column-gap: 18px;
    row-gap: 16px;
    align-self: stretch;
    align-content: start;
  }

  html.company-page .pageHero__titleBlock,
  html.company-page .aboutSplitSlide__titleBlock {
    grid-area: title;
    min-width: 0;
  }

  html.company-page .pageHero__copyBlock,
  html.company-page .aboutSplitSlide__copyBlock {
    grid-area: copy;
    min-width: 0;
    max-width: none;
  }

  html.company-page .pageHero__aside,
  html.company-page .aboutSplitSlide__rail {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: stretch;
    z-index: 1;
    transform: translateY(40px);
  }

  html.company-page .pageHero__content--company .pageHero__title,
  html.company-page .aboutSplitSlide__title {
    max-width: none;
    width: 100%;
    font-size: 3.3dvh;
  }

  html.company-page .pageHero__text,
  html.company-page .aboutSplitSlide__text {
    max-width: none;
    /* font-size: clamp(15px, 2vw, 18px); */
    font-size: 2vh;

    line-height: 1.42;
    padding-top: 4dvh;
  }

  html.company-page .pageHero__facts,
  html.company-page .aboutSplitSlide__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(110px, 1fr);
    gap: 12px;
    align-self: center;
  }

  html.company-page .pageHero__factCard,
  html.company-page .aboutSplitSlide__factCard {
    min-height: 110px;
    padding: 14px 12px 12px;
    border-radius: 12px;
    justify-content: center;
  }

  html.company-page .pageHero__factValue,
  html.company-page .aboutSplitSlide__factValue {
    /* font-size: clamp(18px, 2.45vw, 22px); */
    font-size: 2.5dvh;
  }

  html.company-page .pageHero__factLabel,
  html.company-page .aboutSplitSlide__factLabel {
    margin-top: 8px;
    /* font-size: 11px; */
    font-size: 1.5dvh;

    letter-spacing: 0.08em;
  }

  html.company-page .pageHero__factSub,
  html.company-page .aboutSplitSlide__factSub {
    margin-top: 6px;
    font-size: 1.6dvh;
    line-height: 1.18;
  }
}

/* Company page mobile/tablet slide mode: keep each slide locked to one viewport,
   just like the capabilities/process pages, while letting the inner shell size
   against the sticky header height. */
@media (max-width: 920px) {
  html.company-page.inner-stepper .pageHero,
  html.company-page.inner-stepper .aboutSplitSlide {
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  html.company-page .pageHero__inner,
  html.company-page .aboutSplitSlide__wrap {
    height: 100%;
    min-height: 100%;
  }

  html.company-page .pageHero__deck--company,
  html.company-page .aboutSplitSlide__shell,
  html.company-page .aboutSplitSlide--rail-left .aboutSplitSlide__shell {
    min-height: 0;
    max-height: calc(100svh - var(--siteHeaderH, 72px) - 20px);
    overflow: hidden;
  }

  html.company-page .pageHero__content--company,
  html.company-page .aboutSplitSlide__content,
  html.company-page .pageHero__aside,
  html.company-page .aboutSplitSlide__rail {
    min-height: 0;
  }
}

/* Company page: use the same stacked copy + 2x2 fact-card layout as the iPhone SE-style About layout
   for tall portrait tablets/folds such as iPad Mini, iPad Air, iPad Pro, and Zenbook Fold. */
@media (min-width: 700px) and (max-width: 1100px) and (min-height: 960px) and (max-height: 1400px) and (orientation: portrait) {
  html.company-page .pageHero__inner,
  html.company-page .aboutSplitSlide__wrap {
    padding-inline: 10px;
  }

  html.company-page .pageHero__deck--company,
  html.company-page .aboutSplitSlide__shell,
  html.company-page .aboutSplitSlide--rail-left .aboutSplitSlide__shell {
    width: min(calc(100vw - 20px), 62dvh);    
    /* min-height: min(860px, calc(100svh - 108px)); */
    min-height: min(800px, calc(100svh - 108px));
    padding: 24px 20px;
    border-radius: 22px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "facts";
    row-gap: 26px;
    column-gap: 0;
    align-content: center;
    align-items: stretch;
  }

  html.company-page .pageHero__content--company,
  html.company-page .aboutSplitSlide__content {
    grid-area: copy;
    grid-column: auto;
    grid-row: auto;
    max-width: none;
    display: block;
  }

  html.company-page .pageHero__titleBlock,
  html.company-page .aboutSplitSlide__titleBlock,
  html.company-page .pageHero__copyBlock,
  html.company-page .aboutSplitSlide__copyBlock {
    min-width: 0;
    max-width: none;
  }

  html.company-page .pageHero__aside,
  html.company-page .aboutSplitSlide__rail {
    grid-area: facts;
    grid-column: auto;
    grid-row: auto;
    align-self: start;
    justify-self: stretch;
    transform: none;
  }

  html.company-page .pageHero__facts,
  html.company-page .aboutSplitSlide__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(110px, 1fr);
    gap: 10px;
    align-content: start;
  }
}

/* Company page: Galaxy Z Fold 5 portrait and similar narrow tall folds should also keep the About fact cards in 2x2. */
@media (min-width: 320px) and (max-width: 359px) and (min-height: 820px) and (orientation: portrait) {
  html.company-page .pageHero__deck--company,
  html.company-page .aboutSplitSlide__shell,
  html.company-page .aboutSplitSlide--rail-left .aboutSplitSlide__shell {
    width: min(calc(100vw - 20px), 64dvh);
  }

  html.company-page .pageHero__facts,
  html.company-page .aboutSplitSlide__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(92px, auto);
    gap: 10px;
  }

  html.company-page .pageHero__factCard,
  html.company-page .aboutSplitSlide__factCard {
    min-height: 92px;
  }
}