/* assets/css/pages/services.css: the Services page's own layout (plan.md, "Services"); every color, size and corner
   from design\system.css's tokens, every component from design\components.css. */

/* the header: the tiles under the centered words, the notifications at the right edge (wyw's box 480 wide or more) */
@media (min-width: 1024px) {
  .page-services #top .page-top__row { grid-template-columns: minmax(0, 1fr) 500px; }
  .page-services #top .page-top__copy { max-width: 62rem; }
  .page-services #top .page-top__title { font-size: min(var(--fs-display), calc(5.4vh + 1rem)); }
  .page-services #top { align-items: start; padding-block: 56px 48px; }
  .page-services #top .page-top__in { gap: var(--space-4); }
}
/* the street's shop signs stay dim under the words */
.page-services #top .close__wash { background: linear-gradient(180deg, color-mix(in srgb, var(--c-brand-dark) 84%, transparent), color-mix(in srgb, var(--c-brand-dark) 90%, transparent)); }
@media (max-width: 1023px) { .page-services #top .close__wash { background: linear-gradient(180deg, color-mix(in srgb, var(--c-brand-dark) 40%, transparent), color-mix(in srgb, var(--c-brand-dark) 55%, transparent) 62%, var(--c-brand-dark)); } }
@media (min-width: 1024px) and (max-width: 1199px) { .page-services #top .page-top__row { grid-template-columns: minmax(0, 1fr) 480px; } }

/* the full-bleed pictures sit under their part's words */
.section--bleed { padding-bottom: 0; }
.section--bleed > .pstage--bleed { margin-top: var(--space-5); }
@media (max-width: 1099px) { .section--bleed { padding-bottom: var(--section-y); } }

/* the designed-ground scenes take their narrow layouts below their own widths, never scaled up past them */
@container dstage (width < 780px) { #ai-visibility-assessment .dstage .scene { width: min(100%, 440px); margin-inline: auto; aspect-ratio: 380 / 690; } }
@container dstage (width < 600px) { #website-revamp .dstage .scene { width: min(100%, 380px); margin-inline: auto; aspect-ratio: 360 / 640; } }
@container dstage (width < 760px) { #how-we-work .dstage .scene { width: min(100%, 420px); margin-inline: auto; aspect-ratio: 380 / 1150; } }
#how-we-work .dstage { margin-top: var(--space-5); }
#ai-visibility-assessment .dstage > .stop, #how-we-work .dstage > .stop { top: -46px; }

/* the four answers under the signature */
.svc-links--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .svc-links--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .svc-links--4 { grid-template-columns: minmax(0, 1fr); } }

/* the website stage beside its words: a square photo, the phone over the van */
#website-design .pstage { max-width: 680px; margin-inline: auto; }
@media (max-width: 1099px) { #website-design .pstage { max-width: none; } }