/* =====================================================================================================
   mobile.css — phones and tablets in portrait (< 1024px). Loaded after every other sheet.
   1. header band   2. menu   3. reveals   4. footer   5+. pages
   ===================================================================================================== */
@media (max-width:1023px){
  :root{--gx:20px;--ease:cubic-bezier(.2,.75,.15,1)}

  /* ---------- 1. header: logo and Menu on a band of the colour under it; away going down, back going up */
  html.mob:not(.mtop) #header{color:var(--mhc,#81171c)!important}
  html.mob #header#header{height:42px!important;translate:0 0;transition:color .1s linear var(--mcd,0s)!important}   /* quick: on a fast scroll the band and its ink never lag behind what is under them */
  html.mob #header .st{height:42px!important;padding-top:13px!important;align-items:flex-start}
  html.mob #header::before{height:42px!important;clip-path:none!important;background:var(--mhb,#b6b6b6)!important;opacity:1;transition:background-color var(--mhd,.06s) var(--mhe,linear) var(--mhl,0s),opacity .12s linear!important}
  html.mob.mtop #header::before{opacity:0}
  html.mob.mhimg:not(.mmsh) #header::before{opacity:0!important}
  html.mob.mhimg:not(.mmsh) #header{color:#bebebe!important}
  html.mob.mhimg:not(.mmsh) #header .ld,html.mob.mhimg:not(.mmsh) #header .wm{fill:#bebebe!important}
  /* the header is always the compact one: the dots and "Made in Evolve" (30.10); the second line shows only with the menu open */
  html.mob #header .wm{clip-path:inset(0 0 0 0)!important;translate:0 0!important;opacity:1!important;visibility:visible!important;transition:clip-path .38s cubic-bezier(1,0,0,1),translate .38s cubic-bezier(1,0,0,1),fill .12s linear!important}
  html.mob:not(.mmon) #header g.wm{clip-path:inset(0 0 0 100%)!important;translate:-8px 0!important}
  html.mob{scrollbar-width:none}html.mob::-webkit-scrollbar{display:none}
  html.mob:not(.mtop) #header .ld,html.mob:not(.mtop) #header .wm{fill:currentColor!important}
  html.mob #header .nav.fold,html.mob #header .nav.cn{display:none!important}
  html.mob #header .nav.cu{font-size:0!important;opacity:1}
  html.mob #header .nav.cu::after{content:"Menu";font:400 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.2px}
  html.mob #header .nav.cu::before{content:"";position:absolute;inset:-14px -20px -14px -24px}      /* a thumb-sized target */
  html.mob #header .nav.cu{position:relative!important;left:auto!important;top:auto!important}
  html.mob #header .nav.cu{margin-top:3px}   /* (03.11) Menu centred on "Made in Evolve" */

  /* ---------- 2. menu (30.10): the header's band is pulled down into the whole sheet, in its own colour; the header stays above it */
  #mm{position:fixed;inset:0;z-index:2147481000;display:none;color:var(--mmc,#81171c);background:var(--mmb,#b6b6b6);-webkit-tap-highlight-color:transparent;
    clip-path:inset(0 0 100% 0);transition:background-color .45s cubic-bezier(.4,0,.2,1),color .45s cubic-bezier(.4,0,.2,1)}
  #mm.on{display:block}
  #mm .mmin{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 9px max(36px,env(safe-area-inset-bottom))}
  #mm a{color:inherit;text-decoration:none}
  #mm .mmn{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:-12vh}
  #mm .mmi{display:block;text-align:center}
  /* each entry drops out of its own mask, from above, one after the other */
  #mm .mmm{display:block;overflow:hidden;padding:.06em .1em .02em;margin:-.06em -.1em -.02em}
  #mm .mmm span{display:block;white-space:nowrap;font:400 28px/.98 'Lusitana',Georgia,serif;letter-spacing:-1.12px;text-transform:uppercase;translate:0 -110%;transition:translate .8s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--i)*60ms)}
  #mm .mmi:active .mmm span{opacity:.6}
  #mm .mmb{position:absolute;left:9px;right:9px;bottom:max(37px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;font:400 12px/1.2 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.48px;overflow:hidden}
  #mm .mmr{display:block;translate:0 -110%;transition:translate .7s cubic-bezier(.2,.75,.15,1) .45s}
  #mm.in .mmr{translate:0 0}
  #mm.in .mmm span{translate:0 0}
  #mm.out .mmm span,#mm.out .mmr{translate:0 -110%;transition-duration:.35s;transition-delay:calc(var(--i,0)*20ms);transition-timing-function:cubic-bezier(.6,0,.8,.3)}
  html.mmsh,html.mmsh body{overflow:hidden}
  html.mob.mmz #header#header{z-index:2147482000!important;translate:0 0!important}
  html.mob.mmsh #header#header{z-index:2147482000!important;translate:0 0!important;color:var(--mmc,#81171c)!important;transition:color .45s cubic-bezier(.4,0,.2,1)!important}
  html.mob.mmsh #header#header::before{opacity:0!important;transition:none!important}
  html.mob.mmsh #header#header .ld{fill:var(--mmc,#81171c)!important;transition:fill .45s cubic-bezier(.4,0,.2,1)!important}
  html.mob.mmsh #header#header .wm{fill:var(--mmc,#81171c)!important;transition:fill .45s cubic-bezier(.4,0,.2,1),clip-path .5s var(--ease),translate .5s var(--ease)!important}
  html.mob.mmon #header .nav.cu::after{content:"Close"}

  /* ---------- 3. reveals (set by mobile.js on what each page asks for) */
  [data-mr]{transition:opacity .8s var(--ease),translate 1s var(--ease),clip-path 1.1s var(--ease),scale 1.1s var(--ease),background-color .9s cubic-bezier(.6,0,.2,1),color .9s cubic-bezier(.6,0,.2,1)}   /* the ground and ink glide with the page, as everything else */
  [data-mr=up]:not(.mrin){opacity:0}   /* (29.10) in place: no movement */
  [data-mr=dec]:not(.mrin){opacity:0}
  [data-mr=dec]{transition:opacity .35s ease}
  [data-mr=mask]{clip-path:inset(-10% -5% -20% -5%)}
  [data-mr=mask]:not(.mrin){clip-path:inset(-10% -5% 100% -5%);translate:0 34px}
  [data-mr=lines]{clip-path:none!important;translate:none!important}
  [data-mr=lines] .mw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;text-indent:0}
  [data-mr=lines] .mwi{display:inline-block;transition:translate 1s var(--ease) calc(var(--ml,0)*85ms)}
  [data-mr=lines]:not(.mrin) .mwi{translate:0 115%}
  [data-mr=px]{transition:none}
  [data-mr=px]:not(.mrin){opacity:0}
  [data-mr=line]{transform-origin:0 50%}
  [data-mr=line]:not(.mrin){scale:0 1}
  [data-mr=zoom]{overflow:hidden}
  [data-mr=zoom]:not(.mrin){clip-path:inset(100% 0 0 0)}
  [data-mr=zoom]{clip-path:inset(0 0 0 0)}
  [data-mr=zoom] > img,[data-mr=zoom] > video{transition:scale 1.6s var(--ease)}
  [data-mr=zoom]:not(.mrin) > img,[data-mr=zoom]:not(.mrin) > video{scale:1.15}

  /* ---------- 4. footer */
  .sf{height:auto!important;padding:0 0 max(28px,env(safe-area-inset-bottom))!important}
  .sf .sfin{position:static!important;width:auto!important;transform:none!important;display:flex!important;flex-wrap:wrap;column-gap:16px;padding:56px var(--gx) 0}
  .sf .sfin > *{flex:1 1 100%}
  .sfd{display:none!important}   /* (29.10) phones: no circles; the footer is one screen tall */
  .sf{min-height:100svh;min-height:100lvh;box-sizing:border-box;display:flex!important;flex-direction:column}
  .sf .sfin{flex:1 1 auto;align-content:space-between;box-sizing:border-box}
  .sfg .t,.sfg .n{display:none}
  .sf .sfcc{top:57%!important;left:50%!important;height:34px;padding:0 22px;font-size:12.5px;line-height:32px}
  .sfml{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid rgba(129,23,28,.35)}
  .sfml li{border-bottom:1px solid rgba(129,23,28,.35)}
  .sfml a{display:flex;align-items:baseline;gap:12px;padding:12px 0 9px;color:var(--ink)}
  .sfml i{flex:0 0 28px;font:400 10px/1 'DM Mono',monospace;font-style:normal}
  .sfml span{flex:1;font:400 clamp(28px,8.4vw,40px)/1 'Lusitana',Georgia,serif;letter-spacing:-.045em;text-transform:uppercase}
  .sfml b{font-weight:400;font-size:14px}
  .sfml a:active span{opacity:.6}
  .sfbrand{position:static!important;width:auto!important;margin-top:48px;padding:0!important}
  .sflg,.sflogo{width:170px}
  .sflogo{height:auto}
  .sfnl{position:static!important;width:auto!important;margin-top:30px!important;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px}
  .sfnl .sfe2{flex:1 1 200px;width:auto;margin:0}
  .sfnl input[type=email]{height:30px;font-size:16px}               /* 16px: no zoom on focus (iOS) */
  .sfcn{width:100%;margin-top:4px;font-size:11px}
  .sfst{position:static!important;width:100%;margin-top:0!important}
  .sfcol{position:static!important;padding:0!important}
  .sf .sfin > .sfcol{flex:0 0 calc(50% - 8px);margin-top:40px}
  .sf .sfcol li{line-height:19px;font-size:12.5px;white-space:normal}
  .sfk{margin-bottom:10px!important;font:400 10px/1 'DM Mono',monospace!important;text-transform:uppercase;letter-spacing:.02em;opacity:.8}
}
@media (prefers-reduced-motion:reduce){ [data-mr]{transition:none!important;opacity:1!important;translate:none!important;clip-path:none!important;scale:none!important} }

