/* ============================================================================================
   Made in Evolve — case study, Frame 118 (SOTF). Loaded after main.css + responsive.css + case.css.
   ============================================================================================ */
#wrap.dim #smain{filter:blur(12px)}
#smain{position:relative;z-index:1;width:1440px;margin:0 auto;font:400 12px/16px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
#smain p,#smain h1,#smain h2,#smain ul{margin:0;padding:0;font-weight:400;list-style:none}
#smain .lm{white-space:nowrap}
/* ---- the page turns bordeaux at KPI and Results, like the home between sections */
body.csp{transition:background-color .9s cubic-bezier(.6,0,.2,1)}
body.csp.bd{background:#81171c}
#header.pj{transition:color .9s cubic-bezier(.6,0,.2,1)}
#header.pj::before{transition:clip-path .4s cubic-bezier(1,0,0,1),background-color .9s cubic-bezier(.6,0,.2,1)}
body.bd #header.pj,body.bd #header.pj.compact{color:#b6b6b6}
body.bd #header.pj::before{background:#81171c}
/* ---- the head of the page: name, portrait, year and platform, services */
#shero{position:relative;height:calc(var(--vh,800px) + 896px)}   /* the first screen is exactly one screen tall */
.snm{position:absolute;left:8px;top:159px;font:400 36px/40px 'Lusitana',Georgia,serif!important;letter-spacing:-.04em!important}
.spt{position:absolute!important;left:289px;top:162px;width:135px;height:160px}
.smeta{position:absolute;left:579px;top:169px}
#shero .slab{position:absolute;left:860px;top:169px}
.smeta,.slab,.srule,.sil{font:400 12.3px/12px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em}
.srule li{height:19px;box-sizing:border-box;border-bottom:1px solid rgba(129,23,28,.2);line-height:16px;padding-top:2px}
.srule .lm{height:16px}
.ssvc{position:absolute;left:1102px;top:171px;width:328px}
.shs{position:absolute;left:9px;top:calc(var(--vh,800px) - 181px)}
.shfig{position:absolute!important;left:9px;top:calc(var(--vh,800px) + 39px);width:1422px;height:857px}
/* the statement: big Lusitana, a small word in each line; the first line starts on the third column */
.sst{position:relative;font:400 54px/53px 'Lusitana',Georgia,serif;letter-spacing:-.04em}
.sst .lm{height:53px;padding-bottom:0;margin-bottom:0}
.sst .lm.f{padding-left:570px}
.sst b{font-weight:400}
.sst small{display:inline-block;vertical-align:top;margin:0 22px;font:400 12px/1 'Lusitana',Georgia,serif;letter-spacing:-.02em;padding-top:14px}
.sst .li{transition-delay:calc(.1s + var(--l,0)*90ms)}
/* ---- the chapters: a label, a centred text in caps, then the pictures */
#smain .chap{padding:0;position:relative}
.ctx{margin-top:var(--mt);text-align:center}
.slb{font:400 12px/14.4px 'Lusitana',Georgia,serif;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:12.6px!important}
.stx{width:930px;margin:0 auto;font:400 28px/33.6px 'Lusitana',Georgia,serif;letter-spacing:-.04em;text-transform:uppercase}
.stx p{white-space:normal}
.stx p+p{margin-top:33.6px!important}
.stx .li{transition-delay:calc(var(--l,0)*55ms)}
.stx.pre{opacity:0}
.sg{margin:var(--mt) 0 0 9px;width:1422px}
.srow{display:flex;gap:8px}
.sfig{position:relative;margin:0;overflow:hidden;background:transparent}
.sfig.full{width:1422px;height:857px}.sfig.half{width:707px;height:883px;flex:none}.sfig.tall{width:1422px;height:1847px}
.sfig img,.sfig video{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;display:block;visibility:hidden;will-change:transform}
.spt img{top:0;height:100%}
.pxr.on img,.pxr.on video{visibility:visible}
.pxr canvas{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.hr .li,.io .li{transition-duration:.9s}
/* the caption beside a half picture rides along while the picture goes by */
.scl{position:relative;width:707px;flex:none;padding-top:11px;box-sizing:border-box;align-self:stretch}
.sct{position:sticky;top:52px;font:400 12px/16px 'Lusitana',Georgia,serif;letter-spacing:-.03em;text-align:justify}
.sct p{width:283px;white-space:normal}
.sct .b{margin-left:91px!important}
.sct .li{transition-delay:calc(var(--l,0)*45ms)}

/* ---- KPI and Results, on bordeaux: grey type, three circles drawing themselves */
.sbd{color:#b6b6b6}
.sbd .srule li{border-bottom-color:rgba(182,182,182,.2)}
.smx{position:relative;margin-top:var(--mt);height:483px}
.mx{position:absolute;top:0;width:483px;height:483px}
.mx:nth-child(1){left:13px}.mx:nth-child(2){left:479px}.mx:nth-child(3){left:943px}
.mx svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mx circle{fill:none;stroke:#b6b6b6;stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--i,0)*.15s)}
.smx.rv .mx circle{stroke-dashoffset:0}
.mv{position:absolute;left:0;right:0;top:205px;text-align:center;font:400 56px/73px 'Lusitana',Georgia,serif;letter-spacing:-.02em}
.mv .lm{height:73px}
.ml{position:absolute;left:0;right:0;top:278px;text-align:center;font:400 12px/14px 'Lusitana',Georgia,serif}
.mx .li{transition-delay:calc(.5s + var(--l,0)*120ms)}
/* the last row is exactly one screen tall: the picture fills it, the credits sit in its middle */
.slast{align-items:stretch;height:var(--vh,800px)}.slast .sfig.half{height:100%;min-height:0}
.slast .sinfo{display:flex;flex-direction:column;justify-content:center}
.sinfo{position:relative;width:707px;flex:none}
.sig{position:relative;margin-top:var(--mt);padding-left:136px}
.sig .sil{position:absolute;left:136px;top:0;width:200px}
.sig .srule{margin-left:247px!important;width:328px;margin-top:-2px!important}
.sig .srule li{display:block}
.sig .srule .li{display:grid;grid-template-columns:var(--col,171px) 1fr}
.sig:last-child{padding-bottom:0}
/* ---- the next case: the screen holds while the scroll uncovers the picture cell by cell */
#snext{position:relative;height:calc(var(--vh,800px)*2.3);margin-top:0;color:#b6b6b6}
.snst{position:sticky;top:0;height:var(--vh,800px);overflow:hidden;margin:0 calc(-1*var(--ox,0px))}   /* the whole width of the screen */
.snfig{position:absolute;inset:0;display:block;overflow:hidden}
.snfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 60%;will-change:transform}
.snfig canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.snt{position:absolute;margin:0;z-index:2;pointer-events:none}
/* the name sits exactly where the next page has it (same type, same place): it stays put through the change of page */
.snt.l{left:calc(var(--ox,0px) + 8px);top:158.37px;font:400 36px/40px 'Lusitana',Georgia,serif;letter-spacing:-.04em;text-transform:uppercase;
  transition:color .9s cubic-bezier(.6,0,.2,1)}
.snt.r{left:calc(var(--ox,0px) + 1107px);top:169px;font:400 12px/.98 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.04em}
.snt.c{left:calc(var(--ox,0px) + 860px);top:169px;font:400 12px/.98 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.04em}
.snt.c,.snt.r{will-change:opacity,transform}
.snt .lm{height:auto}
#snext .li{transition-delay:calc(.1s + var(--l,0)*90ms)}
/* leaving: the page fades, the picture flies into the next portrait */
#wrap.leave #smain>:not(#snext),#wrap.leave .snt.c,#wrap.leave .snt.r{opacity:0!important;transition:opacity .4s cubic-bezier(.6,0,.2,1)}
#wrap.leave .snt.l{color:#81171c}
html.arrive .snm .li{translate:0 0!important;transition:none!important}
@media (min-width:1024px){@view-transition{navigation:auto}}   /* phones: the flight itself is the passage (no snapshot morph, it jumped in Safari) */
#wrap.leave .snfig,html.arrive .spt{view-transition-name:mie-cover}
#wrap.leave .snt.l,html.arrive .snm{view-transition-name:mie-name}
#wrap.leave #header,html.arrive #header{view-transition-name:mie-head}
::view-transition-group(mie-cover),::view-transition-group(mie-name),::view-transition-group(mie-head){animation:none}
::view-transition-old(mie-cover),::view-transition-new(mie-cover),::view-transition-old(mie-name),::view-transition-new(mie-name),
::view-transition-old(mie-head),::view-transition-new(mie-head){animation:none;opacity:1;mix-blend-mode:normal}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
.mie-fly{position:fixed;z-index:9999;overflow:hidden;pointer-events:none;will-change:left,top,width,height}
.mie-fly img{width:100%;height:100%;object-fit:cover;display:block;backface-visibility:hidden}
/* arriving: the portrait is already in place, the rest of the page comes in around it */
#header.pj.clear::before{background:transparent!important}
html.arrive .spt{background:var(--ph) center/cover no-repeat}
html.arrive .spt img{visibility:visible}html.arrive .spt canvas{display:none}
@media (max-width:1023px){
  #smain{width:auto;padding:0 12px}
  #shero{height:auto;padding-top:120px;display:flex;flex-direction:column;gap:18px}
  .snm,.spt,.smeta,#shero .slab,.ssvc,.shs,.shfig{position:relative!important;left:auto;top:auto;width:auto}
  .spt{width:135px}.shfig,.sfig.full{width:100%;height:auto;aspect-ratio:1422/857}.sfig.tall{width:100%;height:auto;aspect-ratio:1422/1847}
  .sst{font-size:28px;line-height:30px}.sst .lm{height:auto;white-space:normal!important}.sst .lm.f{padding-left:0}
  .sst small{margin:0 6px;padding-top:6px;font-size:10px}
  .ctx{margin-top:80px}.stx{width:auto;font-size:20px;line-height:24px}
  .sg{margin:12px 0 0;width:auto}.srow{flex-direction:column;gap:12px}.sfig.half{width:100%;height:auto;aspect-ratio:707/883}
  .scl,.sinfo{width:auto}.slast{height:auto}.slast .sfig.half{height:auto}.sct{position:static}.sct p{width:auto}.sct .b{margin-left:0!important}
  .smx{height:auto;display:flex;flex-direction:column;gap:12px;margin-top:40px}.mx{position:relative;left:auto!important;width:100%;max-width:340px;height:auto;aspect-ratio:1;margin:0 auto}
  .mv{top:38%;font-size:44px}.ml{top:58%}
  .sig{margin-top:32px;padding-left:0}.sig .sil{position:static;margin-bottom:8px!important}.sig .srule{margin-left:0!important;width:auto}
  .sig .srule li{height:auto;min-height:19px}.sig .srule .lm{height:auto}.sig .srule .li{grid-template-columns:1fr 1fr;column-gap:8px}
  #snext{height:auto;margin:80px 0 12px}.snst{position:relative;height:auto;aspect-ratio:1422/857}.snfig{left:0;right:0;top:0;bottom:0}
  .snst{margin:0}.snt.l,.snt.r{top:50%;translate:0 -50%;line-height:1}.snt.l{left:16px;font-size:20px}.snt.c{display:none}.snt.r{left:auto;right:16px}
  #smain .lm{white-space:normal}
}
@media (max-width:1023px){ #wrap.leave .snfig,html.arrive .spt,#wrap.leave .snt.l,html.arrive .snm,#wrap.leave #header,html.arrive #header{view-transition-name:none} }
/* four figures instead of three: four smaller circles across the width */
.smx.k4{height:350px}.smx.k4 .mx{width:350px;height:350px}
.smx.k4 .mx:nth-child(1){left:9px}.smx.k4 .mx:nth-child(2){left:366px}.smx.k4 .mx:nth-child(3){left:723px}.smx.k4 .mx:nth-child(4){left:1080px}
.smx.k4 .mv{top:132px;font-size:50px}.smx.k4 .ml{top:205px}
@media (max-width:1023px){ .smx.k4{height:auto}.smx.k4 .mx{left:auto!important;width:100%;height:auto} .smx.k4 .mv{top:38%;font-size:44px}.smx.k4 .ml{top:58%} }