/* hero breakpoints, loaded after the shared ones. */

@media (max-width: 900px) {
  .digital-hero { height: auto; padding: 60px 0 0; }
  .digital-hero__copy { display: flex; flex-direction: column; align-items: center; padding: 0 24px; text-align: center; }
  .digital-hero__copy h1 { width: min(100%,380px); margin-top: 32px; font-size: 44px; line-height: 39px; }
  .digital-hero__copy > p:last-child { width: min(100%,362px); margin-top: 32px; font-size: 16px; line-height: 24px; }
  .digital-hero__visual { width: 100%; height: auto; margin-top: 48px; padding: 0 16px 60px; overflow-x: auto; scrollbar-width: none; }
  .digital-hero__visual img { width: 940px; max-width: none; height: auto; }
}

@media (min-width: 901px) {
  .hero .eyebrow { width: 416px; height: 32px; line-height: 26px; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; margin-top: -92px; padding-top: 152px; background: var(--paper); }
  .hero__grid { top: 762px; left: 50%; width: 414px; }
  .hero__title { max-width: 382px; margin-top: 32px; font-size: 40px; line-height: 40px; letter-spacing: -.025em; }
  .hero__title span, .hero__title em { display: inline; white-space: normal; }
  .hero__title span::after { content: " "; }
  .hero__copy { max-width: 360px; margin-top: 19px; font-size: 16px; line-height: 21px; }
  .hero__actions { gap: 10px; margin-top: 40px; }
  .hero__actions .button { min-width: 0; width: 164px; min-height: 50px; padding-inline: 12px; font-size: 16px; }
  .hero .hero__visual { order: 2; width: 382px; max-width: calc(100% - 32px); margin-top: 33px; margin-left: auto; margin-right: auto; padding: 0; }
  .hero .hero__visual img { width: 382px; height: 154px; }
  .hero { padding-bottom: 92px; }
}

@media (max-width: 390px) {
  .hero__actions .button { width: 150px; }
  .hero__title { font-size: 34px; }
}

@media (max-width: 900px) {
  body.digital-marketing-page .digital-hero__copy { padding-inline: 24px; }
  body.digital-marketing-page .digital-hero__visual { position: static; width: 100%; height: auto; margin-top: 48px; padding: 0 16px 60px; }
}

@media (max-width: 767px) {
  .hero__actions .button { width: 157px; min-width: 0; padding: 0; }
  .hero__actions { gap: 14px; }
}

@media (max-width: 900px) {
	/* The split hero becomes a stack: copy, then the photograph under it. */
	.branding-hero { height: auto; }
	.branding-hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px 60px; }
	.branding-hero__copy { padding-top: 0; }
	.branding-hero__copy h1 { margin-top: 24px; font-size: 40px; line-height: 42px; }
	.branding-hero__copy > p { margin-top: 20px; font-size: 16px; line-height: 24px; }
	.branding-hero__actions { flex-wrap: wrap; margin-top: 32px; gap: 16px; }
	.branding-hero__actions .button { width: 100%; }
	.branding-hero__visual { width: 100%; height: auto; }
	.branding-hero__visual img { height: auto; }
}

@media (max-width: 390px) {
	.branding-hero__inner { padding-inline: 16px; }
}

@media (min-width: 901px) and (max-width: 1439px) {
	/* Between the phone rules and the width the frames were drawn at, the hero
	   follows its own content: the heading sets at whatever the column allows,
	   the picture scales with its half, and the section ends under the buttons
	   rather than across them. */
	.branding-hero { height: auto; padding-bottom: 60px; }
	.branding-hero__inner { column-gap: 40px; padding-inline: var(--page-gutter); }
	.branding-hero__copy { padding-top: 40px; }
	.branding-hero__copy h1 { font-size: clamp(48px, 5.4vw, 80px); line-height: 1.04; }
	.branding-hero__visual { width: 100%; height: auto; }
	.branding-hero__visual img { height: auto; }
}

