/*
 * Davide Di Donato: site
 * Only what Elementor (free) has no control for. Colours, type, spacing and layout are set in Elementor:
 * Design system > Variables, Defaults and Classes, and on each element.
 *
 * Rules that start with .ddd-page only act on pages that have the look (the whole site, or the pages with
 * "Site look" switched on in their Elementor page settings). The rest serves the drawings and the motion.
 */
/* Manrope, served from this site (SIL Open Font License 1.1, see fonts/OFL.txt). */
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/manrope-latin-wght-normal.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}

/* ---- the colours and the font, under names of this stylesheet's own. Each points at the Elementor variable
   of the same name (Design system > Variables) and falls back to the value it has by design. If a variable
   is renamed in Elementor, the plugin adds a line that says where to look instead: nothing to edit here. */
:root{--ddd-bg:var(--bg,#0B0E13);--ddd-surface:var(--surface,#12161E);--ddd-line:var(--line,#252B37);--ddd-line-strong:var(--line-strong,#394150);--ddd-hairline:var(--hairline,#1B202A);--ddd-text:var(--text,#F4F6F9);--ddd-muted:var(--muted,#A9B2C0);--ddd-dim:var(--dim,#8C96A6);--ddd-accent:var(--accent,#F2B866);--ddd-font-main:var(--font-main,'Manrope');--acc:var(--ddd-accent)}

/* ---- the page */
html:has(body.ddd-page){scroll-behavior:smooth;color-scheme:dark}
body.ddd-page{margin:0;background:var(--ddd-bg);color:var(--ddd-text);font-family:var(--ddd-font-main),'Segoe UI',system-ui,sans-serif;font-size:17px;line-height:1.6;font-weight:400;font-style:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-wrap:wrap}
.ddd-page ::selection{background:rgba(242,184,102,.32);background:color-mix(in srgb,var(--acc) 32%,transparent)}
.ddd-page :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.ddd-page #contact :focus-visible{outline-color:var(--ddd-bg)}
.ddd-page .site-header{-webkit-backdrop-filter:saturate(160%) blur(18px)}
/* the Hello Elementor theme has rules of its own for a box named "site-header": it spreads and wraps what is inside.
   Not here: the top bar lays out its content the way Elementor says, on every theme. */
.ddd-page .site-header{flex-wrap:nowrap;justify-content:normal}

/* ---- text */
/* a text takes these from the box it sits in (and so, in the end, from the page), whatever the theme says about
   paragraphs and headings in general. Set one on a box in Elementor and the texts inside follow. */
.ddd-page :where(.e-paragraph-base,.e-heading-base,.e-button-base){letter-spacing:inherit;word-spacing:inherit;text-transform:inherit;font-style:inherit;text-wrap:inherit}
/* a heading the theme draws (the title of a post, say) is set in the page's font, not in a font of the theme's own */
.ddd-page :where(h1,h2,h3,h4,h5,h6){font-family:inherit}
.ddd-page .e-heading-base{text-wrap:balance}
.ddd-page .balance{text-wrap:balance}
.ddd-page .pretty{text-wrap:pretty}
.ddd-page .wrap-plain{text-wrap:wrap}
.ddd-page .nowrap{white-space:nowrap}
.ddd-page .tnum{font-variant-numeric:tabular-nums}
.ddd-page .baseline{align-items:baseline}
/* bold inside a heading (or inside a text with the class "hl") is the accent colour, not a heavier weight */
.ddd-page .e-heading-base :is(strong,b),.ddd-page .hl :is(strong,b){color:var(--acc);font-weight:inherit}
.ddd-page a{text-underline-offset:4px}
/* a link with no look of its own: one the theme draws, or one written inside a text (select words, add a link) */
:where(.ddd-page) a{color:var(--ddd-text)}
:where(.ddd-page) a:hover{color:var(--acc)}
.ddd-page :is(p,h1,h2,h3,h4,h5,h6) a{color:var(--ddd-text);text-decoration:underline}
.ddd-page :is(p,h1,h2,h3,h4,h5,h6) a:hover{color:var(--acc)}
.ddd-page .br-wide br{display:none}
@media (min-width:760px){.ddd-page .br-wide br{display:inline}}

/* ---- marks before list lines: the line keeps its text in one piece, the mark hangs in the left margin */
.ddd-page .li-dot,.ddd-page .li-check,.ddd-page .li-cross,.ddd-page .key{position:relative}
.ddd-page .li-dot{padding-left:20px}
.ddd-page .li-dot::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background-color:var(--acc)}
.ddd-page .li-check,.ddd-page .li-cross{padding-left:32px}
.ddd-page .li-check::before,.ddd-page .li-cross::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;background-color:var(--acc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/20px 20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/20px 20px no-repeat}
.ddd-page .li-cross::before{background-color:var(--ddd-dim);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6L6 18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6L6 18'/%3E%3C/svg%3E")}
.ddd-page .num-list{counter-reset:ddd-line}
.ddd-page .li-num{counter-increment:ddd-line;padding-left:36px;text-indent:-36px}
.ddd-page .li-num::before{content:counter(ddd-line);display:inline-block;width:20px;margin-right:16px;text-indent:0;font-size:13.5px;font-weight:700;color:var(--ddd-dim)}
.ddd-page .key{padding-left:24px}
.ddd-page .key::before{content:"";position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:3px}
.ddd-page .key-read::before{background-color:var(--ddd-text)}
.ddd-page .key-sampled::before{border:1px solid var(--ddd-dim);background-image:repeating-linear-gradient(135deg,var(--ddd-text) 0,var(--ddd-text) 1.5px,transparent 1.5px,transparent 5px)}
.ddd-page .key-mapped::before{border:1px solid var(--ddd-line-strong)}
.ddd-page .link-arrow{text-underline-offset:5px}
.ddd-page .link-arrow::after{content:"";flex:0 0 auto;width:14px;height:14px;margin-left:6px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/14px 14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/14px 14px no-repeat}

/* ---- shown from a certain width (class on the element; remove the class to manage it in Elementor).
   Written as "not from that width on": a screen scaled to 125% or 150% can be a fraction of a pixel narrower
   than a whole number, and the switch must still happen at exactly that width. */
@media not all and (min-width:880px){.ddd-page .from-880.from-880{display:none}}
@media not all and (min-width:960px){.ddd-page .from-960.from-960{display:none}}
@media not all and (min-width:1200px){.ddd-page .from-1200.from-1200{display:none}}
/* a row of two columns that becomes one below 600 px, a width Elementor has no breakpoint for
   (class on the row; remove the class to manage it in Elementor) */
@media not all and (min-width:600px){.ddd-page .stack-600.stack-600{grid-template-columns:minmax(0,1fr)}.ddd-page .stack-600.stack-600>*{grid-column:auto;grid-row:auto}.ddd-page .stack-600.stack-600>.report-meta{margin-top:4px}}
/* the design gives the footer links their phone spacing up to and including 700 px wide; Elementor's phone layout
   ends at 699. This covers the one pixel in between. */
@media (min-width:699.02px) and (max-width:700px){.ddd-page .footer-link.footer-link{padding-top:10px;padding-bottom:10px}}
/* the drawing of the build section sits at the right of its heading on wide screens */
.ddd-page .bd-fig.bd-fig{margin:24px 0 0;max-width:280px}
@media (min-width:1080px){.ddd-page .bd-fig.bd-fig{position:absolute;top:-6px;right:0;width:280px;margin:0}}

/* ---- drawings: the widget adds no box of its own, the drawing sits directly in its place */
.elementor .elementor-widget-ddd-drawing{display:contents}
/* a drawing takes its colours from the variables too: f-<name> fills, s-<name> strokes */
.f-bg{fill:var(--ddd-bg)}.s-bg{stroke:var(--ddd-bg)}.f-surface{fill:var(--ddd-surface)}.s-surface{stroke:var(--ddd-surface)}.f-line{fill:var(--ddd-line)}.s-line{stroke:var(--ddd-line)}.f-line-strong{fill:var(--ddd-line-strong)}.s-line-strong{stroke:var(--ddd-line-strong)}.f-hairline{fill:var(--ddd-hairline)}.s-hairline{stroke:var(--ddd-hairline)}.f-text{fill:var(--ddd-text)}.s-text{stroke:var(--ddd-text)}.f-muted{fill:var(--ddd-muted)}.s-muted{stroke:var(--ddd-muted)}.f-dim{fill:var(--ddd-dim)}.s-dim{stroke:var(--ddd-dim)}.f-accent{fill:var(--ddd-accent)}.s-accent{stroke:var(--ddd-accent)}

/* ---- order in a sequence */
.elementor .d1{--i:1}.elementor .d2{--i:2}.elementor .d3{--i:3}.elementor .d4{--i:4}.elementor .d5{--i:5}.elementor .d6{--i:6}
.mo-kids>:nth-child(2){--i:1}.mo-kids>:nth-child(3){--i:2}.mo-kids>:nth-child(4){--i:3}.mo-kids>:nth-child(5){--i:4}.mo-kids>:nth-child(6){--i:5}.mo-kids>:nth-child(7){--i:6}.mo-kids>:nth-child(8){--i:7}.mo-kids>:nth-child(9){--i:8}.mo-kids>:nth-child(10){--i:9}.mo-kids>:nth-child(11){--i:10}.mo-kids>:nth-child(12){--i:11}.mo-kids>:nth-child(13){--i:12}.mo-kids>:nth-child(14){--i:13}

/* ---- drawings and motion, as designed (the design's colours written as variables) */
.gb,.bf{transform-box:fill-box;transform-origin:0 50%}
.bf{transform:scaleX(var(--p,1))}
.mo-fleet{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 7px;max-width:560px}
.mo-fleet>svg{display:block;width:100%;height:auto}
@media (min-width:520px){.mo-fleet{grid-template-columns:repeat(10,minmax(0,1fr));gap:9px 10px}}
.pl{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;max-width:620px;font-size:13.5px;line-height:1.3;font-weight:600;color:var(--ddd-text)}
.pl>li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.pl-n{position:relative;display:grid;place-items:center;width:44px;height:44px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--acc);background-color:var(--ddd-surface);color:var(--ddd-text)}
@media (min-width:640px){.pl{grid-template-columns:repeat(4,minmax(0,1fr)) auto}.pl>li:not(:last-child)::before{content:"";position:absolute;top:21px;left:22px;width:calc(100% + 8px);height:2px;background-color:var(--acc);transform-origin:0 50%}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-draw{to{stroke-dashoffset:0}}
@keyframes mo-stall{0%{transform:scaleX(0)}30%{transform:scaleX(.38)}62%{transform:scaleX(.38)}100%{transform:none}}
html.mo-on .mo-gantt .gb{transform:scaleX(0)}
html.mo-on .mo-gantt .gf{opacity:0}
html.mo-on .mo-gantt.in .gb{animation:mo-grow .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*140ms + 250ms)}
html.mo-on .mo-gantt.in .gf{animation:mo-fade .5s ease both;animation-delay:calc(var(--i,0)*140ms + 300ms)}
html.mo-on .mo-sig{clip-path:inset(-4px 100% -4px -4px)}
html.mo-on .mo-sig.in{animation:mo-wipe 2.4s linear .3s both}
html.mo-on .mo-fleet .bf{transform:scaleX(0)}
html.mo-on .mo-fleet.in .bf{animation:mo-grow var(--t,.9s) cubic-bezier(.35,0,.25,1) var(--d,0s) both}
html.mo-on .mo-fleet.in .bf.st{animation-name:mo-stall}
html.mo-on .mo-rail>li{opacity:0}
html.mo-on .mo-rail>li::before{transform:scaleX(0)}
html.mo-on .mo-rail.in>li{opacity:1;transition:opacity .45s ease;transition-delay:calc(var(--i,0)*240ms + 250ms)}
html.mo-on .mo-rail.in>li::before{transform:none;transition:transform .34s cubic-bezier(.45,0,.2,1);transition-delay:calc(var(--i,0)*240ms + 380ms)}
html.mo-on .mo-maze .mz{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
html.mo-on .mo-maze .mz-end{opacity:0}
html.mo-on .mo-maze.in .mz{animation:mo-draw 2.8s cubic-bezier(.4,0,.3,1) .35s both}
html.mo-on .mo-maze.in .mz-end{animation:mo-fade .4s ease 3.1s both}
.holo{filter:drop-shadow(0 0 5px rgba(138,166,200,.32))}
.mo-scan{animation:mo-scan 2.1s cubic-bezier(.45,0,.2,1) .75s both}
.mo-holo{position:relative}
.mo-scan::after,.mo-holo::after{content:"";position:absolute;top:22%;bottom:0;left:0;width:2px;margin-left:-3px;opacity:0;background:linear-gradient(180deg,transparent,rgba(190,214,245,.85) 40%,rgba(190,214,245,.85) 82%,transparent);pointer-events:none}
@keyframes mo-bar{0%{left:0;opacity:0}8%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
.mo-scan::after{animation:mo-bar 2.1s cubic-bezier(.45,0,.2,1) .75s both}
.elementor .gl.gl::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;pointer-events:none;background-image:repeating-linear-gradient(148.47deg, transparent 0, transparent calc(1px * 5.2825 - 0.8px), rgba(138, 166, 200, 0.17) calc(1px * 5.2825 - 0.8px), rgba(138, 166, 200, 0.17) calc(1px * 5.2825)), repeating-linear-gradient(180deg, rgba(138, 166, 200, 0.3) 0, rgba(138, 166, 200, 0.3) 0.9px, transparent 0.9px, transparent calc(1px * 7.1300));-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.45) 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.45) 50%,transparent 100%)}
.cd-fig{display:none}
@media (min-width:1200px){.cd-fig{display:block;position:absolute;pointer-events:none}}
.kb{--hit:color-mix(in srgb,var(--acc) 70%,#fff);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.kb>*{--rest:#2E3643;background-color:var(--rest);transition:background-color .25s ease}
.kb>.kb-b{--rest:var(--ddd-bg)}
@media (hover:hover){.kb>*:hover{background-color:color-mix(in srgb,var(--acc) 45%,var(--rest))}}
.kb>.kb-on,.kb>.kb-on:hover{background-color:var(--acc)}
.kb>.dn,.kb>*:active{background-color:var(--hit) !important;transition:none}
@keyframes mo-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mo-pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes mo-cell{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes mo-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes mo-sheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes mo-key{from{background-color:var(--rest)}to{background-color:var(--acc)}}
@keyframes mo-wipe{from{clip-path:inset(-4px 100% -4px -4px)}to{clip-path:inset(-4px -4px -4px -4px)}}
@keyframes mo-scan{from{clip-path:inset(-14px 100% -14px -14px)}to{clip-path:inset(-14px -14px -14px -14px)}}
.mo-load{animation:mo-rise 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*100ms + 60ms)}
.mo-pop{animation:mo-pop 1.1s cubic-bezier(.16,1,.3,1) both}
html.mo-on .mo-rev{opacity:0;transform:translateY(32px) scale(.98)}
html.mo-on .mo-rev.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*90ms)}
html.mo-on .mo-lit{color:#3A4354}
html.mo-on .mo-lit.in{color:var(--ddd-text);transition:color .8s ease}
html.mo-on .mo-kids>*{opacity:0;transform:translateY(14px)}
html.mo-on .mo-kids.in>*{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*90ms)}
html.mo-on .mo-seq>*{opacity:0}
html.mo-on .mo-seq.in>*{animation:mo-cell .5s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i,0)*14ms + 250ms)}
html.mo-on .mo-holo{clip-path:inset(-14px 100% -14px -14px)}
html.mo-on .mo-holo.in{animation:mo-scan 1.7s cubic-bezier(.45,0,.2,1) .2s both}
html.mo-on .mo-holo.in::after{animation:mo-bar 1.7s cubic-bezier(.45,0,.2,1) .2s both}
html.mo-on .mo-pan{clip-path:inset(-4px 100% -4px -4px)}
html.mo-on .mo-pan.in{animation:mo-wipe 2.4s cubic-bezier(.45,0,.2,1) .35s both}
html.mo-on .mo-keys>.kb-on{background-color:var(--rest)}
html.mo-on .mo-keys.in>.kb-on{animation:mo-key .5s ease both;animation-delay:calc(var(--i,0)*110ms + 350ms)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.mo-sheen strong{background-image:linear-gradient(100deg,var(--acc) 42%,#FFF3DC 50%,var(--acc) 58%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mo-sheen 2.2s cubic-bezier(.4,0,.2,1) 1.1s both}}
@media (prefers-reduced-motion:reduce){html:has(body.ddd-page){scroll-behavior:auto}.mo-load,.mo-pop,.mo-sheen strong,.mo-scan,.mo-scan::after{animation:none}}

/* ---- inside the Elementor editor nothing moves or hides, so everything can be clicked */
.elementor-editor-active .mo-load,.elementor-editor-active .mo-pop,.elementor-editor-active .mo-sheen strong,.elementor-editor-active .mo-scan,.elementor-editor-active .mo-scan::after{animation:none}