/* =============================================================================
   for-enterprise.css — For In-house & Enterprise page blocks
   ============================================================================= */

/* --- Hero (Insider-style illustrated display)
   Desktop 2705:12925 / tablet 2705:13000 / mobile 2705:12960
   ============================================================================= */

.enterprise-hero {
  background: var(--color-grey-200);
  padding-block: 7.5rem;
  padding-inline: var(--d-4);
}

@media (min-width: 64rem) {
  .enterprise-hero {
    padding-inline: var(--d-10);
  }
}

.enterprise-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--d-12);
  text-align: center;
}

.enterprise-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--d-8);
  width: 100%;
}

.enterprise-hero__eyebrow {
  margin: 0;
  color: var(--color-grey-500);
}

.enterprise-hero__title {
  margin: 0;
  width: 100%;
}

/* Override global desktop/mobile toggle — three breakpoints on this page */
.enterprise-hero__title .display--illustrated-desktop,
.enterprise-hero__title .display--illustrated-tablet {
  display: none;
}

/* Illustration sits in a 72×56 “invite” slot (Figma) and overflows it.
   Art is 92×50, centered — same at every breakpoint. Pinning width/height
   keeps the SVG from collapsing in the flex line on mobile. */
.enterprise-hero__title .display__art-wrap {
  position: relative;
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 3.5rem;
  overflow: visible;
}

.enterprise-hero__title .display__art {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.74375rem;
  height: 3.125rem;
  max-width: none;
}

/* Mobile line-breaks below the 768px tablet artboard — the 2-line title
   ("before [art] your CEO asks") does not fit at ~640–767. Keep Display Small
   (48px) in that band; drop to 40px only on true mobile. */
@media (max-width: 47.99rem) {
  .enterprise-hero__title .display--illustrated-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    overflow: visible;
  }

  .enterprise-hero__title .display--illustrated-mobile .display__line {
    flex: 0 0 100%;
    text-align: center;
  }

  .enterprise-hero__title .display--illustrated-mobile .display__line--with-art {
    --display-art-gap: var(--d-6);
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
}

@media (max-width: 39.99rem) {
  .enterprise-hero__title {
    font-size: 2.5rem;
    line-height: 3rem;
    letter-spacing: -0.025em;
  }
}

/* Tablet — Figma 2705:13000 (768)
   Know the whole story / before [art] your CEO asks */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .enterprise-hero__title .display--illustrated-mobile {
    display: none;
  }

  .enterprise-hero__title .display--illustrated-tablet {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    align-items: flex-start;
    overflow: visible;
  }

  .enterprise-hero__title .display--illustrated-tablet .display__line {
    flex: 0 0 100%;
    text-align: center;
  }

  .enterprise-hero__title .display--illustrated-tablet .display__line--with-art {
    --display-art-gap: var(--d-6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
}

/* Desktop — two-line title */
@media (min-width: 64rem) {
  .enterprise-hero__title .display--illustrated-mobile,
  .enterprise-hero__title .display--illustrated-tablet {
    display: none;
  }

  .enterprise-hero__title .display--illustrated-desktop {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    align-items: flex-start;
    overflow: visible;
  }

  .enterprise-hero__title .display--illustrated-desktop .display__line {
    flex-shrink: 0;
  }

  .enterprise-hero__title .display--illustrated-desktop .display__line:not(.display__line--with-art) {
    flex: 0 0 100%;
    text-align: center;
  }

  .enterprise-hero__title .display--illustrated-desktop .display__line--with-art {
    --display-art-gap: var(--d-6);
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
}

.enterprise-hero__lede {
  margin: 0;
  width: 100%;
  text-align: center;
}

@media (min-width: 40rem) {
  .enterprise-hero__lede {
    max-width: 40.625rem; /* 650px — Figma 2705:12925 / 2705:13000 */
  }
}

.enterprise-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--d-2);
}

/* --- The shift (quote panel + problem/shift cards) --- */

.enterprise-shift {
  background: var(--color-grey-200);
  padding: var(--d-3);
}

.enterprise-shift__panel {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 6.25rem var(--d-4);
  background-image: url("/images/case-studies/aws-case-study-hero-gradient.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 40rem) {
  .enterprise-shift__panel {
    padding: 7.5rem var(--d-8);
  }
}

.enterprise-shift__cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.1));
}

