/* Cocoa Empire — mobile / responsive overrides
   Loaded LAST so these rules win over the desktop sheet on small screens.
   Desktop view is left untouched. */

/* ─── Hamburger button · hidden on desktop ─────────────────────── */
.topbar-hamburger {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.topbar-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cocoa);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.topbar.on-dark .topbar-hamburger span { background: var(--cream); }

/* ─── Tablet ≤ 1100px ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .topbar-inner { gap: 12px !important; }
  .nav button { font-size: 12px !important; padding: 8px 10px !important; letter-spacing: 0.01em !important; }
  .nav button.nav-cta, .topbar-signin, .topbar .cta.solid {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 10.5px !important;
  }
  .hero-meta { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ─── Mobile ≤ 760px ──────────────────────────────────────────── */
@media (max-width: 760px) {

  /* Topbar collapse to hamburger */
  .topbar-hamburger { display: inline-flex; }
  .topbar.is-mobile-open .topbar-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar.is-mobile-open .topbar-hamburger span:nth-child(2) { opacity: 0; }
  .topbar.is-mobile-open .topbar-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .topbar-inner {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 12px 18px !important;
    gap: 8px !important;
  }
  .brand { flex: 1; }

  /* Hide nav and actions by default on mobile, show when opened */
  .nav,
  .topbar-actions {
    display: none !important;
  }
  .topbar.is-mobile-open .nav,
  .topbar.is-mobile-open .topbar-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 4px !important;
    padding: 12px 0 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .topbar:not(.on-dark).is-mobile-open .nav,
  .topbar:not(.on-dark).is-mobile-open .topbar-actions {
    border-top-color: rgba(20, 9, 3, 0.10);
  }
  .topbar.is-mobile-open .nav button,
  .topbar.is-mobile-open .topbar-actions > * {
    width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
    height: 44px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }
  .topbar.is-mobile-open .nav button.nav-cta,
  .topbar.is-mobile-open .topbar-signin,
  .topbar.is-mobile-open .topbar .cta.solid {
    justify-content: center !important;
    margin-top: 6px !important;
  }

  /* Make topbar overlay & solid on mobile when open */
  .topbar.is-mobile-open {
    background: var(--cream);
    box-shadow: 0 8px 24px rgba(20, 9, 3, 0.15);
  }
  .topbar.on-dark.is-mobile-open {
    background: var(--cocoa-deep);
  }

  /* Generic section spacing trim */
  .section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    --pad-x: 22px;
  }
  .section.tight {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .container { padding-left: 22px !important; padding-right: 22px !important; }

  /* Display headlines · cap size */
  .display, .hero h1, h1.invest-h1, h1.track-h1, .legal-h1, .fund-h2,
  .impact-headline, .impact-panel-h1 {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  .hero h1 { font-size: clamp(34px, 9vw, 48px) !important; }
  .impact-panel-h1 .pct { font-size: clamp(56px, 14vw, 84px) !important; }
  .impact-panel-h1 .line { font-size: clamp(16px, 4.5vw, 22px) !important; }

  /* Hero · stats stacked 2-col */
  .hero-inner { padding-top: 40px !important; padding-bottom: 32px !important; }
  .hero-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
    margin-top: 24px !important;
  }
  .hero-meta .cell .figure { font-size: 26px !important; }
  .hero-meta .cell:hover .figure { font-size: 28px !important; }
  .hero-trust { font-size: 10px !important; gap: 10px !important; padding: 10px 14px !important; }
  .trust-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-secondary { font-size: 16px !important; }

  /* Universal grid → 1 col */
  .thesis,
  .infra-grid-rich,
  .flow-cards,
  .capability-grid,
  .proven-grid,
  .buyer-grid,
  .cap-pillars,
  .cycle-details,
  .invest-principles,
  .invest-disc-band-grid,
  .impact-mid-head,
  .impact-areas,
  .impact-cols,
  .fund-projects-grid,
  .fund-steps,
  .gallery-grid,
  .scene-blocks,
  .scene,
  .cc-scen-grid,
  .cc-mech-steps,
  .invest-hero-grid,
  .invest-cta-row,
  .invest-final-grid,
  .invest-section-head,
  .builtnew-photo .proven-grid,
  .track-kpis,
  .track-hero-kpis,
  .impact-split-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .invest-hero .invest-cta-row { grid-template-columns: 1fr !important; }
  .scene-control ul { grid-template-columns: 1fr !important; }
  .scene-combo { grid-template-columns: 1fr !important; padding: 22px 18px !important; }
  .scene-combo-divider { display: none !important; }
  .scene-combo-head { padding: 14px 16px !important; }

  /* Cycle "every step" scene block */
  .scene { gap: 18px !important; }
  .scene-mega { font-size: 80px !important; }
  .scene-mega-shadow { font-size: 80px !important; top: 4px; left: 3px; }
  .scene-headline { font-size: 24px !important; }
  .scene-explain { font-size: 14px !important; }

  /* Operating flow head */
  .operating-flow .of-head { padding: 0 !important; }
  .of-strong-wrap .of-strong { grid-template-columns: 1fr !important; gap: 18px !important; }
  .of-strong-wrap .of-strong-2 { text-align: left !important; justify-self: start !important; }

  /* Cycle photo band */
  .cycle-how-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Footer collapse */
  .footer-top { display: flex !important; flex-direction: column; gap: 26px !important; }
  .footer-bottom { flex-direction: column; gap: 12px !important; align-items: flex-start !important; }
  .footer-restricted { font-size: 10px !important; }

  /* Modals · full width minus margins */
  .enrol-backdrop { padding: 14px !important; }
  .enrol-modal { padding: 26px 22px 22px !important; max-height: 90vh !important; }
  .enrol-grid { grid-template-columns: 1fr !important; }
  .enrol-footer { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  .enrol-submit { width: 100% !important; }
  .enrol-title { font-size: 22px !important; }

  /* Sign-in modal */
  .signin-modal { max-width: none !important; }

  /* Gate */
  .inv-gate-card { max-width: 100% !important; padding: 22px 22px !important; }
  .inv-gate-icon { width: 48px !important; height: 56px !important; }
  .inv-gate-title { font-size: 22px !important; }
  .inv-gate-list { padding: 12px !important; }
  .inv-gate-list li { font-size: 12px !important; }
  .inv-gate-actions { flex-direction: column; gap: 8px !important; }
  .inv-gate-btn { width: 100% !important; }

  /* Tweaks panel */
  .tweaks-panel { width: calc(100vw - 32px) !important; right: 16px !important; }

  /* Origin / Track screen */
  .track-table-wrap { overflow-x: auto !important; }
  .track-header { padding-top: 32px !important; padding-bottom: 18px !important; }
  .track-h1 { font-size: 32px !important; }
  .track-sub { font-size: 14px !important; max-width: 100% !important; }
  .track-controls { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .track-search { min-width: 0 !important; width: 100% !important; }
  .track-table { font-size: 13px !important; }
  .track-table tbody td,
  .track-table thead th { padding: 12px !important; }
  .track-table tbody td:first-child,
  .track-table thead th:first-child { padding-left: 16px !important; }
  .track-table tbody td:last-child,
  .track-table thead th:last-child { padding-right: 16px !important; }
  .track-docs { padding: 14px !important; grid-template-columns: 1fr !important; }
  .track-docs-trade { grid-template-columns: 1fr !important; gap: 12px !important; padding: 12px !important; }
  .track-docs-logistics { grid-template-columns: 1fr !important; gap: 14px !important; }
  .track-hero-kpi { padding: 14px 18px !important; }
  .track-hero-v, .track-kpi-v { font-size: 30px !important; }

  /* Buyer channels marquee */
  .brand-marquee { padding: 24px 0 !important; }
  .brand-cell { padding: 0 22px !important; height: 80px !important; }
  .brand-mark-img { max-height: 36px !important; }

  /* Cycle calculator */
  .cc-ticket-card { grid-template-columns: 1fr !important; gap: 16px !important; padding: 18px 18px !important; }
  .cc-ticket-l { border-right: 0 !important; padding-right: 0 !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(26, 18, 8, 0.08); }
  .cc-ticket-v { font-size: 36px !important; }
  .cc-scen-hero { padding: 14px 0 10px !important; }
  .cc-scen-pct { font-size: 44px !important; }
  .cc-scen-pct span { font-size: 18px !important; }
  .cc-cta-card { grid-template-columns: 1fr !important; }
  .cc-mech-steps { gap: 16px !important; }
  .cc-h1 { font-size: 26px !important; }

  /* Impact mid */
  .impact-mid { padding: 32px 0 !important; }
  .impact-mid-head { gap: 18px !important; margin-bottom: 24px !important; }
  .impact-mid-quote { padding: 16px 18px 16px 44px !important; }
  .impact-mid-quote .impact-mark { font-size: 44px !important; }

  /* Fund / steps */
  .fund-progress-readout { flex-direction: column !important; gap: 14px !important; align-items: flex-start !important; }
  .fund-progress-amount-end { font-size: 28px !important; }
  .fund-projects { margin-top: 24px !important; }
  .fund-pcard-name, .fund-pcard-hero-name { font-size: 17px !important; }
  .fund-pcard-target .v { font-size: 26px !important; }
  .fund-cta-row { flex-direction: column !important; align-items: stretch !important; }
  .fund-cta { width: 100% !important; justify-content: center !important; }

  /* Legal pages */
  .legal-container { padding: 0 18px !important; }
  .legal-h1 { font-size: 36px !important; }
  .legal-item { grid-template-columns: 1fr !important; gap: 6px !important; padding: 18px 0 !important; }
  .legal-item-n { font-size: 38px !important; padding-top: 0 !important; }

  /* Pod-corner decorative · smaller on mobile */
  .pod-corner { transform: scale(0.5) !important; transform-origin: top right; }

  /* Hide decorative cursor on touch */
  .ce-cursor { display: none !important; }

  /* Forms · denser */
  .enrol-modal { font-size: 14px !important; }
  .enrol-field input, .enrol-field select, .enrol-field textarea { font-size: 16px !important; }

  /* Topbar logo */
  .brand img { height: 36px !important; }

  /* Splash intro · scale down */
  .ce-splash-logo { width: 200px !important; height: auto !important; }
}

/* ─── Smallest phones ≤ 420px ─────────────────────────────────── */
@media (max-width: 420px) {
  .hero h1 { font-size: 32px !important; }
  .display { font-size: 26px !important; }
  .hero-meta { grid-template-columns: 1fr !important; }
  .hero-meta .cell { padding: 12px 0 !important; }
  .track-kpis, .track-hero-kpis { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding-top: 24px !important; }
  .contact-card-email { font-size: 16px !important; word-break: break-all; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr 1fr !important; }
}