/* ==== business-outcomes ==== */
.business-outcomes__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline)
    var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.business-outcomes__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.business-outcomes__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  max-width: var(--measure-heading);
  word-break: break-word;
}

.business-outcomes__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.business-outcomes__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.business-outcomes__body {
  margin: 0;
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.business-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
}

.business-outcomes__card {
  max-width: none;
  height: 100%;
  box-sizing: border-box;
}

.business-outcomes__icon {
  width: 40px;
  height: 40px;
}

.business-outcomes__card .icon-container__big {
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.business-outcomes__card:hover .icon-container__big {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

@media (max-width: 1024px) {
  .business-outcomes__heading {
    font-size: 40px;
  }

  .business-outcomes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .business-outcomes__heading {
    font-size: 32px;
  }

  .business-outcomes__body {
    font-size: 18px;
  }

  .business-outcomes__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== client-testimonials ==== */
.client-testimonials__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline)
    var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.client-testimonials__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.client-testimonials__heading-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--measure-heading);
  word-break: break-word;
}

.client-testimonials__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.client-testimonials__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.client-testimonials__cards-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.client-testimonials__card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
}

.client-testimonials__card {
  flex: 1 1 300px;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .client-testimonials__heading {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .client-testimonials__heading {
    font-size: 32px;
  }

  .client-testimonials__card {
    flex-basis: 100%;
  }
}

/* ==== testimonial ==== */
.testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 660px;
  height: 480px;
  padding: var(--spacing-x5) var(--spacing-x5)
    var(--spacing-x4);
  border: 1.5px solid var(--color-border-primary);
  overflow: clip;
  word-break: break-word;
}

.testimonial__portrait-and-quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  width: 100%;
  flex-shrink: 0;
}

.testimonial__image-frame {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  overflow: clip;
}

.testimonial__big .testimonial__image-frame {
  width: 180px;
  height: 180px;
}

.testimonial__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.testimonial__quote {
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.testimonial__attribution {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
  flex-shrink: 0;
  line-height: var(--line-height-normal);
}

.testimonial__name {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 20px;
  font-style: normal;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.testimonial__position {
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

@media (max-width: 768px) {
  .testimonial {
    height: auto;
    min-height: 420px;
  }
}

/* ==== button ==== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-x1);
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-nav);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.button__label {
  position: relative;
}

.button__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform var(--duration-fast) var(--ease);
}

.button:hover .button__icon,
.button:focus-visible .button__icon {
  transform: translateX(8px);
}

.button__chevron {
  display: block;
  width: 24px;
  height: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button__icon {
    transition: none;
  }

  .button:hover .button__icon,
  .button:focus-visible .button__icon {
    transform: none;
  }
}

/* Button-Primary */
.button__primary {
  background-color: var(--color-surface-inverted);
  border-color: var(--color-surface-inverted);
  color: var(--color-content-inverted);
  font-weight: var(--font-weight-medium);
}

/* Button-Secondary */
.button__secondary {
  background-color: transparent;
  border-color: var(--color-border-brand);
  color: var(--color-content-brand);
}

/* Size=Big — Nav/L */
.button__big {
  height: 60px;
  padding: var(--spacing-x4) var(--spacing-x5);
  font-size: 20px;
}

/* Size=Small — Nav/S */
.button__small {
  height: auto;
  padding: var(--spacing-x2) var(--spacing-x4);
  font-size: 18px;
}

@media (max-width: 768px) {
  .button__big {
    font-size: 18px;
  }

  .button__small {
    font-size: 16px;
  }
}

/* Narrow phones: let long labels wrap instead of overflowing their container */
@media (max-width: 480px) {
  .button {
    max-width: 100%;
    white-space: normal;
  }

  .button__big {
    height: auto;
    min-height: 56px;
    padding-block: var(--spacing-x3);
    font-size: 16px;
  }
}

/* ==== contact-cta ==== */
.contact-cta__section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 779px;
  background-color: var(--color-surface-primary);
  overflow: hidden;
}

.contact-cta__background {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 612px;
  max-height: 700px;
  pointer-events: none;
}

.contact-cta__background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.contact-cta__background-gradient {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    var(--color-surface-primary) 0%,
    color-mix(in srgb, var(--color-surface-primary) 0%, transparent) 51.442%
  );
}

.contact-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: 120px;
  padding-inline: var(--layout-padding-inline);
}

.contact-cta__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-x6);
  width: 100%;
  text-align: center;
  word-break: break-word;
}

.contact-cta__heading {
  margin: 0;
  max-width: 920px;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
}

.contact-cta__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.contact-cta__body {
  margin: 0;
  max-width: 544px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.contact-cta__body-wide {
  max-width: 760px;
  text-wrap: balance;
}

.contact-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-x6);
}

/* Outline button needs a solid fill to stay legible over the photo */
.contact-cta__actions .button__secondary {
  background-color: var(--color-surface-primary);
}

@media (max-width: 1024px) {
  .contact-cta__section {
    min-height: 0;
  }

  .contact-cta__content {
    padding-block: var(--spacing-x20);
  }

  .contact-cta__heading {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .contact-cta__background {
    height: 480px;
  }

  .contact-cta__content {
    gap: var(--spacing-x8);
    padding-block: var(--spacing-x10);
  }

  .contact-cta__heading {
    font-size: 28px;
  }

  .contact-cta__body {
    font-size: 18px;
  }

  .contact-cta__actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Long CTA labels wrap instead of overflowing narrow screens */
  .contact-cta__actions > .button {
    max-width: 100%;
    height: auto;
    min-height: 60px;
    white-space: normal;
  }
}

/* ==== faq ==== */
.faq {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 648px;
  padding-block: var(--spacing-x5);
  border-block: 1.5px solid var(--color-border-primary);
  word-break: break-word;
  transition: gap var(--duration-normal) var(--ease);
}

/* Collapse shared edge when FAQs stack */
.faq + .faq {
  border-top: none;
}

.faq__open {
  gap: var(--spacing-x3);
}

.faq__closed {
  gap: 0;
}

.faq__question-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-x4);
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.faq__question {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.faq__chevron {
  display: block;
  width: 24px;
  height: 24px;
  max-width: none;
}

.faq__answer-panel {
  width: 100%;
  overflow: hidden;
  transition:
    max-height var(--duration-normal) var(--ease),
    opacity var(--duration-fade) var(--ease);
}

.faq__answer {
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.faq__open .faq__answer-panel {
  max-height: 480px;
  opacity: 1;
}

.faq__closed .faq__answer-panel {
  max-height: 0;
  opacity: 0;
}

@media (max-width: 768px) {
  /* Extend the toggle's hit area into the row padding */
  .faq__question-row {
    padding-block: var(--spacing-x2);
    margin-block: calc(-1 * var(--spacing-x2));
  }

  .faq__question {
    font-size: 18px;
  }

  .faq__answer {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq,
  .faq__answer-panel {
    transition: none;
  }
}

/* ==== frequently-asked-questions ==== */
.frequently-asked-questions__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline)
    var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.frequently-asked-questions__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-block: var(--spacing-x5);
}

.frequently-asked-questions__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-x5);
  width: 100%;
}

.frequently-asked-questions__introduction {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  flex: 0 1 var(--measure-heading);
  min-width: 0;
  word-break: break-word;
}

.frequently-asked-questions__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.frequently-asked-questions__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.frequently-asked-questions__body {
  margin: 0;
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.frequently-asked-questions__contact-link {
  color: var(--color-content-primary);
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  transition: color var(--duration-fast) var(--ease);
}

.frequently-asked-questions__contact-link:hover,
.frequently-asked-questions__contact-link:focus-visible {
  color: var(--color-content-brand);
}

.frequently-asked-questions__list {
  display: flex;
  flex: 1 1 var(--measure-column);
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: var(--measure-column);
}

.frequently-asked-questions__item {
  max-width: none;
}

@media (max-width: 1024px) {
  .frequently-asked-questions__columns {
    flex-direction: column;
    gap: var(--spacing-x8);
  }

  .frequently-asked-questions__introduction {
    position: static;
    flex: 1 1 auto;
    max-width: none;
  }

  .frequently-asked-questions__list {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }

  .frequently-asked-questions__heading {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .frequently-asked-questions__heading {
    font-size: 32px;
  }

  .frequently-asked-questions__body {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frequently-asked-questions__contact-link {
    transition: none;
  }
}

/* ==== frame-sequence ==== */
.frame-sequence__sequence {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  pointer-events: none;
}

.frame-sequence__frame {
  position: absolute;
  aspect-ratio: 1;
  visibility: hidden;
}

.frame-sequence__frame[data-active] {
  visibility: visible;
}

.frame-sequence__image {
  object-fit: cover;
}

/* ==== partner-logos ==== */
.partner-logos__section {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block-start: var(--spacing-x10);
  padding-block-end: var(--spacing-x10);
  background-color: transparent;
}

.partner-logos__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: var(--layout-max);
  min-height: 52px;
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.partner-logos__dragging {
  cursor: grabbing;
}

.partner-logos__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.partner-logos__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 88px;
  padding-inline-end: 88px;
  margin: 0;
  list-style: none;
}

.partner-logos__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.partner-logos__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.partner-logos__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    var(--color-surface-primary) 0%,
    color-mix(in srgb, var(--color-surface-primary) 0%, transparent) 12%,
    color-mix(in srgb, var(--color-surface-primary) 0%, transparent) 88%,
    var(--color-surface-primary) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .partner-logos__viewport {
    cursor: default;
    touch-action: auto;
  }

  .partner-logos__track {
    justify-content: center;
    width: 100%;
    transform: none !important;
  }

  .partner-logos__group:last-child {
    display: none;
  }

  .partner-logos__group {
    flex-wrap: wrap;
    justify-content: center;
    padding-inline-end: 0;
    gap: var(--spacing-x10);
  }
}

@media (max-width: 768px) {
  .partner-logos__section {
    padding-block: var(--spacing-x8);
  }

  .partner-logos__group {
    gap: var(--spacing-x10);
    padding-inline-end: var(--spacing-x10);
  }
}

/* ==== hero ==== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Pull section under sticky nav so sky starts at the top of the screen */
  margin-block-start: calc(-1 * var(--layout-header-height));
  /* 100px + 20px heading-row padding = 120px from the top of the screen */
  padding-block-start: var(--spacing-x25);
  background-color: var(--color-surface-primary);
  overflow: hidden;
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__background-image {
  object-fit: cover;
  object-position: center top;
  opacity: 0.6;
}

.hero__background-gradient {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-surface-primary) 0%, transparent) 75%,
    var(--color-surface-primary) 100%
  );
}

.hero__heading-row {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-x5) var(--layout-padding-inline);
}

.hero__headline {
  max-width: var(--measure-heading);
  font-family: var(--font-sans);
  font-size: 60px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.hero__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.hero__content-row {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-x20);
  width: 100%;
  padding: var(--spacing-x5) var(--layout-padding-inline);
}

.hero__artwork-col {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
}

.hero__artwork {
  position: relative;
  inset-block-start: -80px;
  width: 480px;
  max-width: 100%;
  aspect-ratio: 1;
}

.hero__copy-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: var(--spacing-x8);
  width: 658px;
  max-width: 100%;
  flex-shrink: 0;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x3);
  width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
}

.hero__subhead {
  width: 100%;
  font-size: 40px;
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
}

.hero__body {
  max-width: 616px;
  font-size: 20px;
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-x6);
}

@media (max-width: 1024px) {
  .hero__content-row {
    flex-direction: column;
    gap: var(--spacing-x10);
  }

  .hero__artwork-col {
    width: 100%;
  }

  .hero__artwork {
    width: min(400px, 80vw);
  }

  .hero__copy-col {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-block-start: calc(
      var(--spacing-x10) + var(--layout-header-height)
    );
  }

  .hero__headline {
    font-size: 36px;
  }

  .hero__subhead {
    font-size: 28px;
  }

  .hero__body {
    font-size: 18px;
  }

  .hero__artwork {
    width: min(280px, 70vw);
  }
}

