/* ════════════════════════════════════════════════════
   responsive.css — Mobile / tablet breakpoints
════════════════════════════════════════════════════ */

/* Hamburger + mobile menu hidden by default (desktop) */
.nav-hamburger   { display: none; }
.nav-mobile-menu { display: none; }

@media (max-width: 960px) {

  /* ── Nav ─ extends from top when hamburger tapped ── */
  nav {
    position:        fixed;
    top: 0; left: 0; right: 0;
    background:      transparent;
    padding:         16px 20px;
    z-index:         110;
    box-shadow:      none;
    flex-direction:  column;
    align-items:     stretch;
    transition:      background 0.15s ease-out,
                     padding    0.15s ease-out,
                     box-shadow 0.15s;
    will-change:     background, padding;
  }
  nav.menu-open {
    background: #FAFAF7;
    padding:    18px 24px 36px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.10);
  }

  /* Nav links collapsed by default, expand when open */
  .nav-links {
    display:        flex !important;
    flex-direction: column;
    align-items:    flex-start;
    gap:            0;
    width:          100%;
    max-height:     0;
    overflow:       hidden;
    opacity:        0;
    transition:     max-height 0.15s ease-out,
                    opacity    0.1s ease-out,
                    margin-top 0.15s ease-out;
    will-change:    max-height, opacity, margin-top;
    margin-top:     0;
  }
  nav.menu-open .nav-links {
    max-height: 400px;
    opacity:    1;
    margin-top: 20px;
  }

  /* Reset link styling for vertical layout */
  .nav-link,
  .nav-cta {
    font-family:    'Fraunces', serif !important;
    font-size:      28px !important;
    font-weight:    400 !important;
    color:          var(--text) !important;
    background:     transparent !important;
    border:         none !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    padding:        8px 20px !important;
    text-align:     left;
    width:          100% !important;
    border-radius:  0 !important;
    display:        block !important;
  }
  .nav-link::after,
  .nav-cta::after { display: none !important; }
  .nav-cta { padding-top: 12px !important; }

  /* Hamburger — always visible in top right */
  .nav-hamburger {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            5px;
    width:          32px;
    height:         32px;
    background:     transparent;
    border:         none;
    cursor:         pointer;
    padding:        0;
    z-index:        115;
    position:       absolute;
    top:            16px;
    right:          20px;
    touch-action:   manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-hamburger span {
    display:    block;
    width:      22px;
    height:     1.5px;
    background: var(--text);
    transition: transform 0s cubic-bezier(0.65,0,0.35,1),
                opacity 0.3s;
    transform-origin: center;
  }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Hide old dropdown menu */
  .nav-mobile-menu { display: none !important; }

  /* ── Hero ────────────────────────────────────── */
  .hero {
    padding:         88px 24px 0px;
    min-height:      unset !important;
    justify-content: flex-start;
    flex-direction:  column;
  }
  /* Photo FIRST, content SECOND */
  .hero-blob    { order: 1; }
  .hero-content { order: 2; max-width: 100%; }

  .hero-h1 {
    font-size:      clamp(36px, 9.5vw, 60px);
    letter-spacing: -0.02em;
    line-height:    1.08;
    margin-bottom:  35px;
    opacity:        1 !important;
  }
  .hero-sub {
    font-size:     14px;
    max-width:     100%;
    margin-bottom: 24px;
    line-height:   1.7;
    opacity:       1 !important;
    transform:     none !important;
  }
  .hero-btns {
    flex-direction: column;
    gap:            15px;
    width:          100%;
    opacity:        1 !important;
    transform:      none !important;
  }
  .hero-btns a {
    width:           100%;
    text-align:      center;
    justify-content: center;
  }

  /* Photo blob — proper margin, smaller size, gentle float */
  .hero-blob {
    display:   block;
    position:  relative;
    top: auto; right: auto;
    width:     210px;
    height:    210px;
    margin:    32px auto 10px;
    transform: none !important;
    animation: blobReveal 1.2s cubic-bezier(0.16,1,0.3,1) 0.3s both,
               mobileFloat 5s ease-in-out 1.6s infinite;
  }
  .hero-blob-2      { display: none; }
  .hero-scroll-hint { display: none; }

  /* ── Sections ────────────────────────────────── */
  .section     { padding: 60px 24px; }
  .section-alt { padding: 60px 24px; }
  .section-sage{ padding: 60px 24px; }
  .mw, .mw-sm  { width: 100%; }

  .section-title {
    font-size:   clamp(32px, 8.5vw, 52px);
    line-height: 1.1;
  }

  /* ── About ───────────────────────────────────── */
  #about       { padding-top: 48px; }
  .about-grid  { grid-template-columns: 1fr; gap: 36px; }
  .about-card  { padding: 24px 20px; }
  .about-quote { margin: 20px 0; }
  .about-quote p { font-size: 15px; line-height: 1.75; }
  .tags        { gap: 8px; margin-top: 20px; }

  /* ── Pain ────────────────────────────────────── */
  .pain-grid { grid-template-columns: 1fr; }
  .pain-item { border-right: none; }
  .pain-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .pain-item:last-child           { border-bottom: none; }
  .pain-pull  { padding: 24px; margin-top: 32px; }

  /* ── Podcast ─────────────────────────────────── */
  .podcast-hero {
    flex-direction: column;
    gap:     20px;
    padding: 24px 20px;
  }
  .ep-grid      { grid-template-columns: 1fr; }
  .platforms    { flex-wrap: wrap; gap: 10px; margin-top: 28px; }
  .platform-btn { font-size: 12px; padding: 10px 14px; }

  /* ── Coaching ────────────────────────────────── */
  .coaching-grid { grid-template-columns: 1fr; gap: 36px ;margin-top: 16px !important; }
  .cform         { border-radius: 16px; }
  .cform-head    { padding: 10px 20px 15px; }
  .cform-body    { padding: 20px; }
  .step          { gap: 14px; }
  .steps         { gap: 24px; }

  /* ── Final CTA ───────────────────────────────── */
  .final-cta {
    padding:    64px 24px;
    text-align: center;
  }
  .final-cta h2 {
    font-size:     clamp(32px, 8.5vw, 52px);
    line-height:   1.15;
    margin-bottom: 20px;
  }
  .final-cta p { font-size: 15px; margin-bottom: 28px; }
  .final-cta > div[style] {
    flex-direction: column !important;
    align-items:    center !important;
    gap:            12px !important;
    width:          100%;
  }
  .final-cta a { width: 100%; justify-content: center; }
  .cta-note    { font-size: 13px; margin-top: 24px; }

  /* ── Footer — only copy + tagline ─────────────── */
  footer {
    flex-direction: column;
    align-items:    flex-start;
    gap:            12px;
    padding:        32px 24px;
  }
  .footer-links { display: none; }
  .fcopy        { font-size: 12px; color: var(--text-muted); }
  .ftagline     { font-size: 12px; color: var(--text-light); }
}

/* ── Small phones ─────────────────────────────── */
@media (max-width: 480px) {
  .hero   { padding: 55px 20px 0px; }
  .hero-h1{ font-size: clamp(32px, 9vw, 46px); }
  .hero-blob { width: 220px; height: 220px; margin: 45px auto 105px; }
  .nav-mobile-link { font-size: 34px; }

  .section     { padding: 52px 20px; }
  .section-alt { padding: 52px 20px; }
  .section-sage{ padding: 52px 20px; }

  .section-title { font-size: clamp(28px, 8vw, 42px); }

  .btn-primary,
  .btn-ghost { width: 100%; justify-content: center; }

  .about-card { padding: 20px 16px; }
  .cform-body { padding: 16px; }

  .final-cta { padding: 52px 20px; }
  .final-cta h2 { font-size: clamp(28px, 8vw, 42px); }

  footer { padding: 28px 20px; }
}

/* ── Mobile float animation ───────────────────── */
@keyframes mobileFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}