/* Flying Geese — mobile responsive overrides.
 * Layered after site.css to win the cascade against inline styles. */

/* --- Tablet & below: collapse multi-column inline grids --- */
@media (max-width: 860px) {
  /* Two-column "POV" grid on home + partnership */
  .pov-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
  .pov-grid .pov-text { margin-top: 0 !important; }

  /* About-page split sections (Why Flying Geese, Outside Flying Geese) */
  .about-split {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .about-split .about-split-text { margin-top: 0 !important; }

  /* Partners band on home (when present) */
  .partners-band .inner {
    gap: 32px !important;
  }
}

/* --- Mobile: tighten section padding for inline-styled sections --- */
/* Inline `style="padding:128px 0"` etc. would otherwise win over site.css's
 * default section { padding: 72px 0 } at <720px. */
@media (max-width: 720px) {
  section[style*="padding:128px"],
  section[style*="padding:120px"],
  section[style*="padding:144px"],
  section[style*="padding:112px"],
  section[style*="padding: 128px"],
  section[style*="padding: 120px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Hero overrides (about, contact have inline padding) */
  header.hero[style*="padding:120px"] {
    padding-top: 72px !important;
    padding-bottom: 56px !important;
  }
  header.hero[style*="padding:120px 0 80px"] {
    padding-top: 72px !important;
    padding-bottom: 48px !important;
  }

  /* Contact form section */
  section[style*="padding:88px"] {
    padding-top: 56px !important;
    padding-bottom: 40px !important;
  }

  /* Hero h1: allow full-width wrapping at narrow viewports */
  .hero h1 { max-width: 100% !important; }

  /* CTA buttons: full-width and stacked at the closing band */
  .cta-band .btn { width: 100%; justify-content: center; }
  .cta-band .cta-inner > div[style*="display:flex"] { flex-direction: column; }
  .cta-band .cta-inner > div[style*="display:flex"] .btn { width: 100%; }

  /* Hero CTA: full width on home + consulting */
  .hero .btn-amber { width: 100%; justify-content: center; }

  /* Partnership-band CTAs */
  .partners-band .btn { width: 100%; justify-content: center; }

  /* Footer: tighter padding & full-width meta */
  footer.site-footer { padding: 56px 0 24px !important; }
  footer .foot-inner { padding: 0 24px !important; gap: 32px !important; }
  footer .formation-bg { display: none; }

  /* Tighten container padding on sub-section text */
  .container { padding: 0 24px !important; }
}

/* --- Narrow phones: nav must not overflow --- */
@media (max-width: 720px) {
  .nav-inner { padding: 0 16px !important; height: 60px !important; }
  .nav-brand .mark { padding-top: 12px !important; }
  .nav-brand .mark img { height: 56px !important; }
  .nav-links { gap: 14px !important; }
  .nav-links a { font-size: 12px !important; padding: 8px 0 !important; }
}
@media (max-width: 420px) {
  .nav-brand .mark img { height: 48px !important; }
  .nav-links { gap: 10px !important; }
  .nav-links a { font-size: 11px !important; letter-spacing: 0 !important; }
}

/* --- Hero meta (decorative byline, top-right of some heroes) --- */
@media (max-width: 720px) {
  .hero-meta { display: none !important; }
}

/* --- Misc: career item year column, smaller padding mobile --- */
@media (max-width: 640px) {
  .career-item { padding: 24px 0 !important; }
}

/* --- Stats strip: don't let labels wrap weirdly --- */
@media (max-width: 480px) {
  .stat-strip .stat { padding: 24px 16px !important; }
  .stat-strip .l { font-size: 11px !important; }
}

/* --- Pullquote: pull glyph down at narrow widths --- */
@media (max-width: 640px) {
  .pullquote .glyph { font-size: 64px !important; }
  .pullquote q { font-size: 18px !important; }
}

/* --- Fit-list (right-fit on consulting): tighten --- */
@media (max-width: 600px) {
  .fitlist li { padding: 18px 0 !important; gap: 22px !important; align-items: flex-start !important; }
  .fitlist li .dot { font-size: 32px !important; }
}

/* --- About hero: real headshot, sized small, top-aligned with H1 --- */
.about-head {
  grid-template-columns: auto 200px !important;
  gap: 64px !important;
  justify-content: start !important;
  align-items: start !important;
}
.about-head .portrait {
  width: 200px !important;
  max-width: 200px !important;
  margin: 0 !important;
  margin-top: 44px !important;
  background: transparent !important;
  border: 0 !important;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4/5;
}
.about-head .portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 720px) {
  .about-head {
    grid-template-columns: 1fr !important;
    justify-content: center !important;
    gap: 32px !important;
  }
  .about-head .portrait {
    width: 200px !important;
    max-width: 200px !important;
    margin: 0 auto !important;
  }
}

/* --- Embedded partnership block in consulting: stack inner content --- */
@media (max-width: 720px) {
  .embedded { padding: 24px 20px !important; }
}

/* --- VMethod cards on consulting: tighter padding --- */
@media (max-width: 480px) {
  .vmethod-card { padding: 24px 20px !important; }
  .vmethod-card h3 { font-size: 22px !important; }
}

/* --- Symptom cards: tighter padding on small phones --- */
@media (max-width: 480px) {
  .symptom { padding: 28px 22px 30px !important; }
  .symptom h3 { font-size: 20px !important; }
}

/* --- Contact form: responsive, side panel collapses --- */
@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .contact-side {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* --- Two-ways (home): per-block padding tighter on mobile --- */
@media (max-width: 600px) {
  .way { padding: 36px 0 32px !important; }
  .way h3 { font-size: 28px !important; }
}

/* --- Footer meta line: split recaptcha notice (left) and copyright (right) --- */
footer .foot-meta {
  justify-content: space-between !important;
  gap: 24px;
}
footer .foot-meta > div { margin-left: 0 !important; }
footer .foot-recaptcha {
  font-family: var(--fg-font-body);
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.01em;
  max-width: 540px;
  text-align: left;
}
footer .foot-recaptcha a {
  color: rgba(255,255,255,0.65);
  text-decoration: underline;
}
footer .foot-recaptcha a:hover { color: rgba(255,255,255,0.9); }
@media (max-width: 720px) {
  footer .foot-meta { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  footer .foot-recaptcha { font-size: 11px !important; }
}

/* --- Honor prefers-reduced-motion: kill any decorative motion --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}