/* ==== how-we-work ==== */
.how-we-work__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline)
    var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.how-we-work__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-block: var(--spacing-x5);
}

.how-we-work__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-x5);
  width: 100%;
}

.how-we-work__intro {
  position: sticky;
  top: 120px;
  display: flex;
  flex: 0 1 var(--measure-heading);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  min-width: 0;
  word-break: break-word;
}

.how-we-work__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.how-we-work__heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.how-we-work__inline-accent .how-we-work__accent {
  display: inline;
}

.how-we-work__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.how-we-work__timeline {
  position: relative;
  display: flex;
  flex: 1 1 var(--measure-column);
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--spacing-x20);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-we-work__connector {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(var(--badge-slot, 60px) / 2 - 2px);
  width: 4px;
  margin: 0;
  pointer-events: none;
}

.how-we-work__connector-fill {
  width: 100%;
  height: 100%;
  background-color: var(--color-surface-inverted);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

.how-we-work__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-x10);
  width: 100%;
}

.how-we-work__badge-slot {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--badge-slot, 60px);
}

.how-we-work__badge {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 60px;
  padding: 10px;
  background-color: var(--color-surface-inverted);
}

.how-we-work__badge-wide {
  padding-inline: var(--spacing-x5);
}

.how-we-work__badge-value {
  font-family: var(--font-nav);
  font-size: 28px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-content-inverted);
  white-space: nowrap;
}

/* Shrinks with the timeline column (small laptops) instead of overflowing */
.how-we-work__card {
  flex-shrink: 1;
  width: 100%;
  min-width: 0;
  max-width: 485px;
}

@media (max-width: 1024px) {
  .how-we-work__columns {
    flex-direction: column;
    gap: var(--spacing-x10);
  }

  .how-we-work__intro {
    position: static;
    flex: none;
    width: 100%;
  }

  .how-we-work__heading {
    font-size: 40px;
  }

  .how-we-work__timeline {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .how-we-work__heading {
    font-size: 32px;
  }

  .how-we-work__timeline {
    gap: var(--spacing-x10);
  }

  .how-we-work__badge-slot {
    width: auto;
  }

  .how-we-work__connector {
    display: none;
  }

  .how-we-work__step {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-x4);
  }

  .how-we-work__card {
    max-width: none;
  }

  .how-we-work__badge-value {
    font-size: 24px;
  }
}

/* ==== how-we-work-card ==== */
.how-we-work-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x4);
  width: 100%;
  max-width: 485px;
  padding: var(--spacing-x5);
  border: 1.5px solid var(--color-border-primary);
  overflow: clip;
  word-break: break-word;
}

.how-we-work-card__image-frame {
  position: relative;
  width: 100%;
  height: 240px;
  flex-shrink: 0;
  overflow: clip;
}

.how-we-work-card__image {
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.how-we-work-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x2);
  width: 100%;
  flex-shrink: 0;
  line-height: var(--line-height-normal);
}

.how-we-work-card__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.how-we-work-card__body {
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

@media (max-width: 768px) {
  .how-we-work-card__image-frame {
    height: 200px;
  }

  .how-we-work-card__title {
    font-size: 24px;
  }
}

/* ==== metrics ==== */
.metrics__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x20) var(--layout-padding-inline);
  background-color: var(--color-surface-primary);
}

.metrics__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-x20);
  width: 100%;
}

.metrics__heading {
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
  text-align: center;
}

.metrics__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.metrics__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1010px;
}

.metrics__cell {
  flex: 1 1 0;
  min-width: 0;
}

.metrics__cell + .metrics__cell {
  margin-inline-start: -1.5px;
}

@media (max-width: 768px) {
  .metrics__heading {
    font-size: 28px;
  }

  .metrics__row {
    flex-direction: column;
  }

  .metrics__cell + .metrics__cell {
    margin-inline-start: 0;
    margin-block-start: -1.5px;
  }
}

/* ==== metrics-cell ==== */
.metrics-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--spacing-x1);
  width: 100%;
  padding: var(--spacing-x8) var(--spacing-x10);
  border: 1.5px solid var(--color-border-primary);
  word-break: break-word;
}

.metrics-cell__number {
  width: 100%;
  font-family: var(--font-nav);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-content-brand);
}

.metrics-cell__title {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-brand);
}

.metrics-cell__body {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-primary-400);
}

/* ==== connection-cell ==== */
.connection-cell {
  display: flex;
  align-items: center;
  gap: var(--spacing-x6);
  width: 100%;
  max-width: 660px;
  padding: var(--spacing-x3);
  border: 1.5px solid var(--color-border-primary);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  word-break: break-word;
}

.connection-cell__static {
  cursor: default;
}

.connection-cell__label {
  flex-shrink: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease);
}

@media (max-width: 768px) {
  .connection-cell__label {
    font-size: 22px;
    white-space: normal;
  }
}

.connection-cell__default .connection-cell__label {
  color: var(--color-content-secondary);
}

.connection-cell__focused .connection-cell__label {
  color: var(--color-content-tertiary);
}

/* ==== connection ==== */
.connection {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 660px;
}

.connection__cell {
  max-width: none;
  transition:
    opacity var(--duration-normal) var(--ease),
    transform var(--duration-normal) var(--ease);
}

/* Not revealed yet — keeps its space so the layout never shifts */
.connection__concealed {
  opacity: 0;
  transform: translateY(var(--spacing-x3));
}

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

/* ==== overload-illustration ==== */
.overload-illustration {
  /* Exposed concrete inside a fracture — a deeper tint of the platform faces */
  --overload-fracture: color-mix(
    in srgb,
    var(--color-content-tertiary) 30%,
    var(--color-surface-tertiary)
  );
  --overload-fracture-light: color-mix(
    in srgb,
    var(--color-content-tertiary) 14%,
    var(--color-surface-tertiary)
  );
  --overload-scale: 1;

  /* Not clipped: objects fall in from above and the broken top leans out */
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 540;
  pointer-events: none;
  user-select: none;
}

/* Figma frame: 480 × 540, scaled to the column */
.overload-illustration__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 480px;
  height: 540px;
  transform: scale(var(--overload-scale));
  transform-origin: 0 0;
}

.overload-illustration__layer {
  position: absolute;
  inset: 0;
}

.overload-illustration__platform,
.overload-illustration__overlay {
  position: absolute;
  display: block;
  max-width: none;
}

.overload-illustration__overlay {
  overflow: visible;
}

/* ---- Damage ------------------------------------------------------------ */

.overload-illustration__crack {
  fill: none;
  stroke: var(--color-content-tertiary);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength = 1 → offset 1 hides, 0 draws the whole crack */
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}

.overload-illustration__spall {
  fill: var(--overload-fracture);
  stroke: var(--color-content-tertiary);
  stroke-width: 0.75;
  stroke-linejoin: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.overload-illustration__core,
.overload-illustration__chunk {
  opacity: 0;
}

.overload-illustration__chunk-edge {
  fill: none;
  stroke: var(--color-content-tertiary);
  stroke-width: 1;
  stroke-linejoin: round;
}

.overload-illustration__core-fill,
.overload-illustration__notch-shade {
  stroke: var(--color-content-tertiary);
  stroke-width: 0.75;
  stroke-linejoin: round;
}

.overload-illustration__core-fill {
  fill: var(--overload-fracture-light);
}

.overload-illustration__notch-shade {
  fill: var(--overload-fracture);
}

.overload-illustration__core-line {
  fill: none;
  stroke: var(--color-content-tertiary);
  stroke-width: 0.75;
  stroke-linecap: round;
}

.overload-illustration__fragment {
  fill: var(--overload-fracture);
  stroke: var(--color-content-tertiary);
  stroke-width: 1;
  stroke-linejoin: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---- Objects ----------------------------------------------------------- */

.overload-illustration__object {
  position: absolute;
  transform-origin: 50% 100%;
}

.overload-illustration__fall,
.overload-illustration__squash {
  position: absolute;
  inset: 0;
}

.overload-illustration__squash {
  transform-origin: 50% 100%;
}

.overload-illustration__image {
  position: absolute;
  display: block;
  max-width: none;
}

/* Keep the moving groups on their own layers while the sequence is live */
.overload-illustration[data-live] .overload-illustration__layer,
.overload-illustration[data-live] .overload-illustration__overlay {
  will-change: transform;
}

/* ==== overload-sequence ==== */
.overload-sequence__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
}

.overload-sequence__left {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-x10);
  min-width: 0;
}

.overload-sequence__intro {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
  white-space: pre-wrap;
}

.overload-sequence__connection {
  width: 100%;
  max-width: 660px;
}

/* Figma: 480 of the 1440 frame, never squeezing the list below its labels */
.overload-sequence__right {
  flex: 0 0 auto;
  width: clamp(360px, 33.34vw, 480px);
}

@media (max-width: 1024px) {
  .overload-sequence__columns {
    flex-direction: column;
  }

  .overload-sequence__right {
    width: 100%;
    max-width: 480px;
    align-self: center;
  }
}

@media (max-width: 768px) {
  .overload-sequence__intro {
    font-size: 22px;
  }
}

/* Short two-column windows (laptops): tighten so the block still fits the
   viewport and the scroll-pinned sequence is used instead of autoplay. */
@media (min-width: 1025px) and (max-height: 760px) {
  .overload-sequence__left {
    gap: var(--spacing-x5);
  }

  .overload-sequence__intro {
    font-size: 24px;
  }

  .overload-sequence__right {
    width: min(
      clamp(360px, 33.34vw, 480px),
      calc((100vh - var(--layout-header-height) - 32px) * 480 / 540)
    );
  }
}

/* ==== operational-challenges ==== */
.operational-challenges__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
  /* The 480px illustration canvas is scaled down in JS; until then, keep it
     from widening the page on phones. clip (not hidden) keeps sticky working. */
  overflow-x: clip;
}

.operational-challenges__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x20);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.operational-challenges__heading {
  max-width: var(--measure-heading);
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.operational-challenges__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.operational-challenges__closing {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
}

@media (max-width: 1024px) {
  .operational-challenges__heading {
    font-size: 40px;
  }

  .operational-challenges__closing {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .operational-challenges__heading {
    font-size: 32px;
  }

  .operational-challenges__closing {
    font-size: 28px;
  }
}

/* ==== people-fit ==== */
/* Scroll track: one viewport of pinned panel + one step distance per extra step */
.people-fit__track {
  --step-distance: 70vh;

  position: relative;
  width: 100%;
  height: calc(
    100svh - var(--layout-header-height) +
      (var(--steps) - 1) * var(--step-distance)
  );
  background-color: var(--color-surface-primary);
}

.people-fit__sticky {
  position: sticky;
  top: var(--layout-header-height);
  display: flex;
  align-items: center;
  height: calc(100svh - var(--layout-header-height));
}

.people-fit__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline);
  background-color: var(--color-surface-primary);
}

.people-fit__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--layout-gap);
  width: 100%;
}

.people-fit__media {
  flex: 1 0 0;
  min-width: 1px;
  align-self: stretch;
}

.people-fit__copy {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  min-width: 1px;
}

.people-fit__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
}

/* Serif accent: every word sits in the same cell; only the active one is in view */
.people-fit__words {
  display: grid;
  overflow: clip;
}

.people-fit__word {
  grid-area: 1 / 1;
  padding-inline-end: 0.15em; /* room for the italic overhang */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
  transform: translateY(100%);
  transition: transform var(--duration-slide) var(--ease);
}

.people-fit__word[data-state="active"] {
  transform: translateY(0);
}

.people-fit__word[data-state="past"] {
  transform: translateY(-100%);
}

.people-fit__image-frame {
  position: relative;
  width: 100%;
  height: min(340px, 40svh); /* keep the pinned panel inside short viewports */
  overflow: clip;
}

