/* Heirpath — mobile corrections.
 *
 * Layered on top of the mirrored Squarespace stylesheets, phones only
 * (max-width 767px — the same breakpoint Squarespace uses to switch its
 * fluid-engine grid). Desktop and tablet rendering is untouched.
 *
 * Written 2026-08-28 after reviewing the published site at 375x812.
 * Every rule below corrects something measured on that viewport; the
 * numbers in the comments are the before/after.
 */

@media (max-width: 767px) {

  /* 1 — Full-width body copy.
   *
   * Squarespace's mobile grid places every block at columns 2/10, which
   * is x=23 / w=330 in a 375px viewport. The home hero paragraph kept a
   * desktop span of 3 / 9 and rendered 245px wide — about 22 characters
   * per line, against ~40 for the rest of the site, which is what made
   * the hero copy look cramped and awkwardly broken.
   *
   * Every other block on every other page is already 2/10, so this
   * normalises one outlier to the site's own convention rather than
   * imposing a new rule.
   */
  .fluid-engine > .fe-block {
    grid-column: 2 / 10 !important;
  }

  /* 2 — Collapse empty spacer rows.
   *
   * Mobile grids are laid out as repeat(N, minmax(24px, auto)). The home
   * hero spends 17 of its 25 rows empty, which added ~400px of dead space
   * and pushed "Get a Free Property Review" to y=852 — below the fold on
   * an 812px screen.
   *
   * Dropping the explicit track list moves the rows to the implicit grid,
   * where empty ones collapse to 12px while content rows stay auto-sized.
   * Hero 1168px -> 943px; CTA y=852 -> y=726, above the fold.
   */
  .fluid-engine {
    grid-template-rows: none !important;
    grid-auto-rows: minmax(12px, auto) !important;
  }

  /* 3 — Air under the hero headline.
   *
   * The headline and the paragraph sit on adjacent grid rows, so they are
   * separated only by the 11px row-gap, which is far too tight under 45px
   * display type. 11px -> 25px.
   */
  .sqs-html-content > p.sqsrte-large:first-child {
    margin-top: 14px;
  }

  /* 4 — "Heirpath" wordmark size.
   *
   * Squarespace sizes the mobile site title as
   *   calc((var(--mobile-site-title-font-font-size-value) - 1)
   *        * calc(.012 * min(100vh, 900px)) + 1rem)
   * and that variable was left at 1 — the minimum — where the whole
   * expression collapses to a flat 1rem. So the wordmark rendered at 16px
   * on mobile against 20.9px on desktop, and read as small next to the
   * menu button.
   *
   * Raising the variable keeps Squarespace's own viewport-scaling formula
   * rather than pinning a fixed px size. 2.4 is the largest value that
   * still fits the header's designed 82px height — 2.8 and above start
   * growing the header. 16px -> 29.6px at 375x812.
   *
   * This is the same knob as "Site Title" size for mobile in Squarespace's
   * style editor, if you would rather set it at source.
   */
  .header-display-mobile {
    --mobile-site-title-font-font-size-value: 2.4 !important;
  }
}