/* service-showcase breakpoints, loaded after the shared ones. */

@media (max-width: 900px) {
  .services-showcase { padding-top: 80px; }
  .showcase-rail { margin-top: 40px; }
  .showcase-rail { scroll-padding-inline: 16px; }
  .showcase-rail__track { gap: 10px; padding-inline: 16px; }
  .showcase-card { width: 183px; height: 250px; }
  .showcase-card h3 { top: 16px; left: 16px; font-size: 24px; line-height: 24px; }
  .showcase-card__arrow { right: 16px; bottom: 16px; }
  .web-services { min-height: 1020px; margin-top: 80px; }
  .web-services .web-section-intro h2 { font-size: 32px; line-height: 32px; }
  .web-services .web-section-intro > p:last-child { font-size: 16px; line-height: 28px; }
  .web-service-grid { grid-template-columns: repeat(2,183px); gap: 16px; margin-top: 40px; padding-inline: 16px; }
  .web-service-card { min-height: 218px; padding: 16px; }
  .web-service-card h3 { font-size: 20px; line-height: 24px; }
  .web-service-card p { margin-top: 17px; font-size: 14px; line-height: 20px; }
  body.web-development-page .web-services .eyebrow { width: 110px; padding: 0; }
  body.web-development-page .web-services .web-section-intro > p:last-child { width: auto; line-height: 24px; }
  body.web-development-page .web-services h2 { width: auto; }
  body.web-development-page .web-services { padding: 83.5px 0 81px; }
  body.web-development-page .web-service-grid { margin-top: 41px; padding-inline: 16px; gap: 17px; grid-template-columns: repeat(2, 1fr); }
  body.web-development-page .web-service-card { min-height: 218px; padding: 15px 15px 0; }
  body.web-development-page .web-service-card--wine { padding: 16px 16px 0; }
  body.web-development-page .web-service-card h3 { max-width: none; font-size: 20px; line-height: 24px; }
  body.web-development-page .web-service-card p { max-width: none; margin-top: 11.5px; font-size: 14px; line-height: 20px; }
  body.email-marketing-page .email-channel { padding-top: 64px; }
  body.email-marketing-page .email-channel .section-intro { padding-inline: 24px; }
  body.email-marketing-page .email-channel .section-intro h2 { width: 100%; font-size: 40px; line-height: 42px; }
  body.email-marketing-page .email-channel .section-intro p.email-channel__lede, body.email-marketing-page .email-channel .section-intro p.email-channel__lede + p.email-channel__lede { width: 100%; margin-top: 20px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
  body.email-marketing-page .email-channel__grid { margin-top: 48px; grid-template-columns: 1fr; gap: 16px; padding-inline: 16px; }
  body.email-marketing-page .email-channel__grid article { height: auto; padding: 20px 20px 24px; }
  body.email-marketing-page .email-channel__grid h3 { margin-top: 20px; font-size: 26px; line-height: 28px; }
  body.email-marketing-page .email-channel__grid p { width: 100%; margin-top: 12px; font-size: 16px; line-height: 24px; }
}

@media (max-width: 900px) {
	/* One service a row. The illustration keeps its place at the card's foot. */
	.brand-services { padding: 60px 0 80px; }
	.brand-services .section-intro h2 { max-width: none; margin-top: 24px; font-size: 32px; line-height: 34px; }
	.brand-services .section-intro > p:last-of-type:not(.eyebrow) { margin-top: 20px; line-height: 24px; }
	.brand-services__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; padding-inline: 24px; }
	.brand-service-card { height: 300px; }
	.brand-service-card p { max-width: none; }
	.brand-service-card img { width: 280px; height: 170px; }
	.brand-services__action { margin-top: 40px; padding-inline: 24px; }
	.brand-services__action .button { width: 100%; }
}

@media (max-width: 390px) {
	.brand-services__grid,
	.brand-services__action { padding-inline: 16px; }
}