/* Each new image slides up over the previous one, just after the text */
.people-fit__image-layer {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  transition: transform var(--duration-slide) var(--ease) 0.06s;
}

.people-fit__image-layer[data-state="active"] {
  transform: translateY(0);
}

.people-fit__image-layer[data-state="past"] {
  transform: translateY(-20%);
}

.people-fit__image {
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .people-fit__word,
  .people-fit__image-layer {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .people-fit__media {
    display: none;
  }

  .people-fit__copy {
    flex: 1 1 auto;
    width: 100%;
  }

  .people-fit__heading {
    font-size: 32px;
  }

  .people-fit__image-frame {
    height: min(280px, 36svh);
  }
}

@media (max-width: 768px) {
  .people-fit__heading {
    font-size: 28px;
  }

  .people-fit__image-frame {
    height: min(220px, 32svh);
  }
}

/* ==== solutions-card ==== */
.solutions-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 660px;
  height: 620px;
  padding: var(--spacing-x5);
  border: 1.5px solid var(--color-border-primary);
  overflow: clip;
  word-break: break-word;
}

.solutions-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  width: 100%;
  flex-shrink: 0;
}

.solutions-card__image-frame {
  position: relative;
  width: 100%;
  height: 320px;
  flex-shrink: 0;
  overflow: clip;
}

.solutions-card__image {
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.solutions-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x2);
  width: 100%;
  flex-shrink: 0;
  line-height: var(--line-height-normal);
}

.solutions-card__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.solutions-card__body {
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.solutions-card__cta {
  width: 100%;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .solutions-card {
    height: auto;
    min-height: 0;
    gap: var(--spacing-x8);
  }

  .solutions-card__image-frame {
    height: 220px;
  }

  .solutions-card__title {
    font-size: 24px;
  }
}

/* ==== technology-solutions ==== */
.technology-solutions__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline)
    var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.technology-solutions__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x20);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.technology-solutions__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  max-width: var(--measure-heading);
  word-break: break-word;
}

.technology-solutions__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.technology-solutions__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.technology-solutions__body {
  margin: 0;
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.technology-solutions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
}

.technology-solutions__card {
  width: 100%;
  max-width: none;
}

@media (max-width: 1024px) {
  .technology-solutions__heading {
    font-size: 40px;
  }

  .technology-solutions__content {
    gap: var(--spacing-x10);
  }
}

@media (max-width: 768px) {
  .technology-solutions__heading {
    font-size: 32px;
  }

  .technology-solutions__body {
    font-size: 18px;
  }

  .technology-solutions__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== benefits-card ==== */
.benefits-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x4);
  width: 100%;
  max-width: 310px;
  height: 246px;
  padding: var(--spacing-x5);
  border: 1.5px solid var(--color-border-primary);
  overflow: clip;
  word-break: break-word;
  outline: none;
  transition: gap var(--duration-normal) var(--ease);
}

.benefits-card__interactive {
  cursor: default;
}

.benefits-card__icon-slot {
  flex-shrink: 0;
  height: 80px;
  overflow: visible;
}

.benefits-card__icon-motion {
  display: flex;
}

.benefits-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x2);
  width: 100%;
  flex-shrink: 0;
}

.benefits-card__title {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.benefits-card__body {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
  /* Default variant: body hidden */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
}

/* Controlled Focused — match Figma Focused variant */

/* Controlled Default — match Figma Default variant */

/* Interactive: hover / keyboard focus → Focused */
.benefits-card__interactive:hover,
.benefits-card__interactive:focus-visible {
  gap: 0;
}

.benefits-card__interactive:hover .benefits-card__icon-slot,
.benefits-card__interactive:focus-visible .benefits-card__icon-slot {
  height: 0;
}

.benefits-card__interactive:hover .benefits-card__icon-motion,
.benefits-card__interactive:focus-visible .benefits-card__icon-motion {
  transform: translateY(calc(-100% - var(--spacing-x5)));
  opacity: 0;
}

.benefits-card__interactive:hover .benefits-card__body,
.benefits-card__interactive:focus-visible .benefits-card__body {
  max-height: 180px;
  opacity: 1;
  transform: translateY(0);
}

/* Smooth ease between Default ↔ Focused */
.benefits-card__icon-slot,
.benefits-card__icon-motion,
.benefits-card__body {
  transition:
    height var(--duration-normal) var(--ease),
    transform var(--duration-normal) var(--ease),
    opacity var(--duration-fade) var(--ease),
    max-height var(--duration-normal) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .benefits-card,
  .benefits-card__icon-slot,
  .benefits-card__icon-motion,
  .benefits-card__body {
    transition: none;
  }
}

/* ==== technology-partnership ==== */
.technology-partnership__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline)
    var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.technology-partnership__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.technology-partnership__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  max-width: var(--measure-heading);
  word-break: break-word;
}

.technology-partnership__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.technology-partnership__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.technology-partnership__body {
  margin: 0;
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.technology-partnership__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--layout-gap);
  width: 100%;
}

.technology-partnership__card {
  max-width: none;
  /* Keep the card's own fixed height so hover expansion can't resize the grid row */
  height: 246px;
}

@media (max-width: 1024px) {
  .technology-partnership__heading {
    font-size: 40px;
  }

  .technology-partnership__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .technology-partnership__heading {
    font-size: 32px;
  }

  .technology-partnership__body {
    font-size: 18px;
  }

  .technology-partnership__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== about-intro ==== */
.about-intro__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--spacing-x15) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.about-intro__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-block: var(--spacing-x5);
}

.about-intro__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  word-break: break-word;
}

.about-intro__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
  max-width: var(--measure-heading);
}

.about-intro__eyebrow {
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.about-intro__heading {
  font-family: var(--font-sans);
  font-size: 60px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.about-intro__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.about-intro__body {
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

@media (max-width: 1024px) {
  .about-intro__heading {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .about-intro__eyebrow {
    font-size: 16px;
  }

  .about-intro__heading {
    font-size: 36px;
  }

  .about-intro__body {
    font-size: 18px;
  }
}

/* ==== our-ecosystem ==== */
.our-ecosystem__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline)
    var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.our-ecosystem__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.our-ecosystem__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  max-width: var(--measure-heading);
  word-break: break-word;
}

.our-ecosystem__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x1);
}

.our-ecosystem__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.our-ecosystem__heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.our-ecosystem__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.our-ecosystem__body {
  margin: 0;
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.our-ecosystem__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.our-ecosystem__card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  padding: var(--spacing-x5);
  border: 1.5px solid var(--color-border-primary);
  overflow: hidden;
}

.our-ecosystem__logo {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .our-ecosystem__heading {
    font-size: 40px;
  }

  .our-ecosystem__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .our-ecosystem__heading {
    font-size: 32px;
  }

  .our-ecosystem__body {
    font-size: 18px;
  }

  .our-ecosystem__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== megam-promise ==== */
.megam-promise__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline)
    var(--spacing-x20);
  background-color: var(--color-surface-page);
}

.megam-promise__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.megam-promise__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  max-width: var(--measure-heading);
  word-break: break-word;
}

.megam-promise__heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.megam-promise__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.megam-promise__body {
  margin: 0;
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.megam-promise__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--layout-gap);
  width: 100%;
}

.megam-promise__cards .megam-promise__card {
  max-width: none;
  /* Keep the card's own fixed height so hover expansion can't resize the grid row */
  height: 160px;
}

@media (max-width: 1024px) {
  .megam-promise__heading {
    font-size: 40px;
  }

  .megam-promise__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .megam-promise__heading {
    font-size: 32px;
  }

  .megam-promise__body {
    font-size: 18px;
  }

  .megam-promise__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== our-founders ==== */
.our-founders__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.our-founders__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.our-founders__heading-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  width: 100%;
  word-break: break-word;
}

.our-founders__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
}

.our-founders__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.our-founders__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.our-founders__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.our-founders__description {
  margin: 0;
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.our-founders__cards-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.our-founders__card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
}

.our-founders__card {
  flex: 1 1 300px;
  max-width: none;
  min-width: 0;
}

.our-founders__closing {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
  word-break: break-word;
}

@media (max-width: 1024px) {
  .our-founders__heading {
    font-size: 40px;
  }

  .our-founders__closing {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .our-founders__heading {
    font-size: 32px;
  }

  .our-founders__description {
    font-size: 18px;
  }

  .our-founders__card {
    flex-basis: 100%;
  }

  .our-founders__closing {
    font-size: 22px;
  }
}

/* ==== our-team ==== */
.our-team__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.our-team__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.our-team__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  max-width: var(--measure-heading);
  word-break: break-word;
}

.our-team__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
}

.our-team__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.our-team__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.our-team__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.our-team__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x5);
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.our-team__body p {
  margin: 0;
}

.our-team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.our-team__item {
  display: flex;
  height: 200px;
}

.our-team__grid .our-team__card {
  max-width: none;
  /* Keep the card's own fixed height so hover expansion can't resize the grid row */
  height: 200px;
}

.our-team__culture {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x5);
  width: 100%;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
  word-break: break-word;
}

.our-team__culture p {
  margin: 0;
}

.our-team__tagline {
  font-family: var(--font-display);
  font-size: 40px;
  font-style: italic;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  color: var(--color-content-tertiary);
}

@media (max-width: 1024px) {
  .our-team__title {
    font-size: 40px;
  }

  .our-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .our-team__culture {
    font-size: 24px;
  }

  .our-team__tagline {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .our-team__title {
    font-size: 32px;
  }

  .our-team__body {
    font-size: 18px;
  }

  .our-team__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .our-team__culture {
    font-size: 20px;
  }

  .our-team__tagline {
    font-size: 26px;
  }
}

/* ==== our-philosophy ==== */
.our-philosophy__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.our-philosophy__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.our-philosophy__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
  word-break: break-word;
}

.our-philosophy__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.our-philosophy__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.our-philosophy__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.our-philosophy__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  min-height: 484px;
  width: 100%;
}

.our-philosophy__image-frame {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 340px;
  overflow: clip;
}

.our-philosophy__image {
  object-fit: cover;
  object-position: center;
}

.our-philosophy__copy {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  min-width: 0;
  word-break: break-word;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.our-philosophy__body {
  margin: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
}

.our-philosophy__list {
  width: 100%;
  margin: 0;
  padding-inline-start: 42px;
  list-style: disc;
  font-size: 28px;
  color: var(--color-content-primary);
}

.our-philosophy__closing {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x5);
  width: 100%;
}

@media (max-width: 1024px) {
  .our-philosophy__columns {
    flex-direction: column;
    min-height: 0;
  }

  .our-philosophy__copy {
    flex: 1 1 auto;
    width: 100%;
  }

  .our-philosophy__image-frame {
    flex: 0 0 auto;
    width: 100%;
  }

  .our-philosophy__heading {
    font-size: 40px;
  }

  .our-philosophy__list {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .our-philosophy__heading {
    font-size: 32px;
  }

  .our-philosophy__body {
    font-size: 18px;
  }

  .our-philosophy__list {
    font-size: 20px;
    padding-inline-start: 28px;
  }

  .our-philosophy__image-frame {
    height: 220px;
  }
}

/* ==== our-story ==== */
.our-story__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.our-story__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.our-story__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
  word-break: break-word;
}

.our-story__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.our-story__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.our-story__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.our-story__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
}

.our-story__copy {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  min-width: 0;
  word-break: break-word;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.our-story__body {
  margin: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
}

.our-story__question {
  margin: 0;
  width: 100%;
  font-size: 28px;
  color: var(--color-content-primary);
}

.our-story__timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x5);
  width: 100%;
}

.our-story__image-frame {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 340px;
  overflow: clip;
}

