/* Gravitor — mobile/responsive pass.
   Pages are authored desktop-first with inline styles; this sheet overrides
   the structural inline styles at small widths (hence the !important usage). */

:focus-visible {
  outline: 2px solid #CFA96E;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Release the desktop min-width before the mobile collapse so 900–1100px
   viewports (small tablets, phone landscape) don't horizontally scroll. */
@media (max-width: 1100px) {
  body { min-width: 0 !important; }
}

@media (max-width: 900px) {
  body { min-width: 0 !important; }

  /* Nav */
  nav { padding: 14px 20px !important; flex-wrap: wrap; gap: 12px !important; }
  nav > div { gap: 14px !important; font-size: 10.5px !important; flex-wrap: wrap; row-gap: 10px; }
  nav a.cta { padding: 10px 16px !important; font-size: 10px !important; }

  /* Section gutters */
  header, section, footer { padding-left: 22px !important; padding-right: 22px !important; }
  div[style*="padding:0 56px 88px"], div[style*="padding:0 56px 84px"],
  div[style*="padding:96px 56px"], div[style*="padding:0 56px 80px"] {
    padding-left: 22px !important; padding-right: 22px !important;
  }

  /* Type scale */
  h1 { font-size: 48px !important; line-height: 1.08 !important; }
  h2 { font-size: 32px !important; line-height: 1.18 !important; }
  h3 { font-size: 30px !important; }
  p[style*="font:500 44px"], p[style*="font:500 40px"], p[style*="font:500 38px"],
  p[style*="font:italic 500 40px"] { font-size: 24px !important; line-height: 1.45 !important; }
  p[style*="font:italic 500 27px"], p[style*="font:italic 500 26px"],
  p[style*="font:italic 500 24px"] { font-size: 19px !important; }

  /* Collapse all multi-column grids */
  div[style*="grid-template-columns"], section[style*="grid-template-columns"],
  form[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  div[style*="position:sticky"][style*="top:130px"] { position: static !important; }

  /* Flex rows become stacks / wrap */
  div[style*="justify-content:space-between"][style*="align-items:flex-end"] { flex-wrap: wrap; gap: 24px !important; }
  footer { flex-wrap: wrap; gap: 24px !important; }
  footer > div:last-child { align-items: flex-start !important; text-align: left !important; }
  footer div[style*="text-align:right"] { text-align: left !important; }

  /* Media panels */
  header { min-height: 560px !important; }
  div[style*="min-height:560px"], div[style*="min-height:620px"] { min-height: 380px !important; }
  div[style*="min-height:520px"] { min-height: 420px !important; }
  section[style*="min-height:720px"], section[style*="min-height:640px"] { min-height: 480px !important; }

  /* Ledger number columns */
  div[style*="grid-template-columns:110px 1fr"] { grid-template-columns: 56px 1fr !important; gap: 18px !important; }

  /* Forms */
  form[style*="padding:44px 40px"] { padding: 30px 22px !important; }
}

@media (max-width: 560px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 27px !important; }
  nav a.cta { display: none; } /* keep nav to one row; CTAs repeat throughout the page */
  div[style*="gap:80px"] { gap: 40px !important; }

  /* Leadership stat rows (Peter / Kezia): fixed 48px flex gap doesn't shrink
     on narrow phones and pushes the page wider than the viewport. */
  div[style*="display:flex;gap:48px"] { gap: 20px !important; flex-wrap: wrap !important; }
}