/* ============================================================================================
   Made in Evolve — service landings, on the layout of aino.agency/services/design.
   4 columns of 345px, 14px gutters, 9px margins: x = 9 / 368 / 727 / 1086.
   ============================================================================================ */
#smain .ag{margin:var(--mt) 0 0 9px;width:1422px;display:grid;grid-template-columns:repeat(4,345px);column-gap:14px;align-items:start}
.ag .c1{grid-column:1}.ag .c2{grid-column:2}.ag .c3{grid-column:3}.ag .c4{grid-column:4}.ag .c12{grid-column:1/3}.ag .c34{grid-column:3/5}
/* the statement: three columns wide */
.ai-mega{grid-column:1/4;width:auto!important;margin:0!important;text-align:left!important;font:400 40px/40px 'Lusitana',Georgia,serif!important;letter-spacing:-.045em!important;text-transform:uppercase}
.ai-mega .li{text-align:left;text-align-last:auto}
/* a short text: a small caps title, then the paragraph */
.ai-t{width:345px!important;margin:0!important;text-align:left!important;text-transform:none!important;font:400 12px/16px 'Lusitana',Georgia,serif!important;letter-spacing:-.02em!important}
.ai-t+.ai-t{margin-top:32px!important}
.ai-t p+p{margin-top:0!important}
.ai-t .li{text-align:left;text-align-last:auto}
.ai-k{font:400 12.3px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase}
.ai-t .ai-k+p{margin-top:4px!important}
/* pictures */
.ai-big{width:704px;height:809px}.ai-sm{width:345px;height:431px}.ai-wide{width:704px;height:790px}
.ai-cv{width:345px;height:431px}
/* the work */
.ai-lb{font:400 12.3px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase;margin:0}
.ag6 .c4 .ai-lb{white-space:normal;max-width:345px}
.ai-lb a{color:inherit;text-decoration:none}.ai-lb a:hover{opacity:.6}
.ag5 .ai-lb{grid-column:1;grid-row:1;margin-bottom:12px}
.ai-c{grid-row:2;display:block;color:inherit;text-decoration:none}
.ai-c.c2{grid-column:2}.ai-c.c3{grid-column:3}.ai-c.c4{grid-column:4}
.ai-c .sfig{margin-bottom:16px}
.ai-n,.ai-nm,.ai-s{display:block;font:400 12.3px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.01em}
.ai-nm{font:400 20px/22px 'Lusitana',Georgia,serif;letter-spacing:-.03em;margin-top:2px}
.ai-s{margin-top:6px;opacity:.8}
.ai-c:hover .sfig img{scale:1.03}.ai-c .sfig img{transition:scale 1.2s cubic-bezier(.2,.7,.1,1)}
/* find out more */
.ai-ls{margin:0;padding:0;list-style:none}
.ai-ls li{font:400 12.3px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.01em}
.ai-ls a{color:inherit;text-decoration:none}.ai-ls a:hover{opacity:.6}
.ai-btn{display:inline-block;margin-top:12px;padding:6px 12px 5px;background:#81171c;color:#b6b6b6;border-radius:4px;text-decoration:none;font:400 12.3px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.02em;transition:opacity .3s}
.ai-btn:hover{opacity:.8}
/* the wordmark, as wide as the page, and the small print under it */
.ai-ft{padding-bottom:40px}
.ai-wm{grid-column:1/-1;margin:0 0 14px!important;font:400 200px/.86 'Lusitana',Georgia,serif;letter-spacing:-.05em;white-space:nowrap;overflow:visible;padding-bottom:.04em}
.ai-ft .c1,.ai-ft .c2,.ai-ft .c3,.ai-ft .c4{grid-row:2}

/* all services: ONE name and ONE picture stay pinned on the left for the whole block and change with the area; the texts go by on the right */
.asw{position:relative;margin:var(--mt) 0 0 9px;width:1422px}
.asp{position:sticky;top:0;height:var(--vh,800px);margin-bottom:calc(-1*var(--vh,800px));width:700px;pointer-events:none;z-index:2}
.asp .asl{position:absolute;left:0;top:70px}
.asnw{position:absolute;left:359px;top:calc(var(--vh,800px)*.5 - 40px);width:340px;height:90px}
.asn{position:absolute;left:0;top:0;display:block;color:inherit;text-decoration:none;opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1);pointer-events:none}
.asn.on{opacity:1;transform:none;pointer-events:auto}
.asn .ai-lb{display:block;margin-bottom:6px}
.asn:hover .as-h{opacity:.6}
.as-h{display:block;font:400 40px/40px 'Lusitana',Georgia,serif;letter-spacing:-.045em;text-transform:uppercase;transition:opacity .3s}
.as-h a{color:inherit;text-decoration:none}
.asfw{position:absolute;left:0;bottom:9px;width:345px;height:431px;overflow:hidden}
.asf{position:absolute;inset:0;margin:0;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.asf.on{clip-path:inset(0);z-index:1}
.asf img{width:100%;height:100%;object-fit:cover;display:block;scale:1.12;transition:scale 1.6s cubic-bezier(.2,.7,.1,1)}
.asf.on img{scale:1}
.asx{margin-left:718px;width:704px}
.asc{min-height:calc(var(--vh,800px)*1.05);padding:calc(var(--vh,800px)*.5 - 60px) 0 calc(var(--vh,800px)*.28);transition:opacity .8s cubic-bezier(.2,.7,.1,1)}
.asc:first-child{padding-top:calc(var(--vh,800px)*.5 - 60px)}
.asm{display:none}
.asc .ai-btn{margin-top:16px}
.as-d{white-space:normal;margin:0!important;padding-bottom:56px;max-width:560px;font:400 20px/24px 'Lusitana',Georgia,serif;letter-spacing:-.03em}
.as-d::after{content:'';display:block;height:56px}.as-h::after{content:'';display:block;height:24px}
.as-ls{margin:0;padding:0;list-style:none}
.as-ls li{position:relative;font:400 28px/32px 'Lusitana',Georgia,serif;letter-spacing:-.04em}
.as-ls li a{display:flex;gap:28px;align-items:baseline;padding:18px 0 16px;color:inherit;text-decoration:none;transition:padding .5s cubic-bezier(.2,.7,.1,1)}
.as-ls li a:hover{padding-left:14px}
.as-i{font:400 12.3px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.02em;min-width:20px}
.as-ls li::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.1,1) var(--d,0s)}
.as-ls li:last-child::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.1,1) calc(var(--d,0s) + .15s)}
/* motion: things rise in as they come into view, the lines draw themselves, the area in the middle of the screen is the lit one */
.ai-js .rvl{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.1,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.1,1) var(--d,0s)}
.ai-js .rvl.ai-in{opacity:1;transform:none}
.ai-js .as-ls li:not(.ai-in)::before,.ai-js .as-ls li:not(.ai-in)::after{transform:scaleX(0)}
.ai-js .asc:not(.on){opacity:.22}

@media (max-width:1023px){
  .asp{display:none}.asw{margin:56px 0 0;width:auto}.asx{margin:0;width:auto}.asc{min-height:0;padding:0 0 56px}.asm{display:block;margin-bottom:24px}.asm .as-h{font-size:28px;line-height:30px;padding:6px 0 18px}.as-d{font-size:16px;line-height:20px}.as-d::after{height:32px}.ai-js .asc:not(.on){opacity:1}.as-ls li{font-size:22px;line-height:26px}.asm .sfig{width:100%;height:auto;aspect-ratio:4/5}
  #smain .ag{display:block;margin:56px 0 0;width:auto}
  .ag>div,.ag>section,.ag>p,.ag>ul,.ag>a{margin-bottom:28px}
  .ai-mega{font-size:24px!important;line-height:26px!important}
  .ai-t{width:auto!important}
  .ai-big,.ai-sm,.ai-wide,.ai-cv{width:100%;height:auto;aspect-ratio:4/5}
  .ai-c{margin-bottom:28px}
  .ai-wm{margin-bottom:24px!important}
  .ag6 .c4{margin-top:36px}.ag5 .ai-lb{margin-bottom:14px}
  .ai-ft .c1,.ai-ft .c2,.ai-ft .c3,.ai-ft .c4{margin-bottom:20px}
}
/* ============================================================================================
   All services: a pinned stage. Stage coordinates (1440 wide, --vh tall), the stage itself runs the whole width of the screen.
   ============================================================================================ */