.our-story__image {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1024px) {
  .our-story__columns {
    flex-direction: column;
  }

  .our-story__copy {
    flex: 1 1 auto;
    width: 100%;
  }

  .our-story__image-frame {
    flex: 0 0 auto;
    width: 100%;
  }

  .our-story__heading {
    font-size: 40px;
  }

  .our-story__question {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .our-story__heading {
    font-size: 32px;
  }

  .our-story__body {
    font-size: 18px;
  }

  .our-story__question {
    font-size: 22px;
  }

  .our-story__image-frame {
    height: 220px;
  }
}

/* ==== our-vision ==== */
.our-vision__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.our-vision__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.our-vision__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
  word-break: break-word;
}

.our-vision__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.our-vision__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.our-vision__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.our-vision__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  min-height: 484px;
  width: 100%;
}

.our-vision__copy {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  min-width: 0;
  word-break: break-word;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.our-vision__body {
  margin: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
}

.our-vision__statement {
  margin: 0;
  width: 100%;
  font-size: 28px;
  color: var(--color-content-primary);
}

.our-vision__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x5);
  width: 100%;
}

.our-vision__image-frame {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 340px;
  overflow: clip;
}

.our-vision__image {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1024px) {
  .our-vision__columns {
    flex-direction: column;
    min-height: 0;
  }

  .our-vision__copy {
    flex: 1 1 auto;
    width: 100%;
  }

  .our-vision__image-frame {
    flex: 0 0 auto;
    width: 100%;
  }

  .our-vision__heading {
    font-size: 40px;
  }

  .our-vision__statement {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .our-vision__heading {
    font-size: 32px;
  }

  .our-vision__body {
    font-size: 18px;
  }

  .our-vision__statement {
    font-size: 22px;
  }

  .our-vision__image-frame {
    height: 220px;
  }
}

/* ==== people-centered-solutions ==== */
.people-centered-solutions__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.people-centered-solutions__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
}

.people-centered-solutions__copy {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  min-width: 0;
}

.people-centered-solutions__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
}

.people-centered-solutions__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.people-centered-solutions__image-frame {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: clip;
}

.people-centered-solutions__image {
  object-fit: cover;
  object-position: center;
}

.people-centered-solutions__details {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  gap: var(--spacing-x10);
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.people-centered-solutions__intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x5);
  width: 100%;
  font-size: 20px;
  color: var(--color-content-secondary);
}

.people-centered-solutions__intro p {
  margin: 0;
}

.people-centered-solutions__statement {
  margin: 0;
  width: 100%;
  font-size: 28px;
  color: var(--color-content-primary);
}

@media (max-width: 1024px) {
  .people-centered-solutions__columns {
    flex-direction: column;
  }

  .people-centered-solutions__copy,
  .people-centered-solutions__details {
    flex: 1 1 auto;
    width: 100%;
  }

  .people-centered-solutions__heading {
    font-size: 32px;
  }

  .people-centered-solutions__statement {
    font-size: 24px;
  }

  .people-centered-solutions__image-frame {
    height: 280px;
  }
}

@media (max-width: 768px) {
  .people-centered-solutions__heading {
    font-size: 28px;
  }

  .people-centered-solutions__intro {
    font-size: 18px;
  }

  .people-centered-solutions__statement {
    font-size: 22px;
  }

  .people-centered-solutions__image-frame {
    height: 220px;
  }
}

/* ==== approach ==== */
.approach__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.approach__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.approach__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
  word-break: break-word;
}

.approach__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.approach__heading {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.approach__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.approach__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  word-break: break-word;
}

.approach__statement {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 28px;
  color: var(--color-content-primary);
}

.approach__details {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-x5);
  min-width: 0;
}

.approach__body {
  margin: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
}

/* Key takeaway — echoes the brand timeline connector */
.approach__highlight {
  margin: 0;
  padding-inline-start: var(--spacing-x6);
  border-inline-start: 4px solid var(--color-surface-inverted);
  font-size: 20px;
  color: var(--color-content-primary);
}

@media (max-width: 1024px) {
  .approach__heading {
    font-size: 40px;
  }

  .approach__columns {
    flex-direction: column;
    gap: var(--spacing-x8);
  }

  .approach__statement,
  .approach__details {
    flex: none;
    width: 100%;
  }

  .approach__statement {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .approach__eyebrow {
    font-size: 16px;
  }

  .approach__heading {
    font-size: 32px;
  }

  .approach__statement {
    font-size: 22px;
  }

  .approach__body,
  .approach__highlight {
    font-size: 18px;
  }
}

/* ==== challenge ==== */
.challenge__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.challenge__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x15);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.challenge__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  max-width: var(--measure-heading);
  word-break: break-word;
}

.challenge__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.challenge__heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.challenge__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.challenge__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
}

.challenge__copy {
  position: sticky;
  top: 120px;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  word-break: break-word;
}

.challenge__statement {
  margin: 0;
  font-size: 28px;
  color: var(--color-content-primary);
}

.challenge__body {
  margin: 0;
  max-width: var(--measure-body);
  font-size: 20px;
  color: var(--color-content-secondary);
}

.challenge__list {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

.challenge__closing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x3);
  width: 100%;
  padding-block-start: var(--spacing-x10);
  border-block-start: 1.5px solid var(--color-border-primary);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  word-break: break-word;
}

.challenge__closing-lead {
  margin: 0;
  font-size: 28px;
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.challenge__closing-statement {
  margin: 0;
  max-width: 1120px;
  font-size: 40px;
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
}

@media (max-width: 1024px) {
  .challenge__content {
    gap: var(--spacing-x10);
  }

  .challenge__heading {
    font-size: 40px;
  }

  .challenge__columns {
    flex-direction: column;
  }

  .challenge__copy {
    position: static;
    flex: none;
    width: 100%;
  }

  .challenge__list {
    flex: none;
    width: 100%;
  }

  .challenge__statement,
  .challenge__closing-lead {
    font-size: 24px;
  }

  .challenge__closing-statement {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .challenge__eyebrow {
    font-size: 16px;
  }

  .challenge__heading {
    font-size: 32px;
  }

  .challenge__statement,
  .challenge__closing-lead {
    font-size: 22px;
  }

  .challenge__body {
    font-size: 18px;
  }

  .challenge__closing-statement {
    font-size: 28px;
  }
}

/* ==== cloud-comparison ==== */
.cloud-comparison__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.cloud-comparison__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.cloud-comparison__heading {
  margin: 0;
  max-width: var(--measure-heading);
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
  word-break: break-word;
}

.cloud-comparison__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

/* Two approach cards with a "VS" badge on the shared gap */
.cloud-comparison__compare {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
}

.cloud-comparison__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x6);
  padding: var(--spacing-x8);
  border: 1.5px solid var(--color-border-primary);
  word-break: break-word;
}

.cloud-comparison__icon-container {
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.cloud-comparison__card:hover .cloud-comparison__icon-container {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

.cloud-comparison__icon {
  width: 40px;
  height: 40px;
}

.cloud-comparison__card-copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x3);
  width: 100%;
}

.cloud-comparison__card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.cloud-comparison__card-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.cloud-comparison__versus {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: var(--color-surface-inverted);
  transform: translate(-50%, -50%);
}

.cloud-comparison__versus-label {
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: 0.8px;
  color: var(--color-content-inverted);
}

/* Decision panel — brand surface to close the comparison */
.cloud-comparison__decision {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
  padding: var(--spacing-x10);
  background-color: var(--color-surface-inverted);
  color: var(--color-content-inverted);
  word-break: break-word;
}

.cloud-comparison__decision-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

.cloud-comparison__decision-details {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-x6);
  min-width: 0;
}

.cloud-comparison__decision-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: color-mix(in srgb, var(--color-content-inverted) 80%, transparent);
}

.cloud-comparison__factor-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x3);
}

.cloud-comparison__factors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-x3);
  margin: 0;
}

.cloud-comparison__factor {
  padding: var(--spacing-x2) var(--spacing-x4);
  border: 1.5px solid
    color-mix(in srgb, var(--color-content-inverted) 35%, transparent);
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.64px;
  text-transform: uppercase;
  color: var(--color-content-inverted);
}

@media (max-width: 1024px) {
  .cloud-comparison__heading {
    font-size: 40px;
  }

  .cloud-comparison__decision {
    flex-direction: column;
    gap: var(--spacing-x6);
    padding: var(--spacing-x8);
  }

  .cloud-comparison__decision-title,
  .cloud-comparison__decision-details {
    flex: none;
    width: 100%;
  }

  .cloud-comparison__decision-title {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .cloud-comparison__heading {
    font-size: 32px;
  }

  .cloud-comparison__compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .cloud-comparison__card {
    padding: var(--spacing-x5);
  }

  .cloud-comparison__card-title {
    font-size: 24px;
  }

  .cloud-comparison__versus {
    width: 48px;
    height: 48px;
  }

  .cloud-comparison__versus-label {
    font-size: 16px;
  }

  .cloud-comparison__decision {
    padding: var(--spacing-x6) var(--spacing-x5);
  }

  .cloud-comparison__decision-title {
    font-size: 28px;
  }

  .cloud-comparison__decision-body {
    font-size: 18px;
  }

  .cloud-comparison__factor {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-comparison__icon-container {
    transition: none;
  }
}

/* ==== cloud-manufacturing ==== */
.cloud-manufacturing__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.cloud-manufacturing__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.cloud-manufacturing__intro {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x8);
  min-width: 0;
  word-break: break-word;
}

.cloud-manufacturing__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
}

.cloud-manufacturing__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.cloud-manufacturing__heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.cloud-manufacturing__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.cloud-manufacturing__copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x5);
  width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.cloud-manufacturing__body {
  margin: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
}

.cloud-manufacturing__statement {
  margin: 0;
  font-size: 28px;
  color: var(--color-content-primary);
}

.cloud-manufacturing__image-frame {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: clip;
}

.cloud-manufacturing__image {
  object-fit: cover;
  object-position: center;
}

.cloud-manufacturing__list {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

@media (max-width: 1024px) {
  .cloud-manufacturing__columns {
    flex-direction: column;
  }

  .cloud-manufacturing__intro {
    flex: none;
    width: 100%;
  }

  .cloud-manufacturing__list {
    flex: none;
    width: 100%;
  }

  .cloud-manufacturing__heading {
    font-size: 40px;
  }

  .cloud-manufacturing__statement {
    font-size: 24px;
  }

  .cloud-manufacturing__image-frame {
    height: 280px;
  }
}

@media (max-width: 768px) {
  .cloud-manufacturing__eyebrow {
    font-size: 16px;
  }

  .cloud-manufacturing__heading {
    font-size: 32px;
  }

  .cloud-manufacturing__body {
    font-size: 18px;
  }

  .cloud-manufacturing__statement {
    font-size: 22px;
  }

  .cloud-manufacturing__image-frame {
    height: 220px;
  }
}

/* ==== capabilities ==== */
.capabilities__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.capabilities__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.capabilities__heading {
  margin: 0;
  max-width: var(--measure-heading);
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.capabilities__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.capabilities__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
  margin: 0;
}

.capabilities__item {
  position: relative;
}

/* Step number in the card's top-right corner */
.capabilities__index {
  position: absolute;
  top: var(--spacing-x5);
  right: var(--spacing-x5);
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  color: var(--color-primary-400);
}

.capabilities__card {
  max-width: none;
  height: 100%;
}

.capabilities__icon {
  width: 40px;
  height: 40px;
}

.capabilities__card .icon-container__big {
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.capabilities__item:hover .icon-container__big {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

.capabilities__note {
  margin: 0;
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

@media (max-width: 1024px) {
  .capabilities__heading {
    font-size: 40px;
  }

  .capabilities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .capabilities__heading {
    font-size: 32px;
  }

  .capabilities__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .capabilities__card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capabilities__card .icon-container__big {
    transition: none;
  }
}

/* ==== solution-hero ==== */
.solution-hero__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Pull section under sticky nav so the sky starts at the top of the screen */
  margin-block-start: calc(-1 * var(--layout-header-height));
  padding: calc(var(--layout-header-height) + var(--spacing-x15))
    var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
  overflow: hidden;
}

.solution-hero__columns {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--layout-gap);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.solution-hero__copy-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  min-width: 0;
}

.solution-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  width: 100%;
  word-break: break-word;
}

.solution-hero__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
}