@media (min-width: 40rem) {
  .enterprise-shift__cards {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    max-width: 62.5rem;
    margin-inline: auto;
  }
}

.enterprise-shift__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  padding: var(--d-6);
  border-radius: var(--radius-lg);
}

.enterprise-shift__card--problem {
  gap: var(--d-12);
  background: var(--color-grey-200);
}

.enterprise-shift__card--shift {
  gap: var(--d-8);
  background: var(--surface-card-yellow);
}

@media (min-width: 40rem) {
  .enterprise-shift__card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 26.625rem;
    justify-content: space-between;
    gap: 0;
  }
}

.enterprise-shift__head {
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
  align-items: flex-start;
}

.enterprise-shift__label {
  margin: 0;
  color: var(--color-grey-500);
}

.enterprise-shift__title {
  margin: 0;
  font-family: var(--font-h3-mono-family);
  font-size: var(--font-h3-mono-size);
  font-weight: var(--font-h3-mono-weight);
  line-height: var(--font-h3-mono-line);
  letter-spacing: var(--font-h3-mono-tracking);
  color: var(--text);
}

@media (min-width: 40rem) {
  .enterprise-shift__title {
    font-family: var(--font-h2-mono-family);
    font-size: var(--font-h2-mono-size);
    font-weight: var(--font-h2-mono-weight);
    line-height: var(--font-h2-mono-line);
    letter-spacing: var(--font-h2-mono-tracking);
  }
}

.enterprise-shift__detail {
  margin: 0;
}

.enterprise-shift__art {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: auto;
}

.enterprise-shift__art-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: var(--d-10);
}

/* --- Features (homepage home-features structure + scaling) --- */

.enterprise-features {
  padding-block: 7.5rem var(--d-20); /* 120 / 80 — Figma 2524:13608 */
  padding-inline: var(--d-3);
  background: var(--surface);
}

.enterprise-features .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-12);
}

@media (min-width: 40rem) {
  .enterprise-features .block-header {
    gap: var(--d-10);
  }
}

.enterprise-features__list {
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.enterprise-features__row {
  display: flex;
  gap: var(--d-6);
  align-items: flex-start;
  min-width: 0;
}

.enterprise-features__row--copy-right {
  flex-direction: row;
}

.enterprise-features__description {
  display: flex;
  flex: 0 0 18.75rem;
  flex-direction: column;
  gap: var(--d-2);
  padding-block: var(--d-8);
  min-width: 0;
}

.enterprise-features__label,
.enterprise-features__body {
  margin: 0;
}

.enterprise-features__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 35.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-grey-300);
  overflow: hidden;
}

/* Row 1 — Figma 2524:13608 — features-bg-05 + new-business overlay */
.enterprise-features__media--exec {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-4);
  background-color: var(--color-grey-300);
}

.enterprise-features__media--exec::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/images/features/features-bg-05.png") center / cover no-repeat;
  pointer-events: none;
}

.enterprise-features__exec-img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: min(100%, 38.0625rem); /* 609px — Figma overlay */
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Row 2 — Figma 2524:13742 — peach grain + brand-kit overlay */
.enterprise-features__media--brandkit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-4);
  background-color: var(--color-grey-300);
}

.enterprise-features__media--brandkit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/images/features/features-bg-03.png") center / cover no-repeat;
  pointer-events: none;
}

.enterprise-features__brandkit-img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: min(100%, 36.125rem); /* 578px — Figma overlay */
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Row 3 — Figma 2524:13978 — features-bg-05 + sov overlay */
.enterprise-features__media--sov {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-4);
  background-color: var(--color-grey-300);
}

.enterprise-features__media--sov::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/images/features/features-bg-05.png") center / cover no-repeat;
  pointer-events: none;
}

.enterprise-features__sov-img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: min(100%, 36.3125rem); /* 581px — Figma overlay */
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 39.99rem) {
  .enterprise-features {
    padding-inline: var(--d-3);
  }

  .enterprise-features__list {
    gap: var(--d-12);
  }

  .enterprise-features__row,
  .enterprise-features__row--copy-right {
    flex-direction: column;
    align-items: stretch;
    gap: var(--d-4);
  }

  .enterprise-features__row--copy-right .enterprise-features__description {
    order: 1;
  }

  .enterprise-features__row--copy-right .enterprise-features__media {
    order: 2;
  }

  .enterprise-features__description {
    flex: none;
    width: 100%;
    padding-block: 0;
  }

  .enterprise-features__media {
    flex: none;
    width: 100%;
    height: 25rem;
  }
}

