/* Binary: cross-browser and visibility fixes. Load AFTER the other stylesheets.
   Tested 29 October 2026 at 375px, 820px, 1366px and desktop widths. */

/* 1. Frosted header and mobile menu.
   Safari before 18 (iOS 17 and older iPhones/iPads, older Macs) only reads the
   -webkit- prefix, so the blur was missing and page text showed through the
   40% white header. */
.header.scrolled,
.nav-links {
  -webkit-backdrop-filter: blur(10px);
}

/* Where blur is not supported at all, use a near-solid background instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.scrolled { background-color: rgba(255, 255, 255, 0.95); }
  @media (max-width: 768px) {
    .nav-links { background-color: rgba(255, 255, 255, 0.97); }
  }
}

/* 1b. Binary codes turning fluorescent blue on iPhone.
   iOS treats eight-digit strings starting with 0 as phone numbers and restyles
   them as system-blue links. The meta tag in the head snippet stops detection;
   this is the backstop for any iOS version that ignores it. */
a[x-apple-data-detectors],
.hero-code a,
.card-code a,
.section-code a,
.situations-code a {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
  pointer-events: none;
}

/* 2. Sideways drift on iPhone.
   The hero shape and the services panel sit wider than the screen before they
   animate in. Clipping on both html and body stops iOS Safari letting the page
   slide sideways. */
html,
body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* 3. "What we do" list cut off on laptops and tablets (all browsers).
   The panel was sized to its longest line (1,311px), so on any screen narrower
   than about 1,500px the service descriptions ran off the right edge. */
.services-right {
  width: auto;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.service-text {
  overflow-wrap: anywhere;
}
@media (min-width: 769px) {
  .services-right {
    padding-right: 40px;
  }
}

/* 4. Logo squashed on tablets (769px to 1100px).
   The nav links pushed the logo down to about 50px wide and distorted it. */
.logo {
  flex-shrink: 0;
}
@media (min-width: 769px) and (max-width: 1100px) {
  .header {
    padding-left: 24px;
    padding-right: 24px;
  }
  .logo img {
    width: 170px;
    height: auto;
  }
  .nav-links {
    gap: 4px;
  }
  .nav-links a {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 5. Content that stays invisible if the animation script does not run
   (script blocked, old browser, slow connection, content blocker).
   The head snippet adds class "js" to <html> only when the browser can run
   main.js, and removes it again if the animations have not started after
   four seconds. Without the class, everything shows straight away. */
html:not(.js) .hero-title-top,
html:not(.js) .hero-title-bottom,
html:not(.js) .hero-code,
html:not(.js) .hero-subtitle,
html:not(.js) .services-right,
html:not(.js) .approach-title,
html:not(.js) .approach-subtitle,
html:not(.js) .approach-points li,
html:not(.js) .about-char,
html:not(.js) .about-text.reveal-block .about-lead,
html:not(.js) .about-text.reveal-block .about-body {
  opacity: 1 !important;
  transform: none !important;
}

/* 6. Visitors who have reduced motion switched on (common on iPhone) get the
   content immediately rather than waiting on scroll animations. */
@media (prefers-reduced-motion: reduce) {
  .hero-title-top,
  .hero-title-bottom,
  .hero-code,
  .hero-subtitle,
  .services-right,
  .approach-title,
  .approach-subtitle,
  .approach-points li,
  .about-char,
  .about-text.reveal-block .about-lead,
  .about-text.reveal-block .about-body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 7. Footer links: taller tap area on phones (currently 21px; Google's
   minimum is 24px). */
@media (max-width: 768px) {
  footer a {
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}