/* ============================================================
   5TH DIMENSION — MOBILE OVERRIDES
   Breakpoint: 900px and below (nav), 768px and below (layout)
   ============================================================ */

@media (max-width: 900px) {

  /* --- Navigation: logo left, hamburger right --- */
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
  }

  .nav-side { display: none; }

  .nav-brand { order: -1; padding: 6px 0; }
  .logo-ring { width: 56px; height: 56px; }

  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--base);
    border-bottom: 1px solid rgba(20, 32, 48, 0.08);
    padding: 12px 24px 24px;
    box-shadow: 0 14px 30px rgba(20, 32, 48, 0.12);
  }

  .nav-links a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dark);
    padding: 15px 0;
    width: 100%;
    border-bottom: 1px dashed rgba(176, 154, 170, 0.35);
  }

  .nav-links a:last-child { border-bottom: none; }

  .nav-links .btn {
    margin-top: 12px;
    width: auto;
    padding: 15px 32px;
    text-align: center;
    color: var(--base);
    border-bottom: none;
    box-sizing: border-box;
  }

  .site-nav.nav-open .nav-links { display: flex; }
}

@media (max-width: 768px) {

  /* --- Typography --- */
  h1 { font-size: clamp(36px, 9.5vw, 44px); }
  h2 { font-size: clamp(29px, 7.5vw, 34px); }
  h3 { font-size: 26px; }

  /* --- Section padding --- */
  .hero,
  .selection-section,
  .neuro-section,
  .founder-section,
  .quote-section,
  .cta-section,
  .founder-intro-section,
  .socratic-section,
  .process-section,
  .not-section,
  .how-closing-section,
  .audience-hero,
  .audience-hero--light,
  .problem-section,
  .what-we-do-section,
  .what-not-section,
  .closing-section,
  .services-header,
  .bundles-section,
  .addons-section,
  .form-section,
  .custom-statement,
  .letter-section,
  .is-section,
  .need-section {
    padding: var(--section-padding-mobile);
  }

  .hero { padding-top: 64px; padding-bottom: 64px; }

  /* --- Torn dividers --- */
  .torn-divider svg { height: 34px; }

  /* --- Doodles: shown on mobile too, at 70% size (rotation preserved via
     the --doodle-rotate custom property set inline per element) --- */
  .doodle, .doodle-corner { --doodle-scale: 0.7; }
  .squiggle { width: 150px; }

  /* Text-adjacent whitespace accents (sparkles, arrows, loops near headings/
     paragraphs/buttons) — desktop's generous section padding gave these
     room to float clear of text; mobile's tighter padding pulls text up
     into the same footprint, so each one gets a mobile-only reposition
     (and, where the available gap is small, a further size reduction on
     top of the 0.7 default) to land back in clean whitespace. !important
     is required because the inline style otherwise wins. Values are
     checked against each section's actual mobile padding/gap and against
     whether that section clips overflow. */
  .doodle--hero-sparkle { top: 6px !important; left: auto !important; right: 8% !important; }
  .doodle--hero-arrow { bottom: -58px !important; left: auto !important; right: 15% !important; --doodle-scale: 0.4; }
  .doodle--neuro-sparkle { top: 6px !important; }
  .doodle--founder-arrow { top: -78px !important; left: auto !important; right: 4% !important; --doodle-scale: 0.45; }
  .doodle--cta-loop { top: 2px !important; left: 8% !important; }
  .doodle--cta-star { bottom: 62px !important; }
  .doodle--iswork-star { top: -6px !important; }
  .doodle--services-sparkle { top: 4px !important; }
  .doodle--bundles-arrow { top: -30px !important; --doodle-scale: 0.5; }
  .doodle--addons-pie { top: -14px !important; --doodle-scale: 0.55; }
  .doodle--form-envelope { top: -61px !important; --doodle-scale: 0.4; }
  .doodle--whatwedo-icon { top: -76px !important; --doodle-scale: 0.6; }
  .doodle--closing-star { top: 20px !important; }
  .doodle--closing-extra { bottom: -18px !important; --doodle-scale: 0.4; }

  /* --- Grids collapse --- */
  .hero-grid,
  .neuro-grid,
  .founder-grid,
  .founder-intro-grid,
  .not-grid,
  .audience-hero-grid,
  .what-we-do-grid,
  .what-not-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .hero-image .img-placeholder { height: 300px; }
  .audience-hero-image .img-placeholder { height: auto; aspect-ratio: 1 / 1; }
  .founder-image-wrapper .img-placeholder { height: 320px; }
  .not-image .img-placeholder { height: 240px; }

  /* --- Selection cards --- */
  .cards-grid { grid-template-columns: 1fr; gap: 30px; }

  /* --- Bundle cards --- */
  .bundles-grid { grid-template-columns: 1fr; gap: 30px; }
  .bundle-card { padding: 34px 26px 30px; }

  /* --- Add-on cards --- */
  .addons-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* --- Add-on list --- */
  .addons-list { grid-template-columns: 1fr; gap: 18px; }

  /* --- Letter block --- */
  .letter-block { padding: 40px 26px; margin: 24px auto; font-size: 17.5px; }

  /* Truncated by default on mobile: hide the continuation + later
     paragraphs + CTA, show the ellipsis and the "Read more" toggle.
     Expanding (via main.js) flips all four. */
  .letter-more { display: none; }
  .letter-more-inline { display: none; }
  .letter-ellipsis { display: inline; }
  .letter-readmore { display: inline-block; }

  .letter-block.expanded .letter-more { display: block; }
  .letter-block.expanded .letter-more-inline { display: inline; }
  .letter-block.expanded .letter-ellipsis { display: none; }
  .letter-block.expanded .letter-readmore { display: none; }

  /* --- Is-list --- */
  .is-list { margin: 24px 4px; }

  /* --- Process grid --- */
  .process-grid { grid-template-columns: 1fr; gap: 24px; }

  /* --- Footer --- */
  .footer-inner {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .footer-contact { justify-content: center; flex-wrap: wrap; }

  .site-footer { padding: 40px 24px 28px; }

  /* --- Form --- */
  .checkbox-grid { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-row input { margin-bottom: 14px; }

  .form-submit {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* --- Container padding --- */
  .container { padding: 0 20px; }

  /* --- Credential badge position --- */
  .credential-badge {
    position: static;
    margin-top: 18px;
    display: inline-block;
    transform: rotate(-1deg);
  }

  .founder-image-wrapper { padding: 0; }

  /* --- Quote section --- */
  blockquote { font-size: 24px; }

  /* --- Bundle tag on mobile --- */
  .bundle-tag { font-size: 9px; padding: 4px 10px; }

  /* --- Neuro card --- */
  .neuro-card { margin-top: 8px; }

  /* --- Services header --- */
  .services-header { padding: 48px 20px 0; }
  .services-header .subtitle { font-size: 17px; }
  .menu-card { padding: 40px 26px 72px; margin-bottom: -26px; }

  /* --- How closing --- */
  .how-closing-section { padding: 32px 20px 48px; }

  /* --- Custom statement --- */
  .custom-statement { padding: 32px 20px 0; }
}

@media (max-width: 480px) {
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }

  .addons-grid { grid-template-columns: 1fr; }

  blockquote { font-size: 21px; }

  .bundle-name { font-size: 27px; }

  .logo-ring { width: 52px; height: 52px; }

  .btn { padding: 15px 28px; font-size: 11.5px; letter-spacing: 0.13em; }
}