@media (max-width: 900px) {
	/* The phone frame stacks the hero and centres it: the copy first, then the
	   profile window under the buttons rather than beside them. */
	body.social-media-marketing-page .branding-hero { min-height: 522px; }
	body.social-media-marketing-page .branding-hero__inner { grid-template-columns: 1fr; gap: 0; padding: 60px 16px 0; }
	body.social-media-marketing-page .branding-hero__copy { display: flex; flex-direction: column; align-items: center; padding-top: 0; text-align: center; }
	body.social-media-marketing-page .branding-hero__copy .eyebrow { height: 30px; min-height: 30px; padding-inline: 19px; }
	body.social-media-marketing-page .branding-hero__copy h1 { width: 320px; max-width: 100%; margin-top: 27px; font-size: 40px; line-height: 40px; letter-spacing: -.02em; }
	body.social-media-marketing-page .branding-hero__copy > p:not(.eyebrow) { width: 347px; max-width: 100%; margin-top: 22px; font-size: 16px; line-height: 24px; }
	body.social-media-marketing-page .branding-hero__actions { justify-content: center; margin-top: 41px; gap: 24px; }
	body.social-media-marketing-page .branding-hero__actions .button--primary,
	body.social-media-marketing-page .branding-hero__actions .button--secondary { width: 157px; min-width: 0; padding-inline: 8px; }
	/* The frame drops the profile window on the phone: the hero closes on its
	   buttons and the ticker follows. */
	body.social-media-marketing-page .branding-hero__visual { display: none; }
}

@media (max-width: 900px) {
	/* Branding's phone artwork sits behind the paper fade (216:26170–26171).
	   Keep the copy in flow so the authoritative paragraph can grow safely. */
	body.branding-page .branding-hero { min-height: 471px; }
	body.branding-page .branding-hero__inner { min-height: 471px; gap: 0; padding: 89px 26px 40px; isolation: isolate; }
	body.branding-page .branding-hero__inner::after { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(35.332deg, #f9f6f6 47.604%, rgba(249,246,246,.916) 65.53%, rgba(249,246,246,0) 80.562%); }
	body.branding-page .branding-hero__copy { position: relative; z-index: 1; }
	body.branding-page .branding-hero__copy h1 { max-width: 362px; margin-top: 32px; font-size: 40px; line-height: 40px; }
	body.branding-page .branding-hero__copy h1 em { display: inline; }
	body.branding-page .branding-hero__copy > p:not(.eyebrow) { max-width: 347px; margin-top: 24px; font-size: 16px; line-height: 24px; }
	body.branding-page .branding-hero__actions { margin-top: 40px; gap: 24px; }
	body.branding-page .branding-hero__actions .button { width: 157px; min-width: 0; max-width: calc(50% - 12px); padding-inline: 8px; }
	body.branding-page .branding-hero__visual { position: absolute; z-index: -2; top: 0; right: -33px; width: 326px; max-width: none; height: 353px; pointer-events: none; }
	body.branding-page .branding-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
}

@media (max-width: 390px) {
	body.branding-page .branding-hero__inner { padding-inline: 16px; }
	body.branding-page .branding-hero__actions { gap: 16px; }
	body.branding-page .branding-hero__actions .button { max-width: calc(50% - 8px); }
}

@media (max-width: 900px) {
  .hero.hero--team { padding-bottom: 0; }
  .hero.hero--team .hero__visual { width: min(382px, calc(100% - 32px)); max-width: none; margin-top: 28px; }
  .hero.hero--team .hero__visual img { width: 100%; height: auto; aspect-ratio: 1440 / 525; object-fit: contain; }
}

@media (max-width: 900px) {
  .hero:not(.hero--team),
  .branding-hero,
  .digital-hero {
    background-image: var(--noise), url("../../assets/img/hero-artwork.png");
    background-size: auto, 100% auto;
    background-position: 0 0, center top;
    background-repeat: repeat;
  }
}
@media (max-width: 767px) {
  body:is(.branding-page,.social-media-marketing-page,.digital-marketing-page) .branding-hero__actions {
    width: min(324px, calc(100% - 24px));
    margin-inline: auto;
    gap: 24px;
  }
  body:is(.branding-page,.social-media-marketing-page,.digital-marketing-page) .branding-hero__actions .button { min-width: 0; padding-inline: 4px; white-space: nowrap; }
}