/* Phone and tablet layout for the home page and the case study page. Desktop stays as designed at 1200px. */
.burger{display:none;background:none;cursor:pointer}
.mnav{display:none}

@media (max-width:1240px){
  .wrap{width:auto;margin:0 24px}
}

@media (max-width:760px){
  .wrap{margin:0 16px}
  body{-webkit-text-size-adjust:100%}

  /* header: logo + burger, menu slides down with handwritten links */
  header{height:64px}
  header nav{display:none}
  .logo{font-size:36px}
  .burger{display:grid;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);place-items:center;padding:0}
  .burger i{display:block;width:18px;height:1.5px;background:var(--ink);box-shadow:0 6px 0 var(--ink),0 -6px 0 var(--ink);transition:transform .35s cubic-bezier(.32,.72,0,1),box-shadow .35s}
  body.menu-open .burger i{transform:rotate(45deg);box-shadow:0 0 0 var(--ink),0 0 0 var(--ink)}
  .mnav{display:flex;flex-direction:column;gap:6px;position:fixed;left:0;right:0;top:64px;z-index:40;background:var(--paper);padding:18px 16px 26px;
    border-bottom:1.5px solid var(--ink);transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .3s}
  body.menu-open .mnav{transform:none;opacity:1;pointer-events:auto}
  .mnav a{font-family:var(--hand);font-size:42px;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.15}
  .mnav a.on{color:var(--accent)}
  .mnav .btn{align-self:flex-start;margin-top:12px;font-family:var(--mono);font-size:13px}

  /* hero */
  .hero{display:block;padding:24px 0 30px}
  .hi{font-size:34px;margin:18px 0 4px;flex-wrap:wrap}
  .hero h1{font-size:clamp(64px,21vw,92px)}
  .hero .sub{font-size:17px;margin-top:16px}
  .hero .ctas{flex-wrap:wrap;gap:10px;margin-top:22px}
  .hero .ctas svg,.hero .ctas .hand{display:none}
  .proof{font-size:11px;line-height:1.7}
  .hero .portrait{margin-top:12px}
  .hero .portrait video{max-width:100%;margin:0 auto}

  /* brand roll: label above, carousel full width */
  .brands{display:block;padding-top:22px}
  .brands .lbl{width:auto;margin-bottom:12px}
  .brands .lbl br{display:none}
  .brands .track{gap:40px;animation-duration:26s}
  .brands .track span{font-size:19px}

  /* section heads */
  .shead{display:block;padding:56px 0 24px}
  .shead h2{font-size:44px}
  .shead .aside{font-size:28px}
  .shead .r,.shead .doodle{margin-top:14px;justify-content:flex-start}
  .shead .doodle video{height:120px}
  .shead .doodle .hand{display:block;order:2;font-size:24px!important;line-height:1.05;max-width:150px;margin:0 0 22px!important}

  /* featured cards: text, then the screens */
  .fcard{display:flex;flex-direction:column;min-height:0}
  .fcard .l{padding:26px 22px}
  .fcard .name{font-size:58px}
  .fcard p{font-size:16px}
  .fact b{font-size:28px}
  .fcard .r{min-height:260px;padding:22px 0}
  .fcard .r .browser{width:88% !important;margin-right:0 !important}
  .fcard .phone{width:96px;right:14px;bottom:14px;border-width:4px;border-radius:16px}
  .fcard .go{flex-wrap:wrap}

  /* about */
  .about{display:block;padding:10px 0 0}
  .about video{max-width:240px;margin:0 auto}
  .about .lead{font-size:19px}
  .facts3{gap:26px;flex-wrap:wrap}
  .facts3 div b{font-size:40px}

  /* stacking cards keep stacking, body becomes a column */
  .scard2{top:calc(72px + var(--i) * 52px);margin-bottom:26px;border-radius:20px}
  .scard2 .shd{height:52px;padding:0 16px;grid-template-columns:1fr auto 30px}
  .scard2 .shd .k{font-size:10px;letter-spacing:.08em}
  .scard2 .shd .n{font-size:28px}
  .scard2 .sbody{display:flex;flex-direction:column;height:auto}
  .scard2 .l{padding:20px 18px 22px;order:2}
  .scard2 .l p{font-size:16px}
  .scard2 .r{order:1;padding:16px;height:210px}
  .scard2 .r .browser{width:100%}
  .scard2 .facts{gap:10px}
  .scard2 .go{margin-top:18px}
  .catbox{transform:scale(.85);transform-origin:0 50%}

  /* process steps become a swipeable row */
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px 10px;scrollbar-width:none;scroll-padding:0 16px}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 78%;scroll-snap-align:start;margin-top:0 !important}
  .step img{height:170px}

  .help{grid-template-columns:1fr;gap:20px}

  .cta{display:flex;flex-direction:column;margin-top:64px;border-radius:22px}
  .cta .t{padding:32px 22px 10px}
  .cta h2{font-size:48px}
  .cta .hand{font-size:30px}
  .cta video{width:100%}
  footer{flex-direction:column;gap:10px;padding:28px 0 40px}

  /* case study */
  .crumb{padding-top:18px;font-size:11px}
  .chero{display:block;padding:16px 0 26px}
  .chero .name{font-size:clamp(64px,19vw,96px)}
  .chero h1{font-size:30px}
  .meta{margin-top:24px}
  .meta div{grid-template-columns:96px 1fr;font-size:15px}
  .stage{height:300px;border-radius:20px;background-size:24px 24px}
  .stage .browser{width:86%;margin-right:30px}
  .stage .phone{width:92px;right:12px;bottom:14px;border-width:4px;border-radius:16px}
  .sec{display:block;padding:56px 0 0}
  .sec h2{font-size:38px}
  .sec .hand{font-size:26px;margin-bottom:16px}
  .sec p{font-size:17px}
  .did{grid-template-columns:1fr;gap:12px;margin-top:20px}
  .gal{grid-template-columns:1fr;gap:34px;margin-top:20px}
  .note{display:none}
  .phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:20px -16px 0;padding:6px 16px 14px;gap:14px;scrollbar-width:none;scroll-padding:0 16px}
  .phones::-webkit-scrollbar{display:none}
  .phones .phone{flex:0 0 52%;width:auto;scroll-snap-align:start}
  .out{grid-template-columns:1fr;gap:8px;margin-top:20px}
  .nexts{grid-template-columns:1fr;gap:22px}
  .nexts b{font-size:36px}
  .out b{font-size:52px}
  .next{flex-direction:column;align-items:flex-start;gap:20px;padding:28px 22px;margin:60px 0 40px}
  .next .n{font-size:56px}
  .next img{width:100%;height:auto}
}

