/* Phones and tablets (the template's mobile layout, below 1024px): touch comfort.
   Loaded after type.css (see main() in tools/apply_content.py). Desktop is untouched.

   Tap targets: the template's small text buttons and links measure 18-27px tall on a phone
   (invert colour 53 x 18, the services arrows 23 x 23, cookie Decline / Accept 53 x 21,
   contact links, Read More, policy links, Back to top, the project view's Visit link).
   Each gets an invisible hit area from an ::after (none of them uses ::after for anything
   else), so nothing moves or changes look; the areas grow only as far as the space around
   each control allows, so neighbouring controls never steal each other's taps. */
@media (max-width: 1023px) {
  html .invert-button::after,
  html #services .controllers__button::after,
  html .cookies .cookies-action::after,
  html .contact-item__link::after,
  html .digital-infra__toggle::after,
  html .policy-link::after,
  html .to-top-button::after,
  html button.contact-title::after,
  html .pw-work__visit::after,
  html #mobile-menu .menu-link::after {
    content: '';
    position: absolute;
    inset: var(--pw-hit);
  }
  html #services .controllers__button,
  html .cookies .cookies-action,
  html .contact-item__link,
  html .digital-infra__toggle,
  html .policy-link,
  html .to-top-button,
  html button.contact-title,
  html .pw-work__visit { position: relative; }

  /* 53 x 18 -> 61 x 44; "Back to top" sits 15px to its right */
  html .invert-button { --pw-hit: -13px -4px; }
  /* 23 x 23 arrows -> 45 x 45 */
  html #services .controllers__button { --pw-hit: -11px; }
  /* Decline / Accept, 15px apart -> 44px tall, 7px wider a side */
  html .cookies .cookies-action { --pw-hit: -12px -7px; }
  /* contact details: one or two lines, 30+px apart -> at least 38px tall */
  html .contact-item__link { --pw-hit: -10px -6px; }
  html .digital-infra__toggle { --pw-hit: -12px -6px; }
  html button.contact-title { --pw-hit: -9px -6px; }
  html .to-top-button { --pw-hit: -12px -6px; }
  /* Privacy Policy / Terms of Use are stacked with no gap: open a small gap between them
     (the footer column has room) and grow each target into it */
  html .policy-link + .policy-link { margin-top: .75rem; }
  html .policy-link { --pw-hit: -5px -6px; }
  html .pw-work__visit { --pw-hit: -14px -8px; }
  /* menu links: 28px tall on a 43px pitch -> 42px */
  html #mobile-menu .menu-link { --pw-hit: -7px -8px; }

  /* footer copyright: 11.25px at 390 (10.8px at 375) -> 12.7px / 12.2px, box widened to keep
     its two lines */
  html .copyright.c2-r { font-size: .84375rem; max-width: 12.6rem; }
}
/* Phones: "We design not for what's seen, / but for what's understood." (Our Approach) is set as two
   lines with a phone-only break, but the template's max-width wrapped "seen," onto a line of its own;
   the paragraph's own column is wide enough for the first line at 360px and up */
@media (max-width: 1023px) {
  html #approach .approach-description { max-width: none; }
}
/* Phones: the end of the page. Studio's white circle covers the paper's cyan glow until the Studio
   section ends, a little above the bottom of the screen on a phone, so the glow showed under the
   footer as a hard-edged block (on desktop that stretch is the loop back to the hero, whose glow it
   is). mobile.js sets pw-m-foot from just before that edge comes up; the footer stays plain paper */
@media (max-width: 1023px) {
  html.pw-m-foot #main-page::after { opacity: 0; }
}
/* Phones: MAP SHAPE BUILD GROW come in from the side as on desktop (the template set them faint and
   still on phones, lighting one at a time); mobile.js slides each word in from the right as it comes
   up the screen, in full ink, so the liquid blues run through all of them as on desktop */
@media (max-width: 1023px) {
  html #approach .word-item { opacity: 1; transition: none; will-change: transform; }
}