/* ---------- 5. home (the design: 402 wide; --u is one design pixel) */
@media (max-width:1023px){
  html.mob{--u:min(calc(100vw / 402), 1.3px)}
  /* hero: the footage, the title, the dots of the logo grown large, the bar at the foot (slides, words, button) */
  html.mob #hero{height:100svh;min-height:600px}
  html.mob #hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.2) 100%),rgba(0,0,0,.5)}
  html.mob #title{top:calc(var(--u)*118)!important;left:calc(var(--u)*13)!important;right:calc(var(--u)*13)!important;z-index:2;font-size:calc(var(--u)*32)!important;line-height:.98!important;letter-spacing:calc(var(--u)*-1.28)!important;text-align:center}
  html.mob #title p{white-space:nowrap!important}
  html.mob #svcs{display:none!important}
  /* (02.11) the Behind the Line card on phones: no grey box, light text on the film, a hairline and a small square */
  html.mob #cta{left:calc(var(--u)*14);right:calc(var(--u)*14);top:auto;bottom:calc(var(--u)*16);width:auto;height:auto;margin-left:0;z-index:3;overflow:visible}   /* sizes are inside the 1.38 stage: 7.5 → ~10px on screen, like the menu */
  html.mob #cta .card{position:relative;width:auto;height:auto}
  html.mob #cta .bar{position:relative;width:auto;height:auto;padding:0 0 calc(var(--u)*4);background:none;border-bottom:1px solid rgba(255,255,255,.22)}
  html.mob #cta .bar .fill{display:none}
  html.mob #cta .bar .l{font-size:calc(var(--u)*7.5);color:#fff;opacity:.85}
  html.mob #cta .bar .r{font-size:calc(var(--u)*7.5);color:#fff;opacity:.5}
  html.mob #cta .body{position:relative;left:0;top:0;width:auto;height:calc(var(--u)*22);margin-top:calc(var(--u)*6);background:none}
  html.mob #cta .thumb,html.mob #tpx{left:0;top:0;width:calc(var(--u)*19);height:calc(var(--u)*22)}
  html.mob #cta .t1,html.mob #cta .t2{left:calc(var(--u)*26);font-size:calc(var(--u)*8);line-height:calc(var(--u)*10);color:#fff}
  html.mob #cta .t1{top:calc(var(--u)*1)}html.mob #cta .t2{top:calc(var(--u)*11);opacity:.6}
  .mhd{position:absolute;left:calc(var(--u)*12);right:calc(var(--u)*12);z-index:2;height:calc(var(--u)*175);pointer-events:none}
  .mhd.a{top:calc(50% - var(--u)*25.6 - var(--u)*87.4)}.mhd.b{top:calc(50% + var(--u)*146.6 - var(--u)*87.4)}
  .mhd i{position:absolute;width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);background:#b6b6b6;opacity:0;scale:0;transition:opacity .4s ease,scale .6s cubic-bezier(.2,1.6,.4,1);transition-delay:calc(var(--d)*45ms + .3s)}
  #hero.mhon .mhd i{opacity:1;scale:1}
  .mhb{position:absolute;left:0;right:0;bottom:0;z-index:3;height:calc(var(--u)*78);color:#fff}
  .mhb .ln{position:absolute;top:0;height:1px;background:rgba(255,255,255,.2)}
  .mhb .ln.l{left:0;width:calc(50% - var(--u)*28)}.mhb .ln.r{right:0;width:calc(50% - var(--u)*28)}
  .mhb .ln i{position:absolute;left:0;top:0;height:1px;width:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
  .mhb .pgs{position:absolute;left:50%;top:calc(var(--u)*-8);display:flex;gap:calc(var(--u)*4);translate:-50% 0}
  .mhb .pgs button{appearance:none;position:relative;width:calc(var(--u)*16);height:calc(var(--u)*16);padding:0;margin:0;border:1px solid #b6b6b6;border-radius:50%;background:none;color:#b6b6b6;font:400 calc(var(--u)*8)/1 'Lusitana',Georgia,serif;opacity:.25;transition:opacity .4s ease}
  .mhb .pgs button.on{opacity:1}
  .mhb .pgs button::before{content:"";position:absolute;inset:-12px -2px}
  .mhb .tx{position:absolute;left:calc(var(--u)*14);top:calc(var(--u)*20);font:400 calc(var(--u)*14)/calc(var(--u)*12) 'Lusitana',Georgia,serif;letter-spacing:calc(var(--u)*-.42);text-transform:uppercase}
  .mhb .tx span{display:block;overflow:hidden;padding-top:.1em}
  .mhb .tx span+span{margin-left:calc(var(--u)*20)}
  .mhb .tx b{display:block;font-weight:400;transition:translate .55s cubic-bezier(.2,.75,.15,1)}
  .mhb.sw .tx b{translate:0 -120%;transition-duration:.35s;transition-timing-function:cubic-bezier(.6,0,.8,.3)}
  .mhb .cta{position:absolute;right:calc(var(--u)*13);top:calc(var(--u)*16);display:flex;align-items:center;justify-content:center;width:calc(var(--u)*134);height:calc(var(--u)*35);border-radius:calc(var(--u)*6);background:#d9d9d9;color:#81171c;text-decoration:none;font:400 calc(var(--u)*12)/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:calc(var(--u)*-.36)}
  .mhb .cta:active{scale:.98}

  /* growth: the desktop composition kept (two justified blocks), the clients in two columns, the button, the statement at the foot */
  html.mob #growth{min-height:100svh!important;height:auto;padding:0 0 calc(var(--u)*44)!important;display:flex;flex-direction:column}
  html.mob #stickA{position:relative!important;display:block!important;height:calc(var(--u)*110)!important;max-width:none!important}
  html.mob #growth .desc{position:absolute!important;display:block!important;width:calc(var(--u)*283)!important;font-size:calc(var(--u)*12)!important;line-height:calc(var(--u)*16)!important;letter-spacing:calc(var(--u)*-.36)!important}
  html.mob #growth .desc:nth-of-type(1){left:calc(var(--u)*8)!important;top:calc(var(--u)*42)!important}
  html.mob #growth .desc:nth-of-type(2){left:calc(var(--u)*99)!important;top:calc(var(--u)*74)!important}
  html.mob #growth .desc span{display:block!important;white-space:normal!important}
  html.mob #growth .desc span.j{text-align:justify!important;text-align-last:justify!important}
  html.mob #growth .desc span::after{content:none}
  html.mob #est{position:absolute!important;display:block;left:calc(var(--u)*8)!important;top:calc(var(--u)*92)!important;width:calc(var(--u)*57)!important;margin:0!important;text-align:center!important;font-size:calc(var(--u)*12)!important}
  html.mob #growth .hbtn{position:static!important;display:inline-flex!important;margin:calc(var(--u)*40) 0 0 calc(var(--u)*-3)!important;text-indent:0!important}
  /* (30.10) Shopify Plus Agency: the client rows of the home without the home's phone script */
  html.mob .spa2 #growth{min-height:0!important;padding:calc(var(--u)*40) 0 calc(var(--u)*48)!important}
  /* (03.11) Shopify Plus Agency: the new blocks on the phone */
  html.mob .spa2 .spab{position:static;width:auto}html.mob .spa2 .spab .spabl{margin-left:0}
  html.mob .spa2 .spuc{width:100%;margin-top:60px}
  html.mob .spa2 .spuc{aspect-ratio:1/1;margin-top:90px;margin-bottom:40px}
  html.mob .spa2 .spuc svg:not(.spucm):not(.spucl){display:none}html.mob .spa2 .spuc svg.spucm{display:block}
  html.mob .spa2 .spuc svg.spucl{width:22%}
  html.mob .spa2 .spuc p{font-size:11px;line-height:13px}
  html.mob .spa2 .spucn.t{bottom:calc(95% + 8px)}html.mob .spa2 .spucn.b{top:calc(95% + 8px)}
  html.mob .spa2 .spucn.l{left:0;top:calc(50% + 10px);translate:none}html.mob .spa2 .spucn.r{left:auto;right:0;top:calc(50% + 10px);translate:none;text-align:right}
  html.mob .spa2 .sp3{grid-template-columns:1fr;row-gap:36px;margin-top:60px}html.mob .spa2 .sp3t{margin-top:28px}
  html.mob .spa2 .abxcp{left:12px;width:calc(100% - 24px)}
  html.mob .spa2 .spst{position:static}html.mob .spa2 #apps .slast .sinfo{padding-top:0}
  html.mob .spa2 .spls{margin:60px 0 0}
  html.mob .spa2 .spls .lr{height:auto;padding:0 var(--gx,12px) 44px;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
  html.mob .spa2 .spls .ln,html.mob .spa2 .spls .lres,html.mob .spa2 .spls .lsv,html.mob .spa2 .spls .lg{position:static;width:auto}
  html.mob .spa2 .spls .ln{grid-column:1/-1;font-size:22px}
  html.mob .spa2 .spls .lg{grid-column:1/-1;order:3;overflow-x:auto;scrollbar-width:none}
  html.mob .spa2 .spls .lg figure{flex:0 0 96px;width:96px}html.mob .spa2 .spls .lg img{width:96px;height:96px}
  html.mob .spa2 .abte .abrw li span{white-space:normal!important;overflow:visible!important;line-height:1.2!important}   /* the descriptions wrap instead of being cut */
  html.mob .spa2 #stickA{height:calc(var(--u)*176)!important}
  html.mob .spa2 #growth .hbtn{position:absolute!important;left:calc(var(--u)*8)!important;top:calc(var(--u)*128)!important;margin:0!important}
  html.mob #stickB{position:relative;margin-top:calc(var(--u)*61)!important;padding-left:calc(var(--u)*10)}
  html.mob .row{display:grid!important;grid-template-columns:calc(var(--u)*112) 1fr!important;height:auto!important;gap:0!important}
  html.mob .row .c{font-size:calc(var(--u)*12)!important;line-height:1.16!important}
  html.mob .row .c:nth-child(3){display:none!important}
  html.mob #statement{margin-top:auto!important;padding:calc(var(--u)*130) calc(var(--u)*18) 0 calc(var(--u)*13)!important}
  html.mob .mst{font-size:calc(var(--u)*28)!important;line-height:1!important;letter-spacing:calc(var(--u)*-1.12)!important;text-indent:calc(var(--u)*109)}
  html.mob .mst .li{text-indent:calc(var(--u)*109)}
  .mob .mst small,.mob .mqs small{display:inline-block;vertical-align:top;margin:calc(var(--u)*6) calc(var(--u)*14) 0;text-indent:0;font:400 calc(var(--u)*12)/.98 'Lusitana',Georgia,serif;letter-spacing:calc(var(--u)*-.48)}
  .mbtn.m{display:inline-block;padding:6px 12px 5px;border-radius:4px;font-size:12.3px;line-height:16px;letter-spacing:.02em}   /* (02.11) the desktop button, as it is */

  /* sphere: the orbits on top, the three descriptions stacked at the left, About us at the foot */
  html.mob #sphere{min-height:100svh;height:auto;padding:0 0 calc(var(--u)*28)!important;display:flex;flex-direction:column}
  html.mob #sphere .st{display:flex!important;flex-direction:column;flex:1}
  html.mob #orb{height:calc(var(--u)*440)!important;order:0;overflow:visible}
  html.mob .d3{position:static!important;width:calc(var(--u)*236)!important;margin:0 0 calc(var(--u)*24) calc(var(--u)*20)!important;order:1}
  html.mob .d3 .n{display:block;margin-bottom:calc(var(--u)*8);font-size:calc(var(--u)*12)!important;line-height:1.1!important}
  html.mob .d3 .t{font-size:calc(var(--u)*12)!important;line-height:calc(var(--u)*16)!important;letter-spacing:calc(var(--u)*-.36)}
  html.mob #sphere .sbtn+.d3,html.mob #orb+.d3{margin-top:calc(var(--u)*80)!important}
  html.mob .d3:nth-of-type(3),html.mob .d3:nth-of-type(4){margin-left:calc(var(--u)*20)!important}
  html.mob #sphere .sbtn{position:static!important;order:3;align-self:flex-start;margin:auto 0 0 calc(var(--u)*18)!important;opacity:1;translate:none;pointer-events:auto}

  /* cases: the title, then the cards at the 5px margins */
  html.mob #cases{padding:0 0 calc(var(--u)*60)!important}
  html.mob #cases .cst{padding:calc(var(--u)*103) 0 calc(var(--u)*50)!important;text-align:center}
  html.mob #cases .cst .li{font-size:calc(var(--u)*28)!important;line-height:.98!important;letter-spacing:calc(var(--u)*-1.12)!important}
  html.mob #cases .st{gap:calc(var(--u)*130) 0!important}
  html.mob #cases .card{margin:0 calc(var(--u)*5)!important;width:auto!important;aspect-ratio:390/453!important}
  html.mob .cfl{width:calc(var(--u)*292)!important;aspect-ratio:292/158!important}
  html.mob .cinfo{margin-top:calc(var(--u)*17)!important;padding:0 calc(var(--u)*5)!important;grid-template-columns:calc(var(--u)*180) 1fr!important;gap:calc(var(--u)*19) 0!important}
  html.mob .cinfo .cn .li{font-size:calc(var(--u)*16)!important;letter-spacing:calc(var(--u)*-.64)}
  html.mob .cinfo .csb,html.mob .cinfo li{font-size:calc(var(--u)*12)!important;line-height:normal!important}

  /* behind the line: the statement, then the frames side by side, swiped */
  html.mob #quiet{padding:calc(var(--u)*92) 0 calc(var(--u)*60)!important}
  html.mob #quiet .qs{padding:0 calc(var(--u)*18) 0 calc(var(--u)*13)}
  html.mob #quiet .qs .lm{display:none}
  .mqs{margin:0;white-space:normal!important;color:#81171c;font:400 calc(var(--u)*28)/1 'Lusitana',Georgia,serif;letter-spacing:calc(var(--u)*-1.12);text-indent:calc(var(--u)*109);text-transform:uppercase}
  html.mob #quiet .qw{display:none!important}
  html.mob #quiet .bgrid{display:flex!important;gap:calc(var(--u)*3)!important;margin-top:calc(var(--u)*48);padding:0 calc(var(--u)*13);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 calc(var(--u)*13);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  html.mob #quiet .bgrid::-webkit-scrollbar{display:none}
  html.mob #quiet .bgrid>article{flex:0 0 calc(var(--u)*311);scroll-snap-align:start}
  html.mob #quiet .bfr{height:calc(var(--u)*440)!important;aspect-ratio:auto!important}
  html.mob #quiet .binf{display:grid;grid-template-columns:calc(var(--u)*147) 1fr;margin-top:calc(var(--u)*4)!important}
  html.mob #quiet .binf h3{grid-row:1/3;font-size:calc(var(--u)*16)!important;line-height:.98!important;letter-spacing:calc(var(--u)*-.64)!important;white-space:normal!important}
  html.mob #quiet .binf .bis{display:none}
  html.mob #quiet .binf .bro,html.mob #quiet .binf .bco{position:static!important;margin:0!important;font-size:calc(var(--u)*12)!important;line-height:normal!important}
}

/* ---------- 6. about (the design) */
@media (max-width:1023px){
  html.mob .abt-pg #smain{padding:0!important}
  /* hero: the two justified blocks, the year, Group and Contact, the camera, the statement at the foot */
  html.mob .abh0{position:relative;min-height:100svh;padding:0 0 calc(var(--u)*24);display:flex;flex-direction:column}
  html.mob .abtx{position:relative!important;height:calc(var(--u)*204);margin:0!important;width:auto!important}
  html.mob .abtx .mab{position:absolute;width:calc(var(--u)*283);margin:0;font:400 calc(var(--u)*12)/calc(var(--u)*16) 'Lusitana',Georgia,serif;letter-spacing:calc(var(--u)*-.36);text-align:justify;text-align-last:justify;white-space:normal}
  html.mob .abtx .mab.a{left:calc(var(--u)*8);top:calc(var(--u)*106)}
  html.mob .abtx .mab.b{left:calc(var(--u)*163);top:calc(var(--u)*138);text-align-last:left}
  html.mob .abtx .abin{display:none}
  html.mob .abest{position:absolute!important;left:calc(var(--u)*8)!important;top:calc(var(--u)*156)!important;width:calc(var(--u)*57);margin:0!important;text-align:center;font-size:calc(var(--u)*12)!important;line-height:.98!important}
  html.mob .abgp{display:grid!important;grid-template-columns:calc(var(--u)*113) 1fr;row-gap:calc(var(--u)*27)!important;margin:calc(var(--u)*37) 0 0!important;padding-left:calc(var(--u)*9);order:1}
  html.mob .abgl{font:400 calc(var(--u)*12)/calc(var(--u)*22) 'Lusitana',Georgia,serif!important;text-transform:uppercase}
  html.mob .abgn{font:400 calc(var(--u)*12)/1.2 'Helvetica Neue',Helvetica,Arial,sans-serif!important;letter-spacing:calc(var(--u)*-.36);padding-top:calc(var(--u)*4)}
  html.mob .abgn .w,html.mob .abgn button{display:block}
  html.mob .abgn button{appearance:none;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left}
  html.mob .abcamw{order:2;margin:calc(var(--u)*62) auto 0!important;width:calc(var(--u)*280)!important}
  html.mob .abrv{width:100%!important;height:calc(var(--u)*165)!important;aspect-ratio:auto!important}
  html.mob .abrec{padding:calc(var(--u)*7) calc(var(--u)*8)!important;font:400 calc(var(--u)*9)/1.1 'Roboto Mono','DM Mono',monospace!important;letter-spacing:0!important}
  html.mob .abcams{margin-top:calc(var(--u)*8)!important}
  html.mob .abcams .abcm{font:400 calc(var(--u)*9)/1.1 'Roboto Mono','DM Mono',monospace!important;text-transform:uppercase;letter-spacing:0;padding:0}
  html.mob .abcams .abcm:not(.on){opacity:.4}
  html.mob #smain .abh0 .pph{order:3;margin:auto 0 0!important;padding:calc(var(--u)*60) calc(var(--u)*18) 0 calc(var(--u)*13)!important;font-size:calc(var(--u)*28)!important;line-height:1!important;letter-spacing:calc(var(--u)*-1.12)!important;text-indent:calc(var(--u)*109)}
  html.mob #smain .abh0 .pph small{display:inline-block;vertical-align:top;margin:calc(var(--u)*6) calc(var(--u)*14) 0!important;padding:0!important;text-indent:0;font:400 calc(var(--u)*12)/.98 'Lusitana',Georgia,serif!important;letter-spacing:calc(var(--u)*-.48)}
  /* the team: the name of the group, then name, role and year on one line */
  html.mob .abtc{padding:calc(var(--u)*8) 0 0!important}
  html.mob .abte{display:block!important;padding:0 0 calc(var(--u)*100)!important;border:0!important;position:relative}
  html.mob .abte .abtl{position:static!important;display:block!important;width:auto!important;padding-left:calc(var(--u)*9)}
  html.mob .abte .abtl .abn,html.mob .abte .abtl .abct{display:none!important}
  html.mob .abte .abg3{margin:0!important;font:400 calc(var(--u)*18)/.9 'Lusitana',Georgia,serif!important;letter-spacing:calc(var(--u)*-.54)!important;text-transform:uppercase}
  html.mob #smain .abte .abrw{margin:calc(var(--u)*38) calc(var(--u)*12) 0 calc(var(--u)*10)!important;border-top:0}
  html.mob .abte .abrw li{display:grid!important;grid-template-columns:calc(var(--u)*179) 1fr!important;gap:0!important;padding:calc(var(--u)*5) 0 calc(var(--u)*4)!important;border-bottom:1px solid rgba(182,182,182,.35)!important}
  html.mob .abte .abrw li span{font:400 12px/1 'Lusitana',Georgia,serif!important;letter-spacing:-.36px!important;opacity:1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.mob .abte .abyr{display:none!important}
  /* the globe: the title, the sphere in the middle, the phases run sideways under it */
  html.mob #smain .abgh{top:calc(var(--u)*80)!important;font-size:calc(var(--u)*28)!important;line-height:.98!important;letter-spacing:calc(var(--u)*-1.12)!important}
  html.mob #smain .abgh small{font-size:calc(var(--u)*12)!important;margin:calc(var(--u)*8) calc(var(--u)*14) 0!important;padding-top:0!important}
  html.mob .abgb .abgt>*{visibility:hidden}
  .mabt{position:absolute;left:0;right:0;top:calc(var(--vh,100svh)*.775);z-index:3;pointer-events:none;text-indent:0}
  .mabt .mab1{position:absolute;left:0;right:0;top:0;text-align:center;text-indent:0;will-change:transform,opacity}
  .mabt h3,.mabt p{text-indent:0!important;padding:0!important}
  .mabt p{margin-left:auto!important;margin-right:auto!important}
  .mabt h3{margin:0!important}
  .mabt h3{margin:0;font:400 calc(var(--u)*24)/.98 'Lusitana',Georgia,serif;letter-spacing:calc(var(--u)*-.96);text-transform:uppercase;color:#b6b6b6}
  .mabt p{width:calc(var(--u)*283);margin:calc(var(--u)*12) auto 0;font:400 calc(var(--u)*12)/calc(var(--u)*16) 'Lusitana',Georgia,serif;letter-spacing:calc(var(--u)*-.36);color:#b6b6b6;white-space:normal}
  /* recognition: the paragraph, the year, the awards and the press, one per line */
  html.mob .abpa{padding:calc(var(--u)*30) calc(var(--u)*12) 0!important;margin-top:calc(var(--u)*-230)!important;position:relative;z-index:4}   /* the empty foot of the globe's held screen is not kept as a gap */
  html.mob .abpi{font:400 calc(var(--u)*12)/calc(var(--u)*16) 'Lusitana',Georgia,serif!important;letter-spacing:calc(var(--u)*-.24);max-width:calc(var(--u)*300)}
  html.mob .abpa .abrw li{display:grid!important;grid-template-columns:calc(var(--u)*117) 1fr!important;gap:0!important;padding:calc(var(--u)*11) 0 calc(var(--u)*9)!important;border-bottom:1px solid rgba(182,182,182,.3)!important}
  html.mob .abpa .abrw li span{font:400 calc(var(--u)*12)/1.15 'Lusitana',Georgia,serif!important;white-space:normal!important}
  html.mob #smain .abpbig{margin:calc(var(--u)*150) 0 0!important;padding:0 calc(var(--u)*6) 0 calc(var(--u)*1)!important;font-size:calc(var(--u)*28)!important;line-height:.9!important;letter-spacing:calc(var(--u)*-1.12)!important;text-indent:calc(var(--u)*90)}
  html.mob .abpp .abpt{display:none!important}
  html.mob .abpp{margin:calc(var(--u)*90) 0 0!important}
  html.mob .abpp ul{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0 calc(var(--u)*13)!important;border:0!important}
  html.mob .abpp li{height:calc(var(--u)*60)!important;display:flex!important;align-items:center;justify-content:flex-start;padding:0!important;border:0!important;border-top:1px solid rgba(182,182,182,.3)!important}
  html.mob .abpp li:last-child:nth-child(3n+1){display:none!important}
  html.mob .abpp li img{width:auto!important;height:calc(var(--u)*17)!important;max-width:100%}
}

/* ---------- 7. all services (the design: the list of the five, the picture that grows, the services in one row) */
@media (max-width:1023px){
  html.mob .aw,html.mob .amobs{display:none!important}
  /* the held screen is as tall as the largest viewport (Safari's bar folding away never shows a gap under it); what sits at its foot is placed on the smallest one */
  .msv{position:relative;height:calc(100vh * 6);height:calc(100lvh * 6);width:100vw;margin:0 0 0 calc(50% - 50vw);--sv:0px}   /* full bleed, exactly the screen: the texts keep the site's side margins inside it */
  @supports (height:1lvh){ .msv{--sv:calc(100lvh - 100svh)} }
  .msvp{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;contain:paint;background:#b6b6b6;color:#81171c}
  .msvi{position:absolute;inset:0;--ov:.4}
  .msvi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
  .msvi img.on{opacity:1}
  .msvc{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
  .msvi i{position:absolute;inset:0;background:#000;opacity:var(--ov)}
  .msvq{position:absolute;inset:0;pointer-events:none}
  .msvq .q{position:absolute;width:calc(var(--u)*283);margin:0;font:400 calc(var(--u)*12)/calc(var(--u)*16) 'Lusitana',Georgia,serif;letter-spacing:calc(var(--u)*-.36);text-align:justify;text-align-last:justify;white-space:normal}
  /* (29.10) the three blocks read as one paragraph: no gaps between them, the second one indented */
  .msvq{inset:auto;left:calc(var(--u)*14);top:calc(var(--u)*284);width:calc(var(--u)*374)}
  .msvq .q{position:static!important;text-align-last:left}
  .msvq .b{margin-left:calc(var(--u)*91)!important}
  .msvA{position:absolute;left:50%;top:calc(var(--u)*153);width:calc(var(--u)*376);translate:-50% 0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 calc(var(--u)*6);visibility:hidden}
  .msvA span,.msvt a{white-space:nowrap;font:400 calc(var(--u)*24)/.98 'Lusitana',Georgia,serif;letter-spacing:calc(var(--u)*-.96)}
  .msvA b,.msvt b,.msvs b{font-weight:400}
  .msvA sup,.msvt sup{font-size:calc(var(--u)*8);vertical-align:top;margin-left:calc(var(--u)*3);letter-spacing:0;line-height:1}
  .msvt{position:absolute;inset:0;pointer-events:none}
  .msvt a{position:absolute;left:0;top:0;color:#81171c;text-decoration:none;pointer-events:auto;-webkit-tap-highlight-color:transparent;outline:0}
  .msvl .g{position:absolute;left:calc(var(--u)*14);top:calc(var(--u)*197);color:#b6b6b6;pointer-events:none}
  .msvl ul{list-style:none;margin:0;padding:0;font:400 calc(var(--u)*13)/calc(var(--u)*14) 'Lusitana',Georgia,serif;letter-spacing:calc(var(--u)*-.2)}
  .msvl .x{display:block;width:max-content;margin-top:calc(var(--u)*14);color:inherit;text-decoration:none;font:400 calc(var(--u)*10)/1.2 'DM Mono',monospace;text-transform:uppercase}
  .msvl .g.on{pointer-events:auto}
  /* every line is cut by its own mask, as on the desktop: it rises in from below, and leaves upwards when the next service comes */
  .msv .msl{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
  .msv .msi{display:block;transform:translateY(112%);transition:transform .95s cubic-bezier(.2,.7,.1,1) calc(var(--d,0)*70ms + .05s)}
  .msv .on .msi{transform:none}
  .msv .out .msi{transform:translateY(-112%);transition-delay:calc(var(--d,0)*30ms)}
  .msvs .s{position:absolute;left:calc(var(--u)*13);right:calc(var(--u)*13);bottom:calc(var(--u)*30 + var(--sv,0px));margin:0;color:#b6b6b6;font:400 calc(var(--u)*28)/1 'Lusitana',Georgia,serif;letter-spacing:calc(var(--u)*-1.12);text-transform:uppercase;white-space:normal;text-indent:calc(var(--u)*109);
  }
  .msvs .s .msl{text-indent:0}.msvs .s .msl:first-child{text-indent:calc(var(--u)*109)}
  .msvs .s.on .msi{transition-delay:calc(.15s + var(--d,0)*70ms)}
  .msvs .s b{font-weight:400}
  .msvs .s small{display:inline-block;vertical-align:top;margin:calc(var(--u)*6) calc(var(--u)*14) 0;text-indent:0;font:400 calc(var(--u)*12)/.98 'Lusitana',Georgia,serif}
  html.mob.mhdk #header{color:#bebebe!important}
  html.mob.mhdk #header::before{opacity:0!important}
  html.mob.mhdk #header .ld,html.mob.mhdk #header .wm{fill:#bebebe!important}
  html.mob .ag6{padding-bottom:64px!important}
  html.mob .ag6 .ai-ls{font-size:14px;line-height:21px}
}

/* ---------- 8. case studies */
@media (max-width:1023px){
  html.mob #tog{transition:opacity .35s ease,translate .5s var(--ease)}
  html.mob.sfvis #tog{opacity:0!important;translate:-3px 90px!important;pointer-events:none}
}
@media (max-width:1023px){
  /* case opening (the design): the name, the portrait at the right, year and platform, the services in two columns on rules,
     the statement at the foot of the screen; then air between texts and pictures */
  html.mob #smain{padding:0 calc(var(--u)*12) 0 calc(var(--u)*9)!important}
  html.mob #shero{display:grid!important;grid-template-columns:calc(var(--u)*89) calc(var(--u)*154) 1fr;grid-template-rows:auto auto auto 1fr;min-height:100svh;padding:calc(var(--u)*101) 0 calc(var(--u)*40)!important;column-gap:0;row-gap:0;align-items:start}
  html.mob #shero .snm{grid-column:1/3;grid-row:1;margin:calc(var(--u)*3) 0 0!important;font-size:calc(var(--u)*32)!important;line-height:.98!important;letter-spacing:calc(var(--u)*-1.28)!important}
  html.mob #shero .spt{grid-column:3;grid-row:1/3;justify-self:end;width:calc(var(--u)*135)!important;height:calc(var(--u)*160)!important;aspect-ratio:auto!important}
  html.mob #shero .smeta{grid-column:1/3;grid-row:2;align-self:end;display:grid!important;grid-template-columns:calc(var(--u)*89) 1fr;margin:0!important;font:400 calc(var(--u)*12)/.98 'Helvetica Neue',Helvetica,Arial,sans-serif!important;letter-spacing:calc(var(--u)*-.48)}
  html.mob #shero .smeta .lm{display:block}
  html.mob #shero .slab{grid-column:1;grid-row:3;margin:calc(var(--u)*37) 0 0!important;font:400 calc(var(--u)*12)/.98 'Helvetica Neue',Helvetica,Arial,sans-serif!important;text-transform:none;letter-spacing:calc(var(--u)*-.48)}
  html.mob #shero .ssvc{grid-column:2/4;grid-row:3;margin:calc(var(--u)*37) 0 0!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(var(--u)*12);align-items:stretch}
  html.mob #shero .ssvc li{font:400 calc(var(--u)*12)/1.25 'Helvetica Neue',Helvetica,Arial,sans-serif!important;letter-spacing:calc(var(--u)*-.48);white-space:nowrap!important;overflow:hidden;border-bottom:1px solid rgba(129,23,28,.3);min-height:0;height:auto!important;padding:calc(var(--u)*3) 0 calc(var(--u)*2)!important;display:block}   /* one line each: a name too long is shortened (mobile-pages.js), the rules stay level */
  html.mob #shero .ssvc li .lm{display:block;overflow:hidden;white-space:nowrap!important}
  html.mob #shero .ssvc li .li{white-space:nowrap!important}
  html.mob #shero .shs{grid-column:1/-1;grid-row:4;align-self:end;margin:calc(var(--u)*60) 0 0!important}
  html.mob #shero .shfig{grid-column:1/-1;grid-row:5;margin:calc(var(--u)*100) auto 0!important;width:calc(var(--u)*378)!important;height:calc(var(--u)*227)!important;aspect-ratio:auto!important}
  html.mob #smain .sst{font-size:calc(var(--u)*28)!important;line-height:1!important;letter-spacing:calc(var(--u)*-1.12)!important;text-indent:calc(var(--u)*109)}
  html.mob #smain .sst .lm{display:inline!important;overflow:visible;height:auto!important;padding:0!important;margin:0!important}
  html.mob #smain .sst .li{display:inline!important;translate:none!important}
  html.mob #smain .sst .lm::after{content:" "}
  html.mob #smain .sst small{display:inline-block;vertical-align:top;margin:calc(var(--u)*6) calc(var(--u)*14) 0!important;padding:0!important;text-indent:0;font:400 calc(var(--u)*12)/.98 'Lusitana',Georgia,serif!important}
  /* the chapters: the label and the text centred, a lot of air around the pictures */
  html.mob .chap{padding:0!important}
  html.mob .ctx{margin:calc(var(--u)*120) auto 0!important;width:calc(var(--u)*314)!important;text-align:center}
  html.mob .ctx .slb{margin:0 0 calc(var(--u)*14)!important;font:400 calc(var(--u)*12)/1.2 'Lusitana',Georgia,serif!important;text-transform:uppercase;letter-spacing:calc(var(--u)*-.48)}
  html.mob .ctx .stx,html.mob .ctx .stx p{width:auto!important;margin:0 0 calc(var(--u)*14)!important;font:400 calc(var(--u)*18)/1.2 'Lusitana',Georgia,serif!important;letter-spacing:calc(var(--u)*-.72)!important;text-transform:uppercase;text-align:center}
  html.mob .sg{margin-top:calc(var(--u)*100)!important}
  html.mob .sg+.sg{margin-top:calc(var(--u)*12)!important}
  html.mob .srow{gap:calc(var(--u)*12)!important}
  /* a short text between pictures: the same air above and below it */
  html.mob .sg.scap{margin-top:calc(var(--u)*90)!important;gap:calc(var(--u)*90)!important}
  html.mob .sg.scap .scl{padding-top:0!important}
  html.mob .smx{margin-top:calc(var(--u)*120)!important}
  html.mob .sig{margin-top:calc(var(--u)*100)!important}
  /* the next case: the screen holds, the picture is uncovered from below cell by cell, then it flies into the next portrait */
  html.mob #snext{height:calc(100lvh * 2.3)!important;margin:calc(var(--u)*120) calc(var(--u)*-12) 0 calc(var(--u)*-9)!important}
  html.mob .snst{position:sticky!important;top:0;height:100lvh!important;aspect-ratio:auto!important;margin:0!important;background:#81171c;transition:background-color .8s cubic-bezier(.6,0,.2,1)}
  /* leaving: the ground glides to the grey of the next opening while the picture flies; the name stays, in bordeaux */
  html.mob #wrap.leave .snst{background:#b6b6b6}
  html.mob #snext .snt.l{transition:color .8s cubic-bezier(.6,0,.2,1)}
  html.mob #snext .snfig{position:absolute!important;inset:0}
  html.mob .snt.l{left:calc(var(--u)*9)!important;top:calc(var(--u)*104)!important;translate:none!important;font-size:calc(var(--u)*32)!important;line-height:.98!important;letter-spacing:calc(var(--u)*-1.28)!important}
  html.mob .snt.c{display:block!important;left:calc(var(--u)*10)!important;top:calc(var(--u)*226)!important;translate:none!important;font-size:calc(var(--u)*12)!important}
  html.mob .snt.r{left:auto!important;right:calc(var(--u)*41)!important;top:calc(var(--u)*226)!important;translate:none!important;font:400 calc(var(--u)*14)/1 'Lusitana',Georgia,serif!important;text-transform:uppercase;letter-spacing:calc(var(--u)*-.56)}
}
}
@media (max-width:1023px){
  html.mob #acol .gfig.hero{height:auto!important;aspect-ratio:4/5}
  html.mob #acol .gfig.hero img{object-fit:cover}
  html.mob #asb{padding-top:104px}
}

/* ---------- 9. service pages, the paper */
@media (max-width:1023px){
  html.mob .dvt{font-size:clamp(34px,10vw,46px)!important;line-height:1!important}
  html.mob #smain .pph{font-size:clamp(26px,7.8vw,36px);line-height:1.02;letter-spacing:-.045em}
  html.mob .ppg{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:36px 12px!important}
  html.mob #smain .ppn{font-size:14px;line-height:16px}
  html.mob #smain .ppm{font-size:11px;line-height:14px}
  html.mob #ppt{transition:opacity .35s ease,translate .5s var(--ease)}
  html.mob.sfvis #ppt{opacity:0!important;translate:0 90px!important;pointer-events:none}
}

/* ---------- 9b. service pages and the paper article (the design): the red opening, then labels, rows and text with air;
   the pictures that change on the desktop come in after the paragraphs where they change */
@media (max-width:1023px){
  html.mob .dvl{min-height:96svh;padding:calc(var(--u)*141) 0 calc(var(--u)*80)!important;margin:0 calc(-1*var(--gx,12px))!important;justify-content:flex-start}
  html.mob .dvt{font-size:calc(var(--u)*32)!important;line-height:.98!important;letter-spacing:calc(var(--u)*-1.28)!important}
  html.mob .dvf{--h:calc(var(--u)*373);width:calc(var(--u)*244)!important;height:calc(var(--u)*373)!important;margin-top:calc(var(--u)*50)!important}
  html.mob .dvf::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);pointer-events:none;z-index:2}
  html.mob .dvdw{width:calc(var(--u)*358)!important;max-width:none!important;margin:calc(var(--u)*52) auto 0!important}
  /* the end: the next service held on screen while its picture fills in, then its page opens */
  html.mob .dvnb{height:calc(100lvh * 2.2)!important;position:relative}
  html.mob .dvnb .dvl0{position:sticky;top:0;height:100lvh;overflow:hidden;margin:0 calc(-1*var(--gx,12px))}
  html.mob .dvnb .dvl{position:relative;margin:0!important}
  /* held: the header is the one of the next page at its top (no band, the whole logo) */
  html.mob.mnxt #header::before{opacity:0!important}
  html.mob.mnxt #header{color:var(--nxc,#bebebe)!important}
  html.mob.mnxt #header .ld,html.mob.mnxt #header .wm{fill:var(--nxc,#bebebe)!important}
  html.mob .dvnb .dvf{position:relative}
  html.mob .dvf canvas.mdvc{display:block!important;position:absolute;inset:0;width:100%;height:100%;z-index:3;image-rendering:pixelated;pointer-events:none}
  .mdvnx{position:absolute;left:0;right:0;top:calc(var(--u)*104);margin:0;text-align:center;font:400 12px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:inherit;opacity:1}
  html.mob #smain .dv .dvd{font-size:calc(var(--u)*12)!important;line-height:1.2!important;letter-spacing:calc(var(--u)*-.48)!important}
  html.mob .dvr{padding:calc(var(--u)*115) calc(var(--u)*12) calc(var(--u)*40) calc(var(--u)*9)!important}
  html.mob .dvs{margin:0 0 calc(var(--u)*100)!important}
  html.mob .dvs.tight{margin-bottom:calc(var(--u)*22)!important}
  html.mob #smain .dv .dvk{margin:0 0 calc(var(--u)*28)!important;font-size:calc(var(--u)*12)!important}
  html.mob #smain .dv .dvk:empty{display:none}
  html.mob .dvv2{grid-template-columns:calc(var(--u)*177) 1fr!important}
  html.mob .dvu{font-size:calc(var(--u)*12)!important}
  html.mob .dvu li{min-height:calc(var(--u)*19)!important;line-height:calc(var(--u)*18)!important;border-bottom-color:rgba(129,23,28,.3)!important}
  html.mob #smain .dv .dvq{font-size:calc(var(--u)*12)!important;line-height:calc(var(--u)*15)!important;margin-bottom:calc(var(--u)*15)!important}
  html.mob #smain .dv .dvn{font-size:calc(var(--u)*12)!important}
  html.mob .dv .dvg{margin-bottom:calc(var(--u)*30)!important}
  .mdvf{position:relative;width:100vw;margin:calc(var(--u)*10) 0 calc(var(--u)*60) calc(50% - 50vw);height:calc(var(--u)*595);overflow:hidden}
  .mdvf img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;display:block}
}

/* ---------- 10. the contact card, as a flowing page */
@media (max-width:1023px){
  html.mob #cpanel{display:none;flex-direction:column;align-items:stretch;padding:14px var(--gx) max(28px,env(safe-area-inset-bottom));box-sizing:border-box;height:100%!important;width:100%!important;right:0!important;left:0!important;top:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  html.mob #cpanel.on{display:flex}
  html.mob #cpanel>*{flex-shrink:0}
  html.mob #cpanel>*{position:relative!important;left:auto!important;top:auto!important;right:auto!important;width:auto!important}
  html.mob #cpanel::after{display:none}
  html.mob #cclose{align-self:flex-end;font-size:12px;padding:0;margin:0 0 30px;order:-1}
  html.mob #cclose::before{content:"";position:absolute;inset:-14px -20px -14px -24px}
  html.mob #ctitle{font-size:clamp(30px,9vw,40px);line-height:.98;letter-spacing:-.04em;margin:0 0 40px}
  /* (30.10) roomy fields, 18px type (never under 16: no zoom on focus); the card scrolls when it needs to */
  html.mob #cpanel .clab{margin:34px 0 0!important;font-size:11px}
  html.mob #cpanel .clab:first-of-type{margin-top:0!important}
  html.mob #cpanel .cin{margin:8px 0 0!important;height:48px;padding:8px 0;font-size:18px!important;line-height:1.2;letter-spacing:-.02em;width:100%!important}
  html.mob #cpanel textarea.cin{height:120px;line-height:1.3}
  html.mob #cpanel .cfile b{font-size:14px}
  html.mob #cpanel .cline{margin:0!important;height:1px}
  html.mob #csubmit{margin-top:48px;height:58px;width:100%!important;padding:8px 10px 0;font-size:13px}
  html.mob :is(#ccons,#cmkt){margin-top:20px;font-size:11.5px;line-height:1.3}
  html.mob :is(#ccons,#cmkt) i{flex-basis:14px;width:14px;height:14px}
  html.mob :is(#ccons,#cmkt) i::after{left:4px;top:4px;width:6px;height:6px}
  html.mob :is(#ccons,#cmkt) span{width:auto;flex:1}
  html.mob #cmail{margin-top:auto;padding-top:56px;white-space:normal;padding-right:110px}
  html.mob #clegal{margin-top:12px;white-space:normal;padding-right:110px}
  html.mob #cimg{position:relative!important;align-self:flex-end;margin-top:-94px;width:92px!important;height:94px;object-fit:cover}
  html.mob #smain .pph .lm{display:inline!important;overflow:visible;height:auto!important;padding-left:0!important}
  html.mob #smain .pph .li{display:inline!important;translate:none!important}
  html.mob #smain .pph .lm::after{content:" "}
}
@media (max-width:1023px){ html.mob.mmon #header .wm{clip-path:inset(0 0 0 0)!important;translate:0 0!important;visibility:visible!important;transition:clip-path .5s var(--ease),translate .5s var(--ease)!important} }
@media (max-width:1023px){
  html.mob #growth .st{display:flex!important;flex-direction:column;flex:1}
  html.mob #rings{width:205%!important;margin-left:-52.5%!important;margin-top:calc(var(--u)*30)}
  html.mob #quiet .qs{position:relative!important;white-space:normal!important}
  html.mob .rl{font-size:calc(var(--u)*12)!important;letter-spacing:calc(var(--u)*-.48)}
}
@media (max-width:1023px){
  html.mob .abtx .mab.b{width:calc(var(--u)*214)}
  html.mob .abest{white-space:nowrap}
  html.mob #smain .abgh{transform:none!important;translate:none!important;scale:none!important}
  html.mob .abte .abrw li{grid-template-columns:calc(var(--u)*150) 1fr auto!important}
  html.mob .abte .abrw li .abro{padding-right:calc(var(--u)*8)}
}
@media (max-width:1023px){
  /* case studies, the grid: as on the home, each site film sits still in the middle of the screen and is seen only
     through the photo that passes over it; under the photo only the results, one per line */
  html.mob #vgrid .gph{clip-path:inset(0)}
  html.mob #vgrid .gscr{display:block!important;position:fixed!important;left:50%!important;top:50%!important;translate:-50% -50%;transform:none!important;width:calc(var(--u)*292)!important;height:auto!important;aspect-ratio:292/158;visibility:visible!important;z-index:2}
  html.mob #vgrid .gsv{clip-path:inset(0)!important}
  html.mob #vgrid .gdots{display:none}
  html.mob #vgrid .cinfo{display:grid!important;grid-template-columns:calc(var(--u)*180) 1fr;gap:0!important;margin-top:calc(var(--u)*14)!important}
  html.mob #vgrid .cinfo .cn{grid-column:1;grid-row:1}
  html.mob #vgrid .cinfo .csb{grid-column:2;grid-row:1}
  /* the grid keeps the services (left) beside the results (right); every line stays one line */
  html.mob #vgrid .cinfo .csv{display:block!important;grid-column:1;grid-row:2;width:auto!important;margin-top:calc(var(--u)*12)!important;padding-right:calc(var(--u)*8)}
  html.mob #vgrid .cinfo .csv li{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;font-size:calc(var(--u)*12)!important}
  html.mob #vgrid .cinfo .cres{grid-column:2;grid-row:2;width:auto!important;margin-top:calc(var(--u)*12)!important;white-space:nowrap!important;min-width:0}
  html.mob #vgrid .cinfo .cres li{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;font-size:calc(var(--u)*12)!important}
  html.mob #vgrid .cinfo .cres .lm{white-space:nowrap!important}
  /* the list: only the results, one to a line, never wrapped */
  html.mob #vlist .lsv{display:none!important}
  html.mob #vlist .lres{grid-column:1/-1!important;width:auto!important;max-width:none!important}
  html.mob #vlist .lres .lm{display:block;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  html.mob #vlist .lres .li{white-space:nowrap!important}
}

/* (29.10) phones: nothing of the page shows before its reveals are set (mobile.js adds .mrdy); a safety shows it anyway after 1.5s */
@media (max-width:1023px){
  html:not(.mrdy) #wrap>:not(#header){animation:mrdyw 0s 1.5s both}
  @keyframes mrdyw{from{visibility:hidden}to{visibility:visible}}
}

/* (30.10) the language switcher on phones: beside Menu */
@media (max-width:1023px){
  html.mob #header .nav.lng{display:flex!important;position:absolute!important;left:auto!important;right:calc(var(--gx,12px) + 56px);top:15.5px!important;margin:0!important;font:400 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.2px}
  html[lang=it].mob.mmon #header .nav.cu::after{content:"Chiudi"}
}
html.mob .abxcs{--vh:100lvh!important;height:100lvh!important}   /* (30.10) about, closing film: as tall as the screen without Safari's bars, so no bordeaux strip shows under it */

/* (03.11) phones: one side margin everywhere, 12px left and right (--gx), the header included. The page containers take it,
   the blocks inside lose their own small offsets, the full-bleed sections still reach the edges and put their text back on the same line */
@media (max-width:1023px){
  html.mob{--gx:12px}
  html.mob #shero .hr .li{translate:none!important}   /* the opening of the cases: the phone's own line reveal, not the desktop's */
  html.mob body:not(.abt-pg) #smain{padding-left:var(--gx)!important;padding-right:var(--gx)!important}
  html.mob .ab{padding-left:var(--gx)!important;padding-right:var(--gx)!important}
  /* About and Shopify Plus Agency */
  html.mob .abh0 .pph,html.mob .abh0 .abgp,html.mob .abtl,html.mob #recognition{padding-left:0!important;padding-right:0!important}
  html.mob .abh0 .mab.a{left:0!important}
  html.mob .abh0 .mab.b{left:auto!important;right:0}
  html.mob .abh0 .abtx .abest{left:0!important;text-align:left}   /* (06.11) the second block stays on the right: ©EST 2008 sits in the space on its left */
  html.mob #smain .abte .abrw,html.mob .abrw{margin-left:0!important;margin-right:0!important}
  html.mob .abgr,html.mob .abxc{margin-left:calc(-1*var(--gx))!important;margin-right:calc(-1*var(--gx))!important}
  html.mob #smain .abgtt,html.mob .abgdd,html.mob .abxci,html.mob #smain .abxch{left:var(--gx)!important}
  html.mob .spa2 .spls .lr{padding-left:0!important;padding-right:0!important}
  html.mob .spa2 .spls .lg{margin-left:calc(-1*var(--gx))!important;margin-right:calc(-1*var(--gx))!important;padding:0 var(--gx)!important}
  html.mob .spa2 .spc .sg{margin-left:0!important}
  /* Shopify Plus Agency, the projects: as the list of Case Studies, only the results, one to a line */
  html.mob .spa2 .spls .lsv{display:none!important}
  html.mob .spa2 .spls .lres{grid-column:1/-1!important}
  html.mob .spa2 .spls .lres .lm{display:block;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  html.mob .spa2 .spls .lres .li{white-space:nowrap!important}
  /* the service pages */
  html.mob .dvr{padding-left:0!important;padding-right:0!important}
  /* Services */
  html.mob .msvq,html.mob .msv p.s{left:var(--gx)!important}
  /* Case Studies and the home */
  html.mob #vgrid .cinfo{padding-left:0!important;padding-right:0!important}
  html.mob #cases .cinfo{padding-left:var(--gx)!important;padding-right:var(--gx)!important}
  html.mob #stickB,html.mob #statement,html.mob .qs{padding-left:var(--gx)!important;padding-right:var(--gx)!important}
  html.mob #growth .desc:nth-of-type(1){left:var(--gx)!important}html.mob #growth .desc:nth-of-type(2){left:calc(var(--gx) + var(--u)*91)!important}
  html.mob #smain .abh0 .pph{padding-left:0!important;padding-right:0!important}
  html.mob .msvl .g{left:var(--gx)!important}
  html.mob #smain section.pp{padding-left:0!important;padding-right:0!important}   /* Future Vision */
}