/* ============================================================
   MOBILE RESPONSIVE STYLES — michaelgibran.online
   Breakpoints: tablet ≤1024px, mobile ≤768px
   ============================================================ */

/* ── Hamburger button (hidden on desktop) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink, #1A1714);
  transition: all 0.25s ease;
  border-radius: 1px;
}

/* Mobile nav overlay */
.nav-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper, #FAFAF8);
  z-index: 200;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 32px;
  gap: 32px;
}
.nav-mobile.open { display: flex; }
.nav-mobile-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--ink, #1A1714);
  line-height: 1;
}
.nav-mobile-link {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 32px;
  color: var(--ink, #1A1714);
  text-decoration: none;
  line-height: 1.2;
}
.nav-mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--ink, #1A1714);
  color: var(--ink, #1A1714);
  text-decoration: none;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════
   TABLET — ≤ 1024px
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .col {
    padding-left: clamp(24px, 6vw, 80px);
    padding-right: clamp(24px, 6vw, 80px);
  }
  .header-inner {
    padding-left: clamp(24px, 4vw, 60px);
    padding-right: clamp(24px, 4vw, 60px);
  }
  .footer-top {
    padding-left: clamp(24px, 6vw, 80px) !important;
    padding-right: clamp(24px, 6vw, 80px) !important;
  }
  .footer-bottom {
    padding-left: clamp(24px, 6vw, 80px) !important;
    padding-right: clamp(24px, 6vw, 80px) !important;
  }
  .logo-strip-inner {
    padding-left: clamp(24px, 6vw, 80px) !important;
    padding-right: clamp(24px, 6vw, 80px) !important;
  }
  /* Testimonials: 2-column on tablet */
  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ══════════════════════════════════════════════
   MOBILE — ≤ 768px
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Column ── */
  .col {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Header ── */
  .header-inner {
    padding: 16px 24px;
    position: relative;
  }
  .logo { font-size: 20px; }

  /* Hide desktop nav, show hamburger */
  .nav { display: none; }
  .nav-hamburger { display: flex; position: static; margin-left: auto; }

  /* ── Hero ── */
  .hero { padding: 32px 0; }
  .hero h1 {
    font-size: 28px;
    letter-spacing: -0.84px;
    line-height: 1.2;
    margin-bottom: 20px;
  }
  .hero-sub { font-size: 18px; line-height: 1.65; }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-image { height: 220px; }

  /* ── Logo strip ── */
  .logo-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .logo-strip-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
    width: max-content;
    min-width: 100%;
    justify-content: flex-start;
  }

  /* ── Sections ── */
  .section { padding: 32px 0; }
  .section-h2 { font-size: 24px; letter-spacing: -0.48px; }
  .section-h3 { font-size: 20px; }
  .body-lg { font-size: 18px; line-height: 1.65; }

  /* ── Work cards (homepage + work page) ── */
  .work-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .work-thumb {
    width: 100%;
    height: 200px;
  }
  .work-title { font-size: 18px; }
  .work-subtitle { font-size: 15px; }
  .work-list { gap: 40px; }

  /* ── Testimonials ── */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* ── About section (homepage) ── */
  .about-text { font-size: 18px; line-height: 1.65; }

  /* ── Footer ── */
  .footer-top {
    flex-direction: column;
    padding: 40px 24px 32px !important;
    gap: 32px;
  }
  .footer-col { flex: none; width: 100%; }
  .footer-bottom {
    padding: 16px 24px !important;
  }

  /* ── About page ── */
  .about-content { padding: 32px 0 24px; }
  .about-name { font-size: 32px; letter-spacing: -0.96px; }
  .about-body-lg { font-size: 18px; line-height: 1.65; }
  .about-body-md { font-size: 16px; }
  .cta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cta-row .btn { width: 100%; justify-content: center; }

  /* ── Contact page ── */
  .contact-title { font-size: 32px; letter-spacing: -0.96px; }
  .contact-subtitle { font-size: 18px; line-height: 1.65; }
  .form-row { flex-direction: column; gap: 20px; }
  .contact-form { padding: 24px 20px; }

  /* ── Case study: breadcrumb ── */
  .breadcrumb { margin-bottom: 16px; }

  /* ── Case study: hero ── */
  .hero h1 {
    font-size: 26px;
    letter-spacing: -0.78px;
  }
  .hero-sub { font-size: 17px; }

  /* ── Case study: outcomes bar ── */
  .outcomes-bar { padding: 24px 0; }
  .metrics-grid { flex-wrap: wrap; }
  .metric { width: 50%; padding-right: 16px; padding-bottom: 20px; }
  .metric-value { font-size: 26px; }
  .meta-row {
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
  }
  .meta-cell {
    flex: none !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-mid, #D6D2CC);
    padding: 10px 14px;
  }
  .meta-cell:last-child {
    border-bottom: none;
  }

  /* ── Case study: study meta ── */
  .study-meta { flex-wrap: wrap; }
  .study-meta-cell {
    flex: 0 0 50%;
    border-right: none;
    border-bottom: 1px solid var(--border-mid, #D6D2CC);
  }
  .study-meta-cell:nth-child(odd) { border-right: 1px solid var(--border-mid, #D6D2CC); }
  .study-meta-cell:last-child { border-bottom: none; }
  .study-meta-cell:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  /* ── Case study: before/after ── */
  .ba-row { flex-direction: column; }
  .ba-side { border-right: none !important; border-bottom: 1px solid var(--border-mid, #D6D2CC); }
  .ba-side:last-child { border-bottom: none; }

  /* ── Case study: heuristic cards ── */
  .h-cards-grid { flex-direction: column; }
  .h-card { width: 100%; }

  /* ── Case study: decision chains ── */
  .chain { flex-direction: column; gap: 8px; }
  .chain-arrow { transform: rotate(90deg); align-self: center; padding: 0; width: auto; height: 20px; }
  .decision-title { margin-left: 0; font-size: 17px; }
  .decision-screenshot { margin-left: 0; }
  .decision-caption { margin-left: 0; }

  /* ── Case study: area grid ── */
  .area-grid { flex-direction: column; }
  .area-card { width: 100%; }

  /* ── Case study: validation cards ── */
  .val-cards { flex-direction: column; }
  .val-card { max-width: 100%; }

  /* ── Case study: lessons ── */
  .lesson-text { font-size: 18px; line-height: 1.65; }
  .lesson-title { font-size: 20px; }

  /* ── DITRIX: keeps/adds cards ── */
  .keeps-adds { flex-direction: column; }
  .keeps-card { max-width: 100%; }

  /* ── DITRIX: scope cards ── */
  .scope-cards { flex-direction: column; }
  .scope-card { width: 100%; }

  /* ── DITRIX: process table ── */
  .process-table-header { flex-direction: column; }
  .process-th { border-right: none; border-bottom: 1px solid var(--border, #E8E4DE); }
  .process-th:last-child { border-bottom: none; }
  .process-table-body { flex-direction: column; }
  .process-td { border-right: none; border-bottom: 1px solid var(--border, #E8E4DE); }
  .process-td:last-child { border-bottom: none; }

  /* ── INCAR: steps row ── */
  .steps-row { flex-wrap: wrap; }
  .step-card { width: calc(50% - 4px); flex: none; }

  /* ── INCAR: constraint grid ── */
  .constraint-grid { flex-direction: column; }
  .constraint-card { width: 100%; }

  /* ── INCAR: track cards ── */
  .track-cards { flex-direction: column; }
  .track-card { width: 100%; }

  /* ── INCAR: brand row ── */
  .brand-row { flex-direction: column; gap: 8px; }
  .brand-arrow { transform: rotate(90deg); align-self: center; }

  /* ── INCAR: user flow ── */
  .flow-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .flow-step { width: calc(50% - 20px); }
  .flow-arrow { display: none; }

  /* ── INCAR: screens grid ── */
  .screens-row { flex-direction: column; }
  .screen-img { height: 240px; }

  /* ── INCAR: deploy card ── */
  .deploy-card { flex-direction: column; gap: 24px; }
  .deploy-divider { width: 40px; height: 1px; }

  /* ── INCAR: metrics grid ── */
  .metrics-grid .metric { width: 50%; }

  /* ── Dashboard: stake grid ── */
  .stake-grid { flex-direction: column; }
  .stake-card { width: 100%; }

  /* ── Dashboard: proc table ── */
  .proc-table { overflow: hidden; }
  .proc-row { flex-direction: column; }
  .proc-cell { border-right: none; border-bottom: 1px solid var(--border-mid, #D6D2CC); }
  .proc-cell:last-child { border-bottom: none; }

  /* ── Between nav ── */
  .between-nav { padding: 32px 0; }
  .between-nav-inner {
    flex-direction: column;
    width: 100%;
    padding: 0 24px;
    gap: 12px;
  }
  .between-card { width: 100%; }
  .between-direction.right { justify-content: flex-start; }
  .between-title.right { text-align: left; }
  .between-company.right { text-align: left; }

  /* ── Maturity table (DITRIX) ── */
  .maturity-table { overflow-x: auto; }
  .maturity-header,
  .maturity-body { min-width: 480px; }

  /* ── Context cards ── */
  .ctx-row { flex-direction: column; }

  /* ── Questions (DITRIX) ── */
  .question { gap: 16px; }
  .question-text { font-size: 18px; line-height: 1.65; }
  .question-title { font-size: 20px; }

  /* ── Buttons full-width on mobile ── */
  .hero .btn,
  .about-hero .btn { width: 100%; }

  /* ── Page spacer reduction ── */
  .spacer { height: 80px; }
}