/* Text always sits above the decorative sprites of its section (each section is its own stacking context) */
.story .contener { z-index: 990; }
/* White text crosses the white laptop in this section */
#fourth .txt { position: relative; left: 60px; }
#fourth .txt p { text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6); }

/* Contact block: readable sizes, phone and e-mail first, legal data last */
#eighth .contact { width: 300px; height: auto; margin: 135px 0 0 40px; font-size: 13px; line-height: 1.55; color: #333; }
#eighth .contact p { margin: 0 0 14px 0; font-size: 13px; }
#eighth .contact .c-firm { font-weight: bold; font-size: 15px; margin-bottom: 6px; }
#eighth .contact .c-reach { font-size: 16px; font-weight: bold; line-height: 1.7; }
#eighth .contact .c-legal { font-size: 11.5px; color: #666; }
#eighth .mainform p a { font-size: 15px; }

/* Phones and small tablets: one full-screen section per swipe, one key graphic each, no parallax */
@media (max-width: 820px) {
  html { scroll-snap-type: y mandatory; }
  html { overflow-x: hidden; }
  body { overflow: visible !important; } /* a scrolling body would capture the snap points */
  #menu, #lang, #arrows_contener, #pointer_center, #shadow, #eighth .where { display: none !important; }
  #logo { top: 0; padding: 10px 12px 18px; height: auto; width: auto; }
  #social_media { right: 12px; top: 10px; }

  .story { display: flex; flex-direction: column; justify-content: center; gap: 18px;
           height: 100vh; height: 100svh; min-height: 0; padding: 84px 22px 28px; box-sizing: border-box; overflow: hidden;
           scroll-snap-align: start; scroll-snap-stop: always;
           background-attachment: scroll !important; background-position: center top !important; }
  #eighth { height: auto; min-height: 100svh; justify-content: flex-start; }

  .story [data-type] { display: none !important; }
  #first .logo, #second .earth, #third .squirrel, #fourth .lap, #fifth .scissors, #sixth .book, #seventh .prize, #eighth .phone {
    display: block !important; order: 2; position: static; flex: 1 1 auto; margin: 0 !important;
    min-height: 120px; max-height: 34svh; width: 100%;
    background-attachment: scroll !important; background-position: center !important; background-size: contain !important; }
  #eighth .phone { order: 0; flex: 0 0 190px; min-height: 190px; max-height: none; }

  /* Hero: the desktop composition (logo, headphones, book, laptop, hand) as one picture above the text */
  #first { background: #cccccc !important; justify-content: flex-start; padding-top: 70px; }
  #first .logo { order: 0; background-image: url(/images/hero-mobile.jpg) !important; flex: 1 1 auto; max-height: 52svh; min-height: 220px; }
  #first .contener { order: 1; }

  /* Globe keeps its proportions so the landing dots can be placed on it */
  #second .earth { position: relative; flex: 0 0 auto; align-self: center; width: auto; height: min(34svh, 290px); aspect-ratio: 457 / 510;
                   background-size: 100% 100% !important; overflow: visible; }
  .m-dot { position: absolute; width: 4.2%; aspect-ratio: 15 / 14; background: url(/images/dot.png) center / contain no-repeat;
           transform: translate(-50%, calc(-50% - (1 - var(--p, 1)) * var(--k, 1) * 22svh)); opacity: calc(var(--p, 1) * 2 - 1); will-change: transform; }
  #fifth .scissors { max-height: 26svh; }

  .contener, #eighth .contener { order: 1; width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; }
  .txt, #eighth .txt, #eighth .contact { width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; float: none !important; }
  .odd { float: none; }
  #fourth .txt { left: 0; }
  .txt h1 { font-size: 2.2em; line-height: 0.9em; margin: 0 0 16px 0; }
  .txt h2, #eighth .contact h2, #eighth .mainform h2 { margin: 0 0 12px 0 !important; }
  .txt p, #first article p { width: auto; font-size: 14.5px; line-height: 1.5; }
  #eighth .contact { margin-top: 28px !important; }
  #eighth .submit { margin: 16px 0 0 0; }
  #seventh { background: #efe6da !important; }

  /* Entrance motion when a section snaps into view */
  .js-motion .story .txt h1, .js-motion .story .txt p, .js-motion .story .txt h2, .js-motion .story [data-type] {
    opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .js-motion .story [data-type] { transform: translateY(36px) scale(.92); transition-delay: .25s; }
  .js-motion .story .txt p { transition-delay: .12s; }
  .js-motion .story.in-view .txt h1, .js-motion .story.in-view .txt p, .js-motion .story.in-view .txt h2,
  .js-motion .story.in-view [data-type] { opacity: 1; transform: none; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: y proximity; }
  .js-motion .story * { transition: none !important; opacity: 1 !important; transform: none !important; }
}