/* Illustrated grids only expose their rail controls in the Branding phone view. */
.brand-services__controls { display: none; }

@media (max-width: 900px) {
	/* Email's phone frame staggers four compact journey stages (211:15315). */
	body.email-marketing-page .email-channel { overflow: hidden; }
	body.email-marketing-page .email-channel .section-intro { padding-inline: 16px; }
	body.email-marketing-page .email-channel .section-intro h2 { width: min(246px, 100%); margin-top: 32px; font-size: 32px; line-height: 32px; }
	body.email-marketing-page .email-channel .section-intro p.email-channel__lede,
	body.email-marketing-page .email-channel .section-intro p.email-channel__lede + p.email-channel__lede { width: min(363px, 100%); padding-inline: 0; margin-top: 24px; }
	body.email-marketing-page .email-channel__grid { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 46px; padding-inline: 24px 36px; }
	body.email-marketing-page .email-channel__grid::before { position: absolute; z-index: -1; top: 102px; left: 138px; width: 458px; height: 572px; content: ""; pointer-events: none; background: url("../../assets/img/email-channel-mobile.png") center / cover no-repeat; }
	/* Inner spacing taken from the frame's cap-heights: number at 16, title at
	   49, body at 82 -- which lets a three-line card close at exactly 157, so
	   02, 03 and 04 land at 167, 376 and 543. */
	body.email-marketing-page .email-channel__grid article { position: relative; width: min(274px, 100%); min-height: 157px; height: auto; padding: 11px 15px 8px; }
	body.email-marketing-page .email-channel__grid article:nth-child(n+3) { justify-self: end; }
	body.email-marketing-page .email-channel__grid article:nth-child(3) { margin-top: 42px; }
	body.email-marketing-page .email-channel__grid strong { font-size: 20px; line-height: 20px; }
	body.email-marketing-page .email-channel__grid h3 { margin-top: 12px; font-size: 20px; line-height: 24px; }
	body.email-marketing-page .email-channel__grid p { margin-top: 8px; font-size: 16px; line-height: 24px; }

	/* Short line joining 01 to 02, down the card's centre (frame x 161). */
	body.email-marketing-page .email-channel__grid article:nth-child(1)::after { position: absolute; top: 100%; left: calc(50% - .5px); width: 1px; height: 10px; content: ""; background: #480C08; }

	/* The elbow from 02 into 03: down from 43px in, 134px, then across to 03's
	   left edge (frame x 67 -> 104). 03 is pinned 36px from the right, so the run
	   is the viewport less 377px; once that reaches nothing on a narrow phone
	   the drop simply tucks in under card 03. */
	body.email-marketing-page .email-channel__grid article:nth-child(2)::after { position: absolute; top: 100%; left: 43px; width: max(0px, calc(100vw - 377px)); height: 134px; content: ""; border-bottom: 1px solid #480C08; border-left: 1px solid #480C08; }

	/* The page already has its own phone-frame treatment for numbered cards
	   at mobile widths, so the staggered desktop mockup is redundant here. */
	.email-channel__mockup { display: none; }
}

@media (max-width: 900px) {
	body.branding-page .brand-services__grid { display: flex; justify-content: flex-start; gap: 16px; width: 100%; max-width: none; margin-top: 40px; padding-inline: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
	body.branding-page .brand-services__grid::-webkit-scrollbar { display: none; }
	body.branding-page .brand-service-card { flex: 0 0 min(300px, calc(100vw - 32px)); width: 300px; height: 272px; padding: 15px; scroll-snap-align: start; }
	body.branding-page .brand-service-card h3 { font-size: 20px; line-height: 24px; }
	body.branding-page .brand-service-card p { max-width: 252px; margin-top: 9px; font-size: 16px; line-height: 24px; }
	body.branding-page .brand-service-card img { width: 280px; height: 170px; }
	body.branding-page .brand-services__controls { display: flex; padding-inline: 16px; margin-top: 40px; }
}