/*
 * Mobile layout.
 *
 * The pages were authored desktop-only: every layout value is an inline style and there is not a
 * single media query in the whole site, so on a phone the hero was sliced mid-word, most of the
 * nav sat off-screen, and the contact form — the only lead-capture path — was entirely outside
 * the viewport. Measured before this file existed: document 859px wide inside a 768px window.
 *
 * Inline styles can only be beaten by `!important`, and the selectors have to match the style
 * attribute AS RENDERED. React rewrites it when it mounts, normalising `grid-template-columns:1fr 1fr`
 * to `grid-template-columns: 1fr 1fr` — note the spaces. Matching the authored form silently
 * fails, so every selector below targets the normalised text.
 */

/* Nothing should ever scroll sideways. This is the backstop; the rules below remove the causes. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; }

@media (max-width: 860px) {

  /* --- Multi-column grids collapse to a single column ---------------------------------------
     Covers every pattern in the site: 1fr 1fr, repeat(3,1fr), repeat(4,1fr), 1.15fr 0.85fr,
     0.8fr 1.2fr, 1.3fr 0.9fr 1fr 1.2fr (the footer), and the rest.
     `auto 1fr` is excluded — that one is an icon-beside-text pair, which should stay side by side. */
  /* `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` floor is the item's
     MIN-CONTENT width — so a long unbreakable line inside a card pushes the track wider than
     the screen and the whole panel overflows its container. Measured: a 521px track inside a
     347px box. `minmax(0, 1fr)` removes the floor; `min-width:0` does the same for the items. */
  [style*="grid-template-columns:"]:not([style*="auto 1fr"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="grid-template-columns:"] > * { min-width: 0 !important; }

  /* --- Page gutters ------------------------------------------------------------------------
     Every section is a max-width:1320px container with 32px side padding. On a 375px phone that
     is 17% of the screen spent on margin. */
  [style*="max-width: 1320px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* --- Header ------------------------------------------------------------------------------
     The nav is a non-wrapping flex row roughly 814px wide, so four of the five links and the
     "Contact us" button were off-screen. Let the pill wrap into as many rows as it needs, and
     drop the 999px pill radius which looks wrong once it is two rows tall. */
  /* Header: brand on the left of the first row, theme toggle and CTA on its right, then the
     nav links on their own row. Left to wrap freely the six links land 3/2/1 with ragged gaps;
     a two-column grid gives three even rows that line up. */
  [style*="border-radius: 999px"][style*="backdrop-filter"] {
    flex-wrap: wrap !important;
    border-radius: 20px !important;
    row-gap: 10px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  /* the brand lockup */
  [style*="border-radius: 999px"][style*="backdrop-filter"] > a[style*="gap: 9px"] { order: 1 !important; }
  /* theme toggle — pushed to the far right of row one */
  [style*="border-radius: 999px"][style*="backdrop-filter"] > button[style*="width: 34px"] {
    order: 2 !important; margin-left: auto !important;
  }
  /* "Contact us" pill, beside the toggle */
  [style*="border-radius: 999px"][style*="backdrop-filter"] > a[style*="padding: 9px 18px"] {
    order: 2 !important;
  }
  /* the link row itself */
  [style*="display: flex"][style*="gap: 2px"][style*="flex: 1"] {
    order: 3 !important;
    flex-basis: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  [style*="display: flex"][style*="gap: 2px"][style*="flex: 1"] > a {
    text-align: center !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* --- Headline sizes ----------------------------------------------------------------------
     52px and 64px display type does not fit a phone. clamp() keeps the desktop value as the
     ceiling so nothing changes above this breakpoint. */
  [style*="font-size: 64px"] { font-size: clamp(30px, 8.5vw, 64px) !important; line-height: 1.12 !important; }
  [style*="font-size: 52px"] { font-size: clamp(28px, 7.6vw, 52px) !important; line-height: 1.14 !important; }
  [style*="font-size: 40px"] { font-size: clamp(25px, 6.2vw, 40px) !important; }
  [style*="font-size: 38px"] { font-size: clamp(24px, 6vw, 38px) !important; }
  [style*="font-size: 34px"] { font-size: clamp(23px, 5.6vw, 34px) !important; }
  [style*="font-size: 32px"] { font-size: clamp(22px, 5.4vw, 32px) !important; }
  [style*="font-size: 30px"] { font-size: clamp(21px, 5.2vw, 30px) !important; }

  /* --- Form controls -----------------------------------------------------------------------
     iOS Safari zooms the page in when a control smaller than 16px receives focus, and does not
     zoom back out on blur — the visitor finishes the form panned sideways. 16px prevents it. */
  input, textarea, select { font-size: 16px !important; }

  /* Generous side padding inside cards wastes width once they are full-bleed. */
  [style*="padding: 32px"] { padding: 22px !important; }
  [style*="padding: 34px"] { padding: 22px !important; }

  /* Anything explicitly sized wider than the phone must shrink rather than push the page out. */
  [style*="max-width: 820px"], [style*="max-width: 760px"],
  [style*="max-width: 640px"], [style*="max-width: 620px"],
  [style*="max-width: 600px"], [style*="max-width: 560px"] { max-width: 100% !important; }
}

/* Below ~420px the nav pill is still tight; centre it so the wrap looks intentional. */
@media (max-width: 420px) {
  [style*="display: flex"][style*="gap: 2px"][style*="flex: 1"] { justify-content: center !important; }
  [style*="max-width: 1320px"] { padding-left: 14px !important; padding-right: 14px !important; }
}

/*
 * Respect a reduced-motion preference. The hero runs two infinite animations (gradientShift on
 * the headline, floatGlow on the CTA) that never stop and have no pause control — a vestibular
 * trigger and a WCAG 2.2.2 problem.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 620px) {
  /* Hero stat tiles: three across is unreadable at phone width, so let them wrap.
     Anchored on padding-top rather than border-top — the border was removed once an explicit
     gradient rule was added above the row, which silently broke the earlier selector. */
  [style*="display: flex"][style*="gap: 16px"][style*="padding-top: 14px"] { flex-wrap: wrap !important; }
  [style*="display: flex"][style*="gap: 16px"][style*="padding-top: 14px"] > div { flex: 1 1 100% !important; }
}