.solution-hero__eyebrow {
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.solution-hero__headline {
  max-width: var(--measure-heading);
  font-family: var(--font-sans);
  font-size: 60px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

/* No illustration: let the headline use the full width so it holds two lines */
.solution-hero__text-only .solution-hero__headline {
  max-width: none;
}

.solution-hero__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.solution-hero__body {
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.solution-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-x6);
}

.solution-hero__media {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--spacing-x5);
  border: 1.5px solid var(--color-border-primary);
  background-color: var(--color-surface-primary);
}

.solution-hero__image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: clip;
}

.solution-hero__image {
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .solution-hero__columns {
    flex-direction: column;
    align-items: stretch;
  }

  .solution-hero__headline {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .solution-hero__hero {
    padding-block: calc(var(--layout-header-height) + var(--spacing-x10))
      var(--spacing-x10);
  }

  .solution-hero__eyebrow {
    font-size: 16px;
  }

  .solution-hero__headline {
    font-size: 36px;
  }

  .solution-hero__body {
    font-size: 18px;
  }

  .solution-hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* Long CTA labels wrap instead of overflowing narrow screens */
  .solution-hero__actions > .button {
    height: auto;
    min-height: 60px;
    white-space: normal;
  }

  .solution-hero__media {
    padding: var(--spacing-x3);
  }
}

/* ==== mobile-security-industries ==== */
.mobile-security-industries__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.mobile-security-industries__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
  padding-block: var(--spacing-x5);
}

/* Heading stays in view while the industry list scrolls */
.mobile-security-industries__heading {
  position: sticky;
  top: 120px;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
  word-break: break-word;
}

.mobile-security-industries__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.mobile-security-industries__list-group {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-x6);
  min-width: 0;
}

.mobile-security-industries__list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.mobile-security-industries__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

@media (max-width: 1024px) {
  .mobile-security-industries__columns {
    flex-direction: column;
    gap: var(--spacing-x10);
  }

  .mobile-security-industries__heading {
    position: static;
    flex: none;
    width: 100%;
    font-size: 40px;
  }

  .mobile-security-industries__list-group {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .mobile-security-industries__heading {
    font-size: 32px;
  }
}

/* ==== ai-approach ==== */
.ai-approach__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.ai-approach__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.ai-approach__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
  word-break: break-word;
}

.ai-approach__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.ai-approach__heading {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.ai-approach__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.ai-approach__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  word-break: break-word;
}

.ai-approach__statement {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 28px;
  color: var(--color-content-primary);
}

.ai-approach__details {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-x5);
  min-width: 0;
}

.ai-approach__body {
  margin: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
}

/* Key takeaway — echoes the brand timeline connector */
.ai-approach__highlight {
  margin: 0;
  padding-inline-start: var(--spacing-x6);
  border-inline-start: 4px solid var(--color-surface-inverted);
  font-size: 20px;
  color: var(--color-content-primary);
}

@media (max-width: 1024px) {
  .ai-approach__heading {
    font-size: 40px;
  }

  .ai-approach__columns {
    flex-direction: column;
    gap: var(--spacing-x8);
  }

  .ai-approach__statement,
  .ai-approach__details {
    flex: none;
    width: 100%;
  }

  .ai-approach__statement {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .ai-approach__eyebrow {
    font-size: 16px;
  }

  .ai-approach__heading {
    font-size: 32px;
  }

  .ai-approach__statement {
    font-size: 22px;
  }

  .ai-approach__body,
  .ai-approach__highlight {
    font-size: 18px;
  }
}

/* Problem-first flow — four lenses leading into the opportunity */
.ai-approach__flow {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x5);
  width: 100%;
  padding-block-start: var(--spacing-x10);
  border-block-start: 1.5px solid var(--color-border-primary);
}

.ai-approach__flow-label {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.64px;
  text-transform: uppercase;
  color: var(--color-content-secondary);
}

.ai-approach__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
  margin: 0;
}

.ai-approach__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  padding: var(--spacing-x6);
  border: 1.5px solid var(--color-border-primary);
  word-break: break-word;
}

.ai-approach__step-index {
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.64px;
  text-transform: uppercase;
  color: var(--color-primary-400);
}

.ai-approach__step:hover .ai-approach__step-icon {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

.ai-approach__step-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
}

/* Chevron badge centred on the gap between steps */
.ai-approach__connector {
  position: absolute;
  top: 50%;
  right: calc(var(--layout-gap) / -2);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-surface-primary);
  color: var(--color-content-brand);
  transform: translate(50%, -50%);
}

.ai-approach__connector-icon {
  width: 20px;
  height: 20px;
}

/* Final step — brand surface for the opportunity */
.ai-approach__result {
  border-color: var(--color-surface-inverted);
  background-color: var(--color-surface-inverted);
}

.ai-approach__result .ai-approach__step-index {
  color: color-mix(in srgb, var(--color-content-inverted) 70%, transparent);
}

.ai-approach__result .ai-approach__step-label {
  color: var(--color-content-inverted);
}

.ai-approach__result-icon {
  width: 32px;
  height: 32px;
  margin-block: 14px;
  color: var(--color-content-inverted);
}

@media (max-width: 1280px) {
  .ai-approach__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-approach__connector {
    display: none;
  }

  .ai-approach__result {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .ai-approach__flow {
    padding-block-start: var(--spacing-x8);
  }

  .ai-approach__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-x4);
  }

  .ai-approach__result {
    grid-column: span 1;
  }

  .ai-approach__step {
    padding: var(--spacing-x5);
  }

  .ai-approach__step-label {
    font-size: 18px;
  }
}

/* ==== ai-manufacturing ==== */
.ai-manufacturing__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: var(--spacing-x10);
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.ai-manufacturing__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.ai-manufacturing__intro {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x8);
  min-width: 0;
  word-break: break-word;
}

.ai-manufacturing__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
}

.ai-manufacturing__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.ai-manufacturing__heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.ai-manufacturing__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.ai-manufacturing__copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x5);
  width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.ai-manufacturing__body {
  margin: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
}

.ai-manufacturing__statement {
  margin: 0;
  font-size: 28px;
  color: var(--color-content-primary);
}

.ai-manufacturing__image-frame {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: clip;
}

.ai-manufacturing__image {
  object-fit: cover;
  object-position: center;
}

.ai-manufacturing__areas {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-x5);
  min-width: 0;
}

.ai-manufacturing__list-label {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.64px;
  text-transform: uppercase;
  color: var(--color-content-secondary);
}

.ai-manufacturing__list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Assessment criteria — brand surface closing the section */
.ai-manufacturing__criteria {
  display: flex;
  align-items: center;
  gap: var(--layout-gap);
  width: 100%;
  padding: var(--spacing-x10);
  background-color: var(--color-surface-inverted);
  color: var(--color-content-inverted);
  word-break: break-word;
}

.ai-manufacturing__criteria-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

.ai-manufacturing__criteria-list {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: var(--spacing-x3);
  min-width: 0;
  margin: 0;
}

.ai-manufacturing__criterion {
  padding: var(--spacing-x2) var(--spacing-x4);
  border: 1.5px solid
    color-mix(in srgb, var(--color-content-inverted) 35%, transparent);
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.64px;
  text-transform: uppercase;
  color: var(--color-content-inverted);
}

@media (max-width: 1024px) {
  .ai-manufacturing__columns {
    flex-direction: column;
  }

  .ai-manufacturing__intro {
    flex: none;
    width: 100%;
  }

  .ai-manufacturing__areas {
    flex: none;
    width: 100%;
  }

  .ai-manufacturing__criteria {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-x6);
    padding: var(--spacing-x8);
  }

  .ai-manufacturing__criteria-title,
  .ai-manufacturing__criteria-list {
    flex: none;
    width: 100%;
  }

  .ai-manufacturing__criteria-title {
    font-size: 28px;
  }

  .ai-manufacturing__heading {
    font-size: 40px;
  }

  .ai-manufacturing__statement {
    font-size: 24px;
  }

  .ai-manufacturing__image-frame {
    height: 280px;
  }
}

@media (max-width: 768px) {
  .ai-manufacturing__eyebrow {
    font-size: 16px;
  }

  .ai-manufacturing__heading {
    font-size: 32px;
  }

  .ai-manufacturing__body {
    font-size: 18px;
  }

  .ai-manufacturing__statement {
    font-size: 22px;
  }

  .ai-manufacturing__image-frame {
    height: 220px;
  }

  .ai-manufacturing__criteria {
    padding: var(--spacing-x6) var(--spacing-x5);
  }

  .ai-manufacturing__criteria-title {
    font-size: 24px;
  }

  .ai-manufacturing__criterion {
    font-size: 14px;
  }
}

/* ==== ai-why-megam ==== */
.ai-why-megam__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.ai-why-megam__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.ai-why-megam__heading {
  margin: 0;
  max-width: var(--measure-heading);
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
  word-break: break-word;
}

.ai-why-megam__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

/* 3 + 2 layout: first row thirds, second row halves */
.ai-why-megam__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
}

.ai-why-megam__card {
  grid-column: span 2;
  max-width: none;
  height: 100%;
}

.ai-why-megam__card:nth-child(n + 4) {
  grid-column: span 3;
}

.ai-why-megam__icon {
  width: 40px;
  height: 40px;
}

