/* ============================================================
   StoryFrame World — MOBILE (<=700px)
   Scroll-sequence: each section's visual is PINNED while you scroll,
   snapping through stages (visual -> blur -> text). Built/torn down by
   js/mobile-seq.js. Desktop (>700px) is never affected.
   ============================================================ */

.m-cases{ display:none; }

@media (max-width:700px){

  /* firm section-to-section snapping, same as desktop (every section is exactly
     100svh, so nothing taller than the viewport gets trapped) */
  html{ scroll-snap-type:y mandatory; }
  .frame{ overflow:visible; }

  /* ---------- pinned stage ---------- */
  .m-seq{ position:relative; }
  .m-seq > .stage{
    position:sticky; top:0;
    height:100svh; min-height:100svh !important;
    width:100% !important;
    transform:none !important;
    display:flex; flex-direction:column;
    /* Bottom-anchored: the copy sits at the bottom-left over the scrim, with the
       visual (phone mockup / scene) filling the space above. `safe` falls back to
       top-aligned on very short phones so the copy never clips out of reach. */
    justify-content:safe flex-end;
    gap:14px;
    padding:120px 24px 40px;
    box-sizing:border-box;
    overflow:hidden;
    z-index:2;
  }
  /* invisible snap targets overlap the pin and give the section its scroll height */
  .m-seq > .m-steps{ position:relative; margin-top:-100svh; z-index:0; }
  .m-seq > .m-steps > .m-step{ height:100svh; scroll-snap-align:start; scroll-snap-stop:always; }

  /* visuals fill the pin, behind everything */
  .m-seq .stage > .bg-cover,
  .m-seq .stage > .hero-bg,
  .m-seq .stage > #ourStoryVideo,
  .m-seq .stage > .m-bg{
    position:absolute !important; inset:0 !important;
    left:0 !important; top:0 !important;
    width:100% !important; height:100% !important;
    z-index:0;
  }
  .m-seq .stage > .m-bg{ pointer-events:none; }

  /* Legibility scrim: brand purple pooled along the BOTTOM (behind the bottom-left
     copy), fading to transparent toward the top so the visual (phone mockup / scene)
     stays visible above. Replaces a full-viewport backdrop-blur — a plain paint is
     far cheaper and doesn't flicker/glitch on mobile Safari. */
  .m-blur{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(0deg,
      rgba(13,0,47,.96) 0%, rgba(13,0,47,.84) 22%,
      rgba(13,0,47,.42) 46%, rgba(13,0,47,0) 68%);
    opacity:0; transition:opacity .55s ease; pointer-events:none;
  }
  /* delay the scrim in (so the visual is seen first) but let it clear instantly out */
  .m-blur.on{ opacity:1; transition-delay:.45s; }

  /* text/content layers above blur */
  .m-seq .stage > .t-h1,
  .m-seq .stage > .t-h2,
  .m-seq .stage > .t-step,
  .m-seq .stage > .t-body,
  .m-seq .stage > span.abs,
  .m-seq .stage > .btn-yellow,
  .m-seq .stage > #contactForm{
    position:static !important;
    left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
    width:auto !important; height:auto !important;
    max-width:100%;
    flex:0 0 auto;           /* never let the column compress these */
    z-index:3;
  }

  /* reveal (fade up; stagger via inline transition-delay from JS) */
  .m-rev{ opacity:0; transform:translateY(26px); transition:opacity .55s ease, transform .65s cubic-bezier(.2,.72,.2,1); pointer-events:none; }
  .m-rev.r-on{ opacity:1; transform:none; pointer-events:auto; }

  /* type scale */
  .t-h1{ font-size:clamp(40px,11vw,56px) !important; line-height:1.04 !important; }
  .t-h2{ font-size:clamp(30px,8vw,42px) !important; line-height:1.08 !important; }
  .t-step{ font-size:clamp(24px,6.4vw,32px) !important; line-height:1.15 !important; }
  .t-body{ font-size:16px !important; line-height:1.5 !important; }
  .t-list{ font-size:16px !important; line-height:1.6 !important; white-space:pre-line; }
  .m-seq .stage > .btn-yellow{
    align-self:flex-start;
    height:56px !important; min-height:56px; min-width:210px; width:auto !important;
    padding:0 30px; font-size:18px !important; line-height:1 !important;
    flex:0 0 auto;
  }

  /* decorative desktop-only */
  .m-hide, .scroll-arrow{ display:none !important; }

  /* topbar normal size */
  .topbar{ padding:20px 22px; }

  /* ---------- SECTION 2 — how it works: horizontal step carousel ---------- */
  /* the QR-scan phone is the shared visual behind every step card */
  #sec2 .stage > .m-hide{
    display:block !important;
    position:absolute !important; inset:0 !important; left:0 !important; top:0 !important;
    width:100% !important; height:100% !important;
    background-size:auto 84% !important; background-position:center !important;
    z-index:0;
  }
  #sec2 .stage > .m-img{ display:none !important; }
  #sec2.m-seq .stage{ display:block !important; padding:0 !important; }
  /* the desktop-positioned originals are hidden once the mobile track is built */
  #sec2.has-s2-track .stage > .t-step,
  #sec2.has-s2-track .stage > .t-body{ display:none !important; }
  /* horizontal swipe track: one step per full-width card */
  #sec2 .s2-track{
    position:absolute !important; inset:0 !important;
    display:flex !important; flex-direction:row !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; z-index:3;
  }
  #sec2 .s2-track::-webkit-scrollbar{ display:none; }
  #sec2 .s2-card{
    flex:0 0 100% !important; width:100% !important; height:100% !important;
    scroll-snap-align:center; position:relative;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:120px 24px 40px; box-sizing:border-box;
  }
  #sec2 .s2-card .t-step,
  #sec2 .s2-card .t-body{
    position:static !important; left:auto !important; top:auto !important; right:auto !important;
    width:auto !important; max-width:100%;
    opacity:0; transform:translateY(26px);
    transition:opacity .55s ease, transform .65s cubic-bezier(.2,.72,.2,1);
  }
  #sec2 .s2-card .t-step{ font-size:clamp(28px,7.6vw,36px) !important; line-height:1.1 !important; }
  #sec2 .s2-card .t-body{ font-size:16px !important; line-height:1.5 !important; margin-top:14px; }
  #sec2 .s2-card.m-text .t-step{ opacity:1; transform:none; transition-delay:.4s; }
  #sec2 .s2-card.m-text .t-body{ opacity:1; transform:none; transition-delay:.5s; }

  /* ---------- SECTION 3 — products: ONE screen, horizontal swipe carousel ---------- */
  #sec3.m-seq .stage{ display:block !important; padding:0 !important; }
  #sec3 .accordion{
    position:absolute !important; inset:0 !important;
    display:flex !important; flex-direction:row !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    width:100% !important; height:100% !important; transform:none !important; background:var(--p2);
  }
  #sec3 .accordion::-webkit-scrollbar{ display:none; }
  #sec3 .acc-col{
    position:relative !important; inset:auto !important;
    flex:0 0 100% !important; width:100% !important; height:100% !important;
    scroll-snap-align:center;
    transform:none !important; border:none !important; padding:0 !important;
    opacity:0; transition:opacity .55s ease; pointer-events:none; overflow:hidden;
  }
  #sec3 .acc-col.m-on{ opacity:1; pointer-events:auto; }
  /* prev/next arrows (same chevrons as the case studies), used by products + steps */
  .m-prod-nav{
    position:absolute; top:42%; transform:translateY(-50%);
    width:46px; height:46px; z-index:25; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(13,0,47,.32); border:none; border-radius:50%; color:#fff;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    box-shadow:0 2px 12px rgba(0,0,0,.3);
  }
  .m-prod-nav.prev{ left:12px; }
  .m-prod-nav.next{ right:12px; }
  .m-prod-nav svg{ width:15px; height:22px; }
  #sec3 .acc-col .col-img{ position:absolute !important; inset:0 !important; transform:none !important; filter:none !important; z-index:0; }
  /* Scene stays sharp — no blur; the gradient below handles copy legibility. */
  #sec3 .acc-col .col-grad{
    position:absolute !important; inset:0 !important; z-index:2;
    background:linear-gradient(180deg,rgba(13,0,47,0) 0%,rgba(13,0,47,.22) 32%,rgba(13,0,47,.72) 54%,rgba(13,0,47,.98) 74%,rgba(13,0,47,1) 100%) !important;
  }
  #sec3 .acc-col .col-label{ display:none !important; }
  /* Market-sample phone mockup (transparent PNG) shown over the scene for every
     product on mobile — centred as the visual. It sits BELOW the gradient (z-index
     1 < 2) so the bottom text stays legible; the scene image is below it (z-index 0). */
  #sec3 .acc-col .col-phone{
    display:block !important;
    position:absolute !important; left:0 !important; top:0 !important;
    right:auto !important; bottom:auto !important;
    width:100% !important; height:100% !important;
    background-repeat:no-repeat !important;
    background-position:center 40% !important;
    background-size:auto 80% !important;
    opacity:1 !important; transform:none !important;
    z-index:1; pointer-events:none;
  }
  /* Phone mockup stays sharp and fully visible in both stages — no blur/dim; the
     gradient (above it, z-index 2) keeps the bottom copy legible. */
  #sec3 .acc-col .col-content{
    position:absolute !important; left:24px; right:24px; bottom:40px; top:auto !important;
    width:auto !important; height:auto !important; visibility:visible !important;
    opacity:0; transform:translateY(26px);
    transition:opacity .55s ease, transform .65s cubic-bezier(.2,.72,.2,1); z-index:3; pointer-events:auto;
  }
  #sec3 .acc-col.m-text .col-content{ opacity:1; transform:none; transition-delay:.6s; }
  #sec3 .acc-col .col-head{ position:static !important; height:auto !important; width:auto !important; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  #sec3 .acc-col .col-head .t-h2{ width:auto !important; }
  #sec3 .acc-col .col-content > .t-body{
    position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; margin-top:14px;
  }
  #sec3 .acc-col .col-content > .t-list{ display:none !important; }   /* bullets live on the detail page */
  #sec3 .acc-col .col-content > .btn-yellow{
    position:static !important; left:auto !important; top:auto !important; width:auto !important;
    height:46px; font-size:16px !important; line-height:1 !important; padding:0 22px; margin-top:16px;
  }
  #sec3 .acc-col .col-content > .col-disc{
    position:static !important; left:auto !important; top:auto !important; width:auto !important; max-width:100%;
    margin-top:16px; font-size:12.5px; line-height:1.4;
  }

  /* ---------- SECTION 4 (Services) — horizontal swipe carousel (mirrors products) ---------- */
  #secServices.m-seq .stage{ display:block !important; padding:0 !important; }
  #secServices .svc-header{ display:none !important; }   /* the section title is desktop-only; cards carry their own titles */
  #secServices .svc-acc{
    position:absolute !important; inset:0 !important; top:0 !important; left:0 !important;
    display:flex !important; flex-direction:row !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    width:100% !important; height:100% !important; background:var(--p2);
  }
  #secServices .svc-acc::-webkit-scrollbar{ display:none; }
  #secServices .svc-panel{
    position:relative !important; flex:0 0 100% !important; width:100% !important; height:100% !important;
    scroll-snap-align:center; transform:none !important; border:none !important;
    opacity:0; transition:opacity .55s ease; pointer-events:none; overflow:hidden;
  }
  #secServices .svc-panel.m-on{ opacity:1; pointer-events:auto; }
  #secServices .svc-img{ position:absolute !important; inset:0 !important; transform:none !important; filter:none !important; z-index:0; }
  /* bottom gradient on mobile so the bottom-left copy stays legible (matches products) */
  #secServices .svc-grad{
    position:absolute !important; inset:0 !important; z-index:2;
    background:linear-gradient(180deg,rgba(13,0,47,0) 0%,rgba(13,0,47,.22) 32%,rgba(13,0,47,.72) 54%,rgba(13,0,47,.98) 74%,rgba(13,0,47,1) 100%) !important;
  }
  #secServices .svc-label{ display:none !important; }
  #secServices .svc-content{
    position:absolute !important; left:24px; right:24px; bottom:40px; top:auto !important;
    width:auto !important; display:block !important;
    opacity:0; transform:translateY(26px); visibility:visible !important;
    transition:opacity .55s ease, transform .65s cubic-bezier(.2,.72,.2,1); z-index:3; pointer-events:auto;
  }
  #secServices .svc-panel.m-text .svc-content{ opacity:1; transform:none; transition-delay:.6s; }
  #secServices .svc-title{ font-size:clamp(30px,8vw,40px) !important; line-height:1.08 !important; margin-bottom:10px; }
  #secServices .svc-tagline{ font-size:clamp(18px,5vw,22px) !important; margin-bottom:12px; }
  #secServices .svc-desc{ font-size:16px !important; line-height:1.5 !important; margin-bottom:16px; max-width:100% !important; }
  #secServices .svc-tags{ gap:8px; margin-bottom:18px; }
  #secServices .svc-tags .svc-chip{ font-size:13px; padding:7px 14px; }
  #secServices .svc-book{ height:46px; font-size:16px !important; padding:0 22px; }

  /* ---------- SECTION 5 (Case studies) — real videos, zoom-cropped, arrow nav ---------- */
  /* not driven by the sequence engine: one full screen, videos fill, arrows work */
  #sec4{ scroll-snap-align:start; scroll-snap-stop:always; }
  #sec4 .stage{
    /* position:relative (not the base absolute) so the stage is in normal flow
       and gives #sec4 a real height — otherwise the frame collapses to 0 and the
       case-study video overlaps the next section (Our story) on mobile. */
    position:relative !important;
    height:100svh !important; min-height:100svh !important;
    transform:none !important; width:100% !important; padding:0 !important; overflow:hidden;
    display:block !important;
  }
  #sec4 .carousel{ position:absolute !important; inset:0 !important; }
  #sec4 .cs-vid{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:center !important;
  }
  #sec4 .cs-intro{ display:none !important; }
  /* Tap the video to open the case study — full-area hotspots (like desktop),
     gated by the current page: page 1 (Glasgow book) -> case study, page 2 ->
     contact. The arrows sit above (z-index 20 > 12) so they still work. */
  #sec4 .cs-hot.story,
  #sec4 .cs-hot.start{
    display:block !important;
    left:0 !important; right:0 !important; top:0 !important; bottom:0 !important;
    width:auto !important; height:auto !important;
  }
  /* keep the arrows, vertically centred, sized for touch */
  #sec4 .cs-nav{
    display:flex !important; width:48px; height:48px !important;
    top:50% !important; transform:translateY(-50%) !important; z-index:20;
  }
  #sec4 .cs-nav.prev{ left:14px; top:50% !important; }
  #sec4 .cs-nav.next{ right:14px; top:50% !important; }
  #sec4 .cs-nav svg{ width:20px; height:auto !important; }

  /* ---------- SECTION 7 (Contact) — single motion: blur + heading + form ---------- */
  /* Compact heading pinned at the top (with a fade so a scrolled form tucks under
     it); the long intro is dropped on mobile so the form is one clean screen that
     reveals in a single motion with the heading. */
  #sec6.m-seq .stage{ justify-content:flex-start; }
  #sec6 .stage > .t-h1{
    position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
    z-index:6; margin:0 !important; padding:64px 24px 12px;
    font-size:clamp(24px,6.6vw,32px) !important; line-height:1.05 !important;
    background:linear-gradient(180deg, rgba(13,0,47,.8) 55%, rgba(13,0,47,0) 100%);
  }
  #sec6 .stage > .t-body{ display:none !important; }
  #sec6 #contactForm{
    position:absolute !important; left:24px; right:24px; top:0; bottom:0;
    display:flex !important; flex-direction:column; gap:10px;
    /* `safe center` centres the form when it fits but top-aligns it (instead of
       clipping Send) on short phones; overflow-y lets the user reach any overflow.
       padding-top clears the pinned heading above. */
    justify-content:safe center; overflow-y:auto;
    width:auto !important; padding:132px 0 24px; margin:0; z-index:5;
  }
  #sec6 .field,
  #sec6 .send-btn{
    position:static !important; left:auto !important; top:auto !important;
    width:100% !important; box-sizing:border-box;
  }
  #sec6 .field{ height:52px !important; padding:13px 20px !important; }
  #sec6 .select-field{ position:relative !important; }
  #sec6 textarea.field{ height:88px !important; }
  #sec6 .send-btn{ margin-top:2px; height:52px; }
  #sec6 .sel-menu{ max-height:190px; }
}

/* Short viewports (in-app browsers like Teams/Instagram, small phones): tighten the
   contact form further so the Send button is never cut off. */
@media (max-width:700px) and (max-height:700px){
  #sec6 .stage > .t-h1{ padding:52px 24px 10px; font-size:clamp(22px,6vw,28px) !important; }
  #sec6 #contactForm{ padding:112px 0 18px; gap:8px; }
  #sec6 .field{ height:46px !important; padding:10px 18px !important; }
  #sec6 textarea.field{ height:70px !important; }
  #sec6 .send-btn{ height:48px; }
  #sec6 .sel-menu{ max-height:160px; }
}