/* v9.v2.css - Simplicity Idea Tech v9 "The Stack" (home A, picked 22 Oct 2026). Paper, ink, one cobalt. Archivo (OFL), self-hosted variable font. One stylesheet for the shell, the home and the inner pages. Base CSS is the finished, still page; motion sits at the end inside prefers-reduced-motion: no-preference. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-var.v1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:99%;ascent-override:88%;descent-override:22%;line-gap-override:0%}
:root{--ink:#111318;--paper:#f6f6f3;--cobalt:#1f3fd6;--cobalt-2:#1733b4;--cobalt-3:#10248a;--muted:#4b4f58;--rule:#d6d7db;--tint:#c9d2ff;--ceramic:#fbfbfd;--side:#dfe3ec;--side-2:#c4cada;--out:cubic-bezier(0,0,.2,1);--moment:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.5 "Archivo","Archivo Fallback",system-ui,sans-serif;overflow-x:hidden}
a{color:inherit}
svg{max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--ink);color:#fff;padding:10px 14px;text-decoration:none}
.skip:focus{left:8px}
a:focus-visible,button:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}

/* shell: one bar on every page, kept still across page transitions */
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;border-bottom:2px solid var(--ink);view-transition-name:mast}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;text-decoration:none;font-size:17px;white-space:nowrap}
.brand .mark{width:23px;height:28px;flex:none}
.mk-p{fill:var(--ink)}.mk-a{fill:var(--cobalt)}.mk-t{fill:#fff}
.nav{display:none}
.nav ul{display:flex;gap:26px;margin:0;padding:0;list-style:none;font-size:15px}
.nav a{display:inline-block;text-decoration:none;padding:12px 0;font-weight:600;min-height:44px}
.nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--cobalt)}
.nav .close{display:none}
.menu,.nav .close{font:inherit;font-size:15px;font-weight:600;background:none;border:2px solid var(--ink);padding:8px 14px;min-height:44px;color:var(--ink);cursor:pointer}
/* the phone drawer uses the popover attribute: no script. .open is the fallback class for browsers without it */
.nav:is(:popover-open,.open){display:block;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:84px 20px 20px;background:var(--paper);color:var(--ink);overflow:auto;z-index:40}
.nav:is(:popover-open,.open) .close{display:block;position:absolute;top:10px;right:20px}
.nav:is(:popover-open,.open) ul{flex-direction:column;gap:0;font-size:clamp(34px,9vw,44px);font-stretch:70%;font-weight:850;text-transform:uppercase;line-height:1}
.nav:is(:popover-open,.open) li{border-top:2px solid var(--ink)}
.nav:is(:popover-open,.open) a{display:block;padding:16px 0}
.nav::backdrop{background:transparent}
.wa{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:2px solid var(--ink);font-weight:700;text-decoration:none}
.bar .wa{display:none}

