/* Feroz Taj · phone layer v2 (v17, 2026-09-25), loaded after ft-mobile.v1.css. Phones only (html.static under 768px).
   James: "padding seems off, QA the mobile and make it special".
   1. One phone rhythm: 64px between sections (was 84 to 150px each side, so 190 to 260px of white between
      neighbours, and about 220px under the hero).
   2. Sales 02 and 03 become swipe rows that snap, the phone form of the desktop's sideways run (about 2,000px
      less page). Sale 01 keeps its two staggered plates.
   3. Motion for ft-mobile-motion.v1.js (html.m-motion, never under reduced motion): headlines rise line by line
      through their mask, plates open with a curtain wipe. Transform and clip-path only, nothing fades. */

.swipe-cue{display:none}

@media (max-width: 767px){
  /* 1. Rhythm */
  html.static body main > section.statement{padding-top:28px;padding-bottom:64px}
  html.static body main > section.practice,html.static body main > section.svc,html.static body main > section.spread,
  html.static body main > section.run,html.static body main > section.index,html.static body main > section.areas,
  html.static body main > section.corr,html.static body main > section.press,html.static body main > section.faq,
  html.static body main > section.inquiry{padding-top:64px;padding-bottom:64px}
  html.static body main > section.cases{padding-top:64px;padding-bottom:28px}
  html.static body .split .pin{padding:64px 0 28px}
  html.static body .split .stack{padding-bottom:64px}

  /* 2. Swipe rows */
  html.static body .run .runhead{padding-bottom:22px}
  html.static body .run .track,html.static body .split .stack{display:flex;flex-direction:row;align-items:flex-start;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html.static body .run .track::-webkit-scrollbar,html.static body .split .stack::-webkit-scrollbar{display:none}
  html.static body .split .stack{margin-inline:calc(var(--gutter) * -1)}
  html.static body .run .pl,html.static body .run .pl:nth-child(even),
  html.static body .split .stack figure,html.static body .split .stack figure:nth-child(even){
    flex:0 0 84%;width:84%;margin:0;scroll-snap-align:start}
  html.static body .run .pl .plate,html.static body .run .pl:nth-child(even) .plate,
  html.static body .split .stack .plate,html.static body .split .stack figure:nth-child(even) .plate{aspect-ratio:4/3}
  html.static body .run .end{flex:0 0 72%;align-self:center;scroll-snap-align:start;font-size:22px;line-height:1.3;padding-right:var(--gutter)}
  .swipe-cue{display:flex;align-items:center;gap:10px;margin:14px var(--gutter) 0;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
  .swipe-cue i{flex:1;height:1px;background:var(--rule);position:relative;overflow:hidden}
  .swipe-cue i::after{content:"";position:absolute;inset:0;background:var(--persimmon,#DB0B11);transform-origin:left;transform:scaleX(var(--seen,.2))}

  /* 3. Motion */
  html.static.m-motion h2[data-scene] .ln > span,html.static.m-motion h2.m-rise .ln > span{transform:translateY(114%);transition:transform 1.3s var(--out)}
  html.static.m-motion h2.m-in .ln > span{transform:none}
  html.static.m-motion h2.m-in .ln:nth-child(2) > span{transition-delay:.12s}
  html.static.m-motion h2.m-in .ln:nth-child(3) > span{transition-delay:.24s}
  html.static.m-motion .m-cur .plate{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--out)}
  html.static.m-motion .m-cur .plate img{transform:scale(1.12);transition:transform 1.8s var(--out)}
  html.static.m-motion .m-cur.m-in .plate{clip-path:inset(0)}
  html.static.m-motion .m-cur.m-in .plate img{transform:none}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce){
  .swipe-cue i::after{transform:none}
}