/* Mobile landing polish.
   Patterns borrowed from luxury hospitality sites that solve the same problem —
   a long, image-led page read one-handed on a phone:
     · Aman (aman.com)      — wide-tracked micro eyebrows over a hairline rule,
                              generous and *uneven* vertical rhythm so sections
                              stop feeling like a stack of identical blocks.
     · Belmond              — card rows become edge-to-edge snap carousels with a
                              peek of the next card instead of squeezing 2-up.
     · Rosewood / Six Senses— one persistent booking bar, everything else quiet.
     · Hermès Equestrian    — thin gold rules, restrained accents, serif left to
                              carry the character.
   Everything here is mobile-only; the desktop layout is untouched. */

@media (max-width:640px){

  /* --- vertical rhythm ------------------------------------------------------
     A single 64px everywhere reads flat. Alternating breathing room gives the
     page a cadence without changing any content. */
  .home-page-v212 .section,
  .home-page-v212 .faq-section,
  .home-page-v212 .closing-cta,
  .home-page-v212 .membership-banner,
  .home-page-v212 .gallery-section{padding-top:56px;padding-bottom:56px}
  .home-page-v212 .dark-section{padding-top:64px;padding-bottom:64px}
  .home-page-v212 .section + .section{padding-top:48px}

  /* --- section eyebrow ------------------------------------------------------
     Micro caps over a short gold rule (Aman). */
  .home-page-v212 .section-title>span,
  .home-page-v212 .landing-eyebrow-v212{
    display:block;
    margin-bottom:14px;
    padding-bottom:10px;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.26em;
    line-height:1.4;
    color:#9c7739;
    position:relative;
  }
  .home-page-v212 .section-title>span:after,
  .home-page-v212 .landing-eyebrow-v212:after{
    content:"";position:absolute;left:0;bottom:0;width:34px;height:1px;background:#c9a35c;
  }
  .home-page-v212 .dark-section .section-title>span,
  .home-page-v212 .dark-section .landing-eyebrow-v212{color:#d8bd85}

  /* --- headings -------------------------------------------------------------
     The display serif carries the character, so it gets room: larger and calmer. */
  .home-page-v212 .landing-banner-v212 h1{font-size:clamp(38px,10.6vw,46px);line-height:1.06;letter-spacing:-.015em}
  .home-page-v212 .section-title h2,
  .home-page-v212 .landing-service-v212 h2,
  .home-page-v212 .membership-banner h2,
  .home-page-v212 .closing-cta h2,
  .home-page-v212 .location-copy h2{font-size:clamp(28px,8vw,34px);line-height:1.14;letter-spacing:-.008em}
  .home-page-v212 .section-title p,
  .home-page-v212 :where(.why-grid,.horse-card,.comparison-card) p{font-size:15px;line-height:1.72}

  /* --- card rows become snap carousels --------------------------------------
     At 390px these grids squeezed two cards into ~172px each. Edge-to-edge
     scrolling with a peek reads as intentional and keeps every card legible. */
  .home-page-v212 .home-riding-pathway-steps,
  .home-page-v212 .home-membership-journey-v21__rail{
    /* Flex, not grid: these containers carry explicit grid templates that a
       carousel would have to fight track by track. */
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Bleed to the viewport edge, then put the container's own gutter back as
       padding. `scroll-padding` matters as much as the padding: without it the
       first card snaps flush to the scrollport and clips its own text. The gutter
       tracks `.container`, which is 20px here and 12px below 520px. */
    --rail-gutter:20px;
    margin-inline:calc(-1 * var(--rail-gutter));
    padding:2px var(--rail-gutter) 6px;
    scroll-padding-inline:var(--rail-gutter);
  }
  .home-page-v212 .home-riding-pathway-steps::-webkit-scrollbar,
  .home-page-v212 .home-membership-journey-v21__rail::-webkit-scrollbar{display:none}
  .home-page-v212 .home-riding-pathway-steps>*,
  .home-page-v212 .home-membership-journey-v21__rail>*{flex:0 0 78%;scroll-snap-align:start;min-width:0}

  /* --- hero ----------------------------------------------------------------- */
  .home-page-v212 .landing-banner-v212{min-height:auto}
  .home-page-v212 .landing-banner-v212__copy>p{font-size:15px;line-height:1.75}
  .home-page-v212 .landing-banner-v212__actions{gap:10px;margin-top:22px}
  .home-page-v212 .landing-banner-v212__actions .button{min-height:52px;font-size:11px;letter-spacing:.14em}

  /* --- buttons and taps -----------------------------------------------------
     44px is the floor for a comfortable tap; the gold CTA leads, the rest follow. */
  .home-page-v212 .button{min-height:50px;padding-inline:20px;font-size:11px;letter-spacing:.12em}
  .home-page-v212 .text-link{min-height:44px;display:inline-flex;align-items:center}

  /* --- sticky booking bar ---------------------------------------------------
     Clears the iPhone home indicator instead of sitting under it. */
  .mobile-sticky-actions{
    padding-bottom:calc(env(safe-area-inset-bottom,0px));
    box-shadow:0 -10px 28px -18px #0e0a0799;
  }
  .mobile-sticky-actions>*{min-height:54px;font-size:11px;letter-spacing:.1em}

  /* --- quiet details --------------------------------------------------------- */
  .home-page-v212 .why-grid h3,
  .home-page-v212 .horse-card h3{font-size:20px;line-height:1.25}
  .home-page-v212 .faq-list summary{font-size:17px;line-height:1.35;padding-block:16px}
  .home-page-v212 .comparison-inclusions-v212 li{font-size:14px;line-height:1.6}
}

@media (max-width:520px){
  .home-page-v212 .home-riding-pathway-steps,
  .home-page-v212 .home-membership-journey-v21__rail{--rail-gutter:12px}
}

@media (max-width:380px){
  .home-page-v212 .home-riding-pathway-steps>*,
  .home-page-v212 .home-membership-journey-v21__rail>*{flex-basis:84%}

  .home-page-v212 .landing-banner-v212 h1{font-size:34px}
}