/* =============================================================================
   for-agencies.css — For Agencies page blocks
   ============================================================================= */

/* --- Hero (Insider-style illustrated display)
   Mobile / tablet (2519:9974) / desktop title line-breaks
   ============================================================================= */

.agencies-hero {
  background: var(--color-grey-200);
  padding-block: var(--d-20);
  padding-inline: var(--d-4);
}

@media (min-width: 40rem) {
  .agencies-hero {
    /* Tablet Figma 2519:9974 — 120px block, 16px inline */
    padding-block: 7.5rem;
    padding-inline: var(--d-4);
  }
}

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

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

@media (min-width: 40rem) {
  .agencies-hero__inner {
    gap: var(--d-12);
  }
}

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

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

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

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

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

  .agencies-hero__title .display--illustrated-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }

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

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

  .agencies-hero__title .display--illustrated-mobile .display__art-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 3rem;
  }

  .agencies-hero__title .display--illustrated-mobile .display__art {
    height: 3rem;
  }
}

/* Tablet — Figma 2519:9974 (768)
   Walk into every / status call already / knowing [art] the story */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .agencies-hero__title .display--illustrated-mobile {
    display: none;
  }

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

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

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

  .agencies-hero__title .display--illustrated-tablet .display__art-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 1lh;
  }

  .agencies-hero__title .display--illustrated-tablet .display__art {
    height: 3.5rem; /* 56px — matches display-s line */
  }
}

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

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

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

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

  .agencies-hero__title .display--illustrated-desktop .display__line--with-art {
    --display-art-gap: var(--d-4);
    align-items: center;
    justify-content: center;
  }

  .agencies-hero__title .display--illustrated-desktop .display__art-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 1lh;
  }

  .agencies-hero__title .display--illustrated-desktop .display__art {
    height: 3.5rem;
  }
}

.agencies-hero__lede {
  margin: 0;
  max-width: 17.5rem;
  text-align: center;
}

@media (max-width: 39.99rem) {
  .agencies-hero__lede {
    font-family: var(--font-body-mono-family);
    font-size: var(--font-body-mono-size);
    font-weight: var(--font-body-mono-weight);
    line-height: var(--font-body-mono-line);
    letter-spacing: var(--font-body-mono-tracking);
  }
}

@media (min-width: 40rem) {
  .agencies-hero__lede {
    max-width: 28.125rem; /* 450px — tablet/desktop Figma */
  }
}

.agencies-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) --- */

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

.agencies-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) {
  .agencies-shift__panel {
    padding: 7.5rem var(--d-8);
  }
}

.agencies-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) {
  .agencies-shift__cards {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    max-width: 62.5rem;
    margin-inline: auto;
  }
}

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

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

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

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

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

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

.agencies-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) {
  .agencies-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);
  }
}

.agencies-shift__detail {
  margin: 0;
}

.agencies-shift__foot--problem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--d-8);
  width: 100%;
}

@media (min-width: 40rem) {
  .agencies-shift__foot--problem {
    flex-direction: row;
    align-items: flex-end;
    gap: 2.25rem;
  }

  .agencies-shift__foot--problem .agencies-shift__detail {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
  }

  .agencies-shift__foot--problem .agencies-shift__art--build {
    order: 2;
  }
}

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

.agencies-shift__art--build {
  width: 5.4375rem;
  height: auto;
}

@media (min-width: 40rem) {
  .agencies-shift__art--build {
    width: 5.9375rem;
  }
}

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

.agencies-shift__art--magic {
  width: 10.1875rem;
  height: auto;
}

@media (min-width: 40rem) {
  .agencies-shift__art--magic {
    width: 13.586rem;
  }
}

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

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

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

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

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

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

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

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

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

.agencies-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 */
.agencies-features__media--exec {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-4);
  background-color: var(--color-grey-300);
}

.agencies-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;
}

.agencies-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 — realtime-alerts on peach grain (features-bg-03; no ASSET note on card) */
.agencies-features__media--coverage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-4);
  background-color: var(--color-grey-300);
}

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

.agencies-features__coverage-img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: min(100%, 29.0625rem); /* ~465px — Figma overlay */
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Row 3 — features-bg-02 + change-project overlay */
.agencies-features__media--security {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-4);
  background-color: var(--color-grey-300);
}

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

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

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

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

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

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

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

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

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

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

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

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

.agencies-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) {
  .agencies-quote__panel {
    padding-block: 7.5rem;
  }
}

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

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

.agencies-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) {
  .agencies-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);
  }
}

.agencies-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) --- */

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

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

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

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

@media (min-width: 56.25rem) {
  .agencies-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;
  }
}