/* =====================================================================================================
   site.css — shared by every page
   1. page transitions: a teal pixel cover with the next page's name nine times
   2. the footer: a teal section at the end of every page, with a pixel edge that climbs over the page while it
      comes up; its top is a drawing of the five phases (dashed circles)
   ===================================================================================================== */

/* ---------- 1. transitions ---------- */
/* a teal cover over everything (menu included), drawn in by pixels, with the next page's name nine times */
#ptx{position:fixed;inset:0;z-index:2147483510;pointer-events:none;transform:translate3d(0,100%,0);will-change:transform}
#ptxl{position:fixed;z-index:2147483520;pointer-events:none}
#ptxl .ptls{display:block;width:100%;height:100%;overflow:visible}
#ptxl .ptls rect,#ptxl .ptls path{fill:currentColor!important;opacity:1!important;visibility:visible!important;clip-path:none!important;transform:none!important;translate:none!important;transition:none!important}
/* the next page comes in with a quick cross-fade (browsers with cross-document view transitions; the others just show it) */
/* while the page is hidden under the curtain everything takes its final state at once (no colours gliding in on arrival) */
html.pfin *,html.pfin *::before,html.pfin *::after{transition:none!important}
html.pfin #sf{visibility:hidden}
html.pfin body{opacity:1}
@media (prefers-reduced-motion:reduce){ html.ctin::after,#ptx{display:none} }
/* the case page, before its first view is built: the page is short and the footer would sit on screen */
html:has(#views):not(:has(.view.show)) #sf{visibility:hidden}

/* ---------- 2. footer ---------- */
/* a real section at the end of the page, one screen tall, in our teal. Above it, a pixel edge (in the page, so it
   scrolls with it) climbs over the content while the footer comes up: when the footer reaches the top, the whole
   screen is teal. The lines come in as they reach the screen. */
.sf{--te:#2e9d98;--ink:#81171c;position:relative;z-index:9;overflow:hidden;height:var(--vh,100vh);background:var(--te);color:var(--ink);
  font:400 12px/13px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.24px}
.sf .sfe{display:none}
.sf .sfin{position:absolute;top:0;bottom:0;left:var(--ox,0px);width:1440px;will-change:transform}
.sf p,.sf ul{margin:0;padding:0;list-style:none}
.sf a{color:inherit;text-decoration:none}
.sf li a:hover{opacity:.65}
/* when the footer reaches the top, the menu steps aside (the footer has its own index) */
html.sfon #header{opacity:0;pointer-events:none!important;transition:opacity .35s ease}
html.sfon #header *{pointer-events:none!important}
/* the drawing: five dashed circles on one line, the five phases at their meeting points. They rise from the
   line when the footer comes up, the dashes keep moving slowly, a phase lights its circle under the pointer */
.sfd{position:absolute;left:0;right:0;top:24px;bottom:186px}
.sfg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sfg .c{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3.6 3;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 100%;
  opacity:0;scale:.2;transition:opacity .6s cubic-bezier(.2,.75,.15,1),scale 1.4s cubic-bezier(.2,.75,.15,1),stroke-width .3s;transition-delay:calc(var(--i)*110ms);
  animation:sfdash 26s linear infinite}
.sfg .n{fill:var(--te);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 50%;opacity:0;scale:0;
  transition:opacity .3s,scale .6s cubic-bezier(.2,1.4,.4,1),fill .25s;transition-delay:calc(.75s + var(--i)*90ms)}
.sfg a{cursor:pointer}.sfg a:hover .t{opacity:.65}
.sfg .t{fill:var(--ink);font:400 12.5px/1 'Lusitana',Georgia,serif;letter-spacing:-.5px;opacity:0;transition:opacity .4s;transition-delay:calc(.85s + var(--i)*90ms);cursor:default}
.sfg .t .nm{letter-spacing:0}
.sfd.on .c{opacity:1;scale:1}.sfd.on .n{opacity:1;scale:1}.sfd.on .t{opacity:1}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .sfg .c{transition:stroke-width .3s,opacity .3s}
  .sfd.on .n,.sfd.on .t{opacity:0;scale:0}.sfd.on .t{scale:1}
  .sfd.on.lab .n{opacity:1;scale:1}.sfd.on.lab .t{opacity:1}
  .sfg .n,.sfg .t{transition-delay:calc(var(--i)*80ms)}
}
.sfd.hl .c{stroke-opacity:.35;transition-delay:0s}
.sfd.hl .c.hi{stroke-opacity:1;stroke-width:1.6;stroke-dasharray:none}
.sfd.hl .n.hi{fill:var(--ink)}
@keyframes sfdash{to{stroke-dashoffset:-131}}
/* the lower band */
.sfbrand{position:absolute;left:17px;top:calc(100% - 156px);bottom:48px;width:360px}
.sflg{display:block;width:189px}
.sflogo{display:block;width:189px;height:37px}
.sflogo rect,.sflogo path{fill:var(--ink)}
.sflg.sflg{display:inline-block;vertical-align:middle}.sfsp{display:inline-block;vertical-align:middle;width:84px;margin-left:24px}.sfspl{display:block;width:100%;height:auto}.sfspl path,.sfspl polygon,.sfspl rect{fill:var(--ink)}.sfsp:hover{opacity:.65}   /* (30.10) Shopify Partner, beside the logo */
.sf .sfb{display:inline-block;height:26px;padding:0 14px;border:1px solid var(--ink);border-radius:2px;font:400 12px/24px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.24px;white-space:nowrap;transition:opacity .3s}
.sf .sfct.sfb{background:var(--ink);color:#b6b6b6}
.sf .sfb:hover{opacity:.8}
.sf button.sfb{appearance:none;background:var(--ink);color:#b6b6b6;cursor:pointer}
.sf .sfnl button.sfb{background:none;border:0;border-radius:0;padding:0;height:24px;color:var(--ink);font:400 12px/24px 'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:bottom}
.sf .sfnl button.sfb:hover{opacity:.65}
/* newsletter, under the logo */
.sfnl{position:absolute;left:0;bottom:0;width:340px}
.sfnl .sfe2{display:inline-block;width:236px;vertical-align:bottom;border-bottom:1px solid rgba(129,23,28,.45);margin-right:10px;transition:border-color .3s}
.sfnl .sfe2:focus-within{border-bottom-color:var(--ink)}
.sfnl.err .sfe2{border-bottom-color:var(--ink);border-bottom-width:2px}
.sfnl input[type=email]{display:block;width:100%;height:24px;padding:0 0 3px;border:0;background:transparent;outline:none;color:var(--ink);font:400 12px/14px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.24px;border-radius:0}
.sfnl input::placeholder{color:rgba(129,23,28,.6)}
.sfcn{display:flex;gap:7px;align-items:center;margin-top:8px;font:400 10px/12px 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--ink);cursor:pointer}
.sfcn input{position:absolute;opacity:0;width:0;height:0}
.sfcn i{flex:none;width:8px;height:8px;border:1px solid var(--ink)}
.sfcn input:checked+i{background:var(--ink)}
.sfcn input:focus-visible+i{outline:1px solid var(--ink);outline-offset:2px}
.sfcn a{text-decoration:underline;text-underline-offset:2px}
.sfst{position:absolute;left:0;top:100%;margin-top:4px!important;font:400 10px/12px 'Helvetica Neue',Helvetica,Arial,sans-serif;white-space:nowrap}
/* contact, in the middle of the circles */
.sf .sfcc{position:absolute;z-index:2;height:30px;padding:0 24px;border-radius:4px;font:400 12.5px/28px 'Helvetica Neue',Helvetica,Arial,sans-serif;translate:-50% -50%;left:50%;top:60%;
  opacity:0;scale:.9;transition:opacity .5s cubic-bezier(.2,.75,.15,1),scale .6s cubic-bezier(.2,.75,.15,1)}
.sfd.on .sfcc{opacity:1;scale:1}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){ .sfd.on .sfcc{opacity:0;scale:.9} .sfd.on.lab .sfcc{opacity:1;scale:1} }
.sfcol{position:absolute;top:calc(100% - 151px)}
.sfp{left:573px}.sfa{left:786px}.sfs{left:1074px}.sfl{left:1283px}
.sfk{margin-bottom:13px!important}
.sf li{white-space:nowrap}
.sfx{opacity:0;translate:0 8px;transition:opacity .45s cubic-bezier(.2,.75,.15,1),translate .7s cubic-bezier(.2,.75,.15,1)}
.sfx.on{opacity:1;translate:0 0;transition-delay:calc(var(--d,0)*28ms)}

@media (max-width:1023px){
  .sf{height:auto;padding:10px 10px 40px}
  .sf .sfe{height:30vh}
  .sf .sfin{position:static;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:36px 16px}
  .sfd{position:relative;inset:auto;grid-column:1/-1;height:auto;aspect-ratio:1440/656}
  .sfg .t{font-size:30px;letter-spacing:-1px}
  .sfbrand,.sfcol{position:static;width:auto}
  .sfbrand{grid-column:1/-1;padding:8px 6px 0}
  .sfnl{position:static;margin-top:26px;width:auto}
  .sf .sfcc{top:55%}
  .sfcol{padding:0 6px}
}
@media (prefers-reduced-motion:reduce){ .sfx{transition:none} }

/* ---------- 3. first paint: the ground of each page is right from the first frame (no grey before a bordeaux page) */
html body.abt-pg{background:#81171c}


/* leaving a page: everything fades out before the next one opens (site.js mieGo) */
html.mlv body{opacity:0;transition:opacity .4s cubic-bezier(.4,0,.2,1)}
/* the rules of the lists draw themselves from the left (site.js: .ldr, then .lon) */
.ldr{border-bottom-color:transparent!important;background-image:linear-gradient(var(--lc),var(--lc));background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;transition:background-size 1.1s cubic-bezier(.6,0,.2,1) var(--ld,0ms)}
.ldr.lon{background-size:100% 1px}

/* (30.10) desktop, every page: the contact card is above everything; everything else — header and page — goes under one blur
   (the veil blurs what is behind it, so it is the same on every page; the per-page blurs of the old way are off) */
@media (min-width:1024px){
  html:not(.mob) #contact{z-index:2147480000!important;background:rgba(0,0,0,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  html:not(.mob) #cpanel{z-index:2147480001!important}
  html:not(.mob) #wrap.dim #hero,html:not(.mob) #wrap.dim #growth,html:not(.mob) #wrap.dim #sphere,html:not(.mob) #wrap.dim #cases,
  html:not(.mob) #wrap.dim #amain,html:not(.mob) #wrap.dim #smain,html:not(.mob) #wrap.dim #cmain,
  html:not(.mob) #wrap.dim #pmain,html:not(.mob) #wrap.dim #tog,html:not(.mob) #wrap.dim~#pbg{filter:none!important}
}

/* (30.10) about: the closing film runs straight into the footer (no bordeaux strip under it) */
.ab:has(> .abxc:last-child){padding-bottom:0!important}

/* (30.10) the language switcher, next to Contact Us: the current language in a circle, the other beside it */
#header .nav.lng{display:flex;align-items:center;gap:4px;margin-left:var(--ox,0px);letter-spacing:-.2px}
#header .nav.lng .lgo{color:inherit;text-decoration:none;opacity:.45;transition:opacity .2s}                       /* (30.10) no ring: the current language is the one at full ink */
#header .nav.lng .lgo.on{opacity:1;cursor:default}
#header .nav.lng a.lgo:not(.on):hover{opacity:1}
#header .nav.lng .lgs{font-style:normal;opacity:.45}
@media (min-width:1024px){ .dvp #header .nav.lng{color:#81171c}.dvp #header.clear .nav.lng{color:#bebebe} }

/* (30.10) Italian: accented capitals (À È) above the line masks, and lines a little longer than the English never cut at the side */
html[lang=it] .lm{overflow:visible!important;clip-path:inset(-.34em -100vw 0 -100vw)}
html[lang=it] [data-mr=lines] .mw{padding-top:.16em;margin-top:-.16em}
html[lang=it].mob .dvt{padding-left:12px!important;padding-right:12px!important}
.dvn .li{white-space:normal}
@media (max-width:1023px){ html[lang=it] #smain .pph .lm,html[lang=it] #smain .sst .lm,html[lang=it] .aih .alm{clip-path:none!important} }   /* phones: these lines run inline (no mask) */

/* (03.11) the cookie banner (drawn by glue.js): Helvetica like the rest of the interface, the text wraps inside its box */
html #mie-cc{box-sizing:border-box;width:380px;max-width:calc(100vw - 32px);padding:14px 16px 16px;font:400 12px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;text-transform:none;white-space:normal}
html #mie-cc p,html #mie-cc label{white-space:normal}
html #mie-cc .ccb{gap:6px}
html #mie-cc button{font:400 12.3px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase;padding:5px 12px 4px;border-radius:4px}
html.mob #mie-cc{left:12px;right:12px;width:auto;max-width:none}

/* (06.11) moved from lab.css: the contact card sends from every page now (site.js) */
/* ============ the card from the right: project form / job application ============ */
#cpanel .hid{display:none!important}
#cpanel textarea.cin{height:62px;line-height:14px;resize:none;display:block;overflow:auto}
#cpanel select.cin{appearance:none;-webkit-appearance:none;border-radius:0;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}
#cpanel select.cin:invalid{color:rgba(129,23,28,.55)}
#cpanel select.cin option{color:#2a2a2a}
#cpanel .cfile{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;white-space:nowrap;overflow:hidden}
#cpanel .cfile input{position:absolute;opacity:0;width:0;height:0}
#cpanel .cfile span:first-of-type{overflow:hidden;text-overflow:ellipsis;color:rgba(129,23,28,.55)}
#cpanel .cfile.has span:first-of-type{color:#81171c}
#cpanel .cfile b{font:400 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400}
#cpanel .cin.err+.cline,#cpanel .cfile.err+.cline{background:#81171c;height:2px}
#cpanel .cin.err::placeholder{color:#81171c}
#cstat{left:7px;width:340px;font:400 10px/1.15 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#81171c;letter-spacing:-.1px}
#ccons a,#cmkt a,.abxfc a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.abxfc+.abxfc{margin-top:8px}