/* ============================================================
   Full Circle Africa — Responsive overrides
   Mobile-first flattening of grids + tightened typography.
   Inline-style grids are overridden via !important.
   ============================================================ */

/* ---------- iPhone / mobile-device hardening ----------
   Applies on every page. Keeps the site comfortable and bug-free on real
   handsets: no rubber-band horizontal scroll, no iOS landscape text
   inflation, no grey tap-flash on links (the design has its own press
   states), and momentum scrolling. overflow-x: clip is used (not hidden)
   so the sticky nav keeps working. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
}
/* iOS form controls: strip the default rounded/inset chrome so inputs match
   the brand's sharp-cornered fields, and never auto-zoom on focus (font ≥16px
   is already enforced; this is the belt). */
input, textarea, select, button {
  -webkit-appearance: none;
  appearance: none;
}

/* Hero typography baseline — tighter so cycling words always fit */
.fca-hero-line {
  font-size: clamp(34px, 6.6vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
/* Reserve a min-width so the cycling word has stable space and doesn't collapse layout
   while it types — keeps line baseline steady. */
.fca-hero-cycle {
  display: inline;
  white-space: normal;
}

/* ---------- Tablet ≤ 1024px ---------- */
@media (max-width: 1024px) {
  :root { --max-content: 100%; }

  .fca-band-grid {
    grid-template-columns: 80px 1fr !important;
    gap: 28px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .fca-band-meta { display: none !important; }

  .fca-thesis-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fca-approach-grid { grid-template-columns: 1fr !important; column-gap: 0 !important; }
  .fca-thesis-aside { max-width: 560px !important; margin-top: 0 !important; }

  .fca-vert-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fca-vert-meta { padding-top: 8px !important; }
  .fca-vert-cta { justify-self: flex-start !important; }

  .fca-vert-cards { grid-template-columns: 1fr !important; gap: 20px !important; }
  .fca-vert-card { min-height: 360px !important; }

  .fca-prop-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fca-anchors  { grid-template-columns: 1fr !important; }
  .fca-cap-grid { grid-template-columns: 1fr 1fr !important; }
  .fca-cap-grid > * { padding-left: 16px !important; padding-right: 16px !important; }
  .fca-geo-grid { grid-template-columns: 1fr 1fr !important; }
  .fca-process-grid { grid-template-columns: 1fr 1fr !important; }
  .fca-process-grid > * { padding-left: 16px !important; padding-right: 16px !important; padding-top: 24px !important; }
  .fca-offices { grid-template-columns: 1fr !important; }
  .fca-offices > * { border-right: none !important; border-bottom: 1px solid var(--rule) !important; padding-left: 0 !important; padding-right: 0 !important; min-height: auto !important; }
  .fca-pitch-intro { grid-template-columns: 1fr !important; gap: 48px !important; }
  .fca-pitch-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
  .fca-pitch-sidebar { position: static !important; top: auto !important; }
  .fca-form-section { grid-template-columns: 1fr !important; gap: 24px !important; }
  .fca-form-row { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fca-route-row { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* Founder responsive */
  .fca-founder-top { grid-template-columns: 1fr !important; gap: 32px !important; }
  .fca-founder-hero { grid-template-columns: 1fr !important; gap: 48px !important; align-items: flex-start !important; }
  .fca-founder-features { grid-template-columns: 1fr !important; gap: 20px !important; }
  .fca-founder-roles { grid-template-columns: 1fr !important; gap: 24px !important; }

  .fca-port-head { grid-template-columns: 1fr !important; gap: 32px !important; align-items: flex-start !important; }
  .fca-pf-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .fca-port-group { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fca-port-sticky { position: static !important; }

  .fca-founder-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
  .fca-founder-portrait { max-width: 360px !important; }
  .fca-founder-meta { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .fca-founder-stats { border-top: 1px solid var(--rule-strong) !important; }
  .fca-book-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .fca-founder-bottom { grid-template-columns: 1fr !important; gap: 40px !important; }
  .fca-values { grid-template-columns: 1fr !important; gap: 32px !important; }

  .fca-closing-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .fca-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px 32px !important; }
}

/* ---------- Phone ≤ 768px ---------- */
@media (max-width: 768px) {
  /* Page gutter folds in the device safe-area inset so body content never
     slides under the notch / Dynamic Island / rounded corners in landscape.
     With viewport-fit=cover the insets are real; otherwise max() resolves to
     the 20px floor — a harmless no-op. Applies everywhere --gutter-page is used. */
  :root { --gutter-page: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }

  /* Compress the large desktop section paddings to ~48–72px */
  #thesis { padding-top: 72px !important; padding-bottom: 48px !important; scroll-margin-top: 80px !important; }
  #verticals { padding-top: 64px !important; padding-bottom: 56px !important; }
  #founder { padding: 72px var(--gutter-page) 64px !important; }
  #closing { padding: 80px var(--gutter-page) 72px !important; }
  .fca-page-hero { padding: 64px var(--gutter-page) 56px !important; }

  /* Nav: collapse to logo + hamburger; Pitch CTA moves into the menu */
  .fca-nav-links { display: none !important; }
  .fca-nav-cta { display: none !important; }

  /* Section padding compresses */
  .fca-section-tight { padding-top: 72px !important; padding-bottom: 72px !important; }
  .fca-section-medium { padding-top: 88px !important; padding-bottom: 88px !important; }

  /* Hero — deliberate full-screen editorial treatment on phones.
     Fills the viewport below the 64px nav, content vertically centered,
     type at a confident scale, generous but controlled rhythm. */
  .fca-hero {
    padding: 40px var(--gutter-page) 48px !important;
    min-height: calc(100svh - 80px) !important;
    justify-content: center !important;
  }
  /* Hero mosaic — rescued on phones. Instead of a near-invisible corner sliver,
     it sits centered behind the headline, scaled so the disc reads large above
     the fold, dimmed to ~0.5, and pinned below the text layer (zIndex 0). The
     navy radial scrim below sits between it and the copy so the H1 + lede stay
     fully legible over the densest tiles. Assemble + breathe still run on mobile
     (react + disperse remain desktop-only via the touch guard in HeroMosaic). */
  .fca-hero-centerpiece {
    display: block !important;
    left: 50% !important;
    right: auto !important;
    top: 2% !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: min(680px, 138%) !important;
    opacity: 0.5 !important;
    z-index: 0 !important;
  }
  .fca-hero-scrim {
    background: radial-gradient(78% 54% at 50% 40%, rgba(15,22,90,0.85) 0%, rgba(15,22,90,0) 72%) !important;
  }
  .fca-hero-meta { margin-bottom: 28px !important; font-size: 11px !important; letter-spacing: 0.2em !important; }
  .fca-hero-line { font-size: clamp(34px, 10.5vw, 56px) !important; line-height: 1.05 !important; }
  .fca-hero-lede { font-size: 16px !important; line-height: 1.5 !important; margin-top: 32px !important; max-width: 92% !important; }

  /* Bands */
  .fca-band-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .fca-band-numeral { font-size: 36px !important; }
  .fca-band-title { font-size: 32px !important; }
  .fca-band-blurb { font-size: 15px !important; }

  /* Thesis — eyebrow clears the sticky nav (scroll-margin on #thesis above);
     headline + body get clear separation; pyramid tightened so the section
     reads compactly instead of floating in empty space. */
  .fca-thesis-title { font-size: clamp(34px, 8vw, 48px) !important; line-height: 1.06 !important; }
  .fca-thesis-aside { font-size: 17px !important; margin-top: 22px !important; }
  #thesis .fca-thesis-grid { gap: 18px !important; }
  .fca-thesis-diagram { width: min(244px, 60%) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
  /* Arch: keep aspect, smaller center text */
  .fca-arch-center { font-size: 20px !important; top: 22% !important; }

  /* Verticals */
  .fca-vert-name { font-size: 32px !important; }
  .fca-vert-lead { font-size: 18px !important; }
  .fca-vert-body { font-size: 15px !important; }

  /* Numbers — switch to an editorial row list so an odd count never strands a cell.
     Big serif numeral left, uppercase label right, hairline divider per row. */
  .fca-numbers-grid { grid-template-columns: 1fr !important; margin-top: 24px !important; column-gap: 0 !important; row-gap: 0 !important; }
  .fca-numbers-cell { flex-direction: row !important; align-items: baseline !important; justify-content: space-between !important; gap: 20px !important; padding: 20px 0 !important; border-top: 1px solid var(--rule) !important; }
  .fca-numbers-cell > span { display: none !important; } /* hide teal tick in row mode */
  .fca-numbers-cell > div:last-child { text-align: right !important; flex: 0 0 auto !important; max-width: 52% !important; }
  .fca-numbers-num { font-size: 40px !important; }

  /* Portfolio */
  .fca-port-title { font-size: 30px !important; }
  .fca-port-names { grid-template-columns: 1fr 1fr !important; column-gap: 16px !important; }
  .fca-port-name { font-size: 16px !important; padding: 10px 0 !important; }
  .fca-logo-wall { grid-template-columns: repeat(auto-fill, minmax(44vw, 1fr)) !important; }
  .fca-logo-tile { height: 80px !important; padding: 0 12px !important; }
  .fca-logo-tile span { font-size: 14px !important; }
  .fca-pf-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Founder */
  .fca-founder-name { font-size: clamp(54px, 14vw, 84px) !important; }
  .fca-founder-bio { font-size: 20px !important; line-height: 1.35 !important; }
  .fca-founder-stats > div { grid-template-columns: minmax(80px, 100px) 1fr !important; }
  .fca-founder-meta { grid-template-columns: 1fr !important; gap: 32px !important; }
  .fca-founder-bottom { grid-template-columns: 1fr !important; gap: 32px !important; }
  .fca-book { padding: 32px 24px 40px !important; }
  .fca-book-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fca-value-name { font-size: 32px !important; }
  .fca-value-body { font-size: 15px !important; }

  /* Sub-page grids on mobile */
  .fca-prop-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .fca-anchors  { grid-template-columns: 1fr !important; }
  .fca-anchors > div { font-size: 22px !important; padding: 20px 0 !important; }
  .fca-cap-grid { grid-template-columns: 1fr !important; }
  .fca-cap-grid > * { padding: 24px 0 !important; border-right: none !important; border-bottom: 1px solid var(--rule) !important; }
  /* Geography — two-up footprint panel (was one ~970px-tall column); country
     names nudged down so they sit cleanly at 2 columns with no overflow. */
  .fca-geo-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; }
  .fca-geo-grid li { font-size: 19px !important; }
  .fca-process-grid { grid-template-columns: 1fr !important; }
  .fca-process-grid > * { padding: 24px 0 !important; border-right: none !important; border-bottom: 1px solid var(--rule) !important; }
  .fca-pitch-intro { grid-template-columns: 1fr !important; gap: 40px !important; }
  .fca-pitch-layout { grid-template-columns: 1fr !important; gap: 40px !important; }
  .fca-pitch-sidebar { position: static !important; top: auto !important; padding: 24px 20px !important; }
  .fca-form-section { grid-template-columns: 1fr !important; gap: 24px !important; padding-top: 28px !important; }
  .fca-form-12 { grid-template-columns: 1fr !important; gap: 20px !important; }
  .fca-form-cell { grid-column: span 1 !important; }
  .fca-form-row { grid-template-columns: 1fr !important; }
  .fca-route-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .fca-tabs { gap: 4px !important; flex-wrap: wrap !important; }
  .fca-tabs button { padding: 12px 18px !important; font-size: 11px !important; letter-spacing: 0.16em !important; }
  .fca-page-title { font-size: clamp(34px, 9vw, 52px) !important; }
  .fca-page-lede { font-size: 16px !important; }
  /* Page stat row — ONE stat per row on phones so long values ("680,000 sq ft")
     never overflow or clip, and an odd count (VC has 3) never strands a cell.
     The shared .fca-numbers-cell row treatment (numeral left, label right,
     hairline divider) already applies; go single-column + trim the numeral so
     even the longest value fits. */
  .fca-page-stats { grid-template-columns: 1fr !important; }
  .fca-page-stats > * { padding: 18px 0 !important; border-left: none !important; }
  .fca-page-stats .fca-numbers-num { font-size: 32px !important; }

  /* Cities map mobile */
  .fca-map-strip { grid-template-columns: 1fr !important; gap: 14px !important; }
  .fca-map-strip > div { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
  .fca-map-strip > div:last-child { border-bottom: none; }

  /* Founder mobile */
  .fca-founder-features { grid-template-columns: 1fr !important; gap: 16px !important; }
  .fca-feature { padding: 32px 24px 36px !important; min-height: 300px !important; }
  .fca-founder-roles { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Hero meta line wraps cleanly */
  .fca-hero-meta { flex-wrap: wrap !important; row-gap: 8px !important; font-size: 11px !important; }

  /* Closing */
  .fca-closing-title { font-size: 40px !important; line-height: 1.05 !important; }
  .fca-closing-body { font-size: 17px !important; }
  .fca-closing-email { font-size: 22px !important; word-break: break-all; }
  /* Footer — compact 2-column link panel (was one tall single column ~1013px).
     Logo/tagline spans the top row; FIRM / OFFICES / CONNECT sit two-up; the
     per-link gap is tightened. Touch targets stay >=44px via the coarse-pointer
     floor below, so links remain tappable. */
  footer { padding-top: 56px !important; padding-bottom: 40px !important; }
  .fca-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .fca-footer-grid > :first-child { grid-column: 1 / -1 !important; margin-bottom: 4px !important; }
  .fca-footer-grid ul { gap: 6px !important; }
  .fca-footer-grid + p { margin-top: 36px !important; }
  .fca-footer-bar { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; font-size: 11px !important; }

  /* Hospitality — pull the brand entries and section rhythm together so the
     page flows without large blank stretches. The brand-entry wrappers carry an
     inline 64px top/bottom padding; the two sections carry 120/80px Section
     padding. .fca-vert-grid is hospitality-only; .fca-thesis-aside (excluding
     #thesis) scopes the Philosophy block. */
  section:has(.fca-vert-grid) { padding-top: 56px !important; padding-bottom: 24px !important; }
  section:has(.fca-vert-grid) h2 { margin-bottom: 36px !important; }
  div:has(> .fca-vert-grid) { padding-top: 32px !important; padding-bottom: 32px !important; }
  section:has(.fca-thesis-aside):not(#thesis) { padding-top: 48px !important; padding-bottom: 64px !important; }
  /* Belt-and-suspenders: the decorative mosaic spine never forces a horizontal
     scrollbar (html already uses overflow-x: clip globally). */
  .fc-canvas { overflow-x: clip !important; }
}

/* ---------- Tablet only (769–1024px): Numbers proof strip ----------
   5 items over a plain 3-up grid stranded the 4th/5th cells on the left.
   Lay it on a 6-col track (each cell spans 2 → still 3-up), then center the
   second row's two cells (cols 2–5) so the orphan row reads as intentional. */
@media (min-width: 769px) and (max-width: 1024px) {
  .fca-numbers-grid { grid-template-columns: repeat(6, 1fr) !important; }
  .fca-numbers-cell { grid-column: span 2; }
  .fca-numbers-cell:nth-child(4) { grid-column: 2 / span 2; }
  .fca-numbers-cell:nth-child(5) { grid-column: 4 / span 2; }
}

/* Touch-target floors: keep tap targets ≥ 44px on mobile */
@media (hover: none) and (pointer: coarse) {
  a, button { min-height: 44px; }
  .fca-nav-cta, .fca-burger { min-height: 44px; }
}

/* ---------- Founder section — refined mobile treatment (≤768px) ----------
   Overrides the earlier ≤768px founder rules above. Name was floored at 54px
   (bigger than desktop) and wrapped under the sticky nav; portrait had an
   uncapped 600px min-height eating a full screen; bio ran oversized.
   Must stay AFTER the earlier @media (max-width: 768px) block to win. */
@media (max-width: 768px) {
  .fca-founder-name {
    font-size: clamp(30px, 8.4vw, 42px) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.02em !important;
    margin-top: 16px !important;
  }
  .fca-founder-photo {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 62vh !important;
  }
  .fca-founder-bio p { font-size: 16px !important; line-height: 1.6 !important; }
  .fca-founder-bio > div:first-child p { font-size: 18px !important; line-height: 1.52 !important; }
}