/* Cross-page responsive fixes. Loaded after every page stylesheet. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
img, video, svg { max-width: 100%; }
/* width/height attributes reserve space; keep natural proportions unless a class sets a height. */
img { height: auto; }

/* Tap targets: footer, brand and inline links get a comfortable hit area. */
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-links a, .footer-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-links { gap: 0 1.25rem; }
.footer-bottom { flex-wrap: wrap; gap: 0 1.25rem; }
.digital-cta { display: inline-flex; align-items: center; min-height: 2.75rem; }

@media (max-width: 900px) {
  /* About + Works heroes: collapse the two-column grid. */
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 2rem; }
  .hero-aside { justify-self: start; max-width: none; }
  .mark-glow { right: 0; top: -1rem; width: 12rem; height: 12rem; }
}

/* Slider dots: keep the small visual, enlarge the touch area. */
.manifesto-dots button { position: relative; }
.manifesto-dots button::after { content: ""; position: absolute; inset: -0.9rem -0.35rem; }

/* Decorative glow must not extend past the viewport. */
.mark-glow { right: 0; }

/* Grid children may shrink below their content width. */
.manifesto, .statement-grid, .contact-wrap, .intro-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) {
  .manifesto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .statement-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .contact-wrap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
}

@media (max-width: 700px) {
  .manifesto-copy { padding-left: 1.125rem; padding-right: 1.125rem; }
  .step { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; gap: 1rem; }
  .step-num { font-size: 1.5rem; }
  .step h3 { font-size: 1.25rem; }
  .statline div { padding-left: 0; }
  .form-card { padding: 1.5rem; }
}

/* Decorative oversized glyphs inside heroes must not widen the page. */
.hero { overflow-x: clip; }
@media (max-width: 700px) { .hero-44 { font-size: 7rem; right: 0; } }

/* Home pricing: on phones the $99 panel leads the section and the price dominates. */
@media (max-width: 900px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem; }
  .price-panel { order: -1; min-height: 0; padding: 1.75rem 1.5rem 1.5rem; gap: 1.25rem; }
  .price-panel small { font-size: 0.8125rem; font-weight: 700; }
  .price-panel .price-row { justify-content: flex-start; }
  .price-panel .price-tag { font-size: clamp(8rem, 46vw, 14rem); margin-top: 0.5rem; }
  .price-panel p { max-width: none; font-size: 1.0625rem; line-height: 1.45; }
  .price-panel .btn { justify-content: center; width: 100%; padding: 1.125rem 1.5rem; font-size: 0.9375rem; }
  .service-main { min-height: 0; padding: 1.5rem; }
  .service-main h3 { margin-top: 3rem; font-size: clamp(2rem, 9vw, 3.5rem); }
}

/* Anchor targets clear the fixed header. */
#services, #work, #about, #process, #contact, #logo-wall { scroll-margin-top: 5rem; }

/* Mobile: drop the "Make the name stick" sticker over the hero image. */
@media (max-width: 700px) {
  .hero-card { display: none; }
}

/* Sections that combine .wrap with their own padding (e.g. .intro.wrap) were
   losing the side gutter; restore it with higher specificity. */
section.wrap, div.wrap, header .wrap { padding-left: 2.125rem; padding-right: 2.125rem; }
@media (max-width: 700px) {
  section.wrap, div.wrap, header .wrap { padding-left: 1.125rem; padding-right: 1.125rem; }
}

/* Footer bottom bar: centre the copyright and legal links on phones. */
@media (max-width: 700px) {
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; }
  .footer-legal { justify-content: center; gap: 0 1.25rem; }
}