.ai-why-megam__card .icon-container__big {
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.ai-why-megam__card:hover .icon-container__big {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

@media (max-width: 1024px) {
  .ai-why-megam__heading {
    font-size: 40px;
  }

  .ai-why-megam__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-why-megam__card,
  .ai-why-megam__card:nth-child(n + 4) {
    grid-column: span 1;
  }

  .ai-why-megam__card:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .ai-why-megam__heading {
    font-size: 32px;
  }

  .ai-why-megam__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-why-megam__card:last-child {
    grid-column: span 1;
  }

  .ai-why-megam__card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-why-megam__card .icon-container__big {
    transition: none;
  }
}

/* ==== cam-guard-benefits ==== */
.cam-guard-benefits__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.cam-guard-benefits__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.cam-guard-benefits__heading {
  margin: 0;
  max-width: var(--measure-heading);
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.cam-guard-benefits__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.cam-guard-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
  margin: 0;
}

.cam-guard-benefits__item {
  position: relative;
}

/* Grid-scoped so it wins over OutcomeCard regardless of stylesheet order */
.cam-guard-benefits__grid .cam-guard-benefits__card {
  max-width: none;
  height: 100%;
}

.cam-guard-benefits__icon {
  width: 40px;
  height: 40px;
}

.cam-guard-benefits__card .icon-container__big {
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.cam-guard-benefits__item:hover .icon-container__big {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

@media (max-width: 1024px) {
  .cam-guard-benefits__heading {
    font-size: 40px;
  }

  .cam-guard-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .cam-guard-benefits__heading {
    font-size: 32px;
  }

  .cam-guard-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cam-guard-benefits__grid .cam-guard-benefits__card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cam-guard-benefits__card .icon-container__big {
    transition: none;
  }
}

/* ==== cam-guard-challenge ==== */
.cam-guard-challenge__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.cam-guard-challenge__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x15);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.cam-guard-challenge__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  max-width: var(--measure-heading);
  word-break: break-word;
}

.cam-guard-challenge__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.cam-guard-challenge__heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.cam-guard-challenge__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.cam-guard-challenge__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
}

.cam-guard-challenge__copy {
  position: sticky;
  top: 120px;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  word-break: break-word;
}

.cam-guard-challenge__statement {
  margin: 0;
  font-size: 28px;
  color: var(--color-content-primary);
}

.cam-guard-challenge__list {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

.cam-guard-challenge__closing {
  width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  word-break: break-word;
}

.cam-guard-challenge__closing-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x3);
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.cam-guard-challenge__closing-lead {
  font-size: 28px;
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.cam-guard-challenge__closing-statement {
  max-width: 1120px;
  font-size: 40px;
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
}

@media (max-width: 1024px) {
  .cam-guard-challenge__content {
    gap: var(--spacing-x10);
  }

  .cam-guard-challenge__heading {
    font-size: 40px;
  }

  .cam-guard-challenge__columns {
    flex-direction: column;
  }

  .cam-guard-challenge__copy {
    position: static;
    flex: none;
    width: 100%;
  }

  .cam-guard-challenge__list {
    flex: none;
    width: 100%;
  }

  .cam-guard-challenge__statement,
  .cam-guard-challenge__closing-lead {
    font-size: 24px;
  }

  .cam-guard-challenge__closing-statement {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .cam-guard-challenge__eyebrow {
    font-size: 16px;
  }

  .cam-guard-challenge__heading {
    font-size: 32px;
  }

  .cam-guard-challenge__statement,
  .cam-guard-challenge__closing-lead {
    font-size: 22px;
  }

  .cam-guard-challenge__closing-statement {
    font-size: 28px;
  }
}

/* ==== cam-guard-industries ==== */
.cam-guard-industries__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.cam-guard-industries__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
  padding-block: var(--spacing-x5);
}

/* Heading stays in view while the industry list scrolls */
.cam-guard-industries__heading {
  position: sticky;
  top: 120px;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
  word-break: break-word;
}

.cam-guard-industries__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.cam-guard-industries__list {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

@media (max-width: 1024px) {
  .cam-guard-industries__columns {
    flex-direction: column;
    gap: var(--spacing-x10);
  }

  .cam-guard-industries__heading {
    position: static;
    flex: none;
    width: 100%;
    font-size: 40px;
  }

  .cam-guard-industries__list {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .cam-guard-industries__heading {
    font-size: 32px;
  }
}

/* ==== cam-guard-intro ==== */
.cam-guard-intro__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.cam-guard-intro__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.cam-guard-intro__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
  word-break: break-word;
}

.cam-guard-intro__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.cam-guard-intro__heading {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.cam-guard-intro__accent {
  display: block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.cam-guard-intro__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap);
  width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  word-break: break-word;
}

.cam-guard-intro__statement {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 28px;
  color: var(--color-content-primary);
}

.cam-guard-intro__details {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-x5);
  min-width: 0;
}

.cam-guard-intro__body {
  margin: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
}

/* Key takeaway — echoes the brand timeline connector */
.cam-guard-intro__highlight {
  margin: 0;
  padding-inline-start: var(--spacing-x6);
  border-inline-start: 4px solid var(--color-surface-inverted);
  font-size: 20px;
  color: var(--color-content-primary);
}

@media (max-width: 1024px) {
  .cam-guard-intro__heading {
    font-size: 40px;
  }

  .cam-guard-intro__columns {
    flex-direction: column;
    gap: var(--spacing-x8);
  }

  .cam-guard-intro__statement,
  .cam-guard-intro__details {
    flex: none;
    width: 100%;
  }

  .cam-guard-intro__statement {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .cam-guard-intro__eyebrow {
    font-size: 16px;
  }

  .cam-guard-intro__heading {
    font-size: 32px;
  }

  /* Phones are too narrow to hold the accent phrase on one line */
  .cam-guard-intro__accent {
    white-space: normal;
  }

  .cam-guard-intro__statement {
    font-size: 22px;
  }

  .cam-guard-intro__body,
  .cam-guard-intro__highlight {
    font-size: 18px;
  }
}

/* ==== cam-guard-why ==== */
.cam-guard-why__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.cam-guard-why__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.cam-guard-why__heading {
  margin: 0;
  max-width: var(--measure-heading);
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
  word-break: break-word;
}

.cam-guard-why__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

/* 3 + 2 layout: both rows in thirds, a container with a surface-colored border fills the last slot */
.cam-guard-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
}

.cam-guard-why__placeholder {
  border: 1.5px solid var(--color-surface-primary);
}

/* Grid-scoped so it wins over OutcomeCard regardless of stylesheet order */
.cam-guard-why__grid .cam-guard-why__card {
  max-width: none;
  height: 100%;
}

.cam-guard-why__icon {
  width: 40px;
  height: 40px;
}

.cam-guard-why__card .icon-container__big {
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.cam-guard-why__card:hover .icon-container__big {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

@media (max-width: 1024px) {
  .cam-guard-why__heading {
    font-size: 40px;
  }

  .cam-guard-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two columns: the odd fifth card spans the row, so the filler goes away */
  .cam-guard-why__card:nth-last-child(2) {
    grid-column: span 2;
  }

  .cam-guard-why__placeholder {
    display: none;
  }
}

@media (max-width: 768px) {
  .cam-guard-why__heading {
    font-size: 32px;
  }

  .cam-guard-why__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cam-guard-why__card:nth-last-child(2) {
    grid-column: span 1;
  }

  .cam-guard-why__grid .cam-guard-why__card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cam-guard-why__card .icon-container__big {
    transition: none;
  }
}

/* ==== connection-icon ==== */
.connection-icon {
  display: block;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  mask: var(--icon-mask) center / contain no-repeat;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
}

/* ==== icon-container ==== */
.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.icon-container__icon {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Size=Small — 60px container, 32px icon */
.icon-container__small {
  width: 60px;
  height: 60px;
}

.icon-container__small .icon-container__icon {
  width: 32px;
  height: 32px;
}

/* Size=Big — 80px container, 40px icon */
.icon-container__big {
  width: 80px;
  height: 80px;
  overflow: clip;
}

.icon-container__big .icon-container__icon {
  width: 40px;
  height: 40px;
}

/* Type=Default */
.icon-container__default {
  background-color: var(--color-surface-secondary);
}

.icon-container__small.icon-container__default {
  color: var(--color-content-secondary);
}

.icon-container__big.icon-container__default {
  color: var(--color-content-primary);
}

/* Type=Focused */
.icon-container__focused {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

/* ==== outcome-card ==== */
.outcome-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x4);
  width: 100%;
  max-width: 426.667px;
  min-height: 231px;
  padding: var(--spacing-x5);
  border: 1.5px solid var(--color-border-primary);
  overflow: clip;
  word-break: break-word;
}

.outcome-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x2);
  width: 100%;
  flex-shrink: 0;
}

.outcome-card__title {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.outcome-card__body {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

/* ==== what-we-do ==== */
.what-we-do__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.what-we-do__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.what-we-do__introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  max-width: var(--measure-heading);
  word-break: break-word;
}

.what-we-do__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
}

.what-we-do__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.what-we-do__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.what-we-do__line {
  display: block;
}

.what-we-do__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.what-we-do__body {
  margin: 0;
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.what-we-do__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
}

.what-we-do__card {
  max-width: none;
  height: 100%;
  box-sizing: border-box;
}


.what-we-do__card .icon-container__big {
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.what-we-do__card:hover .icon-container__big {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

@media (max-width: 1024px) {
  .what-we-do__heading {
    font-size: 40px;
  }

  .what-we-do__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .what-we-do__heading {
    font-size: 32px;
  }

  .what-we-do__body {
    font-size: 18px;
  }

  .what-we-do__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== feature-row ==== */
.feature-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-x6);
  width: 100%;
  padding-block: var(--spacing-x5);
  border-block: 1.5px solid var(--color-border-primary);
  word-break: break-word;
}

/* Collapse shared edge when rows stack */
.feature-row + .feature-row {
  border-top: none;
}

.feature-row__with-body {
  align-items: flex-start;
}

.feature-row__icon {
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.feature-row:hover .feature-row__icon {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

.feature-row__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-x1);
  min-width: 0;
}

.feature-row__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.feature-row__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

@media (max-width: 768px) {
  .feature-row {
    gap: var(--spacing-x4);
  }

  .feature-row__title {
    font-size: 18px;
  }

  .feature-row__body {
    font-size: 16px;
  }
}

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

/* ==== why-megam ==== */
.why-megam__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.why-megam__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.why-megam__heading {
  margin: 0;
  max-width: var(--measure-heading);
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
  word-break: break-word;
}

.why-megam__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

/* 3 + 2 layout: first row thirds, second row halves */
.why-megam__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
}

.why-megam__card {
  grid-column: span 2;
  max-width: none;
  height: 100%;
}

.why-megam__card:nth-child(n + 4) {
  grid-column: span 3;
}

.why-megam__icon {
  width: 40px;
  height: 40px;
}

.why-megam__card .icon-container__big {
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.why-megam__card:hover .icon-container__big {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

@media (max-width: 1024px) {
  .why-megam__heading {
    font-size: 40px;
  }

  .why-megam__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-megam__card,
  .why-megam__card:nth-child(n + 4) {
    grid-column: span 1;
  }

  .why-megam__card:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .why-megam__heading {
    font-size: 32px;
  }

  .why-megam__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .why-megam__card:last-child {
    grid-column: span 1;
  }

  .why-megam__card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-megam__card .icon-container__big {
    transition: none;
  }
}

/* ==== device-boss-spotlight ==== */
.device-boss-spotlight__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.device-boss-spotlight__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.device-boss-spotlight__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
  word-break: break-word;
}

.device-boss-spotlight__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.device-boss-spotlight__heading {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.device-boss-spotlight__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.device-boss-spotlight__columns {
  display: flex;
  align-items: center;
  gap: var(--layout-gap);
  width: 100%;
}

.device-boss-spotlight__copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  word-break: break-word;
}

.device-boss-spotlight__statement {
  margin: 0;
  font-size: 28px;
  color: var(--color-content-primary);
}

.device-boss-spotlight__body {
  margin: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
}

.device-boss-spotlight__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-x3);
  margin: 0;
  padding-block-start: var(--spacing-x1);
}

.device-boss-spotlight__platform {
  padding: var(--spacing-x2) var(--spacing-x4);
  border: 1.5px solid var(--color-border-brand);
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.64px;
  /* Platform names keep their own casing (iOS, macOS) */
  color: var(--color-content-brand);
}

.device-boss-spotlight__image-frame {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: clip;
}

.device-boss-spotlight__image {
  object-fit: cover;
  object-position: center;
}

/* Capabilities checklist on the brand surface */
.device-boss-spotlight__panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x8);
  width: 100%;
  padding: var(--spacing-x10);
  background-color: var(--color-surface-inverted);
  color: var(--color-content-inverted);
  word-break: break-word;
}

.device-boss-spotlight__panel-lead {
  margin: 0;
  max-width: var(--measure-body);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: color-mix(in srgb, var(--color-content-inverted) 80%, transparent);
}

.device-boss-spotlight__capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  margin: 0;
}

.device-boss-spotlight__capability {
  display: flex;
  align-items: center;
  gap: var(--spacing-x4);
  padding-block: var(--spacing-x5);
  border-block-start: 1.5px solid
    color-mix(in srgb, var(--color-content-inverted) 25%, transparent);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.device-boss-spotlight__tick {
  flex-shrink: 0;
}

.device-boss-spotlight__closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-gap);
  width: 100%;
}

/* Key takeaway — echoes the brand timeline connector */
.device-boss-spotlight__highlight {
  margin: 0;
  max-width: 820px;
  padding-inline-start: var(--spacing-x6);
  border-inline-start: 4px solid var(--color-surface-inverted);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
  word-break: break-word;
}

@media (max-width: 1024px) {
  .device-boss-spotlight__heading {
    font-size: 40px;
  }

  .device-boss-spotlight__columns {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-x8);
  }

  .device-boss-spotlight__copy,
  .device-boss-spotlight__image-frame {
    flex: none;
    width: 100%;
  }

  .device-boss-spotlight__statement {
    font-size: 24px;
  }

  .device-boss-spotlight__panel {
    padding: var(--spacing-x8);
  }

  .device-boss-spotlight__capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-boss-spotlight__closing {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-x8);
  }
}

