/* =====================================================================
   MOBILE.CSS : Schema Digital Engineering Studio
   -----------------------------------------------------------------------
   Mobile-only overrides. Loaded after style.css, so every rule here wins
   on small screens without touching a single desktop rule. Everything is
   scoped inside the media query below : nothing here runs above 899px.

   What this file does:
     1. Keeps the hero's structure (left-aligned copy, same stacking
        order, same relative layout) identical to desktop : it only
        shrinks the hero's overall height so it isn't a full 100vh block
        on a phone.
     2. Removes the scroll indicator entirely on mobile.
     3. Keeps the sticky/pinned "parallax" reveal on the service sections
        working the same way it does on desktop (see mobile.js for the
        matching scroll-math override).
     4. Keeps the "How We Deliver" pin-board in its desktop layout
        (absolute-positioned cards + animated connector path) instead of
        falling back to a plain stacked list, just scaled down to fit a
        narrow viewport.
   ===================================================================== */

@media (max-width: 899px) {

  /* ---------------------------------------------------------------
     1. HERO : same structure as desktop, shorter box
     --------------------------------------------------------------- */
  .hero {
    height: 78vh;
    min-height: 420px;
  }

  /* style.css centers hero copy below 860px : undo that so the hero
     keeps the same left-aligned structure it has on desktop. */
  .content {
    justify-content: flex-start;
    text-align: left;
    padding: 0 7vw;
  }
  .content-inner { max-width: 94vw; }

  .cta-row { justify-content: flex-start; }
  .rotator { justify-content: flex-start; }
  .rotator-text { text-align: left; }
  .hero .sub { margin-left: 0; margin-right: 0; }

  h1.headline { font-size: clamp(1.9rem, 7.5vw, 2.5rem); margin-bottom: 1rem; }
  .rotator { height: 2.2em; margin-bottom: 1.2rem; }
  .rotator-text { font-size: clamp(.95rem, 3.6vw, 1.15rem); }
  .hero .sub { font-size: .92rem; margin-bottom: 1.6rem; }

  /* ---------------------------------------------------------------
     2. Remove the scroll indicator on mobile
     --------------------------------------------------------------- */
  .hero .scroll-indicator { display: none; }

  /* ---------------------------------------------------------------
     3. SERVICE SECTIONS : keep the desktop sticky/pin parallax
        (style.css only pins these at min-width:900px; mirror those
        rules here so the blueprint → photo scroll reveal behaves the
        same way on phones. mobile.js swaps in the matching scroll
        math so the reveal progress tracks correctly.)
     --------------------------------------------------------------- */
  .service-hero { height: 220vh; }
  .service-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 28px 0;
  }

  /* Compact the pinned content so it comfortably fits a phone's
     100vh sticky viewport (desktop relies on a wide two-column grid;
     mobile stacks, so everything needs to be smaller). */
  .service-grid { gap: 18px; }
  .reveal-media { max-width: 320px; aspect-ratio: 16 / 10; margin: 0 auto; }
  .service-copy { max-width: 100%; }
  .service-copy h2 { font-size: 1.3rem; }
  .service-copy p { font-size: .85rem; margin-top: 8px; line-height: 1.55; }
  .service-tags { margin-top: 10px; gap: 6px; }
  .tag { font-size: 9px; padding: 5px 10px; }
  .service-copy .btn { margin-top: 14px; padding: 12px 20px; font-size: .85rem; }

  /* ---------------------------------------------------------------
     4. HOW WE DELIVER : same pinned board layout as desktop, scaled
        down. style.css only switches to the absolute/path layout at
        min-width:900px; mirror it here instead of the stacked
        fallback so the section looks the same on every screen size.
     --------------------------------------------------------------- */
  .pin-board { display: block; height: var(--board-h); gap: 0; }
  .pin-path { display: block; }

  .pin-card {
    position: absolute;
    width: clamp(190px, 62vw, 250px);
    max-width: none;
    margin: 0;
  }
  .pin-pos-1 { top: 0;     left: 6%;  right: auto; --rotate: 6deg; }
  .pin-pos-2 { top: 120px; right: 6%; left: auto;  --rotate: -6deg; }
  .pin-pos-3 { top: 450px; left: 6%;  right: auto; --rotate: 6deg; }
  .pin-pos-4 { top: 570px; right: 4%; left: auto;  --rotate: -6deg; }
  .pin-pos-5 { top: 850px; left: 6%;  right: auto; --rotate: 6deg; }

  .pin-card-body { padding: 14px 12px; }
  .pin-icon { width: 22px; height: 22px; margin-bottom: 12px; }
  .pin-number { font-size: 1.5rem; margin-bottom: 10px; }
  .pin-card-body h3 { font-size: 1.02rem; }
  .pin-card-body p { font-size: .8rem; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .pin-path path { animation: none; }
  .slide.is-active { animation: none; transform: none; }
}