/* ===========================================================================
   MEK CRO — responsive overrides
   ---------------------------------------------------------------------------
   The page is built with inline styles, which beat ordinary stylesheet rules.
   Rather than restructure the template, these rules match the exact inline
   values and override them with !important inside media queries. Desktop is
   untouched: every rule here lives inside a max-width query.

   If the template's inline styles are ever regenerated with different values,
   the matching selectors below need updating to suit.
   =========================================================================== */

/* Never let anything force a sideways scroll. */
img, video, canvas, svg, input, textarea, select {
  max-width: 100%;
}
textarea { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   Tablet and below
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Side padding: 56px is too generous once the viewport narrows. */
  [style*="padding: 90px 56px"]  { padding: 56px 28px !important; }
  [style*="padding: 100px 56px"] { padding: 60px 28px !important; }
  [style*="padding: 120px 56px"] { padding: 64px 28px !important; }
  [style*="padding: 48px 56px"]  { padding: 36px 28px !important; }
  [style*="padding: 14px 56px"]  { padding: 12px 20px !important; }

  /* Multi-column layouts collapse. The four pillars stay 2x2 — four stacked
     rows of a single word reads as a list of nothing.

     NOTE: the runtime re-serialises `minmax(0, 1fr)` as `minmax(0px, 1fr)`
     in the live DOM, so these selectors deliberately match only the stable
     part of the declaration rather than the literal source text. */
  [style*="1fr) minmax("],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Grid blowout guard. `1fr` resolves to `minmax(auto, 1fr)`, and that `auto`
     minimum is min-content — which a grid item can refuse to shrink below,
     pushing the track wider than its container. Explicit min-width:0 is the
     standard fix, and is what stops the Team page overflowing. */
  [style*="display: grid"] > * { min-width: 0 !important; }

  /* image-slot.js measures its own width and pins a pixel height. On narrow
     viewports it measures before the layout settles and ends up taller than
     its box, so the photo overlaps the name beneath it. Letting the element's
     own aspect-ratio drive the height instead keeps it square at any width.
     A stylesheet !important outranks the script's plain inline style. */
  image-slot {
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* Asymmetric three-value padding: the generic rule above flattens it, so
     restore a deliberate larger bottom margin on the section that uses it. */
  [style*="padding: 90px 56px 160px"] { padding: 56px 28px 72px !important; }

  /* The four pillars use a right-hand rule to divide a horizontal row. Once
     they stack, a vertical line beside each one is meaningless — it becomes a
     horizontal rule between them instead. */
  [style*="border-right: 1px solid rgba(255,255,255,0.12)"] {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  }

  /* Generous desktop gaps become wasted vertical space once stacked. */
  [style*="gap: 72px"] { gap: 36px !important; }
  [style*="gap: 64px"] { gap: 32px !important; }
  [style*="gap: 56px"] { gap: 30px !important; }

  /* Headline sizes scaled for a narrower measure. */
  [style*="font-size: 52px"] { font-size: 36px !important; line-height: 1.12 !important; }
  [style*="font-size: 44px"] { font-size: 32px !important; line-height: 1.15 !important; }
  [style*="font-size: 34px"] { font-size: 26px !important; }
}

/* ---------------------------------------------------------------------------
   Phone
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {

  [style*="padding: 90px 56px"]  { padding: 44px 20px !important; }
  [style*="padding: 100px 56px"] { padding: 48px 20px !important; }
  [style*="padding: 120px 56px"] { padding: 52px 20px !important; }
  [style*="padding: 48px 56px"]  { padding: 32px 20px !important; }
  [style*="padding: 40px 32px"]  { padding: 28px 20px !important; }
  [style*="padding: 36px 30px"]  { padding: 26px 20px !important; }
  [style*="padding: 90px 56px 160px"] { padding: 44px 20px 56px !important; }

  /* Everything to one column, pillars included at this width. */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  [style*="font-size: 52px"] { font-size: 30px !important; }
  [style*="font-size: 44px"] { font-size: 27px !important; }
  [style*="font-size: 34px"] { font-size: 23px !important; }
  [style*="font-size: 30px"] { font-size: 22px !important; }
  [style*="font-size: 28px"] { font-size: 21px !important; }

  [style*="gap: 36px"] { gap: 20px !important; }
  [style*="gap: 32px"] { gap: 20px !important; }
  [style*="gap: 28px"] { gap: 18px !important; }

  /* The two hero buttons side by side squeeze to two words per line. */
  [style*="padding: 15px 30px"],
  [style*="padding: 16px 34px"] {
    padding: 14px 20px !important;
    text-align: center !important;
  }
}

/* ---------------------------------------------------------------------------
   Header — the single worst offender. The nav is a fixed-gap flex row that
   simply cannot fit a phone, so below 900px the header wraps onto two rows:
   logo centred above, navigation centred beneath, both allowed to wrap.
   A hamburger would be tidier but needs JavaScript and template changes.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  header[style*="position: sticky"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    row-gap: 8px !important;
  }
  header[style*="position: sticky"] nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
  }
  header[style*="position: sticky"] nav a {
    font-size: 14px !important;
    padding-bottom: 2px !important;
  }
}

@media (max-width: 560px) {
  header[style*="position: sticky"] nav      { gap: 14px !important; }
  header[style*="position: sticky"] nav a    { font-size: 13px !important; }
  header[style*="position: sticky"] img      { height: 38px !important; }
}

/* ---------------------------------------------------------------------------
   Footer — three groups spread apart on desktop; centred and stacked on phones.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  footer [style*="justify-content: space-between"] {
    justify-content: center !important;
    text-align: center !important;
    gap: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   Contact form — inputs inherit a fixed font-size; below 16px iOS Safari zooms
   the viewport on focus, which is disorienting. 16px prevents that.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  form input, form textarea, form button {
    font-size: 16px !important;
    width: 100% !important;
  }
}