@media (max-width: 768px) {
  .device-boss-spotlight__eyebrow {
    font-size: 16px;
  }

  .device-boss-spotlight__heading {
    font-size: 32px;
  }

  .device-boss-spotlight__statement {
    font-size: 22px;
  }

  .device-boss-spotlight__body,
  .device-boss-spotlight__panel-lead,
  .device-boss-spotlight__highlight {
    font-size: 18px;
  }

  .device-boss-spotlight__platform {
    font-size: 14px;
  }

  .device-boss-spotlight__panel {
    padding: var(--spacing-x6) var(--spacing-x5);
  }

  .device-boss-spotlight__capabilities {
    grid-template-columns: minmax(0, 1fr);
  }

  .device-boss-spotlight__capability {
    font-size: 18px;
  }
}

/* ==== mobile-security-focus-areas ==== */
.mobile-security-focus-areas__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
  background-color: var(--color-surface-primary);
}

.mobile-security-focus-areas__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x10);
  width: 100%;
  padding-block: var(--spacing-x5);
}

.mobile-security-focus-areas__heading {
  margin: 0;
  max-width: var(--measure-heading);
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.mobile-security-focus-areas__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.mobile-security-focus-areas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gap);
  width: 100%;
  margin: 0;
}

.mobile-security-focus-areas__item {
  position: relative;
}

/* Step number in the card's top-right corner */
.mobile-security-focus-areas__index {
  position: absolute;
  top: var(--spacing-x5);
  right: var(--spacing-x5);
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  color: var(--color-primary-400);
}

.mobile-security-focus-areas__card {
  max-width: none;
  height: 100%;
}

.mobile-security-focus-areas__icon {
  width: 40px;
  height: 40px;
}

.mobile-security-focus-areas__card .icon-container__big {
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.mobile-security-focus-areas__item:hover .icon-container__big {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

@media (max-width: 1024px) {
  .mobile-security-focus-areas__heading {
    font-size: 40px;
  }

  .mobile-security-focus-areas__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .mobile-security-focus-areas__heading {
    font-size: 32px;
  }

  .mobile-security-focus-areas__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-security-focus-areas__card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-security-focus-areas__card .icon-container__big {
    transition: none;
  }
}

/* ==== country-select ==== */
.country-select {
  /* Static so the list anchors to the field group, not the narrow trigger */
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
}

.country-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-x1);
  padding-inline: var(--spacing-x3) var(--spacing-x2);
  border: none;
  border-inline-end: 1.5px solid var(--color-border-primary);
  border-radius: 0;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.country-select__trigger:hover,
.country-select__trigger[aria-expanded="true"] {
  background-color: var(--color-surface-secondary);
}

.country-select__trigger:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: -2px;
}

.country-select__trigger-dial {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  font-variant-numeric: tabular-nums;
  color: var(--color-content-primary);
}

.country-select__flag {
  width: 24px;
  height: 18px;
  flex-shrink: 0;
  object-fit: cover;
  outline: 1px solid var(--color-border-primary);
  outline-offset: -1px;
}

.country-select__chevron {
  display: block;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease);
}

.country-select__chevron-open {
  transform: rotate(180deg);
}

.country-select__list {
  position: absolute;
  top: calc(100% + 1.5px);
  /* Right-aligned to the field and wider than it, so it grows into the card */
  width: max(calc(100% + 3px), 280px);
  right: -1.5px;
  z-index: 10;
  max-height: 280px;
  overflow-y: auto;
  border: 1.5px solid var(--color-border-primary);
  background-color: var(--color-surface-primary);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-content-primary) 10%, transparent);
}

.country-select__option {
  display: flex;
  align-items: center;
  gap: var(--spacing-x3);
  width: 100%;
  padding: var(--spacing-x3) var(--spacing-x4);
  border: none;
  background: transparent;
  color: var(--color-content-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}

.country-select__option:hover,
.country-select__option:focus-visible {
  background-color: var(--color-surface-secondary);
  outline: none;
}

.country-select__selected {
  color: var(--color-content-brand);
}

.country-select__name {
  flex: 1 1 auto;
  min-width: 0;
}

.country-select__dial {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--color-content-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .country-select__trigger,
  .country-select__option,
  .country-select__chevron {
    transition: none;
  }
}

/* ==== form-field ==== */
.form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x2);
  width: 100%;
  min-width: 0;
}

.form-field__label {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.form-field__asterisk {
  color: var(--color-content-tertiary);
}

.form-field__control {
  width: 100%;
  min-height: 56px;
  padding: var(--spacing-x4);
  border: 1.5px solid var(--color-border-primary);
  border-radius: 0;
  background-color: var(--color-surface-primary);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
  appearance: none;
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.form-field__control::placeholder {
  color: var(--color-content-secondary);
  opacity: 0.7;
}

.form-field__control:hover {
  border-color: var(--color-primary-400);
}

.form-field__control:focus-visible,
.form-field__control:focus {
  border-color: var(--color-border-brand);
  box-shadow: inset 0 0 0 0.5px var(--color-border-brand);
}

.form-field__textarea {
  min-height: 104px;
  resize: vertical;
}

.form-field__invalid .form-field__control {
  border-color: var(--color-content-tertiary);
  background-color: color-mix(
    in srgb,
    var(--color-surface-tertiary) 35%,
    var(--color-surface-primary)
  );
}

.form-field__invalid .form-field__control:focus {
  box-shadow: inset 0 0 0 0.5px var(--color-content-tertiary);
}

.form-field__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-x4);
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.form-field__hint {
  color: var(--color-content-secondary);
}

.form-field__error {
  color: var(--color-content-tertiary);
}

.form-field__count {
  flex-shrink: 0;
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  color: var(--color-content-secondary);
}

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

/* Field with a leading slot (e.g. country picker): the group carries the border */
.form-field__group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1.5px solid var(--color-border-primary);
  background-color: var(--color-surface-primary);
  transition:
    border-color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.form-field__group:hover {
  border-color: var(--color-primary-400);
}

.form-field__group:focus-within {
  border-color: var(--color-border-brand);
  box-shadow: inset 0 0 0 0.5px var(--color-border-brand);
}

.form-field__group .form-field__control,
.form-field__group .form-field__control:hover,
.form-field__group .form-field__control:focus,
.form-field__invalid .form-field__group .form-field__control,
.form-field__invalid .form-field__group .form-field__control:focus {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 53px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.form-field__invalid .form-field__group {
  border-color: var(--color-content-tertiary);
  background-color: color-mix(
    in srgb,
    var(--color-surface-tertiary) 35%,
    var(--color-surface-primary)
  );
}

.form-field__invalid .form-field__group:focus-within {
  box-shadow: inset 0 0 0 0.5px var(--color-content-tertiary);
}

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

/* ==== talk-to-an-expert ==== */
.talk-to-an-expert__section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--color-surface-primary);
}

.talk-to-an-expert__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-gap);
  width: 100%;
  padding: var(--spacing-x10) var(--layout-padding-inline) var(--spacing-x20);
}

/* ---- Introduction column ---- */

.talk-to-an-expert__introduction {
  position: sticky;
  top: calc(var(--layout-header-height) + var(--spacing-x10));
  display: flex;
  flex: 0 1 var(--measure-heading);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  min-width: 0;
  padding-block: var(--spacing-x5);
  word-break: break-word;
}

.talk-to-an-expert__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x1);
  width: 100%;
}

.talk-to-an-expert__eyebrow {
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.talk-to-an-expert__heading {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.talk-to-an-expert__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.talk-to-an-expert__steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x3);
  width: 100%;
  max-width: var(--measure-body);
  margin-block-start: var(--spacing-x5);
}

.talk-to-an-expert__steps-label {
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.64px;
  text-transform: uppercase;
  color: var(--color-content-secondary);
}

.talk-to-an-expert__step-list {
  display: flex;
  flex-direction: column;
}

/* Stacked rows share edges, like FAQ */
.talk-to-an-expert__step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-x5);
  padding-block: var(--spacing-x4);
  border-block: 1.5px solid var(--color-border-primary);
}

.talk-to-an-expert__step + .talk-to-an-expert__step {
  border-top: none;
}

.talk-to-an-expert__step-number {
  flex-shrink: 0;
  min-width: 36px;
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--color-content-tertiary);
}

.talk-to-an-expert__step-copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x1);
  min-width: 0;
}

.talk-to-an-expert__step-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
}

.talk-to-an-expert__step-body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

/* ---- Form card ---- */

.talk-to-an-expert__card {
  display: flex;
  flex: 0 1 var(--measure-column);
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-x6);
  min-width: 0;
  padding: var(--spacing-x8);
  border: 1.5px solid var(--color-border-primary);
  background-color: var(--color-surface-primary);
}

.talk-to-an-expert__card-heading {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
}

.talk-to-an-expert__card-accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.talk-to-an-expert__card-body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.talk-to-an-expert__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-x5) var(--spacing-x5);
}

.talk-to-an-expert__full-width {
  grid-column: 1 / -1;
}

.talk-to-an-expert__privacy a {
  color: var(--color-content-brand);
  text-decoration: underline;
  text-underline-position: from-font;
}

.talk-to-an-expert__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x3);
}

.talk-to-an-expert__submit {
  width: 100%;
}

.talk-to-an-expert__submit:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.talk-to-an-expert__submit[aria-busy="true"]:disabled {
  cursor: progress;
  opacity: 0.7;
}

.talk-to-an-expert__privacy {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

/* ---- Success state ---- */

.talk-to-an-expert__success {
  align-items: flex-start;
  gap: var(--spacing-x6);
  scroll-margin-top: calc(var(--layout-header-height) + var(--spacing-x10));
  outline: none;
}

.talk-to-an-expert__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

.talk-to-an-expert__success .talk-to-an-expert__card-body {
  font-size: 18px;
}

@media (max-width: 1024px) {
  .talk-to-an-expert__content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-x8);
    padding-block-end: var(--spacing-x20);
  }

  .talk-to-an-expert__introduction {
    position: static;
    flex: 1 1 auto;
  }

  .talk-to-an-expert__card {
    flex: 1 1 auto;
  }

  .talk-to-an-expert__heading {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .talk-to-an-expert__content {
    padding-block: var(--spacing-x10) var(--spacing-x15);
  }

  .talk-to-an-expert__eyebrow {
    font-size: 16px;
  }

  .talk-to-an-expert__heading {
    font-size: 28px;
  }

  .talk-to-an-expert__card {
    padding: var(--spacing-x6) var(--spacing-x4);
  }

  .talk-to-an-expert__card-heading {
    font-size: 24px;
  }

  .talk-to-an-expert__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== nav-link ==== */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-x1);
  color: var(--color-content-brand);
  text-decoration: none;
}

.nav-link__label {
  font-family: var(--font-nav);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

/* ==== nav-dropdown ==== */
.nav-dropdown {
  position: relative;
  display: inline-flex;
}

/* Label link + chevron toggle, laid out like a single Nav-Link */
.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-x1);
  color: var(--color-content-brand);
}

.nav-dropdown__trigger-link {
  position: relative;
}

/* Underline marks the current section only */
.nav-dropdown__trigger-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-fast) var(--ease);
}

.nav-dropdown__trigger-link[data-active]::after {
  transform: scaleX(1);
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.nav-dropdown__toggle:focus-visible,
.nav-dropdown__trigger-link:focus-visible,
.nav-dropdown__item:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}

.nav-dropdown__chevron {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform var(--duration-fast) var(--ease);
}