.aw{position:relative;height:calc(var(--vh,800px)*6.7);margin:0 calc(-1*var(--ox,0px))}
.apin{position:sticky;top:0;height:var(--vh,800px);overflow:hidden;color:#81171c}
.asls{position:absolute;inset:0}
.asl{position:absolute;inset:0;overflow:hidden}
.asl img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;display:block;will-change:transform}
.asl::after{content:'';position:absolute;inset:0;opacity:var(--ov,1);background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.38) 45%,rgba(0,0,0,.62));pointer-events:none}
.asl[data-i="0"]{inset:auto;left:calc(var(--ox,0px) + 518px);top:414px;width:416px;height:492px}
.asl:not([data-i="0"]){visibility:hidden}
.asl[data-i="0"]{--ov:0}.asl[data-i="0"] img{top:0;height:100%}
.asl.gone{display:none!important}
.asl:not([data-i="0"]) canvas{display:none;z-index:auto}
.asl.cv canvas{display:block!important}
.asl.cv img{visibility:hidden}
.asl.cv::after{display:none}
.asl canvas{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;z-index:2}
.asl[data-i="0"]:not(.on) img{visibility:hidden}
.apin>*:not(.asls){position:absolute}
.apin.dk{color:#b6b6b6}
#header::before,#header.compact::before,body.bd #header::before{background:transparent!important}
html.asdk #header,html.asdk #header.compact{color:#b6b6b6!important}
/* the intro, on the grey: Frame 88, in stage coordinates */
.aint{inset:0;pointer-events:none}
.aint>*{position:absolute;margin:0}
.aih{left:calc(var(--ox,0px) + 170px);width:1100px;top:154px;text-align:center;font:400 54px/51px 'Lusitana',Georgia,serif;letter-spacing:-.04em;text-transform:uppercase}
.aih .alm{white-space:nowrap;height:51px}
@media (min-width:1024px){.aih{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* the five titles: always there. Close together on the intro, spread over the whole width when the picture is full; only the first one stays lit */
.atl{left:0;top:232px;width:0;height:32px;pointer-events:none}
.apin:not(.rdy) .atl{visibility:hidden}
.atn{position:absolute;left:0;top:0;white-space:nowrap;font:400 28px/32px 'Lusitana',Georgia,serif;letter-spacing:-.04em;transition:opacity .35s;will-change:transform}
.atn .ali{transform:none;transition-duration:.9s}
.apin:not(.rdy) .atn .ali{transform:translateY(112%);transition:none!important}
.atn sup{font:400 8px/1 'Lusitana',Georgia,serif;letter-spacing:0;vertical-align:top;position:relative;top:3px;margin-left:3px}
/* the intro leaves like every other text: each line is cut and slides up; it comes back the same way */
.aint .ali{transform:none;transition-duration:.9s}
.aint.out .ali{transform:translateY(-112%);transition-delay:calc(var(--d,0)*35ms)}
.apin:not(.rdy) .aint .ali{transform:translateY(112%);transition:none!important}
.aint .alx li{transition:border-color .5s}
.apin:not(.rdy) .aint .alx li{border-bottom-color:transparent}
.aint.out .alx li{border-bottom-color:transparent}
.aint.out{visibility:hidden;transition:visibility 0s 1.5s}
.aln{font:400 12px/12px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;left:calc(var(--ox,0px) + 12px)}
.al1{top:414px}.al2{top:566px}
.alx{list-style:none;padding:0;left:calc(var(--ox,0px) + 231px);width:272px;font:400 12px/18px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em}
.alx li{height:19px;box-sizing:border-box;border-bottom:1px solid rgba(129,23,28,.18)}
.alx1{top:414px}.alx2{top:566px}
.aq{width:283px;font:400 11px/16px 'Lusitana',Georgia,serif;letter-spacing:-.02em;text-align:justify;white-space:normal}
.aq1{left:calc(var(--ox,0px) + 992px);top:407px}.aq3{left:calc(var(--ox,0px) + 1083px);top:457px}.aq2{left:calc(var(--ox,0px) + 992px);top:488px}
/* the texts of the areas: they stay where they are, the lines go up and the next ones come in */
.alst{left:var(--ox,0px);top:284px;width:100%;pointer-events:none}
.alst .agp{width:max-content;max-width:330px}
.alst .aex{margin-top:20px}
.astm{left:calc(var(--ox,0px) + 9px);top:calc(var(--vh,800px) - 187px);width:1422px}
.alst,.astm{color:#b6b6b6}
.apin.bk .agp .ali{transition-duration:.4s;transition-delay:calc(var(--d,0)*15ms)}
.agp{position:absolute;left:0;top:0;width:100%}
.apin:not(.rdy) .alst,.apin:not(.rdy) .astm{visibility:hidden}
.apin:not(.rdy) .ali{transition:none!important}
.agp a{color:inherit;text-decoration:none;display:block;pointer-events:auto}
.alm{display:block;overflow:hidden}
.ali{display:block;transform:translateY(112%);transition:transform .95s cubic-bezier(.2,.7,.1,1) calc(var(--d,0)*70ms + .05s)}
.agp.on .ali{transform:none}
.agp.out .ali{transform:translateY(-112%);transition-delay:calc(var(--d,0)*30ms)}
.alst .alm{font:400 12px/14px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
.alst .aex .alm{letter-spacing:.02em}
/* (30.10) EXPLORE is a button: its frame opens with the word (same curve, same --d:11) */
.alst .agp a.aex{display:inline-block;padding:5px 10px 4px;border:1px solid currentColor;border-radius:4px;clip-path:inset(calc(100% + 3px) -3px -3px -3px);transition:clip-path .95s cubic-bezier(.2,.7,.1,1) calc(11*70ms + .05s),opacity .2s}
.alst .agp.on a.aex{clip-path:inset(-3px)}   /* (02.11) 3px past the frame: on the zoomed stage the border never falls half outside the mask */
.alst .agp.out a.aex{clip-path:inset(-3px -3px calc(100% + 3px) -3px);transition-delay:calc(11*30ms),0s}
.apin.bk .alst .agp a.aex{transition-duration:.4s,.2s;transition-delay:calc(11*15ms),0s}
.apin:not(.rdy) .alst a.aex{transition:none!important}
.alst .agp a.aex:hover{opacity:.7}
.astm .alm{height:53px;font:400 54px/53px 'Lusitana',Georgia,serif;letter-spacing:-.04em;white-space:nowrap}
.astm .alm.f{padding-left:570px;box-sizing:border-box}
.astm b{font-weight:400}
.astm small{display:inline-block;vertical-align:top;margin:0 22px;font:400 12px/1 'Lusitana',Georgia,serif;letter-spacing:-.02em;padding-top:14px}
.amobs{display:none}
.atl.out .atn .ali{transform:translateY(-112%);transition-delay:calc((var(--d,0) - 2)*30ms)}
/* overview: it sits at the end of the pinned stage; the last picture lands in its small portrait */
.aox{position:relative;height:560px;margin:0 calc(-1*var(--ox,0px));color:#81171c}
.aox .ali{transform:none!important;transition:none!important}
.ptn,.awd{height:420px}
.aoq{left:calc(var(--ox,0px) + 577px);top:128px;width:240px;text-align:left}
.aocl.one{display:block;width:572px}.aoc.pr{display:grid;grid-template-columns:234px 1fr;column-gap:8px}.aoc.pr.aw3{grid-template-columns:234px 150px 1fr}.aoc.pr span{white-space:nowrap}
.aox>*{position:absolute;margin:0}
.aoh{left:calc(var(--ox,0px) + 12px);top:128px;font:400 34px/34px 'Lusitana',Georgia,serif;letter-spacing:-.04em;text-transform:uppercase}
.aoh .alm{height:34px}
.aoim{left:calc(var(--ox,0px) + 288px);top:128px;width:144px;height:172px;overflow:hidden;opacity:0}
.aox.im .aoim{opacity:1}
.aoim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;visibility:hidden}
.aoim img.cur{visibility:visible}
.aoim canvas{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;display:none}
.aosv{list-style:none;padding:0;left:calc(var(--ox,0px) + 577px);top:128px;width:200px;font:400 12px/19px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em}
.aosv li{height:19px;transition:opacity .45s cubic-bezier(.2,.75,.15,1)}
.aosv a{color:inherit;text-decoration:none;display:block;height:19px}
.aox.in .aosv a,.aox.in .aoc{pointer-events:auto}
.aox.hv .aosv li{opacity:.3}.aox.hv .aosv li.cur{opacity:1}
.aocl{left:calc(var(--ox,0px) + 858px);top:128px;width:572px;display:grid;grid-template-columns:234px 330px;column-gap:8px}
.aoc{display:block;height:19px;box-sizing:border-box;border-bottom:1px solid rgba(129,23,28,.4);color:inherit;text-decoration:none;font:400 12px/18px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;transition:opacity .45s cubic-bezier(.2,.75,.15,1),border-color .8s}
.aoc .alm{height:18px;white-space:nowrap}
.aox:not(.in) .aoc{border-bottom-color:transparent}
.aox .ali{transition-duration:.85s;transition-delay:calc(.1s + var(--d,0)*32ms)}
.aox.in .ali{transform:none}
.aox.hv .aoc{opacity:.18}.aox.hv .aoc.hit{opacity:1;border-bottom-color:#81171c}
@media (max-width:1023px){
  .aw{height:auto;margin:0;display:flex;flex-direction:column}.apin{display:contents}
  .asls,.atl,.atg,.alst,.astm,.aln,.alx,.aen{display:none}
  .apin>.aint{position:relative;inset:auto;padding:130px 0 40px}.apin>.aint>*{position:static}
  .aih{width:auto;left:auto;font-size:30px;line-height:32px;text-align:left;text-transform:uppercase}.aih .alm{display:inline;height:auto;white-space:normal;overflow:visible}.aih .ali{display:inline}.aint .ali,.apin:not(.rdy) .aint .ali{transform:none!important;transition:none!important;display:inline}.aint .alm{overflow:visible;display:block}.aih .alm:first-child:after{content:' '}.aint{visibility:visible!important}.aint .alx{display:none}.aih::after{content:'';display:block;height:20px}.aq::before{content:'';display:block;height:10px}.aq1::before{display:none}.aq{width:auto;margin-top:18px;font-size:14px;line-height:18px;text-align:left}.aq3{padding-left:0}
  .amobs{display:block;order:2}
  .aox{height:auto;margin:0;padding:80px 0 20px}.aox>*{position:static}.aocl.one{width:auto}.aoq{width:auto;font-size:14px;line-height:19px;margin:0 0 22px!important}.aoc.pr,.aoc.pr.aw3{display:block}.aoc.pr span{display:inline-block;margin-right:12px}.aoh{font-size:30px;line-height:32px;margin-bottom:22px!important}
  .aoim{display:none}.aosv{width:auto;display:flex;flex-wrap:wrap;gap:0 16px;margin-bottom:26px!important;font-size:13px}.aocl{width:auto;display:block}.aocc{display:block}
  .aoc{padding:0;height:auto;line-height:16px;padding:7px 0 8px}.aoc .alm{height:auto}
  .amb{margin-top:56px}.amb figure{margin:0 0 14px;aspect-ratio:4/5;overflow:hidden}.amb img{width:100%;height:100%;object-fit:cover;display:block}
  .amb h2{margin:4px 0 12px;font:400 34px/36px 'Lusitana',Georgia,serif;letter-spacing:-.045em;text-transform:uppercase}.amb h2 a{color:inherit;text-decoration:none}
  .amd{font:400 15px/19px 'Lusitana',Georgia,serif;letter-spacing:-.03em;white-space:normal;margin-bottom:20px}
  .amb .ai-ls li{border-top:1px solid currentColor;padding:6px 0 5px}.amb .ai-ls li:last-child{border-bottom:1px solid currentColor}
}
/* ============================ service landing, split layout ============================ */
.dv{position:relative;display:grid;grid-template-columns:calc(var(--ox,0px) + 720px) minmax(0,1fr);margin:0 calc(-1*var(--ox,0px));align-items:start;color:#81171c}
.dvl0{align-self:stretch}
.dvl{position:sticky;top:0;height:var(--vh,800px);background:#81171c;color:#b6b6b6;box-sizing:border-box;padding:128px 0 0 var(--ox,0px);display:flex;flex-direction:column;align-items:center;--h:clamp(260px,calc(var(--vh,800px) - 400px),420px)}
.dvt{margin:0;font:400 34px/36px 'Lusitana',Georgia,serif;letter-spacing:-.04em;text-transform:uppercase;font-weight:400;text-align:center}
.dvtw,.dvdw{display:grid;justify-items:center}
.dvf{position:relative;margin:32px 0 0;width:calc(var(--h)*.82);height:var(--h);overflow:hidden;flex:none}
.dvf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;visibility:hidden}
.dvf img.cur{visibility:visible}
.dvf canvas{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;display:none}
.dvdw{margin-top:40px;width:340px;max-width:calc(100% - 40px)}
#smain .dv .dvd{margin:0;width:100%;text-align:center;text-transform:uppercase;font:400 11px/15px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
.dvr{padding:170px 20px 0 0;min-width:0}
.dvnb{height:var(--vh,800px)}.dvnb .dvl{position:relative}.dvnb .dvr{height:var(--vh,800px);box-sizing:border-box;overflow:hidden;padding:0;display:flex;align-items:center;justify-content:center}
.dvrg{position:relative;width:288px;height:288px;flex:none}
.dvrg svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.dvrg circle{fill:none;stroke-width:1}
.dvrg .dvrg0{stroke:rgba(129,23,28,.22)}
.dvrg .dvrg1{stroke:#81171c;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0)*100)}
#smain .dvnb .dvrg p{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;text-align:center;white-space:nowrap;font:400 12px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:#81171c}
.dvnl{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3}
.dvs{display:grid;grid-template-columns:244px minmax(0,1fr);margin:0 0 72px 131px;max-width:560px}
.dvs.tight{margin-bottom:14px}
#smain .dv .dvv1 .dvq:last-child{margin-bottom:0}
.dvlgi{display:flex;align-items:center;gap:8px}.dvlg{width:14px;height:14px;object-fit:contain;flex:none}
#smain .dv .dvk{margin:0;font:400 12px/19px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em}
.dvv1{min-width:0;max-width:325px}
.dvv2{display:grid;grid-template-columns:169px minmax(0,1fr);min-width:0}
.dvu{list-style:none;margin:0;padding:0;font:400 12px/19px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
.dvu li{min-height:19px;box-sizing:border-box;border-bottom:1px solid rgba(129,23,28,.18);line-height:18px}
.dvu a,.dvx a{color:inherit;text-decoration:none}.dvu a:hover,.dvx a:hover{text-decoration:underline}
#smain .dv .dvn{margin:0 0 10px;font:400 12px/19px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
.dvn>span:not(.lm),.dvn .li>span{opacity:.6;margin-left:8px}
.dvd,.dvq,.dvn,.dvx,.dvu{white-space:normal}
#smain .dv .dvq{margin:0 0 16px;font:400 12px/16px 'Lusitana',Georgia,serif;letter-spacing:-.01em;text-align:justify}
.dv .dvg{margin:0 0 34px}.dvg:last-child{margin-bottom:0}
#smain .dv .dvx{margin:18px 0 0;font:400 12px/19px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
#smain .dv .dvl2{margin-top:22px}
#smain .dv .dvx .ai-btn{color:#b6b6b6;text-decoration:none;margin:0 6px 0 0}
#smain .dv .dvx .ai-btn:hover{text-decoration:none}
@media (max-width:1023px){
  .dv{display:block;margin:0}.dvl0{display:block}
  .dvl{position:relative;height:auto;padding:120px 0 40px;--h:min(120vw,520px);background:#81171c;margin:0 -12px}
  .dvf{margin-top:26px;width:calc(var(--h)*.82)}.dvdw{width:auto;max-width:none;margin:30px 24px 0}.dvnb{height:auto;position:relative}.dvnb .dvr{display:none}
  .dvr{padding:70px 0 20px}.dvs{display:block;margin:0 0 50px;max-width:none}.dvs.tight{margin-bottom:24px}#smain .dv .dvk{margin:0 0 12px}.dvv1{max-width:none}.dvv2{grid-template-columns:150px 1fr}
}

/* the entrance: lines rise out of their masks, the hairlines draw, the portrait is uncovered in cells */
html.dvh .dv:not(.dvnb) .dvl>:not(.dvf),html.dvh .dv:not(.dvnb) .dvr,html.dvh .dv:not(.dvnb) .dvf{visibility:hidden}
html.dvhr .dv:not(.dvnb) .dvr{visibility:hidden}
html.dvh .dv:not(.dvnb) .dvf img{visibility:hidden!important}   /* the current picture says visible on its own, so hiding its frame is not enough */
#smain .dv .li{transition-duration:.9s;transition-delay:calc(var(--l,0)*55ms)}
#smain .dv .li.j{text-align:justify;text-align-last:justify}
.dvj .dvr .dvu li{border-bottom-color:transparent;background:linear-gradient(rgba(129,23,28,.18),rgba(129,23,28,.18)) 0 100%/0% 1px no-repeat;transition:background-size 1.1s cubic-bezier(.6,0,.2,1) calc(.15s + var(--r,0)*80ms)}
.dvj .dvr .rv .dvu li{background-size:100% 1px}
/* AI Unit: a petrol green panel, with its texts in bordeaux */
.dvl.k-ai-unit{background:#2e9d98;color:#81171c}   /* the teal of the sphere view on Case Studies */
.dvl{transition:background-color .9s cubic-bezier(.6,0,.2,1),color .9s cubic-bezier(.6,0,.2,1)}   /* the ground glides in time, as on the home page: no gradient, no edge */
@media (min-width:1024px){ .dvnb .dvl{background-color:var(--cbg);color:var(--cfg)} }
@media (max-width:1023px){ html.dvon .dvai #header,html.dvon .dvai #header.compact{color:#81171c} html.dvon .dvai #header .wm,html.dvon .dvai #header .ld{fill:#81171c} }
@media (min-width:1024px){ .dvp.dvh-b #header,.dvp.dvh-b #header.compact,.dvp.dvh-b #header.dark,.dvp.dvh-b #header .nav:not(.r):not(.cu),.dvp.dvh-b #header.compact .cn{color:#81171c}.dvp.dvh-b #header .wm,.dvp.dvh-b #header .ld{fill:#81171c}
 .dvp #header .nav{transition-property:clip-path,translate,color;transition-duration:.38s,.38s,.7s}
 .dvp #header .cn{transition-property:opacity,translate,color;transition-duration:.35s,.45s,.7s}
 .dvp #header .wm{transition-property:clip-path,translate,fill;transition-duration:.38s,.38s,.7s}
 .dvp #header .ld{transition-property:transform,fill;transition-duration:.45s,.7s} }

@media (max-width:1023px){ html.dvon #header,html.dvon #header.compact{color:#bebebe} html.dvon #header .wm,html.dvon #header .ld{fill:#bebebe} }
@media (min-width:1024px){
 .dvp #header::before,.dvp #header.compact::before,body.bd.dvp #header::before{background:#b6b6b6!important;left:calc(var(--ox,0px) + 720px);width:auto;right:0}
 .dvp #header,.dvp #header.compact,.dvp #header.dark{color:#bebebe}.dvp #header .wm,.dvp #header .ld{fill:#bebebe}.dvp #header .nav:not(.r):not(.cu){color:#bebebe}
 .dvp #header .nav.fold.r,.dvp #header .nav.cu{color:#81171c}
 .dvp #header.compact .cn{color:#bebebe}
 .dvp #header.clear::before{background:transparent!important}.dvp #header.clear .nav.fold.r,.dvp #header.clear .nav.cu{color:#bebebe}
}
/* ============================ The Paper ============================ */
.pp{position:relative;margin:0 calc(-1*var(--ox,0px));padding:196px 11px 150px;color:#81171c}
#smain .pph{margin:0 0 84px -3px;font:400 54px/52.92px 'Lusitana',Georgia,serif;letter-spacing:-2.16px;text-transform:uppercase;font-weight:400}
#smain .pph .lm{height:52.92px;white-space:nowrap;padding-left:0}
#smain .pph .lm:first-child{padding-left:562px}
#smain .pph .li{transition-delay:calc(.15s + var(--l,0)*90ms)}
#smain .pph small{display:inline-block;vertical-align:top;margin:0 22px;font:400 12px/.98 'Lusitana',Georgia,serif;letter-spacing:-.48px;padding-top:20.58px}
.pap #header::before,.pap #header.compact::before{background:#b6b6b6!important}
/* the grid: four columns, rows that start on the same line, pictures of different proportions */
.ppg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:52px 13px;align-items:start;transition:opacity .22s}
.ppg.sw{opacity:0}
.ppk{min-width:0}.ppk[hidden]{display:none}
.ppi{display:block;overflow:hidden}
.ppl{display:block;color:inherit;text-decoration:none}
.ppim{display:block;position:relative;aspect-ratio:var(--r,4/5);overflow:hidden;background:rgba(129,23,28,.08)}
.ppim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:scale 1.1s cubic-bezier(.2,.75,.15,1)}
.ppk:hover .ppim img{scale:1.035}
.ppt{padding:9px 0 0;font:400 12px/16px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
#smain .ppm{margin:0 0 7px;display:flex;flex-direction:column;gap:0;white-space:normal;font:400 12px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;opacity:.7}
#smain .ppn{margin:0;font:400 15px/17px 'Lusitana',Georgia,serif;letter-spacing:-.01em;max-width:310px}
#smain .ppn a{color:inherit;text-decoration:none}
#smain .ppk:hover .ppn a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.ppa.off,.ppl.off{cursor:default}
/* entrance: the picture arrives in 3px grain (site.js miePix) while it settles; the date, the area and the title rise through their mask (mieTrim) */
.ppjs .ppk:not(.in) .ppim{visibility:hidden}
.ppjs .ppk .ppim img{scale:1.08;transition:scale 1.5s cubic-bezier(.2,.75,.15,1) var(--d,0ms)}
.ppjs .ppk:not(.in) .ppt{visibility:hidden}
.ppjs .ppk.in .ppim img{scale:1}
.ppjs .ppk.in:hover .ppim img{scale:1.035;transition-delay:0s;transition-duration:1.1s}
/* the filter: a light squared plate fixed at the bottom (as the switch on Case Studies); one key, which opens sideways into the areas */
#ppt{position:fixed;left:0;right:0;bottom:20px;z-index:11;width:max-content;max-width:calc(100% - 24px);height:40px;margin:0 auto;padding:2px;box-sizing:border-box;background:#d9d9d9;display:flex;isolation:isolate;
  opacity:0;translate:0 14px;transition:opacity .6s cubic-bezier(.2,.75,.15,1),translate .8s cubic-bezier(.2,.75,.15,1)}
#ppt.in{opacity:1;translate:0 0}
#ppt button{appearance:none;height:36px;margin:0;padding:0 16px;border:0;border-radius:0;background:#b6b6b6;color:#81171c;font:400 12px/36px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  transition:color .5s cubic-bezier(1,0,0,1),background-color .3s cubic-bezier(1,0,0,1);-webkit-tap-highlight-color:transparent}
#ppt button:hover{background:#c3c3c3}
#ppt button:focus-visible{outline:1px solid #81171c;outline-offset:2px}
#ppt .ptr{display:flex;gap:2px;min-width:0}
#ppt .ptr button{flex:none}
#ppt .ptr button.on{background:#81171c;color:#b6b6b6;cursor:default}
#ppt .ptr button.on:hover{background:#81171c}
#ppt .ptr .s{display:none}#ppt .ptr b{font-weight:400}
/* the article: same layout as a service */
.dvl.k-paper{--h:clamp(220px,calc(var(--vh,800px) - 445px),400px)}
.k-paper .dvt{max-width:560px}
#smain .dvs .dvv1 .dvn{margin-bottom:8px}
#smain .dvs .dvv1 .dvg .dvn{margin-bottom:4px}
#smain .dvs .dvv1 .dvg>.dvn:not(:has(a)){opacity:.68}   /* a small title inside a section reads under the section title */
@media (max-width:1023px){
  .pp{margin:0;padding:110px 12px 110px}
  #smain .pph{margin:0 0 40px;font-size:30px;line-height:32px;letter-spacing:-1.2px}
  #smain .pph .lm,#smain .pph .lm:first-child{height:auto;white-space:normal;padding-left:0}
  #smain .pph small{margin:0 8px;padding-top:4px;font-size:10px}
  .ppg{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 10px}
  #smain .ppn{font-size:14px;line-height:16px}
  #smain .ppm{flex-direction:column;gap:0}
  #ppt .ptr .f{display:none}#ppt .ptr .s{display:inline}#ppt button{padding:0 12px}
  .dvl.k-paper{--h:min(120vw,520px)}
}
@media (max-width:520px){ .ppg{grid-template-columns:minmax(0,1fr)} }
/* ============================ About ============================ */
.abt-pg,.abt-pg #wrap,.abt-pg #smain{background:#81171c}
.abt-pg #smain,.abt-pg #smain a{color:#b6b6b6}
.abt-pg #header,.abt-pg #header.compact,.abt-pg #header.dark{color:#b6b6b6}
.abt-pg #header::before,.abt-pg #header.compact::before{background:#81171c!important}
.ab{position:relative;margin:0 calc(-1*var(--ox,0px));padding:0 11px 90px;color:#b6b6b6}
#smain .ab .pph{margin:0;font:400 54px/52.92px 'Lusitana',Georgia,serif;letter-spacing:-2.16px;text-transform:uppercase;font-weight:400}
#smain .ab .pph .lm{height:52.92px;white-space:nowrap;padding-left:0}
#smain .ab .pph .lm:first-child{padding-left:var(--ind,0px)}
#smain .ab .pph small{display:inline-block;vertical-align:top;margin:0 22px;font:400 12px/.98 'Lusitana',Georgia,serif;letter-spacing:-.48px;padding-top:20.58px}
#smain .ab .pph .li{transition-delay:calc(.15s + var(--l,0)*90ms)}
#smain .abk{margin:0 0 22px;font:400 12px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;opacity:.75}
.abs{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:13px;margin-top:220px}
.abcp,.abtc{margin-top:170px}
.abh0+.abtc{margin-top:96px}
.abs>.abk,.abs>.pph{grid-column:1/-1}
.abc7{grid-column:7/-1}
.abs .abc7{margin-top:46px}
#smain .abl{margin:0 0 20px;max-width:600px;white-space:normal;font:400 22px/26px 'Lusitana',Georgia,serif;letter-spacing:-.015em}
/* hero */
.abh0{position:relative;min-height:calc(var(--vh,800px) - 0px);padding-top:196px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:18px}
.abh0{padding-top:0}
.abtx{position:absolute;left:0;top:259px;width:372px}
#smain .abin{margin:0;white-space:normal;text-align:justify;text-align-last:left;font:400 12px/16px 'Lusitana',Georgia,serif;letter-spacing:-.12px;color:inherit}
.abfl{float:left;width:99px;height:112px;shape-outside:polygon(0 32px,100% 32px,100% 100%,0 100%)}
html[lang="it"] .abfl{height:128px}
.abpl2 a{color:inherit;text-decoration:none;transition:opacity .2s}.abpl2 a:hover{opacity:.6}
/* (30.10) Shopify Plus Agency: the About hero, the client rows of the home and pieces of the case histories, on grey */
.spa2.abt-pg,.spa2 #wrap,.spa2 #smain{background:#b6b6b6}
.spa2 #smain,.spa2 #smain a,.spa2 .ab{color:#81171c}
.spa2 #header,.spa2 #header.compact,.spa2 #header.dark{color:#81171c}
.spa2 #header::before,.spa2 #header.compact::before{background:#b6b6b6!important}
.spa2 .abrv .abrec{display:none}
.spa2 .abrw li{border-bottom-color:rgba(129,23,28,.22)}
.spa2 .mx circle{stroke:#81171c}
.spa2 #growth{height:330px;margin:120px -11px 0;background:#b6b6b6;color:#81171c}
.spa2 #growth .c a{text-decoration:none}.spa2 #growth .c a:hover{opacity:.6}
.spa2 #smain .mbtn{color:#b6b6b6}
.spa2 #growth .li{translate:0 0}
.spa2 .spc .sg{margin-left:-2px}
.spa2 .abtc{margin-top:200px}   /* (30.10) the indent runs to the last line of the longer intro, ©EST 2008 sits in its corner */
/* (03.11) Shopify Plus Agency in eleven sections: the calls to action under a chapter, Nucleo on its own bordeaux band,
   the Unified Commerce scheme (Shopify in the middle, the four ends around it), the three columns of Continuous Evolution */
.spa2 .abtc{margin-top:120px}
.spa2 .spcta{margin-top:var(--mt);text-align:center}
/* Fashion Commerce: the paragraph beside the film is set like the opening one (justified, the notch under the first two lines) */
.spa2 .spab{position:sticky;top:52px;width:372px;text-align:left}
.spa2 .spab .abin,.spa2 .spabl{opacity:0;transition:opacity .9s cubic-bezier(.2,.75,.15,1)}.spa2 .spab.rv .abin,.spa2 .spab.rv .spabl{opacity:1}
.spa2 .spab .abfl{height:96px}
.spa2 .spab .spabl{clear:both;margin:16px 0 0 99px;font:400 12px/16px 'Lusitana',Georgia,serif;letter-spacing:-.12px;transition-delay:.2s}.spa2 .spabl span{display:block}
.spa2 .spcta .mbtn{border:0;cursor:pointer}
.spa2 .spuc{position:relative;margin:var(--mt) auto 0;width:1422px;aspect-ratio:1422/520}
.spa2 .spuc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.spa2 .spuc svg.spucm{display:none}   /* (03.11) the phone's own scheme: square, the circle as large as the screen allows */
.spa2 .spuc circle,.spa2 .spuc path{fill:none;stroke:#81171c;stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1)}
.spa2 .spuc circle.o{transform:rotate(-90deg);transform-origin:50% 50%}
.spa2 .spuc rect{fill:#81171c;opacity:0;transition:opacity .4s 1.2s}
.spa2 .spuc.rv circle,.spa2 .spuc.rv path{stroke-dashoffset:0}.spa2 .spuc.rv rect{opacity:1}
.spa2 .spuc p{position:absolute;margin:0;font:400 12px/14px 'Lusitana',Georgia,serif;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.spa2 .spuc svg.spucl{position:absolute;inset:auto;left:50%;top:50%;width:7.75%;height:auto;aspect-ratio:612/192;translate:-50% -50%;overflow:visible;opacity:0;transition:opacity .8s .9s}
.spa2 .spucl path{fill:#81171c}.spa2 .spucl path.k{fill:#b6b6b6}.spa2 .spuc.rv svg.spucl{opacity:1}
.spa2 .spucn.l{left:12.03%;top:53.5%;translate:-50% 0}.spa2 .spucn.r{left:87.97%;top:53.5%;translate:-50% 0}
.spa2 .spucn.t{left:50%;bottom:calc(98.85% + 8px);translate:-50% 0}.spa2 .spucn.b{left:50%;top:calc(98.85% + 8px);translate:-50% 0}
.spa2 .spuc .li{transition-delay:calc(.6s + var(--l,0)*120ms)}
.spa2 .sp3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:13px;margin-top:var(--mt)}
.spa2 .sp3c{border-top:1px solid rgba(129,23,28,.22);padding-top:14px}
.spa2 .sp3n{margin:0;font:400 12px/16px 'DM Mono',ui-monospace,Menlo,monospace;letter-spacing:-.48px}
.spa2 .sp3t{margin:56px 0 14px;font:400 23px/24px 'Lusitana',Georgia,serif;letter-spacing:0;text-transform:uppercase;font-weight:400}
.spa2 .sp3d{margin:0;max-width:330px;font:400 12px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;white-space:normal}
.spa2 .sp3 .li{transition-delay:calc(var(--l,0)*90ms)}
.spa2 .sp3d .lm,.spa2 .sp3d .li{display:block;white-space:normal}
.spa2 .abxcp{position:absolute;left:11px;top:calc(var(--vh,800px)*.1 + 30px);width:330px;margin:0;font:400 12px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;white-space:normal}
.spa2 #growth{margin-top:160px}
/* App Ecosystem: the lists start where the picture starts and follow it */
.spa2 #apps .slast .sinfo{justify-content:flex-start;padding-top:11px;box-sizing:border-box}
.spa2 .spst{position:sticky;top:52px}.spa2 .spst .sig:first-child{margin-top:0}
/* Selected Projects: five rows as in the list view of Case Studies */
.spa2 .spls{position:relative;margin:var(--mt) calc(-1*var(--ox,0px)) 0}
.spa2 .spls .lr{position:relative;display:block;height:130px;color:inherit;text-decoration:none;transition:opacity .5s cubic-bezier(.2,.75,.15,1)}
.spa2 .spls .ln{position:absolute;left:calc(12px + var(--ox,0px));top:1px;margin:0;font:400 20px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.8px;white-space:nowrap}
.spa2 .spls .lres{position:absolute;left:calc(287px + var(--ox,0px));top:0;width:270px;font:400 12px/13px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.24px}
.spa2 .spls .lsv{position:absolute;left:calc(579px + var(--ox,0px));top:0;width:260px;font:400 12px/13px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.24px}
.spa2 .spls .lres .lm,.spa2 .spls .lsv .lm{display:block}
.spa2 .spls .lm{padding-bottom:.08em;margin-bottom:-.08em}
.spa2 .spls .li{transition:translate .7s cubic-bezier(.2,.75,.15,1);transition-delay:calc(.06s + var(--r,0)*40ms + var(--l,0)*35ms)}
.spa2 .spls.rv .li{translate:0 0}
.spa2 .spls .lg{position:absolute;left:calc(860px + var(--ox,0px));top:-11px;display:flex;gap:9px}
.spa2 .spls .lg figure{margin:0;width:102px}
.spa2 .spls .lg figcaption{height:11px;font:400 9px/1 'DM Mono',ui-monospace,monospace;letter-spacing:-.27px;opacity:0;transition:opacity .5s cubic-bezier(.2,.75,.15,1);transition-delay:calc(.15s + var(--r,0)*40ms + var(--g,0)*45ms)}
.spa2 .spls .lg img{display:block;width:102px;height:102px;object-fit:cover;clip-path:inset(100% 0 0 0);transition:clip-path .8s cubic-bezier(1,0,0,1);transition-delay:calc(.1s + var(--r,0)*40ms + var(--g,0)*45ms)}
.spa2 .spls.rv .lg img{clip-path:inset(0 0 0 0)}.spa2 .spls.rv .lg figcaption{opacity:1}
.spa2 .spls:hover .lr:not(:hover){opacity:.2}
.abest{position:absolute;left:0;bottom:0;font:400 12px/16px 'Lusitana',Georgia,serif;letter-spacing:-.12px;text-transform:uppercase}
.abrl{position:absolute;left:569px;top:256px;width:280px;text-decoration:none;color:inherit}
.abrl video{display:block;width:280px;height:165px;object-fit:cover;background:rgba(236,236,236,.14)}
.abpl{display:block;margin-top:14px;text-align:center;font:400 11px/14px 'DM Mono',ui-monospace,Menlo,monospace;letter-spacing:-.44px;text-transform:uppercase}
.abgp{position:absolute;left:0;top:0;width:100%}
.abgl{position:absolute;left:1091px;top:259px;font:400 12px/16px 'Lusitana',Georgia,serif;text-transform:uppercase}
.abgn{position:absolute;left:1329px;top:261px;font:400 11px/13px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.44px}

/* hero entrance: words slide up out of masks; the plate comes through in 3px cells */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:1px 0;margin:-1px 0}
.w i{display:inline-block;font-style:normal;transition:translate 1.05s cubic-bezier(.2,.75,.15,1) calc(var(--b,0ms) + var(--d,0)*16ms)}
.abjs .abh0 .w i{translate:0 118%}
.abjs .abh0.go .w i{translate:0 0}
.abtx{--b:200ms}.abest{--b:720ms}.abpl{--b:1500ms}.abgl{--b:620ms}.abgn{--b:760ms}
.abgn .w{display:block}.abgn a.w{color:inherit;text-decoration:none;cursor:pointer}
.abrv{position:relative;display:block;width:280px;height:165px;overflow:hidden}
.abrv canvas{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);image-rendering:pixelated;pointer-events:none;display:none}
.abjs .abrv canvas{display:block;background:#81171c;z-index:3}
html.abjs body.spa2 .abrv canvas{background:#b6b6b6}   /* (03.11) before the reveal the box is the ground colour, never a red block */   /* above the dark veil and the REC line: they arrive with the film */
/* manifesto film */
.abfw{grid-column:1/-1;margin-bottom:40px}.abfx{grid-column:1/4;margin:46px 0 0}
.abfilm{position:relative;display:block;aspect-ratio:2.35/1;overflow:hidden;background:rgba(0,0,0,.18);text-decoration:none}
.abfilm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.4s cubic-bezier(.2,.75,.15,1)}
.abfilm:hover img{scale:1.03}
.abfp{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:10px;height:38px;padding:0 16px 0 14px;border-radius:2px;background:#ececec;color:#81171c;font:400 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.36px}
.abfp i{width:0;height:0;border-left:8px solid #81171c;border-top:5px solid transparent;border-bottom:5px solid transparent}
#smain .abfilm .abfp{color:#81171c}
/* section headers: set at the size of the lists below */
.abhd{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:13px;margin-bottom:22px;font:400 15px/17px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
.abhd span:first-child{grid-column:1/5}.abhd span:last-child{grid-column:5/-1}
.abtc>.abtw{margin-top:0!important}.abcp .abfx,.abcp .abcc{margin-top:0!important}
/* capabilities */
.abfg{margin:0;aspect-ratio:4/5;overflow:hidden;background:rgba(0,0,0,.18)}
.abfg img{width:100%;height:100%;object-fit:cover;display:block}
.abcc{grid-column:5/-1;margin-top:46px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 13px;align-content:start}
.abg3{margin:0;font:400 15px/17px 'Lusitana',Georgia,serif;letter-spacing:-.01em;font-weight:400}
.abg3 sup{font:400 10px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;margin-left:4px;vertical-align:top;opacity:.7}
.abul{list-style:none;margin:14px 0 0;padding:0}
.abul li{padding:3px 0 2px;border-bottom:1px solid rgba(182,182,182,.22);font:400 12px/16px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
/* team, awards, press */
.abtc>.abtw{grid-column:1/-1;margin-top:46px}
.abtm{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:13px;padding:22px 0 46px;border-top:1px solid rgba(182,182,182,.28)}
.abtl{grid-column:1/5;display:flex;align-items:baseline;gap:18px}
.abtm>.abg3{grid-column:1/5}
.abn{font:400 12px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;opacity:.7}
.abct{margin-left:auto;padding-right:24px;font:400 12px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;opacity:.7}
.abrw{grid-column:5/-1;list-style:none;margin:0;padding:0}
.abrw li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) auto;gap:13px;padding:4px 0 3px;border-bottom:1px solid rgba(182,182,182,.18)}
.abrw li:first-child{padding-top:0}
.abnm{font:400 15px/17px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
.abro{font:400 12px/17px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;opacity:.75}
.abdt{font:400 12px/17px 'Helvetica Neue',Helvetica,Arial,sans-serif;opacity:.6}
.abpr .abrw li{grid-template-columns:minmax(0,2fr) minmax(0,6fr) minmax(0,2fr)}
.abpr .abnm,.abpp .abaw .abnm{white-space:normal}
.abpr .abro{font:400 15px/17px 'Lusitana',Georgia,serif;opacity:1;white-space:normal}
.abpp .abaw .abrw li{grid-template-columns:1fr}
/* team (desktop): department titles on the left, the count under the menu's Nucleo column, the names / roles in 11px Lusitana from the services column;
   one portrait sits sticky at the right (it is always on: Francesco first; the others come through it in 3px cells) */
@media (min-width:1024px){
  .abte{display:block;position:relative;border-top:0;padding:0 0 112px}
  .abte .abn{display:none}
  .abte .abtl{position:absolute;left:0;top:0;width:calc(var(--ox,0px) + 544px);display:block}
  .abte .abg3{font:400 23px/24px 'Lusitana',Georgia,serif;letter-spacing:0;text-transform:uppercase;margin-top:1px;max-width:430px;white-space:normal}
  .abte .abct{position:absolute;left:calc(var(--ox,0px) + 457px);top:4px;margin:0;padding:0;font:400 12px/16px 'DM Mono',ui-monospace,Menlo,monospace;letter-spacing:-.48px;text-transform:uppercase;opacity:1}
  #smain .abte .abrw{margin-left:calc(var(--ox,0px) + 582px)}
  .abte .abrw li{grid-template-columns:266px 480px minmax(0,1fr);gap:0;padding:3px 0 1px}
  .abte .abrw li:first-child{padding-top:3px}
  .abte .abyr{font:400 12px/15px 'Lusitana',Georgia,serif;letter-spacing:0}
  .abte .abnm,.abte .abro{font:400 12px/15px 'Lusitana',Georgia,serif;letter-spacing:0;opacity:1}
  .abtt{position:relative}
  .abtt.hov .abrw li:not(.on){opacity:.32}
  .abpw{position:absolute;left:calc(var(--ox,0px) + 1090px);top:0;bottom:0;width:153px;z-index:6;pointer-events:none}
  .abpop{position:sticky;top:37px;width:153px;height:210px;background:rgba(236,236,236,.1);opacity:0}
  .abpop.live{opacity:1}
  .abpop canvas{display:block;width:100%;height:100%}
}
@media (max-width:1023px){.abpop,.abyr{display:none}}
/* join */
.abjn{margin-bottom:0}
.abjt{grid-column:1/-1;display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:inherit;width:max-content}
.abjt .pph{pointer-events:none}.abjr{font:400 54px/52.92px 'Lusitana',Georgia,serif;transition:translate .7s cubic-bezier(.2,.75,.15,1)}
.abjt:hover .abjr{translate:6px -6px}
.abf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:13px;margin-top:180px;padding-top:22px;border-top:1px solid rgba(182,182,182,.28);font:400 12px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em}
#smain .abf p{margin:0;white-space:normal}.abf a{text-decoration:none}.abf a:hover{text-decoration:underline}
/* entrance */
.abjs .abj{opacity:0;translate:0 16px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.75,.15,1)}
.abjs .abj.in{opacity:1;translate:0 0}
.abjs .abfw.abj{opacity:1;translate:0 0}.abjs .abfilm,.abjs .abfg{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.6,0,.2,1)}
.abjs .abfw.in .abfilm,.abjs .abfw.in .abfg{clip-path:inset(0)}
@media (max-width:1023px){
  .ab{margin:0;padding:0 12px 60px}
  #smain .ab .pph{font-size:30px;line-height:32px;letter-spacing:-1.2px}
  #smain .ab .pph .lm,#smain .ab .pph .lm:first-child{height:auto;white-space:normal;padding-left:0}
  #smain .ab .pph small{margin:0 8px;padding-top:4px;font-size:10px}
  .abs{display:block;margin-top:110px}
  .abh0{min-height:0;padding-top:150px;padding-bottom:0;display:block}
  .abtx{position:relative;top:auto;width:auto;margin:0 0 28px}#smain .abin{font-size:14px;line-height:18px;letter-spacing:-.01em;text-align:left}.abfl{display:none}.abest{position:static;display:block;margin-top:10px;font-size:12px}
  .abrl{position:static;display:block;width:auto;margin:0 0 28px}.abrv{width:100%;height:auto;aspect-ratio:16/9}.abrl video{width:100%;height:100%}
  .abgp{position:static;display:flex;gap:40px;margin:0 0 40px;width:auto}.abgl,.abgn{position:static}
  .abl{font-size:18px;line-height:22px}
  .abfx{margin:30px 0}.abcc{display:block;margin-top:0}.abcg{margin-bottom:34px}
  .abhd{display:block}.abhd span{display:block}.abtm{display:block;padding:18px 0 34px}.abtl{margin-bottom:16px}.abtm>.abg3{margin-bottom:14px}
  .abrw li,.abpr .abrw li{grid-template-columns:1fr;gap:0;padding:6px 0}
  .abf{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 13px;margin-top:90px}
  .abjr{font-size:30px;line-height:32px}
}

/* ============ growth: WE GROW when YOU GROW — a pinned scene, the sphere completes as the services go by ============ */
.abgr{position:relative;margin-top:140px;margin-left:-11px;margin-right:-11px}
.abgst{position:sticky;top:0;height:var(--vh,800px);overflow:hidden}
.abgst canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
#smain .abgh{position:absolute;left:0;right:0;top:0;margin:0;text-align:center;white-space:nowrap;font:400 54px/52.92px 'Lusitana',Georgia,serif;letter-spacing:-2.16px;text-transform:uppercase;font-weight:400;will-change:transform}
#smain .abgh small{display:inline-block;vertical-align:top;margin:0 22px;font:400 12px/.98 'Lusitana',Georgia,serif;letter-spacing:-.48px;padding-top:20.58px}
.abgb{position:relative;z-index:2;margin-top:calc(var(--vh,800px)*-1);pointer-events:none}
.abgi{height:calc(var(--vh,800px)*.45)}
.abgt{position:relative;height:calc(var(--vh,800px)*1.2)}
.abge{height:calc(var(--vh,800px)*1.0)}
.abjs .abgh .w i{translate:0 118%;transition-duration:1.15s}
.abjs .abgh.in .w i{translate:0 0}
.abgh .w{padding:0 .04em}
.abgh small .w{padding:.25em .08em;margin:-.25em 0}
/* the service texts scroll with the page at one single speed: title left, description right */
#smain .abgtt{position:absolute;left:calc(var(--ox,0px) + 11px);top:calc(var(--vh,800px)*.6 - 23px);margin:0;white-space:normal;max-width:460px;font:400 42px/42px 'Lusitana',Georgia,serif;letter-spacing:-1.68px;text-transform:uppercase}
.abgtt .w{padding:.12em .05em;margin:-.12em -.05em}
.abgtt .w{display:block;width:max-content}   /* (03.11) one word per line: every area always on two lines, AI Unit too */
#smain .abgdd{position:absolute;left:calc(var(--ox,0px) + 1130px);top:calc(var(--vh,800px)*.6 - 20px);width:270px;margin:0;white-space:normal;text-transform:none;font:400 12px/15px 'Lusitana',Georgia,serif;text-align:justify;text-align-last:left;letter-spacing:0}
.abjs .abgt .w i{translate:0 118%}
.abjs .abgt.in .w i{translate:0 0}
/* (30.10) the proof under each area: three real results from the case histories, in cascade with the title's curve */
#smain .abgk{position:absolute;left:calc(var(--ox,0px) + 1130px);top:calc(var(--vh,800px)*.6 + 96px);width:270px;margin:0;padding:0;list-style:none}
#smain .abgk li{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:8px 0 7px}
#smain .abgk b{grid-row:1/3;font:400 30px/30px 'Lusitana',Georgia,serif;letter-spacing:-1.2px;font-weight:400}
#smain .abgk span{font:400 12px/14px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
#smain .abgk i{font:400 10px/13px 'DM Mono',ui-monospace,Menlo,monospace;font-style:normal;letter-spacing:-.2px;text-transform:uppercase;opacity:.7}
.abjs .abgt .abgk li{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.2,.75,.15,1) calc(220ms + var(--k)*120ms)}
.abjs .abgt.in .abgk li{clip-path:inset(0)}
@media (max-width:1023px){ #smain .abgk{display:none} }
@media (max-width:1023px){
  .abgr{margin-top:90px;margin-left:-12px;margin-right:-12px}
  #smain .abgh{font-size:30px;line-height:32px;letter-spacing:-1.2px}
  #smain .abgh small{margin:0 8px;font-size:10px;padding-top:4px}
  #smain .abgtt{left:16px;top:calc(var(--vh,800px)*.7 - 28px);font-size:30px;line-height:32px;letter-spacing:-1.2px}
  #smain .abgdd{left:16px;width:calc(100% - 32px);max-width:360px;top:calc(var(--vh,800px)*.7 + 14px)}
}

/* ============ Awards / press / partners scene (About, right after the globe) ============ */
.abpa{position:relative;display:grid;grid-template-columns:568px 290px 340px minmax(0,1fr);grid-template-rows:auto auto auto;padding:46px 0 50px;margin-top:0}
.abpa .abpi{grid-column:1;grid-row:1;max-width:380px;font:400 12px/16px 'Lusitana',Georgia,serif;letter-spacing:-.01em;text-align:justify;hyphens:auto}
.abpa .abpi small{display:block;margin-top:22px;font:inherit;text-align:left}
.abpa .abpc{grid-column:2/-1;grid-row:1}
.abpa .abpg+.abpg{margin-top:46px}
.abpa .abpt{margin:0 0 9px;font:400 10px/13px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;opacity:.6;font-weight:400}
.abpa .abpr2,.abpa .abpl2 li{display:grid;grid-template-columns:290px 340px minmax(0,1fr);column-gap:0}
.abpa .abpr2{font:400 10px/13px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;opacity:.6;padding-bottom:7px;border-bottom:1px solid rgba(182,182,182,.28)}
.abpa .abpl2{list-style:none;margin:0;padding:0}
.abpa .abpl2 li{font:400 12px/15px 'Lusitana',Georgia,serif;letter-spacing:-.01em;padding:4px 0 3px;border-bottom:1px solid rgba(182,182,182,.14)}
.abpa .abpl2 li span:nth-child(2){padding-right:30px}
.abpa .abpbig{grid-column:1/-1;grid-row:2;margin:0;padding-top:120px!important;font:400 64px/62px 'Lusitana',Georgia,serif;letter-spacing:-.035em;text-transform:uppercase;text-indent:568px}
.abpa .abpbig s{text-decoration:none;font:400 15px/1 'Lusitana',Georgia,serif;letter-spacing:0;margin:0 14px;vertical-align:middle}
.abpa .abpp{grid-column:1/-1;grid-row:3;margin-top:96px}
.abpa .abpp ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:13px}
.abpa .abpp li{display:flex;align-items:center;height:104px;border-top:1px solid rgba(182,182,182,.28)}
.abpa .abpp img{display:block;width:calc(var(--w)*.72px);height:calc(var(--h)*.72px);max-width:90%;object-fit:contain;filter:brightness(0) invert(.72)}
@media (max-width:1023px){
  .abpa{display:block;padding:30px 0 20px}
  .abpa .abpi{max-width:none;text-align:left}.abpa .abpc{margin-top:34px}
  .abpa .abpr2{display:none}
  .abpa .abpl2 li{grid-template-columns:124px 1fr;row-gap:0;padding:6px 0}
  .abpa .abpl2 li span:nth-child(1){grid-row:1/3}.abpa .abpl2 li span:nth-child(2){padding:0}
  .abpa .abpl2 li span:nth-child(3){opacity:.6;grid-column:2}
  .abpa .abpbig{text-indent:0;padding-top:72px!important;font-size:36px;line-height:36px}
  .abpa .abpp{margin-top:56px}.abpa .abpp ul{grid-template-columns:repeat(2,minmax(0,1fr))}.abpa .abpp li{display:flex;align-items:center;height:104px;border-top:1px solid rgba(182,182,182,.28)}
}

/* ---- reveal: words / cells slide up out of a mask, in cascade; the logos dissolve in cell by cell ---- */
.abpa .rw{display:block;overflow:hidden;padding:.12em .02em;margin:-.12em -.02em}
.abpa .rw>i{display:block;font-style:normal;translate:0 118%;transition:translate 1s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--d,0)*32ms + var(--c,0)*90ms)}
.abpa .abpi .rw,.abpa .abpbig .rw{display:inline-block;vertical-align:top}
.abpa .abpbig .rw{padding:.12em .04em;margin:-.12em -.04em;text-indent:0}
.abpa .abpi small .rw{display:inline-block}
.abpa .abpl2 li,.abpa .abpr2{position:relative}
.abpa .abpl2 li::after,.abpa .abpr2::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(182,182,182,.18);transform-origin:0 50%;scale:0 1;transition:scale 1.1s cubic-bezier(.2,.75,.15,1)}
.abpa .abpl2 li{border-bottom:0}.abpa .abpr2{border-bottom:0}
.abpa .abpr2::after{background:rgba(182,182,182,.28)}
.abpa [data-rv].go .rw>i{translate:0 0}
.abpa [data-rv].go::after{scale:1 1}
.abpa .abpp li{position:relative}
.abpa .abpp canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.abpa .abpbig s .rw{vertical-align:middle;padding:.3em .1em;margin:-.3em -.1em;text-indent:0}

/* ============ the office cameras (About hero, the box in the middle): REC overlay, time, three cams under the picture ============ */
.abrl.abcamw{cursor:default}
.abrv.abcam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;transition:opacity .18s ease}
.abrv.abcam.sw video{opacity:0}
.abrv.abcam::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 75%,rgba(0,0,0,.25))}
.abrec{position:absolute;left:0;top:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:8px 9px;color:#ececec;font:400 10px/12px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.abrec .abrc{display:inline-flex;align-items:center;gap:6px}
.abrec .abrc i{display:block;width:7px;height:7px;border-radius:50%;background:#e5251e;animation:abrb 1.4s steps(1,end) infinite}
.abrec time{font-variant-numeric:tabular-nums}
@keyframes abrb{0%,55%{opacity:1}56%,100%{opacity:.15}}
.abpl.abcams{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}
.abcams .abcm:nth-child(1){justify-self:start}.abcams .abcm:nth-child(2){justify-self:center}.abcams .abcm:nth-child(3){justify-self:end}
.abcm{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;position:relative;opacity:.5;transition:opacity .35s ease}
.abcm:hover,.abcm.on{opacity:1}
.abcm:focus-visible{outline:1px solid #ececec;outline-offset:3px}
@media (max-width:1023px){ .abrec{padding:10px 12px;font-size:11px} }

/* ============ hero: Contact Us / Start a project / Join the team, under the Group row ============ */
.abgc1{top:313px;--b:900ms}
.abgc2{top:315px;--b:1020ms}
.abcl{display:block;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;text-align:left}
.abcl:hover .w i,.abcl:focus-visible .w i{text-decoration:underline;text-underline-offset:2px}
.abcl:focus-visible{outline:1px solid currentColor;outline-offset:3px}
@media (max-width:1023px){ .abgp{flex-wrap:wrap;row-gap:18px}.abgc1,.abgc2{position:static} }


/* ============ contact scene: a small picture grows to fill the screen, then the form rises from below ============ */
.abxc{position:relative;height:calc(var(--vh,800px)*2.8);margin-top:140px;margin-left:-11px;margin-right:-11px}
.abxcs{position:sticky;top:0;height:var(--vh,800px);overflow:hidden}
.abxci{position:absolute;left:11px;top:calc(var(--vh,800px)*.1);margin:0;font:400 12px/16px 'Lusitana',Georgia,serif;text-transform:uppercase}
#smain .abxch{position:absolute;left:11px;bottom:34px;margin:0;font:400 64px/62px 'Lusitana',Georgia,serif;letter-spacing:-.035em;text-transform:uppercase;will-change:transform,opacity}
.abxcm{position:absolute;left:540px;top:calc(var(--vh,800px)*.5 - 220px);width:360px;height:440px;overflow:hidden;background:#5d1014}
.abxcm video,.abxcm img{position:absolute;left:0;width:100%;top:-9%;height:118%;object-fit:cover;display:block;transform-origin:50% 50%;will-change:transform}
.abxcm{will-change:clip-path}
.abxcm i{position:absolute;inset:0;background:#000;opacity:var(--ov,0);pointer-events:none}
.abxf{position:absolute;left:50%;top:50%;width:355px;min-height:560px;background:#b6b6b6;color:#81171c;box-shadow:0 30px 80px rgba(0,0,0,.35);will-change:transform;visibility:hidden;overflow:hidden}
.abxf.vis{visibility:visible}
.abxft{display:flex;height:36px;background:#d9d9d9}
.abxft button{flex:1;appearance:none;background:none;border:0;padding:0 20px;text-align:left;font:400 12px/36px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.3px;color:rgba(129,23,28,.5);cursor:pointer;transition:color .4s ease}
.abxft button.on,.abxft button:hover{color:#81171c}
.abxfb{padding:14px 6px 18px}
.abxfh{margin:0 0 18px 14px;font:400 24px/.98 Helvetica,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.96px;overflow:hidden}
.abxfh span{display:block;transition:translate .55s cubic-bezier(.2,.75,.15,1),opacity .4s ease}
.abxfh.sw span{translate:0 40%;opacity:0}
.abxff{position:relative;margin-bottom:14px;border-bottom:1px solid rgba(129,23,28,.3);transition:border-color .3s}
.abxff:focus-within{border-bottom-color:#81171c}
.abxff.err{border-bottom:2px solid #81171c}
.abxff.hid,.abxfm.hid{display:none}
.abxff label.l{display:block;margin:0 0 3px 8px;font:400 10px/.98 'DM Mono',ui-monospace,'SF Mono',Menlo,monospace}
.abxff input,.abxff textarea,.abxff select{display:block;width:100%;box-sizing:border-box;height:24px;padding:4px 8px 6px;border:0;background:transparent;font:400 12px/14px 'Lusitana',Georgia,serif;color:#81171c;outline:none;border-radius:0}
.abxff textarea{height:62px;resize:none}
.abxff ::placeholder{color:rgba(129,23,28,.55)}
.abxff select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2381171c' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 9px center}
.abxff select:invalid{color:rgba(129,23,28,.55)}.abxff select option{color:#2a2a2a}
.abxff .cf{display:flex;align-items:center;justify-content:space-between;gap:10px;height:24px;padding:4px 8px 6px;box-sizing:border-box;font:400 12px/14px 'Lusitana',Georgia,serif;cursor:pointer;white-space:nowrap;overflow:hidden}
.abxff .cf input{position:absolute;opacity:0;width:0;height:0}
.abxff .cf span{overflow:hidden;text-overflow:ellipsis;color:rgba(129,23,28,.55)}.abxff .cf.has span{color:#81171c}
.abxfs{display:flex;justify-content:space-between;align-items:flex-start;width:100%;height:48px;margin-top:22px;padding:5px 8px 0;box-sizing:border-box;background:#81171c;border:0;color:#b6b6b6;font:400 12px/.98 'Helvetica Neue',Helvetica,Arial,sans-serif;cursor:pointer;border-radius:0}
.abxfc{display:flex;gap:7px;align-items:flex-start;margin:14px 7px 0;cursor:pointer;font:400 10px/.98 'Helvetica Neue',Helvetica,Arial,sans-serif}
.abxfc input{position:absolute;opacity:0;width:0;height:0}
.abxfc i{flex:0 0 10px;width:10px;height:10px;background:#d9d9d9;position:relative;margin-top:1px}
.abxfc i::after{content:"";position:absolute;left:3px;top:3px;width:4px;height:4px;background:#81171c;opacity:0}
.abxfc input:checked+i::after{opacity:1}
.abxfc span{display:block;margin-left:3px}
.abxfst{min-height:12px;margin:8px 8px 0;font:400 10px/1.15 'Helvetica Neue',Helvetica,Arial,sans-serif}
/* the fields come in one after the other once the card has landed */
.abxf .abxfb>*{opacity:0;translate:0 8px;transition:opacity .45s cubic-bezier(.2,.75,.15,1),translate .6s cubic-bezier(.2,.75,.15,1)}
.abxf.in .abxfb>*{opacity:1;translate:0 0;transition-delay:calc(.1s + var(--i,0)*55ms)}
html.abxc-on .abt-pg #header::before,html.abxc-on #header::before{background:transparent!important}
html.abxc-on body #header,html.abxc-on body #header.compact,html.abxc-on body #header.dark{color:#b6b6b6!important}   /* (03.11) over the contact film the header is grey, on About and on Shopify Plus Agency */
@media (max-width:1023px){
  .abxc{height:calc(var(--vh,800px)*2.6);margin-top:90px;margin-left:-12px;margin-right:-12px}
  .abxcs{--vh:100svh}
  .abxci{left:12px}#smain .abxch{left:12px;bottom:24px;font-size:36px;line-height:36px}
  .abxcm{left:calc(50% - 90px);top:calc(var(--vh,800px)*.5 - 130px);width:180px;height:260px}
  .abxf{width:calc(100% - 64px);max-width:340px;min-height:0}
}
/* ---- The Paper, article pages: lists inside the text, links to the other articles, pictures shown whole */
#smain .dv .dvv1 .dvu.dvb{margin:0 0 16px}
#smain .dv .dvv1 .dvu.dvb li{padding:1px 0 2px;line-height:16px;min-height:19px}
#smain .dv .dvg .dvn a{color:inherit;text-decoration:none}
#smain .dv .dvg .dvn a:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.dvf img[data-fit="c"]{object-fit:contain}
/* (29.10) the rules of the services page draw themselves from the left, one after the other (--r set by site.js) */
@media (min-width:1024px){
.alx li{border-bottom-color:transparent!important;background:linear-gradient(rgba(129,23,28,.18),rgba(129,23,28,.18)) 0 100%/0% 1px no-repeat;transition:background-size 1.1s cubic-bezier(.6,0,.2,1) calc(.35s + var(--r,0)*55ms)}
.apin.rdy .aint:not(.out) .alx li{background-size:100% 1px}
.aint.out .alx li{transition-duration:.45s;transition-delay:0s}
.aoc{--lc:rgba(129,23,28,.4);border-bottom-color:transparent!important;background:linear-gradient(var(--lc),var(--lc)) 0 100%/0% 1px no-repeat;transition:background-size 1.1s cubic-bezier(.6,0,.2,1) calc(.1s + var(--r,0)*45ms),opacity .3s}
.aox.in .aoc{background-size:100% 1px}
.aox.hv .aoc.hit{--lc:#81171c}
}