/* phone fixes, 2026-10-02 evening: Safari on iPhone ignores mix-blend-mode on video, so phones get paper-coloured
   copies (see <source media>) with a soft fade at every edge; stacking cards are compact so a whole card,
   button included, fits on screen while it is pinned */
@media (max-width:760px){
  video.ill{mix-blend-mode:normal;filter:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
  .scard2{top:calc(14px + var(--i) * 44px);margin-bottom:22px}
  .scard2 .shd{height:44px}
  .scard2 .shd .n{font-size:26px}
  .scard2 .r{height:160px;padding:12px}
  .scard2 .l{padding:14px 16px 16px}
  .scard2 .l p{font-size:15px;line-height:1.5}
  .scard2 .facts{display:flex;gap:8px;margin-top:12px}
  .scard2 .fact{display:flex;align-items:baseline;gap:6px;padding:6px 10px;border-radius:10px}
  .scard2 .fact span{display:none}
  .scard2 .fact b{font-size:18px;margin:0}
  .scard2 .fact em{margin:0;font-size:13px}
  .scard2 .go{margin-top:12px}
  .scard2 .go .btn{padding:11px 18px;font-size:12px}
}

/* phones, 2026-10-03: iPhone paints video in its own layer, so any off-white ground around an illustration shows as a
   box (tinting the clip to the paper, or blending it in a canvas, both failed on the real phone). On phones the page is
   pure white and the paper grain is off, and the illustration videos play their white-ground -w copies. */
@media (max-width:760px){
  :root{--paper:#FFFFFF}
  body::before{display:none}
  .fact{background:#F5F5F5}
  video.ill{-webkit-mask-image:none;mask-image:none}
}