/* type */
h1{font-stretch:66%;font-weight:850;text-transform:uppercase;font-size:clamp(46px,13vw,124px);line-height:.92;letter-spacing:-.01em;margin:0}
h1 .c,h2 .c{color:var(--cobalt)}
h2{font-stretch:66%;font-weight:850;text-transform:uppercase;font-size:clamp(38px,10vw,80px);line-height:.94;margin:0 0 20px}
.kicker{font-stretch:75%;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:16px;margin:0 0 12px;color:var(--cobalt)}
.lead{margin:12px 0 16px;font-size:18px;line-height:1.4;color:var(--muted);max-width:30ch}
.lead-big{margin:22px 0 0;font-size:21px;line-height:1.4;max-width:34ch}
p{max-width:60ch}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;background:var(--cobalt);color:#fff;font-weight:700;font-size:17px;text-decoration:none}
.alt{display:inline-block;font-weight:600;text-underline-offset:4px;padding:10px 0}
.reply,.terms{margin:14px 0 0;font-size:16px;color:var(--muted);max-width:44ch}
.contact .reply,.contact .terms,.dark .reply{color:#eef0f8}

/* hero + services share one pinned object (home and services) */
.pin{display:grid}
.hero{position:relative;z-index:3;padding:18px 0 0}
.hero-p{padding:40px 0 24px}
.stage{position:sticky;top:0;z-index:2;height:max(300px,40svh);margin:-34px 0 0;background:var(--paper);border-bottom:1px solid var(--rule);pointer-events:none}
.hero-p+.stage{margin-top:-10px}
.stage .hold{position:absolute;inset:0;overflow:hidden}
.motion{pointer-events:auto;position:absolute;right:36px;bottom:14px;z-index:4;font:inherit;font-size:14px;font-weight:600;min-height:32px;padding:4px 12px;background:transparent;color:var(--muted);border:1.5px solid #9aa0ac;border-radius:16px;display:none;cursor:pointer}
.js .motion{display:block}
.motion[hidden],.js .motion[hidden]{display:none}
.scene{position:absolute;left:50%;top:56%;width:0;height:0;transform-style:preserve-3d;transform:scale(.6) rotateX(57deg) rotateZ(-42deg)}
.plate{position:absolute;left:-250px;top:-250px;width:500px;height:500px;transform:translateZ(-40px)}
.slab{position:absolute;left:-120px;top:-120px;width:240px;height:240px;transform-style:preserve-3d}
.lift{position:absolute;inset:0;transform-style:preserve-3d;background:var(--ceramic);border-radius:10px;box-shadow:inset 0 0 0 1px #e1e5ef}
.lift::before,.lift::after{content:"";position:absolute}
.lift::before{left:6px;top:calc(100% - 1px);width:calc(100% - 12px);height:30px;transform-origin:top;transform:rotateX(-90deg);background:linear-gradient(90deg,var(--side) 0%,#f2f4f8 45%,var(--side) 100%)}
.lift::after{right:calc(100% - 1px);top:6px;width:30px;height:calc(100% - 12px);transform-origin:right;transform:rotateY(-90deg);background:linear-gradient(180deg,var(--side-2),var(--side))}
.lift svg{position:absolute;inset:12px;width:216px;height:216px;border-radius:6px}
.s1{transform:translateZ(0)}
.s2{transform:translateZ(112px)}
.s3{transform:translateZ(224px)}
.sheen{position:absolute;inset:0;border-radius:10px;background:linear-gradient(128deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(16,36,138,.10) 100%);box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 rgba(16,36,138,.12);pointer-events:none}
.cast{position:absolute;inset:16px -18px -18px 16px;background:rgba(16,36,138,.10);filter:blur(12px);transform:translateZ(1px);border-radius:12px}
.hold canvas{position:absolute;inset:0;width:100%;height:100%}
.stage.live .scene{opacity:0}
.label{position:absolute;margin:0;font-stretch:75%;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:16px;line-height:1;padding:7px 9px;background:var(--ink);color:#fff}
.l3{left:calc(50% + 70px);top:20%}
.l2{left:calc(50% + 70px);top:44%}
.l1{left:calc(50% + 70px);top:68%}
/* the pinned object answers the service in the middle of the screen */
.stage[data-on] .lift svg{opacity:.35;filter:saturate(.1)}
.stage[data-on=web] .s3 svg,.stage[data-on=odoo] .s2 svg,.stage[data-on=rec] .s1 svg{opacity:1;filter:none}
.stage[data-on=web] .s3 .lift,.stage[data-on=odoo] .s2 .lift,.stage[data-on=rec] .s1 .lift{transform:translateZ(44px)}
.stage[data-on=web] .l3,.stage[data-on=odoo] .l2,.stage[data-on=rec] .l1{background:var(--cobalt)}

.services{position:relative;z-index:1;padding:30px 0 40px}
.row{min-height:44svh;padding:22px 0;border-top:2px solid var(--ink);display:grid;align-content:start;gap:8px}
.row h2,.row h3{margin:0;font-stretch:70%;font-weight:850;text-transform:uppercase;font-size:clamp(34px,9vw,64px);line-height:.95}
.row p{margin:0;max-width:42ch}
.rows-long .row{min-height:0;padding:30px 0 36px;gap:10px}
.gets{margin:6px 0 10px;padding:0 0 0 20px;max-width:44ch}
.gets li{margin:5px 0}
.row .cta,.row .alt{justify-self:start}
.more{margin:18px 0 0}

/* sections */
section.blk{padding:72px 0;overflow-x:clip}
.dark{background:var(--ink);color:#fff}
.dark h2{color:#fff}
.dark .kicker{color:var(--tint)}
.dark p{color:#e8eaf2}
.dark a:focus-visible{outline-color:#fff}
.cases{display:grid;gap:22px}
.case{display:grid;gap:6px;text-decoration:none;color:#fff;margin:0}
.case b{font-stretch:75%;font-weight:800;text-transform:uppercase;font-size:24px;line-height:1.05;margin-top:8px}
.case span{color:#e8eaf2}
.case:focus-visible{outline-color:#fff}
.pic{display:block;aspect-ratio:4/3;background:#1d2130;position:relative;overflow:hidden}
.pic svg{position:absolute;inset:0;width:100%;height:100%}
.demo{margin:22px 0 0;font-size:16px;color:#d5d9e6}
.about .wrap{display:grid;gap:24px}
.about p{font-size:20px;line-height:1.45;max-width:38ch;margin:0}
.contact{background:var(--cobalt-2);color:#fff}
.contact h2{color:#fff}
.contact p{font-size:18px;color:#eef0f8;max-width:40ch}
.contact .cta{background:#fff;color:var(--cobalt-2)}
.contact a:focus-visible{outline-color:#fff}
.contact .alt{margin-top:18px}
.contact .wa{border-color:#fff;color:#fff;margin-left:14px}
.big-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.big-list li{display:grid;gap:4px;padding:18px 0;border-bottom:2px solid var(--ink)}
.big-list b{font-stretch:70%;font-weight:850;text-transform:uppercase;font-size:clamp(30px,8vw,56px);line-height:.95}
.big-list span,.big-list a{max-width:44ch}
.big-list a{text-underline-offset:4px;font-weight:600;padding:4px 0;display:inline-block}
.dark .big-list,.dark .big-list li{border-color:#3a3f4c}
.facts{display:grid;gap:14px;margin:0 0 40px;max-width:52ch}
.facts div{border-top:1px solid var(--rule);padding-top:10px}
.facts dt{font-size:15px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.facts dd{margin:2px 0 0}
.dark .facts dt{color:var(--tint)}
.dark .facts div{border-color:#3a3f4c}
.plain{margin:0;padding:0 0 0 20px;max-width:48ch}
.plain li{margin:6px 0}
.cl{margin:0;padding:24px 0 48px;font-size:16px;color:var(--muted)}
.at{margin:14px 0 0;font-size:18px;font-weight:600}
.ct-hero{min-height:calc(100svh - 64px)}
@media (max-width:899px){.services .stage{height:max(400px,56svh)}.services .scene{top:50%}}
.cnote{display:block;width:min(100%,420px);height:auto;margin:28px 0 0;filter:drop-shadow(0 12px 18px rgba(16,36,138,.14))}
.cnote .nt{font-weight:850;font-stretch:70%;font-size:26px;text-transform:uppercase;fill:var(--ink)}
.cnote .nk{font-weight:800;font-stretch:75%;font-size:13px;letter-spacing:.04em;text-transform:uppercase;fill:var(--cobalt)}
.cases-list li{gap:8px}
.tieout .nk{font-size:12.5px}
.routes{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}

/* the health-check funnel page: card 2, The Week */
.hc .sub{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:16px 0 26px}
.hc .sub p{margin:0;font-size:17px;color:var(--muted)}
.week{position:relative;display:grid;grid-template-columns:1fr;border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.wk{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wk rect{fill:var(--cobalt)}
.wk-v{display:none}
.day{position:relative;z-index:1;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);height:58px;padding:12px 14px;display:flex;align-items:center;gap:14px}
.day b{font-stretch:75%;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:16px;width:3.2em;flex:none}
.day p{margin:0;font-size:16px;color:var(--ink)}
.fri{background:var(--cobalt);color:#fff;height:auto;min-height:100px;flex-wrap:wrap}
.fri p{color:#fff}
.sheet{background:#fff;color:var(--ink);margin-left:auto;width:220px;padding:12px 14px;box-shadow:0 10px 20px -10px rgba(0,0,0,.45);transform:rotate(-2deg);position:relative;z-index:2}
.sheet b{display:block;width:auto;font-size:17px;line-height:1.2;font-stretch:80%;text-transform:uppercase}
.sheet ol{margin:6px 0 0;padding:0 0 0 18px;font-size:16px;line-height:1.3}
.sheet li{padding:3px 0}
.sheet li::marker{font-weight:800;color:var(--cobalt)}
.sheet small{display:block;margin-top:8px;font-size:14px;color:var(--muted)}
.dl{display:grid;gap:0;margin:0;border-top:2px solid var(--ink)}
.dl div{display:grid;gap:6px;padding:18px 0;border-bottom:2px solid var(--ink)}
.dl dt{font-stretch:70%;font-weight:850;text-transform:uppercase;font-size:clamp(28px,7vw,44px);line-height:.95}
.dl dd{margin:0;max-width:44ch}
.report{margin:0;background:#fff;color:var(--ink);padding:16px;max-width:680px}
.report table{width:100%;border-collapse:collapse;font-size:16px}
.report th,.report td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
.report th{font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.report td.n{font-weight:800;color:var(--cobalt);width:2em}
.report td.i{font-weight:700;white-space:nowrap}
.report figcaption{font-size:16px;color:var(--muted);margin-top:12px;max-width:52ch}
.packs{display:grid;gap:16px}
.pack{padding:28px 22px;min-height:220px;display:grid;align-content:end;gap:8px}
.pack.a{background:var(--cobalt);color:#fff}
.pack.b{background:var(--ink);color:#fff}
.pack h3{margin:0;font-stretch:70%;font-weight:850;text-transform:uppercase;font-size:clamp(30px,8vw,52px);line-height:.95}
.pack p{margin:0;font-size:18px;max-width:36ch;color:#fff}
.note{margin:22px 0 0;font-size:16px;color:var(--muted)}

/* footer */
.foot{padding:36px 0 44px;font-size:16px;color:var(--muted);border-top:2px solid var(--ink)}
.foot-grid{display:grid;gap:18px}
.foot p{margin:0 0 4px}
.foot-name{font-weight:800;color:var(--ink);font-stretch:75%;text-transform:uppercase;letter-spacing:.04em;font-size:16px}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{text-underline-offset:3px;padding:6px 0;display:inline-block}
.legal{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;border-top:1px solid var(--rule);padding-top:16px}

@media (min-width:600px){
  .stage{height:max(380px,46svh)}
  .scene{transform:scale(.78) rotateX(57deg) rotateZ(-42deg)}
  .l3,.l2,.l1{left:calc(50% + 120px)}
  .week{grid-template-columns:repeat(5,1fr)}
  .wk-h{display:none}.wk-v{display:block}
  .day{height:auto;min-height:300px;padding:16px 14px;flex-direction:column;align-items:stretch;justify-content:flex-start}
  .day b{width:auto;font-size:22px}
  .day p{font-size:17px}
  .sheet{margin:auto -12px -50px -70px;width:auto;padding:16px 18px}
  .sheet b{font-size:22px}
  .sheet ol{font-size:17px}
}
@media (min-width:700px){
  .packs{grid-template-columns:1fr 1fr}
  .dl div{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);align-items:start;column-gap:24px}
  .big-list li{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;column-gap:24px}
  .big-list.cases-list li{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"t s" "t a"}
  .cases-list b{grid-area:t}.cases-list span{grid-area:s}.cases-list a{grid-area:a;justify-self:start}
}
@media (min-width:900px){
  .nav,.nav:not(:popover-open){display:block;position:static;inset:auto;width:auto;height:auto;margin:0;border:0;padding:0;background:none;overflow:visible}
  .menu{display:none}
  .bar .wa{display:inline-flex;margin-left:auto;margin-right:0}
  .bar .nav{margin-left:auto;margin-right:28px}
  .pin{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;max-width:1280px;margin:0 auto;padding:0 20px}
  .pin .wrap{padding:0}
  .hero{grid-column:1;grid-row:1;padding:56px 0 40px;min-height:calc(100svh - 64px)}
  .hero-p,.ct-hero{min-height:0;padding:56px 0 20px}
  .cnote{margin-top:40px}
  h1{font-size:clamp(64px,8.4vw,128px)}
  .pin h1{margin-right:-55%}
  .lead{font-size:20px;margin:24px 0 30px}
  .stage{grid-column:2;grid-row:1 / span 2;align-self:start;top:0;height:100svh;margin:0;background:none;border:0}
  .scene{left:36%;top:60%;transform:scale(1) rotateX(57deg) rotateZ(-42deg)}
  .l3,.l2,.l1{left:calc(36% + 170px);font-size:16px}
  .l3{top:34%}.l2{top:49%}.l1{top:63%}
  .services{grid-column:1;grid-row:2;padding:0 0 80px}
  .row{min-height:62svh;align-content:center}
  .rows-long .row{min-height:0}
  .cases{grid-template-columns:1.3fr 1fr 1fr;align-items:end}
  .work-p .cases{grid-template-columns:1fr 1fr 1fr;align-items:start}
  .about .wrap{grid-template-columns:1fr 1fr;align-items:center}
  .contact .alt{margin-left:24px;margin-top:0}
  .motion{right:24px;bottom:24px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot .priv,.foot .legal{grid-column:1 / -1}
  .hc .week{margin-top:12px}
}

/* art (Site-Art, 23 Oct 2026): AI stills over the drawn SVGs (the SVG stays as the no-image fallback), the home band, the two films */
.pic picture,.pic img{position:absolute;inset:0;width:100%;height:100%}
.pic img{display:block;object-fit:cover}
.band{position:relative;display:flex;flex-direction:column-reverse;background:#ededea;overflow:hidden}
.band-pic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.band-txt{position:relative;z-index:1;align-self:start;width:100%;padding-top:40px;padding-bottom:28px}
.band h2{margin:0 0 14px;font-size:clamp(36px,10vw,64px)}
.band p{margin:0;font-size:19px;line-height:1.45;max-width:30ch;color:var(--ink)}
.close-grid{display:grid;gap:32px}
.film{position:relative;width:100%;max-width:560px;aspect-ratio:1;overflow:hidden;background:#ededea}
.film picture,.film img,.film video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.film video{opacity:0}
.film.on video{opacity:1}
.film .start{display:none}
.film .fbtn{right:12px;bottom:12px;background:rgba(246,246,243,.9);color:var(--ink);border-color:#80868f}
.ab-hero .film{margin:28px 0 0}
.dark .cnote{margin:0 0 40px}
.dark .cnote .nk{font-size:14px}
.count{display:inline-block;font-variant-numeric:tabular-nums}
@media (min-width:700px){
  .band{display:grid}
  .band>*{grid-area:1/1}
  .band-pic img{aspect-ratio:1600/686;max-height:640px}
  .band-txt{align-self:center;max-width:none;padding:0 5vw 0 60vw}
  .band h2{font-size:clamp(34px,4.6vw,64px)}
}
@media (min-width:900px){
  .close-grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;column-gap:48px}
  .ab-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .ab-hero .wrap>*{grid-column:1;justify-self:start}
  .ab-hero h1{font-size:clamp(56px,6.4vw,104px)}
  .ab-hero .film{grid-column:2;grid-row:1 / span 4;margin:0}
}

/* motion: added only when the visitor allows it; the base CSS above is the finished, still page */
@media (prefers-reduced-motion:no-preference){
  /* page transitions: a short crossfade between pages of this site; the bar keeps still */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:cubic-bezier(0,0,.2,1)}
  ::view-transition-old(mast),::view-transition-new(mast){animation:none}
  /* the home's one load moment: three layers arrive out of line and settle into order */
  .s1{animation:in1 1s .1s cubic-bezier(.16,1,.3,1) backwards,bob1 4.5s 1.2s ease-in-out infinite alternate}
  .s2{animation:in2 1s .16s cubic-bezier(.16,1,.3,1) backwards,bob2 4s 1.3s ease-in-out infinite alternate}
  .s3{animation:in3 1s .22s cubic-bezier(.16,1,.3,1) backwards,bob3 3.5s 1.4s ease-in-out infinite alternate}
  .label{animation:tag .6s cubic-bezier(0,0,.2,1) backwards}
  .l3{animation-delay:.8s}.l2{animation-delay:.86s}.l1{animation-delay:.92s}
  @keyframes in1{from{transform:translate3d(-70px,40px,0) rotateZ(-14deg)}}
  @keyframes in2{from{transform:translate3d(60px,-30px,60px) rotateZ(17deg)}}
  @keyframes in3{from{transform:translate3d(-30px,-80px,150px) rotateZ(-24deg)}}
  @keyframes tag{from{opacity:0;transform:translateX(-8px)}}
  /* alive at rest: the layers breathe a few px, the whole object sways a few degrees */
  @keyframes bob1{to{transform:translateZ(-8px)}}
  @keyframes bob2{from{transform:translateZ(112px)}to{transform:translateZ(126px)}}
  @keyframes bob3{from{transform:translateZ(224px)}to{transform:translateZ(246px)}}
  .scene{animation:sway 10s 1.2s ease-in-out infinite alternate}
  @keyframes sway{from{rotate:z 0deg}to{rotate:z 12deg}}
  .still .s1,.still .s2,.still .s3,.still .scene{animation-play-state:paused}
  /* when the shader layer renders the stack, the CSS poster rests */
  .stage.live .scene,.stage.live .slab{animation-play-state:paused}
  .scene{transition:opacity .4s cubic-bezier(0,0,.2,1)}
  /* the pinned object's answer to the services, eased */
  .lift{transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .lift svg{transition:filter .5s cubic-bezier(0,0,.2,1),opacity .5s cubic-bezier(0,0,.2,1)}
  .label{transition:background .5s cubic-bezier(0,0,.2,1)}
  /* the health-check page's one load moment: the week fills, then the Friday sheet drops in */
  .wk rect{transform-box:fill-box;transform-origin:left center;animation:growx .4s cubic-bezier(0,0,.2,1) backwards}
  .wk rect:nth-child(1){animation-delay:.05s}.wk rect:nth-child(2){animation-delay:.13s}.wk rect:nth-child(3){animation-delay:.21s}.wk rect:nth-child(4){animation-delay:.29s}
  @keyframes growx{from{transform:scaleX(0)}}
  @keyframes growy{from{transform:scaleY(0)}}
  .sheet{animation:drop .55s .45s cubic-bezier(.16,1,.3,1) backwards}
  @keyframes drop{from{opacity:0;transform:translateY(-16px) rotate(-6deg)}}
  .wk-v rect{transform-origin:center bottom;animation-name:growy}
  /* scroll reveals: graphics and section headings only; paragraphs stay put */
  .js .reveal{opacity:0;transform:translateY(8px);transition:opacity .7s cubic-bezier(0,0,.2,1),transform .7s cubic-bezier(0,0,.2,1)}
  .js .wipe{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(8px);transition:opacity .8s cubic-bezier(0,0,.2,1),clip-path .8s cubic-bezier(0,0,.2,1),transform .8s cubic-bezier(0,0,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
  .js .wipe.in{opacity:1;clip-path:inset(0);transform:none}
  .js .pic svg .sh{transform:translateY(14px) rotate(-3deg);transform-origin:50% 60%;transition:transform .9s cubic-bezier(0,0,.2,1)}
  .js .pic.in svg .sh{transform:none}
  .cta,.alt,.nav a,.menu,.wa{transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
  @media (hover:hover) and (pointer:fine){.cta:hover{background:var(--cobalt-2)}.contact .cta:hover{background:var(--tint)}.nav a:hover{color:var(--cobalt)}}
  /* art: the band settles as it crosses the screen (scroll-linked where view timelines exist; still elsewhere) */
  @supports (animation-timeline:view()){
    .band-pic img{animation:bandin linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    @keyframes bandin{from{transform:scale(1.08) translateY(-3%)}}
  }
  /* films: the first frame is the poster; the video fades in over it once it plays */
  .js .film .start{display:block}.js .film .end{display:none}
  .film video{transition:opacity .4s cubic-bezier(0,0,.2,1)}
  /* the work tiles rise in as one group, then tilt toward the pointer or the tap */
  .js .pic picture{transform:translateY(14px) rotate(-3deg);transform-origin:50% 60%;transition:transform .9s cubic-bezier(0,0,.2,1)}
  .js .pic.in picture{transform:none}
  .pic img{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));transition:transform .18s cubic-bezier(0,0,.2,1)}
}