/* work-gallery breakpoints, loaded after the shared ones. */

@media (max-width: 900px) {
  .digital-work { height: auto; margin-top: 80px; padding-bottom: 56px; }
  .digital-work .digital-intro h2 { width: min(100%,350px); }
  .digital-work .web-work__viewport { margin-top: 40px; }
  .digital-work .web-work__track img, .digital-work .web-work__track video { width: 200px; height: 289px; border-radius: 0; }
  .work-rail { scroll-padding-inline: 16px; }
  .work-gallery { padding: 60px 0 70px; }
  .work-gallery .section-intro h2 { margin-top: 32px; font-size: 32px; line-height: 32px; }
  .work-gallery .section-intro > p:last-of-type:not(.eyebrow):not(.eyebrow) { margin-top: 32px; font-size: 16px; line-height: 28px; }
  .work-tabs { width: 337px; margin-top: 20px; }
  .work-tab { min-width: 0; flex: 1; padding-inline: 8px; }
  .work-rail { margin-top: 40px; }
  .work-rail__track { gap: 10px; padding-inline: 16px; }
  .work-rail__track img, .work-rail__track video { width: 285px; height: 380px; }
  .work-gallery > .carousel-controls { width: 100%; margin-top: 40px; }
  .web-work { padding: 80px 0 56px; }
  .web-work__viewport { margin-top: 40px; scroll-padding-inline: 16px; }
  .web-work__track { gap: 10px; padding-inline: 16px; }
  .web-work__track img, .web-work__track video { width: 168px; height: 258px; border-radius: 8px; }
  .web-work__controls { margin-top: 40px; padding-inline: 16px; }
  body.web-development-page .web-work .eyebrow { width: 136px; padding: 0; }
  body.web-development-page .web-work .web-section-intro > p:last-child { width: auto; line-height: 24px; }
  body.web-development-page .web-work h2 { width: auto; }
  body.web-development-page .web-work { padding: 81px 0 84px; }
  body.web-development-page .web-work__viewport { margin-top: 31.4px; scroll-padding-inline: 16px; }
  body.web-development-page .web-work__track { gap: 10px; padding-inline: 16px; }
  body.web-development-page .web-work__track img, body.web-development-page .web-work__track video { width: 168px; height: 260px; border-radius: 8px; }
  body.web-development-page .web-work__controls { margin-top: 41px; }
}

/* ---- page variants ---------------------------------------
 * Rules that only apply on email-marketing.
 * Kept scoped to the page exactly as the design wrote them; they live here
 * rather than in a stylesheet of their own so a page is not a unit of CSS. */

@media (max-width: 900px) {
  body.email-marketing-page .email-work { padding-top: 80px; }
  body.email-marketing-page .email-work .web-section-intro h2 { width: 100%; padding-inline: 24px; font-size: 40px; line-height: 42px; }
  body.email-marketing-page .email-work .web-section-intro > p:last-child { margin-top: 20px; padding-inline: 24px; font-size: 16px; }
  body.email-marketing-page .email-work .web-work__viewport { margin-top: 40px; }
  /* Email creatives are long pages, so the phone cards stay tall (211:14943). */
  body.email-marketing-page .email-work .web-work__track img, body.email-marketing-page .email-work .web-work__track video { width: 285px; height: 440px; }
}

@media (min-width: 901px) {
	/* Match the services carousel: align the first card to the page rule,
	   while letting the following cards continue to the viewport edge. */
	.work-rail,
	.web-work__viewport {
		width: 100%;
		margin-inline: auto;
		scroll-padding-inline: var(--rail-left);
	}

	.work-rail__track,
	.web-work__track { padding-inline: var(--rail-left); }

	/* The website page states the same padding again under its own tokens, at
	   the same values, so it needs saying there too. */
	body.web-development-page .web-work__viewport { scroll-padding-inline: var(--rail-left); }
	body.web-development-page .web-work__track { padding-inline: var(--rail-left); }
}

@media (max-width: 900px) {
	/* The phone frame keeps the rail but at 285-wide creatives on the 16px
	   gutter, with the divider under it. */
	body.social-media-marketing-page .digital-work { height: auto; margin-top: 80px; padding: 0; }
	body.social-media-marketing-page .digital-work .digital-intro { width: 382px; max-width: 100%; margin-inline: auto; padding: 0; }
	body.social-media-marketing-page .digital-work .digital-intro h2 { width: auto; margin-top: 32px; font-size: 32px; line-height: 32px; }
	body.social-media-marketing-page .digital-work .digital-intro > p:last-child { margin-top: 19px; font-size: 16px; line-height: 24px; letter-spacing: normal; }
	body.social-media-marketing-page .digital-work .web-work__viewport { margin-top: 27px; scroll-padding-inline: 16px; }
	body.social-media-marketing-page .web-arrow,
	body.social-media-marketing-page .web-arrow img { height: 26px; }
	body.social-media-marketing-page .digital-work .web-work__track { gap: 10px; padding-inline: 16px; }
	body.social-media-marketing-page .digital-work .web-work__track img,
	body.social-media-marketing-page .digital-work .web-work__track video { width: 285px; height: 380px; }
	body.social-media-marketing-page .web-work__controls { width: 100%; margin-top: 40px; padding-inline: 16px; }

	/* Same page-rule gap as the desktop rule below, at the phone spacing:
	   .digital-results follows with its own 80px margin-top here, which the
	   rail lines -- bound to this section's own (auto) height -- don't reach. */
	body.social-media-marketing-page .digital-work::before,
	body.social-media-marketing-page .digital-work::after { bottom: -80px; }
}

/* ---- scrolling screenshot style, phone sizes ---------------------------
 * The frame's own width mirrors whatever the crop style's `img` is doing at
 * this breakpoint; the height token drops to a shorter card so a full-page
 * capture still reads as a card on a phone screen rather than a strip. The
 * image itself needs no rule here -- style.css pins it to the frame at every
 * width already. */
@media (max-width: 900px) {
	.is-work-scrolling .work-rail__track { --work-frame-height: 380px; }
	.is-work-scrolling .web-work__track { --work-frame-height: 258px; }
	.is-work-scrolling .work-rail__track .work-frame { width: 285px; }
	.is-work-scrolling .web-work__track .work-frame { width: 168px; }

	/* The digital-work base's own mobile card (digital-marketing-page, before
	   social-media-marketing-page narrows it further below). */
	.is-work-scrolling.digital-work .web-work__track { --work-frame-height: 289px; }
	.is-work-scrolling.digital-work .web-work__track .work-frame { width: 200px; }

	body.web-development-page .is-work-scrolling .web-work__track,
	.web-development-page .is-work-scrolling .web-work__track { --work-frame-height: 260px; }

	body.email-marketing-page .is-work-scrolling .web-work__track,
	.email-marketing-page .is-work-scrolling .web-work__track { --work-frame-height: 440px; }
	body.email-marketing-page .is-work-scrolling .web-work__track .work-frame,
	.email-marketing-page .is-work-scrolling .web-work__track .work-frame { width: 285px; }

	body.social-media-marketing-page .is-work-scrolling.digital-work .web-work__track { --work-frame-height: 380px; }
	body.social-media-marketing-page .is-work-scrolling.digital-work .web-work__track .work-frame { width: 285px; }
}