/* ================= the look of the site: night blue, and the machines as technical drawings =================
   Laid over the base CSS in index.html. The rules hang on the classes toned, tone-e and drawn on <html>, names left from the tone
   exploration that chose this look on 2026-10-14 (the other tones are in git history, up to commit 1914c7a). */
.logo{aspect-ratio:3289/516;background:var(--logo,#fff);-webkit-mask:url(/assets/midnatt-logga-vit.png) center/contain no-repeat;mask:url(/assets/midnatt-logga-vit.png) center/contain no-repeat}
:root{--bg-e:var(--eng)}
html.toned,.toned body{background:var(--bg-e)}
.toned .ink{background:var(--gap)}
.toned .side.engine{background:var(--bg-e);color:var(--fe)}
.toned .lab::before{background:var(--lab)}
.toned.portrait.view-engine .top::before{background:var(--bg-e)}
.toned .dots{display:none}
/* the rays become a soft light behind the engine, the lab glow a light behind the reactor */
.toned .burst{opacity:1;animation:none;-webkit-mask-image:none;mask-image:none;background:radial-gradient(circle closest-side,var(--glow-e),transparent 24%)}
.toned .glow{background:radial-gradient(circle closest-side,var(--glow-l),transparent 78%)}
/* titles */
.toned .block{-webkit-text-stroke:var(--stroke,0);text-shadow:var(--tshadow,none)}
.toned .t-engine .block,.toned .engine .panel .block{color:var(--te)}
.toned .t-lab .block,.toned .lab .panel .block{color:var(--tl)}
.toned .tag{color:var(--fe)}
.toned .t-lab .tag{color:var(--fl);background:var(--tagbg,transparent);padding:var(--tagpad,0)}
.toned .t-engine .more{color:var(--fe)} .toned .t-lab .more{color:var(--fl)}
.toned .both,.toned .both:hover{color:var(--fe)}
/* buttons, the & and the menu */
.toned .btn{background:var(--card);color:var(--cardfg);border:var(--bw) solid var(--edge);box-shadow:var(--shadow)}
.toned .side:hover .btn,.toned .btn.big:hover{box-shadow:var(--shadow-hi,var(--shadow))}
.toned .engine:hover .btn,.toned .btn.big{background:var(--eng-hi);color:var(--hi-fg);border-color:var(--hi-edge,var(--edge))}
.toned .lab:hover .btn,.toned .lab .btn.big{background:var(--lab-hi);color:var(--hi-fg);border-color:var(--hi-edge,var(--edge))}
.toned .btn.ghost{background:transparent}
.toned .amp{background:var(--amp-bg);color:var(--amp-fg);border:var(--bw) solid var(--amp-edge,var(--edge));box-shadow:var(--shadow)}
.toned .nav{background:var(--nav-bg)}
.toned .nav a,.toned .nav .reel,.toned .langs button{color:var(--nav-fg)}
.toned .nav a:hover,.toned .nav a[aria-current],.toned .nav .reel:hover,.toned .langs button.on{background:var(--nav-fg);color:var(--nav-solid)}
.toned .nav a.hi{background:var(--eng);color:var(--ink)} .toned .nav a.hi:hover{background:var(--nav-fg);color:var(--nav-solid)}
/* the cases: clouds, bubbles and the little trail */
.toned .case .shape{filter:drop-shadow(var(--cw) 0 0 var(--cline)) drop-shadow(calc(var(--cw) * -1) 0 0 var(--cline)) drop-shadow(0 var(--cw) 0 var(--cline)) drop-shadow(0 calc(var(--cw) * -1) 0 var(--cline)) var(--cdrop)}
.toned .puff .skin{background:radial-gradient(circle at 40% 36%,var(--puff) 0 58%,var(--puff-dk) 59%)}
.toned .bubble .skin{background:var(--rim)}
.toned .bubble .shine{background:radial-gradient(circle at 27% 23%,rgba(255,255,255,.9) 0 6.5%,transparent 7.5%),radial-gradient(circle at 36% 15%,rgba(255,255,255,.85) 0 2.6%,transparent 3.4%)}
.toned .bubble .shine::after{border-bottom-color:rgba(255,255,255,.45)}
.toned .dot{border-width:var(--dotw,5px)!important;border-color:var(--cline)!important}
.toned .dot.puff{background:radial-gradient(circle at 40% 36%,var(--puff) 0 56%,var(--puff-dk) 58%)}
.toned .dot.bubble{background:radial-gradient(circle at 30% 26%,#fff 0 12%,transparent 14%),var(--dotbub);box-shadow:none}
.toned .case .label{background:var(--label-bg);color:var(--label-fg)}
/* the Motorn and Labbet pages */
.toned .engine .panel{color:var(--fe)} .toned .lab .panel{color:var(--fl)}
.toned .panel .kicker{background:transparent;color:var(--kick-e);padding:0;letter-spacing:.22em}
.toned .lab .panel .kicker{color:var(--kick-l)}
.toned .engine .panel h3{color:var(--h3e,var(--fe))} .toned .lab .panel h3{color:var(--h3l,var(--fl))}
.toned .chips li,.toned .steps li,.toned .card,.toned .feature,.toned .prices li,.toned .brief{background:var(--card);color:var(--cardfg);border:var(--bw) solid var(--edge);box-shadow:var(--shadow)}
.toned .card:hover,.toned .feature:hover{box-shadow:var(--shadow-hi,var(--shadow))}
.toned .card img,.toned .feature img{border-bottom:var(--bw) solid var(--edge)}
.toned .engine .steps li::before{background:var(--num-edge,var(--edge));box-shadow:none}
.toned .engine .steps li::after{background:var(--eng-hi);color:var(--hi-fg)}
.toned .lab .steps li::before{background:var(--lab-hi);color:var(--hi-fg);border:var(--bw) solid var(--num-edge,var(--edge))}
.toned .panel-in::before{border-color:var(--edge);border-width:var(--bw)}
.toned .engine .panel-in::before{background:repeating-linear-gradient(180deg,var(--belt1) 0 10px,var(--belt2) 10px 20px)}
.toned .lab .panel-in::before{background:repeating-linear-gradient(180deg,var(--lab-hi) 0 26px,var(--pipe2) 26px 34px,var(--lab-hi) 34px 60px);background-size:100% 60px}
.toned .opt{border-color:var(--edge);border-width:var(--bw);color:var(--cardfg)}
.toned .opt:hover{box-shadow:var(--shadow)}
.toned .opt[aria-pressed=true]{background:var(--cardfg);color:var(--card-solid)}
.toned .fields input{border-color:var(--edge);border-width:var(--bw);background:var(--input-bg,#fff);color:var(--cardfg)}
.toned .letter{background:var(--letter-bg);border-color:var(--edge)}
/* Om oss and the case view are night blue: the client logos and the awards are white */
.toned .about{background:var(--about,var(--ink))}
.toned .d-engine{background:var(--bg-e);color:var(--fe)} .toned .d-lab{background:var(--lab);color:var(--fl)}
.toned .quotes figure,.toned .sheet .quote{background:var(--about2,#1c2b4d)}
.toned .sheet{background:var(--sheet,var(--ink))}
/* the leaning and dancing letters stand straight, and the cards are not tilted */
.tone-e .t-engine .block{transform:none}
.tone-e .t-lab .word span{rotate:0deg!important;translate:none!important}
.tone-e .grid .card,.tone-e .steps li{rotate:0deg!important}
.tone-e .card:hover,.tone-e .steps li:hover{translate:0 -3px}

/* the colours: night blue, orange only where there is heat or light */
.tone-e{
  --bg-e:#14213D; --lab:#0B1529; --gap:#050a16; --fe:#F2ECDF; --fl:#F2ECDF; --te:#F2ECDF; --tl:#F2ECDF;
  --eng-hi:#FCA311; --lab-hi:#FCA311; --hi-fg:#14213D;
  --card:transparent; --card-solid:#14213D; --cardfg:#F2ECDF; --edge:rgba(242,236,223,.3); --bw:2px; --shadow:none; --hi-edge:#FCA311;
  --glow-e:rgba(252,163,17,.2); --glow-l:rgba(120,150,215,.2);
  --amp-bg:#F2ECDF; --amp-fg:#14213D; --amp-edge:#050a16; --logo:#F2ECDF;
  --nav-bg:rgba(242,236,223,.07); --nav-fg:#F2ECDF; --nav-solid:#14213D;
  --cw:3px; --cline:#050a16; --cdrop:drop-shadow(0 12px 18px rgba(0,0,0,.45)); --puff:#E9E4DA; --puff-dk:#c4c5c9;
  --rim:conic-gradient(from 200deg,#FCA311,#F2ECDF,#8ea6d6,#F2ECDF,#FCA311); --dotbub:rgba(170,190,230,.25); --dotw:3px;
  --label-bg:#F2ECDF; --label-fg:#14213D;
  --kick-e:#FCA311; --kick-l:#FCA311; --h3e:#FCA311; --h3l:#FCA311;
  --belt1:rgba(242,236,223,.5); --belt2:transparent; --pipe2:rgba(242,236,223,.5);
  --input-bg:rgba(242,236,223,.06); --letter-bg:rgba(252,163,17,.1); --about:#0B1529; --about2:#18284a; --sheet:#101c36;
}

/* the case view and Om oss are dark: their buttons and tags keep the dark-room look */
.toned .sheet .chips li{background:transparent;color:var(--paper);border:2px solid rgba(247,243,234,.4);box-shadow:none}
.toned .filmbar .btn{background:transparent;color:var(--paper);border:2px solid rgba(247,243,234,.5);box-shadow:none}
.toned .filmbar .btn.on,.toned .filmbar .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.toned .sheet-nav .btn{background:transparent;color:var(--paper);border:4px solid var(--paper);box-shadow:none}
.toned .sheet-nav [data-next]{background:var(--eng);color:var(--ink);border-color:transparent}
.toned .modal[data-side=lab] [data-next]{background:var(--lab-hi)}
.toned .about .btn{background:var(--eng);color:var(--ink);border-color:var(--eng);box-shadow:none}
.toned .about .btn:hover{background:var(--paper);border-color:var(--paper)}
.toned.view-about .logo{background:#F7F3EA}

/* the cases are photos that fade into smoke, nothing has an ink outline, a faint film grain over all */
.tone-e .case .shape{filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}
.tone-e .puff .skin{clip-path:none;background:radial-gradient(circle,rgba(205,215,235,.28) 30%,rgba(205,215,235,0) 70%)}
.tone-e .puff .media,.tone-e .puff.v1 .media{clip-path:none;inset:10%;border-radius:50%;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
.tone-e .bubble .skin{background:radial-gradient(circle,transparent 66%,rgba(242,236,223,.55) 69%,rgba(242,236,223,.12) 71%)}
.tone-e .bubble .media{inset:5%}
.tone-e .bubble .shine{background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.55) 0 4%,transparent 9%)}
.tone-e .bubble .shine::after{display:none}
.tone-e .dot,.tone-e .dot.puff,.tone-e .dot.bubble{border:0!important;box-shadow:none;background:radial-gradient(circle,rgba(215,224,242,.32),rgba(215,224,242,0) 68%)}
.tone-e .case .label{background:transparent;color:#F2ECDF;font-size:15px!important;letter-spacing:.06em;padding:6px 0}
.tone-e .panel-in::before{display:none}
.tone-e .engine .panel-in{padding-left:1vw}.tone-e .lab .panel-in{padding-right:1vw}
.tone-e .steps li{padding-left:58px}
.tone-e .steps li::before{display:none}
.tone-e .engine .steps li::after,.tone-e .lab .steps li::after{content:counter(step,decimal-leading-zero);clip-path:none;background:none;color:var(--eng);left:18px;top:16px;translate:none;width:auto;height:auto;display:block;font-size:15px;letter-spacing:.08em;position:absolute;font-family:"League Spartan",sans-serif}
.tone-e .burst{background:radial-gradient(circle closest-side,rgba(252,163,17,.1),transparent 26%)}
.tone-e body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the machines as technical drawings (sketch.js). Their text (dimensions, the leaders' words) is page text over the drawing. */
.drawn .burst,.drawn .glow{display:none}
.dlabels{position:absolute;inset:0;z-index:3;pointer-events:none}
.dlines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dlines path{stroke:rgba(242,236,223,.62);stroke-width:1;fill:none}
.dlines circle{fill:#FCA311}
.dl{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform;font:500 11px/1 "League Spartan",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8FA6D6}
.dl.dim{translate:-50% -50%;padding:3px 5px;background:var(--bg-e);font-size:12px;letter-spacing:.06em}
.dl.call{translate:0 -100%;padding:4px 4px 5px 6px;border-bottom:1px solid currentColor;color:#F2ECDF;font-size:clamp(10px,.5vw + 4px,13px);background:var(--bg-e)}
/* on a phone the start screen has no room for the callouts: the drawings stand alone there, and get them on their own pages */
.portrait.view-home .dlabels{display:none}
.lab .dl.call{background:var(--lab)}
.dl.call.left{translate:-100% -100%;padding:4px 6px 5px 4px}
.dl.call b{color:#FCA311;font-weight:500;margin-right:.7em}
.lab .dl.dim{background:var(--lab)}
.dl.call{transition:color .3s}
.dl.call b{transition:color .3s}
.dl.call:not(.on){color:rgba(242,236,223,.78)}
.dl.call:not(.on) b{color:rgba(252,163,17,.7)}
/* the sheet's frame: a thin border inset from the edges, zone ticks and numbers 1 to 8 across, A to F down */
.sheetframe{position:fixed;inset:12px;z-index:6;pointer-events:none;border:1px solid rgba(242,236,223,.2);
  --tick:linear-gradient(rgba(242,236,223,.22),rgba(242,236,223,.22))}
.sheetframe i{position:absolute;font:500 9px/1 "League Spartan",sans-serif;font-style:normal;letter-spacing:.1em;color:rgba(242,236,223,.34)}
.sheetframe .zx{top:5px;left:calc((var(--i) + .5) * 12.5%);translate:-50% 0}
.sheetframe .zx::after{content:"";position:absolute;left:calc(-.5 * (100vw - 24px) / 8 + 50%);top:-5px;width:1px;height:8px;background:var(--tick)}
.sheetframe .zy{left:5px;top:calc((var(--i) + .5) * 16.666%);translate:0 -50%}
.sheetframe .zy::after{content:"";position:absolute;top:calc(-.5 * (100vh - 24px) / 6 + 50%);left:-5px;height:1px;width:8px;background:var(--tick)}
.portrait .sheetframe{inset:8px}
.portrait .sheetframe .zx:nth-child(even){display:none}
.view-about .sheetframe,.inspect .sheetframe,.og .sheetframe{display:none}
html.drawn .amp{background:var(--bg-e);color:#F2ECDF;border:1.5px solid rgba(242,236,223,.85);box-shadow:none}
/* the cases as detail views on the sheet: a thin ring round the picture, a small caption, a trail of rings back to the machine */
html.drawn .case .shape{filter:none;animation:none}
html.drawn .case .skin{clip-path:none;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(242,236,223,.92)}
html.drawn .case .media,html.drawn .case.v1 .media{clip-path:none;inset:6.5%;border-radius:50%;overflow:hidden;-webkit-mask-image:none;mask-image:none}
html.drawn .bubble .shine{display:none}
html.drawn .dot,html.drawn .dot.puff,html.drawn .dot.bubble{background:transparent!important;border:1.5px solid rgba(242,236,223,.5)!important;box-shadow:none}
html.drawn .case .label{background:transparent;color:#F2ECDF;font:500 11px/1 "League Spartan",sans-serif!important;letter-spacing:.16em;text-transform:uppercase;padding:9px 0 0;top:100%}