.nav-dropdown[data-open] .nav-dropdown__chevron {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */

.nav-dropdown__panel {
  --panel-offset: var(--spacing-x6);

  position: absolute;
  top: calc(100% + var(--panel-offset));
  left: 50%;
  z-index: 1;
  width: 400px;
  background-color: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  box-shadow:
    0 2px 4px rgba(65, 51, 153, 0.04),
    0 16px 40px rgba(65, 51, 153, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition:
    opacity var(--duration-fade) var(--ease),
    transform var(--duration-fast) var(--ease),
    visibility 0s var(--ease) var(--duration-fade);
}

/* Invisible bridge across the gap so hover survives the trip to the panel */
.nav-dropdown__panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: var(--panel-offset);
}

/* Brand rule along the top edge */
.nav-dropdown__panel::after {
  content: "";
  position: absolute;
  inset-inline: -1px;
  top: -1px;
  height: 3px;
  background-color: var(--color-surface-inverted);
}

.nav-dropdown[data-open] .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition:
    opacity var(--duration-fade) var(--ease),
    transform var(--duration-fast) var(--ease),
    visibility 0s;
}

.nav-dropdown__list {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-x2);
  padding-top: calc(var(--spacing-x2) + 2px);
}

/* --------------------------------------------------------------------------
   Items
   -------------------------------------------------------------------------- */

.nav-dropdown__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--spacing-x4);
  padding: var(--spacing-x3);
  color: var(--color-content-primary);
  text-decoration: none;
}

.nav-dropdown__icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-surface-secondary);
  color: var(--color-content-secondary);
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.nav-dropdown__item:hover .nav-dropdown__icon-tile,
.nav-dropdown__item:focus-visible .nav-dropdown__icon-tile,
.nav-dropdown__item[aria-current="page"] .nav-dropdown__icon-tile {
  background-color: var(--color-surface-tertiary);
  color: var(--color-content-tertiary);
}

/* Monochrome SVG tinted with currentColor */
.nav-dropdown__icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon-src) center / contain no-repeat;
  mask: var(--icon-src) center / contain no-repeat;
}

.nav-dropdown__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nav-dropdown__item-label {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-content-primary);
}

.nav-dropdown__item[aria-current="page"] .nav-dropdown__item-label {
  color: var(--color-content-brand);
}

.nav-dropdown__item-description {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: var(--line-height-snug);
  color: var(--color-content-secondary);
}

.nav-dropdown__item-arrow {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--color-content-brand);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity var(--duration-fade) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.nav-dropdown__item:hover .nav-dropdown__item-arrow,
.nav-dropdown__item:focus-visible .nav-dropdown__item-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   Footer link — mirrors Button chevron motion
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Responsive — inside the header drawer the dropdown is an inline accordion
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .nav-dropdown {
    flex-direction: column;
  }

  .nav-dropdown__trigger {
    justify-content: space-between;
  }

  /* Larger tap target, pulled back so the chevron stays on the gutter */
  .nav-dropdown__toggle {
    width: 44px;
    height: 44px;
    margin-block: -10px;
    margin-inline-end: -10px;
  }

  .nav-dropdown__panel {
    --panel-offset: 0px;

    position: relative;
    top: auto;
    left: auto;
    display: none;
    width: auto;
    margin-top: var(--spacing-x4);
    box-shadow: none;
    transform: none;
  }

  .nav-dropdown__panel::before {
    content: none;
  }

  .nav-dropdown[data-open] .nav-dropdown__panel {
    display: block;
    transform: none;
  }
}

@media (max-width: 768px) {
  .nav-dropdown__item-description {
    font-size: 13px;
  }

  .nav-dropdown__item-arrow {
    display: none;
  }

  .nav-dropdown__item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--spacing-x3);
  }

  .nav-dropdown__icon-tile {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown__trigger-link::after,
  .nav-dropdown__chevron,
  .nav-dropdown__panel,
  .nav-dropdown[data-open] .nav-dropdown__panel,
  .nav-dropdown__item,
  .nav-dropdown__icon-tile,
  .nav-dropdown__item-arrow {
    transition: none;
  }

  .nav-dropdown__panel,
  .nav-dropdown[data-open] .nav-dropdown__panel {
    transform: translate(-50%, 0);
  }
}

/* ==== header ==== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: var(--spacing-x3);
  background-color: rgba(251, 246, 244, 0.32);
  -webkit-backdrop-filter: blur(80px);
  backdrop-filter: blur(80px);
}

.header__inner {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  min-width: 0;
  padding-inline: var(--spacing-x10);
}

.header__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 4px 12px;
}

.header__logo img {
  width: 129px;
  height: 32px;
}

/* Desktop: the drawer wrapper is layout-transparent */
.header__menu {
  display: contents;
}

.header__nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--spacing-x20);
}

.header__cta {
  flex-shrink: 0;
}

.header__menu .header__menu-cta,
.header__menu-toggle {
  display: none;
}

/* --------------------------------------------------------------------------
   Hamburger toggle — three bars that cross into an X
   -------------------------------------------------------------------------- */

.header__menu-toggle {
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-content-brand);
  cursor: pointer;
}

.header__menu-toggle:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}

.header__menu-icon,
.header__menu-icon::before,
.header__menu-icon::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  transition:
    transform var(--duration-fast) var(--ease),
    opacity var(--duration-fast) var(--ease);
}

.header__menu-icon {
  top: 21px;
}

.header__menu-icon::before,
.header__menu-icon::after {
  content: "";
  left: 0;
}

.header__menu-icon::before {
  transform: translateY(-7px);
}

.header__menu-icon::after {
  transform: translateY(7px);
}

.header[data-menu-open] .header__menu-icon {
  background-color: transparent;
}

.header[data-menu-open] .header__menu-icon::before {
  transform: rotate(45deg);
}

.header[data-menu-open] .header__menu-icon::after {
  transform: rotate(-45deg);
}

/* Small laptops: tighten the bar so the CTA stays on screen */
@media (min-width: 1025px) and (max-width: 1280px) {
  .header__inner {
    padding-inline: var(--spacing-x6);
  }

  .header__nav {
    gap: var(--spacing-x8);
  }
}

/* --------------------------------------------------------------------------
   ≤1024: logo + CTA + toggle; nav moves into a full-height drawer
   (the header's backdrop-filter makes it the containing block)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .header__inner {
    gap: var(--spacing-x3);
    min-height: calc(var(--layout-header-height) - 2 * var(--spacing-x3));
    padding-inline: var(--layout-gutter);
  }

  .header__logo {
    margin-inline-end: auto;
    padding-inline: 0;
  }

  .header__menu-toggle {
    display: inline-flex;
    margin-inline-end: -10px;
  }

  .header[data-menu-open] {
    background-color: var(--color-surface-primary);
  }

  .header__menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-x8);
    width: 100%;
    height: calc(100vh - var(--layout-header-height));
    height: calc(100dvh - var(--layout-header-height));
    padding: var(--spacing-x4) var(--layout-gutter) var(--spacing-x10);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-surface-primary);
    border-top: 1px solid var(--color-border-primary);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--duration-fade) var(--ease),
      transform var(--duration-fast) var(--ease),
      visibility 0s var(--ease) var(--duration-fade);
  }

  .header[data-menu-open] .header__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity var(--duration-fade) var(--ease),
      transform var(--duration-fast) var(--ease),
      visibility 0s;
  }

  .header__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Each top-level item is a full-width row */
  .header__nav > * {
    padding-block: var(--spacing-x4);
    border-bottom: 1px solid var(--color-border-primary);
  }
}

@media (max-width: 640px) {
  .header__inner .header__cta {
    display: none;
  }

  .header__menu .header__menu-cta {
    display: inline-flex;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header__menu,
  .header[data-menu-open] .header__menu,
  .header__menu-icon,
  .header__menu-icon::before,
  .header__menu-icon::after {
    transition: none;
  }
}

/* ==== footer-cell ==== */
.footer-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-x2);
  word-break: break-word;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.footer-cell__label {
  width: 100%;
  color: var(--color-content-secondary);
}

.footer-cell__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-x1);
  width: 100%;
  color: var(--color-content-primary);
  text-decoration: none;
}

.footer-cell__link-label {
  min-width: 0;
}

/* Fixed-size clipped box: the chevron slides in left to right with no layout shift. */
.footer-cell__reveal {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow: hidden;
}

.footer-cell__arrow {
  display: block;
  opacity: 0;
  transform: translateX(-100%);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.footer-cell__link:hover .footer-cell__arrow,
.footer-cell__link:focus-visible .footer-cell__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Phones: taller rows for comfortable tap targets, same visual rhythm */
@media (max-width: 640px) {
  .footer-cell {
    gap: 0;
  }

  .footer-cell__label {
    padding-block-end: var(--spacing-x1);
  }

  .footer-cell__link {
    min-height: 40px;
  }
}

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

.footer-cell__text {
  width: 100%;
  color: var(--color-content-primary);
  white-space: pre-wrap;
}

/* ==== footer ==== */
.footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background-color: var(--color-surface-primary);
}

.footer__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-block: var(--spacing-x20);
}

.footer__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-inline: var(--spacing-x10);
}

.footer__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: var(--spacing-x6);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x3);
  flex-shrink: 0;
}

.footer__logo {
  display: flex;
  flex-shrink: 0;
  width: 129px;
  height: 32px;
}

.footer__logo img {
  width: 129px;
  height: 32px;
}

.footer__tagline {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-primary);
  white-space: nowrap;
}

.footer__emails {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x5);
  flex-shrink: 0;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-inline: var(--spacing-x10);
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: var(--spacing-x3);
  border-top: 1.5px solid var(--color-border-primary);
}

.footer__copyright {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
  white-space: nowrap;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--spacing-x5);
  flex-shrink: 0;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  padding: 10px;
  border-radius: 56px;
  color: var(--color-content-secondary);
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.footer__social-icon img {
  display: block;
  max-width: none;
}

@media (max-width: 1024px) {
  .footer__grid {
    flex-wrap: wrap;
    gap: var(--spacing-x8) var(--spacing-x10);
  }

  .footer__brand {
    flex-basis: 100%;
  }

  .footer__bottom-inner {
    flex-wrap: wrap;
    gap: var(--spacing-x3);
  }

  .footer__copyright {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .footer__main {
    padding-block: var(--spacing-x10);
  }

  .footer__grid {
    flex-direction: column;
    gap: var(--spacing-x8);
  }
}

/* ==== static-site additions ==== */

/* "Products" has no landing page: its label is a button that opens the menu */
button.nav-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ==== not-found (404 page) ==== */
.not-found {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--layout-header-height));
  padding: var(--spacing-x15) var(--layout-padding-inline) var(--spacing-x20);
  overflow: hidden;
}

.not-found__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.not-found__background-image {
  object-fit: cover;
  object-position: center top;
  opacity: 0.5;
}

.not-found__background-gradient {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-surface-primary) 0%, transparent) 40%,
    var(--color-surface-primary) 100%
  );
}

.not-found__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--measure-body);
  text-align: center;
}

.not-found__code {
  font-family: var(--font-display);
  font-size: clamp(120px, 16vw, 200px);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--color-content-tertiary);
}

.not-found__eyebrow {
  margin-block-start: var(--spacing-x4);
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-content-brand);
}

.not-found__heading {
  margin-block-start: var(--spacing-x3);
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-content-primary);
}

.not-found__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
}

.not-found__body {
  margin-block-start: var(--spacing-x5);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: var(--line-height-normal);
  color: var(--color-content-secondary);
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-x4);
  margin-block-start: var(--spacing-x8);
}

/* Reuses the nav-dropdown item rows inside a panel like the dropdown's */
.not-found__links {
  width: 100%;
  max-width: 520px;
  margin-block-start: var(--spacing-x10);
  padding: var(--spacing-x2);
  border: 1px solid var(--color-border-primary);
  background-color: var(--color-surface-primary);
  text-align: start;
}

.not-found__links-label {
  padding: var(--spacing-x2) var(--spacing-x3) var(--spacing-x1);
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-content-secondary);
}

@media (max-width: 768px) {
  .not-found {
    padding-block: var(--spacing-x10) var(--spacing-x15);
  }

  .not-found__eyebrow {
    font-size: 16px;
  }

  .not-found__heading {
    font-size: 28px;
  }

  .not-found__body {
    font-size: 16px;
  }

  .not-found__actions {
    flex-direction: column;
    align-self: stretch;
  }
}