/* ============================================
   PRUNE TSIMI — responsive.css
   Loaded only on screens ≤ 768px
   ============================================ */

:root {
  --section-v:  52px;
  --section-h:  20px;
  --portrait-w: 320px;
  --portrait-h: 480px;
  --name-max:   280px;
}

nav {
  padding: 10px 20px;
}
.nav-logo {
  height: 20px;
}
.nav-contact {
  font-size: 16px;
}

.hero {
  padding-top: 70px;
}

/* Stack hero vertically on mobile */
.hero-name-wrap {
  max-width: var(--name-max);
  height: 202px; /* ~280px × 0.72 ratio */
}

.hero-middle {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  margin-top: 12px;
  padding: 0 20px;
  gap: 12px;
}

.hero-portrait {
  width: 280px;
  height: 420px;
  grid-row: 2;
  margin: 0 auto;
}

.hero-claim-text.left {
  grid-row: 1;
  text-align: center;
  padding: 0;
  font-size: 20px;
}
.hero-claim-text.right {
  grid-row: 3;
  text-align: center;
  padding: 0;
  font-size: 20px;
}

.scribble-underline {
  bottom: -24px;
  left: -16px;
  width: calc(100% + 32px);
  height: 36px;
}

.about h1 { font-size: 24px; }
.about p,
.revenu-ref,
.fog,
.revenu-desc,
.revenu-bullets li,
.revenu-claim { font-size: 16px; }
.fog-punch { font-size: 17px; }

.numbers {
  grid-template-columns: 1fr;
}
.num-card { padding: 44px 24px; }
.num-big { font-size: 72px; }
.num-word { font-size: 32px; }
.num-desc { font-size: 14px; }

.logos-grid img { height: 26px; }

.contact-email,
.contact-book-link { font-size: 15px; }

.sticky-btn {
  bottom: 16px;
  right: 16px;
  font-size: 16px;
  padding: 12px 18px;
  max-width: 180px;
}