@media (min-width: 56.25rem) {
  .enterprise-features .block-header {
    gap: 0;
  }
}


/* Enterprise shift illustrations (same layout hooks as agencies build/magic) */
.enterprise-shift__art--yelling {
  width: 8.5rem;
  height: auto;
}

@media (min-width: 40rem) {
  .enterprise-shift__art--yelling {
    width: 10.575rem;
  }
}

.enterprise-shift__art--world {
  width: 7.5rem;
  height: auto;
}

@media (min-width: 40rem) {
  .enterprise-shift__art--world {
    width: 8.79rem;
  }
}

/* --- Quote CTA (Figma 2524:14057 / 2557:9392) --- */

.enterprise-quote {
  background: var(--color-grey-200);
  padding: var(--d-3);
}

.enterprise-quote__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--d-12);
  width: 100%;
  overflow: hidden;
  padding-block: var(--d-20);
  padding-inline: var(--d-8);
  background: var(--color-grey-300);
  border-radius: var(--radius-lg);
  text-align: center;
}

@media (min-width: 40rem) {
  .enterprise-quote__panel {
    padding-block: 7.5rem;
  }
}

.enterprise-quote__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--d-6);
  width: 100%;
}

.enterprise-quote__eyebrow {
  margin: 0;
  max-width: 28.125rem;
  color: var(--color-grey-500);
}

.enterprise-quote__lede {
  margin: 0;
  max-width: 50rem;
  font-size: var(--font-h3-mono-size);
  font-weight: var(--font-h3-mono-weight);
  line-height: var(--font-h3-mono-line);
  letter-spacing: var(--font-h3-mono-tracking);
}

@media (min-width: 40rem) {
  .enterprise-quote__lede {
    font-size: var(--font-h2-mono-size);
    font-weight: var(--font-h2-mono-weight);
    line-height: var(--font-h2-mono-line);
    letter-spacing: var(--font-h2-mono-tracking);
  }
}

.enterprise-quote__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--d-2);
  flex-shrink: 0;
}

/* --- FAQ block (shared site-faq accordion) --- */

.enterprise-faq {
  background: var(--color-grey-200);
  padding-block: 3.9375rem 7.875rem;
  padding-inline: var(--d-4);
}

.enterprise-faq__inner {
  gap: var(--d-20);
}

@media (min-width: 40rem) {
  .enterprise-faq {
    padding-block: 6.25rem var(--d-20);
  }

  .enterprise-faq__inner {
    gap: var(--d-16);
  }
}

@media (min-width: 56.25rem) {
  .enterprise-faq {
    padding-inline: var(--d-10);
  }
}

/* --- Trusted logos (same as homepage home-trusted) --- */

.home-trusted {
  padding-block-start: var(--space-home-trusted-top);
  padding-block-end: var(--space-home-trusted-bottom);
  padding-inline: var(--d-4);
  background: var(--surface);
}

.home-trusted .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
}

.home-trusted__logos--desktop {
  display: none;
}

.home-trusted__logos--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
}

.home-trusted__row {
  display: flex;
  align-items: stretch;
  gap: var(--d-2);
  min-height: 3.75rem;
}

.home-trusted__cell {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.home-trusted__logo {
  display: block;
  width: var(--d-16);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: brightness(0);
}

.home-trusted__logo[src*="salesforce"],
.home-trusted__logo[src*="elastic"] {
  filter: none;
}

.home-trusted__logo--sm {
  width: var(--d-10);
}

@media (min-width: 56.25rem) {
  .home-trusted {
    padding-inline: var(--d-10);
  }

  .home-trusted__logos--desktop {
    display: block;
  }

  .home-trusted__logos--mobile {
    display: none;
  }

  .home-trusted__row {
    min-height: 7.9375rem;
  }

  .home-trusted__logo {
    width: 6rem;
  }

  .home-trusted__logo--sm {
    width: 4rem;
  }
}