/* =========================================================
   Innovinto.com – Home page
   Static replica of the live WordPress/Divi page.
   Values are measured from https://innovinto.com/ at
   1440px (desktop), 820px (tablet) and 390px (phone).
   Breakpoints follow Divi: tablet <= 980px, phone <= 767px.
   ========================================================= */

:root{
  --navy:#0a0e17;
  --purple:#8139ff;
  --purple-dark:#5f00b2;
  --purple-active:#572ac1;
  --blue:#4b78ed;
  --blue-dark:#0c71c3;
  --green:#30dc74;
  --card:#202634;
  --link:#2ea3f2;
  --footer-end:#19043e;
}

/* ---------- Icons (inline SVG masks, coloured with currentColor) ---------- */
.ico{display:inline-block;background-color:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;vertical-align:middle}
.ico-youtube{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M29.4 9.6c-.3-1.3-1.3-2.2-2.5-2.5C24.7 6.5 16 6.5 16 6.5s-8.7 0-10.9.6C3.9 7.4 2.9 8.3 2.6 9.6 2 11.8 2 16 2 16s0 4.2.6 6.4c.3 1.3 1.3 2.2 2.5 2.5 2.2.6 10.9.6 10.9.6s8.7 0 10.9-.6c1.2-.3 2.2-1.2 2.5-2.5.6-2.2.6-6.4.6-6.4s0-4.2-.6-6.4zM13.2 20.1v-8.2l7.2 4.1-7.2 4.1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M29.4 9.6c-.3-1.3-1.3-2.2-2.5-2.5C24.7 6.5 16 6.5 16 6.5s-8.7 0-10.9.6C3.9 7.4 2.9 8.3 2.6 9.6 2 11.8 2 16 2 16s0 4.2.6 6.4c.3 1.3 1.3 2.2 2.5 2.5 2.2.6 10.9.6 10.9.6s8.7 0 10.9-.6c1.2-.3 2.2-1.2 2.5-2.5.6-2.2.6-6.4.6-6.4s0-4.2-.6-6.4zM13.2 20.1v-8.2l7.2 4.1-7.2 4.1z'/%3E%3C/svg%3E")}
.ico-linkedin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 11.5h4.6V27H5V11.5zM7.3 4.5c1.5 0 2.7 1.2 2.7 2.7S8.8 9.9 7.3 9.9 4.6 8.7 4.6 7.2s1.2-2.7 2.7-2.7zM12.5 11.5h4.4v2.1h.1c.6-1.2 2.1-2.4 4.4-2.4 4.7 0 5.6 3.1 5.6 7.1V27h-4.6v-7.7c0-1.8 0-4.2-2.6-4.2s-2.9 2-2.9 4.1V27h-4.6V11.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 11.5h4.6V27H5V11.5zM7.3 4.5c1.5 0 2.7 1.2 2.7 2.7S8.8 9.9 7.3 9.9 4.6 8.7 4.6 7.2s1.2-2.7 2.7-2.7zM12.5 11.5h4.4v2.1h.1c.6-1.2 2.1-2.4 4.4-2.4 4.7 0 5.6 3.1 5.6 7.1V27h-4.6v-7.7c0-1.8 0-4.2-2.6-4.2s-2.9 2-2.9 4.1V27h-4.6V11.5z'/%3E%3C/svg%3E")}

/* ---------- Base (Divi defaults) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#666;font-family:"Open Sans",Arial,sans-serif;font-size:14px;font-weight:500;line-height:1.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--link);text-decoration:none}
img{max-width:100%;height:auto;border:0}
ul{margin:0;padding:0;list-style:none}
p{margin:0;padding-bottom:1em}
p:last-of-type{padding-bottom:0}
h1,h2,h3,h4,h5,h6{margin:0;padding-bottom:10px;color:#333;font-weight:500;line-height:1em}
strong{font-weight:700}

#page-container{position:relative;overflow:visible}

/* ---------- Layout: sections, rows, columns, modules ---------- */
.section{position:relative;background-color:var(--navy);background-position:50%;background-size:cover}
.row{position:relative;width:80%;max-width:1450px;margin:0 auto;padding:2% 0;display:flex;align-items:flex-start}
.col{position:relative;flex:none;min-height:1px}
.col-4-4{width:100%}
.col-1-2{width:47.25%;margin-right:5.5%}
.col-1-3{width:29.6667%;margin-right:5.5%}
.col-1-4{width:20.875%;margin-right:5.5%}
.col:last-child{margin-right:0}

.module{position:relative;margin-bottom:2.75%}
.col-1-2 .module{margin-bottom:5.82%}
.col-1-3 .module{margin-bottom:9.27%}
.col-1-4 .module{margin-bottom:11.7%}
.module:last-child{margin-bottom:0}

/* explicit module spacing used on the live page */
.module.mb-20{margin-bottom:20px}
.module.mb-30{margin-bottom:30px}
.module.mb-10{margin-bottom:10px}
.module.mb-76{margin-bottom:76px}
.module.mb-7{margin-bottom:7px}
.module.mt-33{margin-top:33px}
.module.pb-1{padding-bottom:1px}
.heading-module{margin-top:10px;margin-bottom:10px}
.module.heading-module:last-child{margin-bottom:10px}
.w70,.heading-module{max-width:70%}

/* parallax backgrounds (Divi "true parallax") */
.parallax-wrap{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}
.parallax-bg{position:absolute;bottom:0;left:0;width:100%;height:100%;display:block;background-repeat:no-repeat;background-position:50% 0;background-size:cover;will-change:transform}

/* ---------- Typography of modules ---------- */
.eyebrow h4{font-family:"Roboto Mono",monospace;font-size:16px;font-weight:500;line-height:1.4em;letter-spacing:1px;color:#fff}
.typing-heading{font-family:"Baloo 2",display;font-size:72px;font-weight:600;line-height:72px;color:var(--green)}
.before-typing,.after-typing{display:inline-block;color:#fff}
.heading-module h1{font-family:"Baloo 2",display;font-size:72px;font-weight:600;line-height:1em;color:#fff}
.body-text p{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:20px;font-weight:500;line-height:1.8em;color:#fff}
.body-text-opensans p{font-family:"Open Sans",Arial,sans-serif;font-size:20px;font-weight:500;line-height:1.8em;color:#fff}

/* ---------- Buttons (Divi .et_pb_button) ---------- */
.btn{position:relative;display:inline-block;font-size:16px;line-height:1.7em;border:2px solid transparent;border-radius:3px;padding:.3em 1em;background-color:transparent;transition:all .2s;text-decoration:none;cursor:pointer}
.btn::after{content:"";position:absolute;top:50%;margin-left:-1em;width:1em;height:1em;font-size:1.6em;opacity:0;transform:translateY(-50%);transition:all .2s;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13.2 10.2L15.4 8l8 8-8 8-2.2-2.2L19 16z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13.2 10.2L15.4 8l8 8-8 8-2.2-2.2L19 16z'/%3E%3C/svg%3E") no-repeat center/contain}
.btn:hover::after{opacity:1;margin-left:0}

/* dual buttons (Divi Supreme) */
.dual-buttons{line-height:0}
.dual-buttons .btn{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-weight:600;text-transform:uppercase;border-radius:100px;padding:10px 40px;line-height:27.2px;vertical-align:middle}
.dual-buttons .btn + .btn{margin-left:20px}
.btn-outline{border-width:2px;background-color:rgba(255,255,255,0)}
.btn-solid{border-width:0}
.btn-green-outline{border-color:var(--green);color:var(--green)}
.btn-green-solid{background-color:var(--green);color:#fff}
.btn-white-outline{border-color:#fff;color:#fff}
.btn-white-solid{background-color:#fff}
.btn-text-green{color:var(--green)}
.btn-text-blue{color:var(--blue-dark)}

/* "Our Work Process" */
.btn-process{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.7em;color:var(--purple);background-color:#fff;border-width:0;border-radius:100px;padding:12px 24px;transition:all .3s}
.btn-process::after{font-size:1em;transition:all .3s}
.btn-process:hover::after{margin-left:.3em}
.button-module{line-height:1.7em}

/* card links */
.btn-link{font-family:"Open Sans",Arial,sans-serif;font-weight:500;color:var(--link);border-width:0;transition:all .3s}
.btn-link:hover{padding:.3em 2em .3em .7em;background-color:rgba(0,0,0,.05)}

/* =========================================================
   Header
   ========================================================= */
.container{position:relative;width:80%;max-width:1450px;margin:auto}

#main-header{position:fixed;top:0;left:0;width:100%;z-index:99999;background-color:rgba(255,255,255,.94);transition:background-color .5s ease-in-out}
#main-header .container{clear:both}
#main-header .container::after{content:"";display:block;clear:both}
.logo_container{position:absolute;top:0;left:0;width:100%;height:100%}
.logo_helper{display:inline-block;width:0;height:100%;vertical-align:middle}
.logo_container a{font-size:14px}
#logo{display:inline-block;width:auto;height:auto;max-height:50%;vertical-align:middle;transform:scale(1);transition:all .4s ease-in-out,transform .6s ease-in-out}
.logo_container a:hover #logo{transform:scale(1.1)}

#et-top-navigation{float:right;position:relative;padding-top:35px;padding-left:328px;transition:all .4s ease-in-out}
#top-menu-nav,#top-menu{float:left}
#top-menu{line-height:0}
#top-menu > li{position:relative;display:inline-block;padding-right:30px;font-size:15px}
#top-menu > li > a{position:relative;display:block;padding-bottom:45px;font-family:"Open Sans",Arial,sans-serif;font-size:15px;font-weight:700;line-height:1.7em;color:rgba(0,0,0,.8);transition:all .4s ease-in-out}
#top-menu > li.current-menu-item > a{color:var(--purple)}

/* three dots under current / hovered items */
#top-menu > li:not(.menu-item-has-children):not(.cta-item) > a > span::after{content:"";position:absolute;left:50%;top:25px;width:5px;height:5px;border-radius:100px;transform:translateX(-50%);background-color:transparent;transition:.3s ease-in-out}
#top-menu > li.current-menu-item:not(.menu-item-has-children):not(.cta-item) > a > span::after,
#top-menu > li:not(.menu-item-has-children):not(.cta-item):hover > a > span::after{background-color:var(--purple);box-shadow:var(--purple) 10px 0 0 0,var(--purple) -10px 0 0 0}

/* Services dropdown arrow */
#top-menu > li.menu-item-has-children > a{padding-right:20px}
#top-menu > li.menu-item-has-children > a::after{content:"";position:absolute;right:0;top:0;width:16px;height:1.7em;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 13.5l1.5-1.5 5.5 5.5 5.5-5.5 1.5 1.5-7 7z'/%3E%3C/svg%3E") no-repeat center calc(50% + 1px)/16px 16px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 13.5l1.5-1.5 5.5 5.5 5.5-5.5 1.5 1.5-7 7z'/%3E%3C/svg%3E") no-repeat center calc(50% + 1px)/16px 16px}

/* sub menu */
#top-menu .sub-menu{position:absolute;top:100%;left:0;z-index:9999;width:346px;padding:20px 0;background-color:rgba(255,255,255,.94);border-top:3px solid var(--purple);border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.1);visibility:hidden;opacity:0;transition:all .2s ease-in-out;text-align:left;line-height:1.7em}
#top-menu > li:hover > .sub-menu{visibility:visible;opacity:1}
#top-menu .sub-menu li{display:block;padding:0 20px;margin:0}
#top-menu .sub-menu a{display:block;padding:6px 20px;font-family:"Open Sans",Arial,sans-serif;font-size:14px;font-weight:700;line-height:28px;color:rgba(10,0,0,.81);transition:all .2s ease-in-out}
#top-menu .sub-menu a:hover{opacity:1;background-color:rgba(0,0,0,.03);color:var(--purple);letter-spacing:0}
/* Services menu (direction C, 2026-11-07): four service tiles and a bar under the whole header row.
   Opens after a short pause on hover or while focus is inside; js/main.js closes it on Escape and moves the light */
#top-menu > li.menu-item-has-children{position:static}
@media (min-width:1081px){#et-top-navigation{position:static}}   /* the panel measures from the header row (.container), not the menu */
#top-menu .sub-menu.svc-menu{left:auto;right:0;width:100%;padding:28px;background:#fff;border:1px solid #d9d9d9;border-top:3px solid var(--purple);border-radius:0 0 26px 26px;box-shadow:none;line-height:normal;transition:opacity .25s ease-out .15s,transform .25s ease-out .15s,visibility 0s linear .4s}
#top-menu > li:hover > .sub-menu.svc-menu,#top-menu > li:focus-within > .sub-menu.svc-menu{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease-out .08s,transform .25s ease-out .08s,visibility 0s linear .08s}
#top-menu > li.is-shut > .sub-menu.svc-menu{visibility:hidden;opacity:0;transition:none}
#top-menu > li:focus-within > .sub-menu.svc-menu li{opacity:1;transform:none}
.svc-menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
#top-menu .sub-menu.svc-menu li{padding:0;margin:0}
#top-menu .sub-menu.svc-menu .svc-tile{position:relative;display:flex;flex-direction:column;height:236px;padding:22px;border-radius:20px;background:rgba(0,0,0,.03);overflow:hidden;font:inherit;line-height:normal;color:var(--navy);transition:background-color .35s ease,color .35s ease}
.svc-tile::after{content:"";position:absolute;left:var(--mx,62%);top:var(--my,38%);width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(circle,rgba(129,57,255,.45),transparent 62%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.svc-tile-ico{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border:1px solid #d9d9d9;border-radius:50%;color:var(--purple);transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.svc-tile-ico svg,.svc-tile-go svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc-tile-ico svg{width:20px;height:20px}
.svc-tile-num{position:absolute;right:-6px;top:-16px;width:150px;height:96px;fill:#f7f7f7;stroke:rgba(129,57,255,.6);stroke-width:1.3;paint-order:stroke;opacity:.5;font:700 120px "Baloo 2",display;transition:fill .35s ease,opacity .35s ease}
.svc-tile-t{position:relative;z-index:1;margin-top:auto;font:600 22px/1.15 "Baloo 2",display}
.svc-tile-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid #d9d9d9;transition:border-color .35s ease}
.svc-tile-c{font:500 11px/1 "Roboto Mono",monospace;letter-spacing:1px;text-transform:uppercase;color:#666;transition:color .35s ease}
.svc-tile-go{display:grid;place-items:center;width:34px;height:34px;border:1px solid #d9d9d9;border-radius:50%;transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.svc-tile-go svg{width:13px;height:13px;transition:transform .35s ease}
#top-menu .sub-menu.svc-menu .svc-tile:hover,#top-menu .sub-menu.svc-menu .svc-tile:focus-visible{background:var(--navy);color:#fff}
#top-menu .sub-menu.svc-menu .svc-tile:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.svc-tile:hover::after,.svc-tile:focus-visible::after{opacity:1}
.svc-tile:hover .svc-tile-num,.svc-tile:focus-visible .svc-tile-num{fill:var(--navy);stroke:var(--purple);opacity:1}
.svc-tile:hover .svc-tile-ico,.svc-tile:focus-visible .svc-tile-ico{background:var(--purple);border-color:var(--purple);color:#fff}
.svc-tile:hover .svc-tile-foot,.svc-tile:focus-visible .svc-tile-foot{border-color:rgba(255,255,255,.14)}
.svc-tile:hover .svc-tile-c,.svc-tile:focus-visible .svc-tile-c{color:#b07cff}
.svc-tile:hover .svc-tile-go,.svc-tile:focus-visible .svc-tile-go{background:#fff;border-color:#fff;color:var(--navy)}
.svc-tile:hover .svc-tile-go svg,.svc-tile:focus-visible .svc-tile-go svg{transform:rotate(45deg)}
.svc-tile[aria-current="page"] .svc-tile-num{opacity:1}
.svc-tile[aria-current="page"] .svc-tile-c{color:var(--purple)}
.svc-menu-bar{display:flex;align-items:center;gap:26px;margin-top:22px;padding:0 6px}
.svc-menu-bar p{flex:1;margin:0;padding:0;font:400 14px/1.5 Poppins,sans-serif;color:#666}
#top-menu .sub-menu.svc-menu .svc-menu-all{padding:0;font:700 13px/1.7 "Open Sans",Arial,sans-serif;color:var(--navy);background:none}
#top-menu .sub-menu.svc-menu .svc-menu-all:hover{color:var(--purple)}
#top-menu .sub-menu.svc-menu .svc-menu-cta{padding:10px 20px;font:700 12px/1.7 "Open Sans",Arial,sans-serif;color:#fff;background-color:var(--purple);border-radius:50px;transform:scale(1);transition:.3s ease-in-out}
#top-menu .sub-menu.svc-menu .svc-menu-cta:hover{transform:scale(1.1);background-color:var(--purple-dark)}
@media (min-width:1081px) and (max-width:1199px){
  .svc-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #top-menu .sub-menu.svc-menu .svc-tile{height:auto;min-height:172px}
  .svc-tile-t{margin-top:22px;font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  #top-menu .sub-menu.svc-menu,.svc-tile,.svc-tile *,.svc-tile::after{transition:none!important}
}

/* menu call to action */
#top-menu > li.cta-item > a.cta-button{padding:10px 20px;font-size:12px;line-height:1.7em;color:#fff;background-color:var(--purple);border:0 solid #8300e9;border-radius:50px;transform:scale(1);transition:.3s ease-in-out}
#top-menu > li.cta-item > a.cta-button:hover{transform:scale(1.1);background-color:var(--purple-dark);opacity:1}

/* fixed (scrolled) state on desktop */
body.et-fixed #et-top-navigation{padding-top:20px}
body.et-fixed #top-menu > li > a{font-size:16px;padding-bottom:30px}
body.et-fixed #top-menu > li.cta-item > a.cta-button{font-size:12px;padding:10px 20px}

/* mobile navigation (hidden on desktop) */
#et_mobile_nav_menu{display:none}

/* =========================================================
   Sections
   ========================================================= */
.section-0{display:flex;align-items:center;margin-top:-1px;min-height:100vh;min-height:100svh;padding:140px 0 80px;background-color:var(--navy);background-image:url("../images/Innovinto-headerBG.jpg"),radial-gradient(circle at 0% 50%,rgba(19,98,126,.4) 0%,rgba(255,255,255,0) 15%);background-size:cover,cover;background-position:var(--hero-x,50%) 50%,50% 50%}
.section-1{padding:200px 0}
.section-2{padding:250px 0;background-color:var(--green);background-image:linear-gradient(159deg,#30dc74 0%,#4b78ed 100%)}
.section-3{padding:250px 0;background-color:#fff}
.section-4{padding:250px 0 249px;overflow:hidden}
.section-5{padding:100px 0 50px;overflow:hidden}
.section-6{padding:0}
.section-footer{padding:100px 0 86px;background-color:#fff;background-image:linear-gradient(180deg,var(--navy) 0%,var(--footer-end) 100%)}

/* hero */
.typing-module{background-color:rgba(255,255,255,0)}
/* the typing line is its own box; js/main.js gives it the height of its longest phrase */
.typing-wrapper{display:inline-block;width:100%;vertical-align:top}
/* tablet and phone: the longest phrases take two lines, so that space is there from the first paint */
@media (max-width:980px){.typing-wrapper{min-height:2lh}}
.typing-heading .typed-cursor{color:var(--green)}
.typed-cursor{opacity:1}
.typed-cursor.typed-cursor--blink{animation:typedjsBlink .7s infinite}
@keyframes typedjsBlink{50%{opacity:0}}

/* images */
.image{line-height:0}
.image img{display:inline-block}
.image-10x{width:200px}
.image-10x img{width:100%}

/* counters */
.counter{text-align:left;opacity:0;transition:opacity 1s}
.counter.active{opacity:1}
.counter .percent{position:relative;z-index:2;height:72px;margin-bottom:20px}
.counter .percent p{font-family:"Open Sans",Arial,sans-serif;font-size:100px;font-weight:500;line-height:72px;color:#fff;padding:0}
.counter h3.title{position:relative;font-family:"Baloo 2",display;font-size:18px;font-weight:500;line-height:1em;color:#fff}

/* services */
.row-services-head{margin-top:6px}
.services-title h3{font-family:"Baloo 2",display;font-size:42px;font-weight:600;line-height:1.3em;color:#fff}
.services-intro p,.card-text p{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:1.8em}
.services-intro p{color:rgba(255,255,255,.7)}
.card{background-color:var(--card);border-radius:20px;padding:40px}
.card .module.card-title{margin-bottom:0}
.card-title h4{font-family:"Baloo 2",display;font-size:30px;font-weight:600;line-height:1.1em;color:#b07cff}
.card-text p{color:#fff}

/* video */
.video-module{border-radius:20px;overflow:hidden}
.video-box{position:relative;z-index:1;display:block;line-height:0}
.fluid-video{position:relative;width:100%;padding-top:56.2963%}
.fluid-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:20px}
.video-overlay{position:absolute;z-index:10;top:0;left:0;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;cursor:pointer}
.video-overlay-hover{position:absolute;z-index:100;width:100%;height:100%;background:transparent;transition:.5s ease-in-out}
.video-overlay-hover:hover{background:rgba(0,0,0,.6)}
.video-play{position:absolute;z-index:100;left:50%;top:50%;width:6rem;height:6rem;margin-left:-3rem;margin-top:-3rem;color:#fff;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath fill-rule='evenodd' d='M51 5.5a45 45 0 1 1 0 90 45 45 0 0 1 0-90zm0 6a39 39 0 1 0 0 78 39 39 0 0 0 0-78z'/%3E%3Cpath d='M42 33.5L72 50.5 42 67.5z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath fill-rule='evenodd' d='M51 5.5a45 45 0 1 1 0 90 45 45 0 0 1 0-90zm0 6a39 39 0 1 0 0 78 39 39 0 0 0 0-78z'/%3E%3Cpath d='M42 33.5L72 50.5 42 67.5z'/%3E%3C/svg%3E") no-repeat center/contain}

/* expanding call to action (Divi Pixel) */
.row.row-cta{padding:100px 0}
/* the expanded call to action (scale 1.2) may pass the screen edge on phones: clip it there, not the page */
.section:has(> .row-cta){overflow-x:clip}
.expanding-cta{position:relative}
.cta-container{position:relative;z-index:1;padding:100px 40px}
.cta-background{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:20px;overflow:hidden;background-image:linear-gradient(132deg,#8139ff 0%,#4b78ed 100%);transition:transform .5s ease-in-out,box-shadow .5s ease-in-out}
.cta-parallax{border-radius:20px;transition:transform .5s ease-in-out}
.cta-content-wrapper{position:relative;z-index:1;padding:30px;transition:transform .5s ease-in-out,box-shadow .5s ease-in-out}
.cta-content{margin:auto;max-width:100%}
.cta-heading{font-family:"Baloo 2",display;font-size:62px;font-weight:500;line-height:1em;color:#fff;text-align:left;padding:0 0 20px}
.cta-desc{padding:0 0 10px;text-align:left}
.cta-desc p{font-family:"Open Sans",Arial,sans-serif;font-size:16px;line-height:1.05em;color:#fff}
.cta-buttons{text-align:left}
.cta-buttons .btn{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;border-radius:100px;padding:10px 40px;vertical-align:middle}
.btn-cta-outline{border-color:#fff;color:#fff;margin:10px 0}
.btn-cta-solid{border-width:0;color:var(--purple);background-color:#fff;margin-left:20px}
.cta-overlay{position:fixed;top:0;right:0;bottom:0;left:0;height:100vh;opacity:0;visibility:hidden;pointer-events:none;transition:.5s ease-in-out;background-color:var(--navy);background-image:url("../images/Innovinto_main_banner.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}
.expanding-cta.is-expanded .cta-background,
.expanding-cta.is-expanded .cta-content-wrapper,
.expanding-cta.is-expanded .cta-parallax{transform:scale(1.2)}
.expanding-cta.is-expanded .cta-overlay{opacity:1;visibility:visible;pointer-events:auto}
.section-6.cta-on-top{z-index:9999}
.section-6.cta-on-top-removing{z-index:9990}

/* footer */
.footer-label h5{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:20px;font-weight:600;line-height:1.4em;color:#fff}
.footer-contact{margin:-12px 0 15px}
.col-1-3 .module.footer-contact{margin-bottom:15px}
.footer-contact p{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:1.8em;color:rgba(255,255,255,.7)}
.footer-logo{width:60%}
.footer-logo img{width:100%}
.footer-menu ul{padding:0 0 23px;line-height:26px}
.footer-menu li{line-height:26px}
.footer-menu a{font-family:"Open Sans",Arial,sans-serif;font-size:16px;font-weight:600;line-height:2.1em;color:var(--link)}
.footer-heading{max-width:none}
.row.row-footer-bottom{padding:6px 0 0}
.copyright p{font-family:"Open Sans",Arial,sans-serif;font-size:14px;line-height:1.2em;color:rgba(255,255,255,.7)}
.social-follow{text-align:right;line-height:26px;margin:0}
.social-follow li{display:inline-block;margin:0 12px 8px 0;line-height:0}
.social-follow li:last-child{margin-right:0}
/* Outline circles (approved redesign): they fill with the platform colour and glow on hover */
.social-follow a.icon{position:relative;display:inline-block;box-sizing:border-box;width:46px;height:46px;border:1.5px solid rgba(255,255,255,.22);border-radius:50%;background-color:transparent;color:#fff;transition:background-color .3s ease,border-color .3s ease,box-shadow .35s ease}
.social-follow .ico{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px}
.social-youtube a.icon:hover,.social-youtube a.icon:focus-visible{background-color:#a82400;border-color:#a82400;box-shadow:0 0 0 6px rgba(168,36,0,.22),0 12px 26px rgba(168,36,0,.5)}
.social-linkedin a.icon:hover,.social-linkedin a.icon:focus-visible{background-color:var(--blue-dark);border-color:var(--blue-dark);box-shadow:0 0 0 6px rgba(12,113,195,.22),0 12px 26px rgba(12,113,195,.55)}

/* back to top */
.scroll-top{position:fixed;right:0;bottom:125px;z-index:99999;display:none;width:57px;height:58px;padding:10px;border-radius:5px 0 0 5px;background-color:var(--purple);color:#fff;cursor:pointer;transition:.5s ease-in-out}
.scroll-top::before{content:"";display:block;width:36px;height:36px;margin:1px auto 0;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8.4 20.2l1.5 1.5 6.1-6.1 6.1 6.1 1.5-1.5-7.6-7.6z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8.4 20.2l1.5 1.5 6.1-6.1 6.1 6.1 1.5-1.5-7.6-7.6z'/%3E%3C/svg%3E") no-repeat center/contain}
.scroll-top.is-visible{display:block;opacity:1;animation:fadeInRight 1s 1 cubic-bezier(.77,0,.175,1)}
.scroll-top:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.scroll-top.is-hidden{display:block;opacity:0;animation:fadeOutRight 1s 1 cubic-bezier(.77,0,.175,1);pointer-events:none}
@keyframes fadeInRight{0%{opacity:0;transform:translateX(100%)}100%{opacity:1;transform:translateX(0)}}
@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(100%)}}

/* scroll-in animations (Divi et_animated) */
.anim-slide-top{opacity:.22;transform:translate3d(0,-50%,0)}
.anim-fade{opacity:0}
.anim-slide-top.animated{animation:slideTopIn 2s ease-in-out both}
.anim-fade.animated{animation:fadeIn 1s ease-in-out both}
@keyframes slideTopIn{from{opacity:.22;transform:translate3d(0,-50%,0)}to{opacity:1;transform:none}}

/* Animated wordmark in section 1 (approved 2026-11-01): the logo from /logo-animation,
   inline so its loop starts once the slide-in ends, inside the PNG's 734x112 box.
   Every 11.25 s it plays for about 3.5 s and then stays still for 8 s.
   The hop and the fingerprint spin may draw a little outside the box. */
.iv-logo{display:inline-block;max-width:100%;height:auto;aspect-ratio:734/112;overflow:visible}
.iv-l,.iv-dot{transform-box:fill-box;transform-origin:50% 100%}
.iv-fp{transform-box:fill-box;transform-origin:50% 50%}
.image-wordmark.animated .iv-l{animation:iv-wave 11.25s calc(1.9s + var(--i) * 60ms) infinite both}
.image-wordmark.animated .iv-dot{animation:iv-hop 11.25s calc(1.9s + var(--i) * 60ms) infinite both}
.image-wordmark.animated .iv-fp{animation:iv-spin 11.25s calc(1.9s + var(--i) * 60ms) infinite both}
.image-wordmark.animated .iv-fp path{animation:iv-scan 11.25s linear calc(1.9s + var(--d)) infinite both}
.image-wordmark.animated .iv-shine{animation:iv-sweep 11.25s cubic-bezier(.45,0,.25,1) 1.9s infinite both}
.image-wordmark.animated.iv-off .iv-logo *{animation-play-state:paused}
@keyframes iv-wave{
 0%,2.133%{transform:translateY(0) scale(1);animation-timing-function:ease-out}
 3.2%{transform:translateY(0) scale(1.02,.97);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
 5.867%{transform:translateY(-3px) scale(.99,1.015);animation-timing-function:cubic-bezier(.5,0,.8,.4)}
 8.533%{transform:translateY(0) scale(1.02,.97);animation-timing-function:cubic-bezier(.25,.7,.4,1)}
 10.133%{transform:translateY(-.6px) scale(.995,1.005);animation-timing-function:ease-in-out}
 11.733%,100%{transform:translateY(0) scale(1)}
}
@keyframes iv-hop{
 0%,2.133%{transform:translateY(0) scale(1);animation-timing-function:ease-out}
 3.2%{transform:translateY(0) scale(1.02,.97);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
 5.867%{transform:translateY(-3px) scale(.99,1.015);animation-timing-function:cubic-bezier(.5,0,.8,.4)}
 8.533%{transform:translateY(0) scale(1.02,.97);animation-timing-function:cubic-bezier(.25,.7,.4,1)}
 10.133%{transform:translateY(-.6px) scale(.995,1.005);animation-timing-function:ease-in-out}
 11.733%,17.6%{transform:translateY(0) scale(1);animation-timing-function:ease-out}
 19.2%{transform:translateY(0) scale(1.04,.95);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
 21.867%{transform:translateY(-2.5px) scale(.98,1.025);animation-timing-function:cubic-bezier(.5,0,.8,.4)}
 24.533%{transform:translateY(0) scale(1.03,.96);animation-timing-function:ease-out}
 26.133%,100%{transform:translateY(0) scale(1)}
}
@keyframes iv-spin{
 0%,3.2%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.6,0,.3,1)}
 11.733%,100%{transform:rotate(360deg)}
}
@keyframes iv-scan{0%,12.8%{fill:#fff}14.133%{fill:#b07cff}16.533%,100%{fill:#fff}}
@keyframes iv-sweep{0%,24%{transform:translateX(0)}30.933%,100%{transform:translateX(260px)}}
@media (prefers-reduced-motion:reduce){.iv-logo *{animation:none!important}}

/* Animated 10X logo in section 3 (approved 2026-11-01): the logo from /logo-animation,
   inline in the PNG's 200px box. main.js adds .tx-on where the scale-in starts (top 88%),
   so the first play follows it; every 11.25 s it plays for about 3.5 s and then stays
   still for 8 s. The hop, the spin and the shine may draw a little outside the box. */
.tx-logo{display:inline-block;width:100%;height:auto;aspect-ratio:663/287;overflow:visible}
.tx-l,.tx-arm{transform-box:fill-box;transform-origin:50% 100%}
.tx-fp{transform-box:fill-box;transform-origin:50% 50%}
.image-10x.tx-on .tx-l{animation:tx-wave 11.25s calc(1.5s + var(--i) * 120ms) infinite both}
.image-10x.tx-on .tx-arm{animation:tx-hop 11.25s calc(1.5s + var(--i) * 120ms) infinite both}
.image-10x.tx-on .tx-fp{animation:tx-spin 11.25s calc(1.5s + var(--i) * 120ms) infinite both}
.image-10x.tx-on .tx-fp path{animation:tx-scan 11.25s linear calc(1.5s + var(--d)) infinite both}
.image-10x.tx-on .tx-shine{animation:tx-sweep 11.25s cubic-bezier(.45,0,.25,1) 1.5s infinite both}
.image-10x.tx-on.tx-off .tx-logo *{animation-play-state:paused}
@keyframes tx-wave{
 0%,2.133%{transform:translateY(0) scale(1);animation-timing-function:ease-out}
 3.2%{transform:translateY(0) scale(1.02,.97);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
 5.867%{transform:translateY(-30px) scale(.99,1.015);animation-timing-function:cubic-bezier(.5,0,.8,.4)}
 8.533%{transform:translateY(0) scale(1.02,.97);animation-timing-function:cubic-bezier(.25,.7,.4,1)}
 10.133%{transform:translateY(-6px) scale(.995,1.005);animation-timing-function:ease-in-out}
 11.733%,100%{transform:translateY(0) scale(1)}
}
@keyframes tx-hop{
 0%,17.6%{transform:translateY(0) scale(1);animation-timing-function:ease-out}
 19.2%{transform:translateY(0) scale(1.04,.95);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
 21.867%{transform:translateY(-25px) scale(.98,1.025);animation-timing-function:cubic-bezier(.5,0,.8,.4)}
 24.533%{transform:translateY(0) scale(1.03,.96);animation-timing-function:ease-out}
 26.133%,100%{transform:translateY(0) scale(1)}
}
@keyframes tx-spin{
 0%,3.2%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.6,0,.3,1)}
 11.733%,100%{transform:rotate(360deg)}
}
@keyframes tx-scan{0%,12.8%{fill:#fff}14.133%{fill:#b07cff}16.533%,100%{fill:#fff}}
@keyframes tx-sweep{0%,24%{transform:translateX(0)}30.933%,100%{transform:translateX(1000px)}}
@media (prefers-reduced-motion:reduce){.tx-logo *{animation:none!important}}

/* Hero fingerprint (approved 2026-11-02, direction B "light follows the pointer", kept subtle):
   the user's Frame 3690 fingerprint as faint lines behind the hero text. A soft lilac light reveals
   the ridges around the pointer and drifts on its own on touch screens or while the pointer rests.
   main.js moves .hfp-spot and moves its lit copy the opposite way, so only transforms change. */
.hfp{--hfp-d:620px;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent),linear-gradient(to right,rgba(0,0,0,.62) 22%,#000 62%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 62%,transparent),linear-gradient(to right,rgba(0,0,0,.62) 22%,#000 62%);mask-composite:intersect}
.hfp-lines{position:absolute;left:0;top:0;display:block;width:100%;height:100%}
.hfp-base{opacity:.04}
.hfp-art{transform-box:view-box;transform-origin:600px 570px}
.hfp-spot{position:absolute;left:0;top:0;width:var(--hfp-d);height:var(--hfp-d);margin:calc(var(--hfp-d) / -2) 0 0 calc(var(--hfp-d) / -2);opacity:0;transition:opacity 1.6s ease;background:radial-gradient(closest-side,rgba(139,92,255,.08),rgba(139,92,255,0));-webkit-mask-image:radial-gradient(closest-side,#000,rgba(0,0,0,.5) 45%,transparent);mask-image:radial-gradient(closest-side,#000,rgba(0,0,0,.5) 45%,transparent);will-change:transform}
.hfp.hfp-on .hfp-spot{opacity:1}
.hfp-lit{left:calc(var(--hfp-d) / 2);top:calc(var(--hfp-d) / 2);width:var(--hfp-w,100%);height:var(--hfp-h,100%);opacity:.38;will-change:transform}
@media (max-width:980px){.hfp-art{transform:translate(200px,0)}}
@media (max-width:767px){
  .hfp{--hfp-d:420px;-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent);mask-image:linear-gradient(to bottom,#000 66%,transparent)}
  .hfp-art{transform:translate(320px,-30px) scale(.72)}
}
@media (prefers-reduced-motion:reduce){.hfp-spot{display:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* =========================================================
   Motion layer (js/fx.js). Only movement is added: every
   element comes to rest exactly as designed above.
   ========================================================= */
/* Lenis smooth scrolling */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* Footer smoke (js/footer-smoke.js) replaces the Fog.png background; the image is only a no-WebGL fallback */
.smoke-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}

/* Elements waiting for their entrance */
.fx [data-fx]{visibility:hidden}

/* Magnetic buttons: GSAP moves them, so no CSS transition on transform */
.fx-magnetic{transition-property:color,background-color,border-color,padding,box-shadow,opacity}

@media (prefers-reduced-motion:no-preference){
  /* Menu dots grow in from the centre */
  #top-menu > li:not(.menu-item-has-children):not(.cta-item) > a > span::after{transform:translateX(-50%) scale(0)}
  #top-menu > li.current-menu-item:not(.menu-item-has-children):not(.cta-item) > a > span::after,
  #top-menu > li:not(.menu-item-has-children):not(.cta-item):hover > a > span::after{transform:translateX(-50%) scale(1)}

  /* Dropdown glides down and its items follow one by one */
  #top-menu .sub-menu{transform:translateY(12px);transition:all .3s ease-out}
  #top-menu > li:hover > .sub-menu{transform:none}
  #top-menu .sub-menu li{opacity:0;transform:translateX(-8px);transition:opacity .3s ease-out,transform .3s ease-out}
  #top-menu > li:hover > .sub-menu li{opacity:1;transform:none}
  #top-menu > li:hover > .sub-menu li:nth-child(2){transition-delay:.05s}
  #top-menu > li:hover > .sub-menu li:nth-child(3){transition-delay:.1s}
  #top-menu > li:hover > .sub-menu li:nth-child(4){transition-delay:.15s}
}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* A quick shine sweeps across buttons on hover */
  .btn:not(.btn-link)::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 60%) no-repeat;background-size:250% 100%;background-position:150% 0}
  .btn:not(.btn-link):hover::before{background-position:-50% 0;transition:background-position .8s ease}

  /* Service cards: a soft light follows the pointer (js/fx.js sets --gx/--gy) */
  .card::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(129,57,255,.2),rgba(129,57,255,0) 65%);opacity:0;transition:opacity .4s ease}
  .card:hover::after{opacity:1}

  /* Footer heading letters (js/fx.js sets --k from 0 to 1 by pointer distance) */
  .fh-char{color:color-mix(in srgb,#b07cff calc(var(--k,0) * 100%),#fff);text-shadow:0 0 calc(var(--k,0) * 18px) rgba(129,57,255,calc(var(--k,0) * .7))}

  /* Footer quick links: label rolls up to a white copy, an arrow slides in */
  .footer-menu a{position:relative}
  .fl-roll{position:relative;display:inline-block;clip-path:inset(0 -4px);transition:transform .45s cubic-bezier(.7,0,.2,1)}
  .fl-a,.fl-b{display:block;transition:transform .45s cubic-bezier(.7,0,.2,1)}
  .fl-b{position:absolute;left:0;top:100%;color:#fff;white-space:nowrap}
  .footer-menu a:hover .fl-a,.footer-menu a:hover .fl-b{transform:translateY(-100%)}
  .footer-menu a:hover .fl-roll{transform:translateX(6px)}
  .footer-menu a::after{content:"\2192";position:absolute;left:100%;top:50%;margin-left:12px;color:#b07cff;opacity:0;transform:translate(-6px,-50%);transition:opacity .3s ease,transform .45s cubic-bezier(.7,0,.2,1)}
  .footer-menu a:hover::after{opacity:1;transform:translate(0,-50%)}

  /* Footer phone and email: a gradient underline draws in */
  .footer-contact a{background:linear-gradient(90deg,var(--purple),var(--blue)) no-repeat 0 100%/0 2px;transition:background-size .4s ease,color .3s ease}
  .footer-contact a:hover{background-size:100% 2px;color:#fff}
}

/* "Copied" bubble on the footer email (main.js) */
.footer-contact a[href^="mailto:"]{position:relative}
.copy-tip{position:absolute;left:50%;bottom:calc(100% + 8px);padding:6px 12px;border-radius:99px;background:var(--green);color:var(--navy);font-family:Poppins,Helvetica,Arial,sans-serif;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,4px);transition:opacity .25s ease,transform .25s ease;box-shadow:0 6px 18px rgba(48,220,116,.35)}
.copy-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--green)}
.copy-tip.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:no-preference){
  /* Counters rise as they fade in (main.js adds .active) */
  .fx .counter{transform:translateY(30px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1)}
  .fx .counter.active{transform:none}

  /* The play button breathes gently */
  .video-play{animation:fxBreathe 2.6s ease-in-out infinite}
  .video-overlay-hover:hover .video-play{animation-play-state:paused}
}
@keyframes fxBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Services stacked layout on desktop (js/fx.js adds .svc-mode; approved redesign) */
@media (min-width:981px){
  .svc-mode{--svc-h:clamp(440px,64vh,560px);--svc-shift:41px}  /* shift: half the fixed header, so content centres in the visible area */
  .svc-mode .svc-pin{position:relative;height:100vh;overflow:hidden}
  .svc-mode .svc-inner{position:relative;width:80%;max-width:1450px;height:100%;margin:0 auto}
  .svc-mode .row-services-head{position:absolute;left:0;top:calc(50% + var(--svc-shift));width:40%;max-width:none;margin:0;padding:0;transform:translateY(-50%)}
  .svc-mode .services-title h3{font-size:40px}
  .svc-mode .svc-inner > .row:not(.row-services-head){position:static;display:block;width:auto;max-width:none;margin:0;padding:0;opacity:1;animation:none}
  .svc-mode .card{position:absolute;right:0;top:calc(50% + var(--svc-shift) - var(--svc-h) / 2);width:52%;height:var(--svc-h);margin:0;padding:56px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 -20px 60px rgba(0,0,0,.45);will-change:transform}
  .svc-mode .card-title h4{font-size:44px}
  .svc-meta{margin-top:48px}
  .svc-count{display:block;margin-bottom:14px;font-family:"Roboto Mono",monospace;font-size:15px;font-weight:500;line-height:1;letter-spacing:2px;color:#fff}
  .svc-count b{font-weight:500;color:var(--purple)}
  .svc-bar{position:relative;display:block;height:2px;background:rgba(255,255,255,.1)}
  .svc-bar i{position:absolute;left:0;top:0;width:25%;height:100%;background:linear-gradient(90deg,var(--purple),var(--blue))}
  .svc-mode .svc-video-row{width:94%;max-width:none}

  /* Card top area: outlined number, line icon and a soft corner glow */
  .svc-glow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:radial-gradient(320px circle at 100% 0%,rgba(129,57,255,.32),rgba(129,57,255,0) 70%)}
  .svc-deco{position:relative;flex:1 1 0;min-height:0;container-type:size;pointer-events:none}
  .svc-num{position:absolute;left:-4px;top:0;height:min(128px,calc(100cqh - 8px));aspect-ratio:200/128;overflow:visible}
  .svc-num text{font-family:"Baloo 2",display;font-size:128px;font-weight:700;fill:var(--card);stroke:rgba(192,132,252,.6);stroke-width:3;paint-order:stroke;stroke-linejoin:round}
  .svc-ico{position:absolute;right:0;top:0;width:70px;height:70px;box-sizing:border-box;border:1.5px solid rgba(255,255,255,.14);border-radius:50%;display:flex;align-items:center;justify-content:center}
  .svc-ico svg{width:30px;height:30px;fill:none;stroke:#a46bff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  @container (max-height:80px){.svc-ico{display:none}}
  @container (max-height:56px){.svc-num{display:none}}
}

/* =========================================================
   Header  (<= 1080px)
   Between 981 and 1080px the desktop menu does not fit beside the logo (it wrapped on the live site too),
   so the tablet header with the hamburger menu takes over from 1080px down (2026-11-08)
   ========================================================= */
@media (max-width:1080px){
  #top-menu-nav{display:none}
  #et-top-navigation{float:none;padding:24px 0 0;padding-left:0}
  #et_mobile_nav_menu{display:block;float:right}
  #et-top-navigation::after{content:"";display:block;clear:both}
  #logo{max-height:54%;max-width:50%}
  .logo_container{z-index:1;pointer-events:none}
  .logo_container a{pointer-events:auto}

  .mobile_nav{position:static}
  .mobile_menu_bar{position:relative;display:block;padding-bottom:24px;line-height:0;cursor:pointer}
  .mobile_menu_bar:focus{outline:none}
  .mobile_menu_bar:focus-visible .hamburger{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--purple)}
  .hamburger{display:block;width:40px;height:39px;padding:12px 10px 11px;border-radius:100px;background-color:var(--purple);transition:background-color .15s linear}
  .mobile_nav.opened .hamburger{background-color:var(--purple-active)}
  .hamburger-box{position:relative;display:block;width:20px;height:14px}
  .hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{position:absolute;display:block;width:20px;height:2px;border-radius:4px;background-color:#fff}
  .hamburger-inner{top:50%;margin-top:-1px;transition-duration:.22s;transition-property:transform;transition-timing-function:cubic-bezier(.55,.055,.675,.19)}
  .hamburger-inner::before,.hamburger-inner::after{content:""}
  .hamburger-inner::before{top:-6px;transition:top .1s .25s ease-in,opacity .1s ease-in}
  .hamburger-inner::after{bottom:-6px;transition:bottom .1s .25s ease-in,transform .22s cubic-bezier(.55,.055,.675,.19)}
  .mobile_nav.opened .hamburger-inner{transform:rotate(225deg);transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}
  .mobile_nav.opened .hamburger-inner::before{top:0;opacity:0;transition:top .1s ease-out,opacity .1s .12s ease-out}
  .mobile_nav.opened .hamburger-inner::after{bottom:0;transform:rotate(-90deg);transition:bottom .1s ease-out,transform .22s .12s cubic-bezier(.215,.61,.355,1)}

  .et_mobile_menu{position:absolute;top:calc(100% + 3px);left:0;z-index:9999;display:none;overflow:hidden;width:100%;padding:5%;background-color:rgba(255,255,255,.94);border-top:3px solid var(--link);box-shadow:0 2px 5px rgba(0,0,0,.1);text-align:left}
  .et_mobile_menu li a{display:block;padding:10px 5%;border-bottom:1px solid rgba(0,0,0,.03);font-family:"Open Sans",Arial,sans-serif;font-size:14px;font-weight:600;line-height:23px;color:rgba(0,0,0,.8)}
  .et_mobile_menu li.menu-item-has-children > a{font-weight:700;background-color:rgba(0,0,0,.03)}
  .et_mobile_menu .sub-menu{padding-left:10px}
  .et_mobile_menu .sub-menu li{padding-left:5%}
  .et_mobile_menu li.cta-item a.cta-button{margin-top:0;padding:12px;border:0;border-radius:100px;background-color:var(--purple);color:#fff;font-weight:500;line-height:1.7em;text-align:center}
}

/* =========================================================
   Tablet  (<= 980px)
   ========================================================= */
@media (max-width:980px){
  #page-container{padding-top:var(--header-offset,87px)}


  .row{padding:30px 0;flex-wrap:wrap}
  .col{width:100%;margin-right:0;margin-bottom:30px}
  .col:last-child{margin-bottom:0}
  .col-1-4{width:47.25%;margin-right:5.5%}
  .col-1-4:nth-child(2n){margin-right:0}
  .col-1-4:nth-last-child(-n+2){margin-bottom:0}
  .col-empty{display:none}
  .module,.col-1-2 .module,.col-1-3 .module,.col-1-4 .module{margin-bottom:30px}
  .module:last-child{margin-bottom:0}
  .module.mb-20{margin-bottom:20px}
  .module.mb-30{margin-bottom:30px}
  .module.mb-10{margin-bottom:10px}
  .module.mb-76{margin-bottom:76px}
  .module.mb-7{margin-bottom:7px}
  .card .module.card-title{margin-bottom:0}
  .col-1-3 .module.footer-contact{margin-bottom:15px}
  .heading-module,.module.heading-module:last-child{margin-bottom:10px}

  .section-0{padding:140px 0 80px}

  .body-text p,.services-intro p,.card-text p,.footer-contact p{font-size:15px;line-height:1.8em}
  .card-title h4{font-size:22px}
}

/* =========================================================
   Phone  (<= 767px)
   ========================================================= */
@media (max-width:767px){
  .row{width:90%}

  .section-0,.section-1,.section-2,.section-3,.section-4{padding:80px 0}
  .section-0{padding:60px 0 40px}

  .typing-heading{font-size:44px;line-height:44px}
  .heading-module h1{font-size:42px}
  .w70,.heading-module{max-width:100%}
  .footer-heading{max-width:none}

  .body-text p,.services-intro p,.card-text p,.footer-contact p{font-size:14px;line-height:1.8em}
  .card{padding:30px 20px}
  .card-title h4{font-size:22px}

  .btn{width:100%;text-align:center}
  .dual-buttons .btn + .btn{margin-left:0;margin-top:20px}

  .cta-container{padding:0}
  .cta-heading{font-size:24px}
  .btn-cta-outline{margin:10px 0}
  .btn-cta-solid{margin:10px 0 10px 0}
}

@media (max-width:479px){
  .col-1-4{width:100%;margin-right:0;margin-bottom:30px}
  .col-1-4:nth-last-child(-n+2){margin-bottom:30px}
  .col-1-4:last-child{margin-bottom:0}
}

/* =========================================================
   About page (about.html), measured from innovinto.com/about at 1440 / 820 / 390.
   Desktop hero padding is the live 204px minus the removed 36px top bar.
   ========================================================= */
.ab-hero{padding:168px 0 50px;background-image:url("../images/Innovinto-headerBG.jpg")}
.ab-eyebrow h6{font-family:"Roboto Mono",monospace;font-size:16px;font-weight:500;line-height:1.4em;color:#fff}
.module.ab-mb-22{margin-bottom:22px}
.module.ab-mb-16{margin-bottom:16px}
.module.ab-mt-35{margin-top:32px}
.heading-full{max-width:none}
.heading-module h1.ab-green{color:var(--green)}
.ab-intro{padding-top:5px}
.ab-intro p{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:1.8em;color:rgba(255,255,255,.7)}
.ab-intro p span{font-size:18px;color:#fff}

/* industries: title and lead (the deck itself is styled in the "Industries deck" block at the end) */
.ab-ind-title h2{font-family:"Baloo 2",display;font-size:54px;font-weight:500;line-height:1.2em;color:#fff}
.ab-ind-lead h5{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:20px;font-weight:600;line-height:28px;color:#fff}
.ab-ind-lead h5 span{font-size:18px}

/* your digital innovation (parallax photo) */
.ab-innovation{padding:200px 0;background-color:#fff}
.btn-text-black{color:#000}

/* valuable advantages: two rows of equal-height cards */
.ab-advantages{padding:50px 0}
.ab-adv-title h3{font-family:"Baloo 2",display;font-size:42px;font-weight:600;line-height:1.3em;color:#fff}
.ab-advantages .module.ab-adv-title{margin-bottom:10px}
.row.row-equal{align-items:stretch}

@media (max-width:980px){
  .ab-hero{padding:172px 0 50px}
  .ab-eyebrow h6{font-size:15px}
  .ab-intro p{font-size:15px}
  .ab-ind-title h2{font-size:32px}
}

@media (max-width:767px){
  .ab-hero{padding:80px 0 50px}
  .ab-eyebrow h6{font-size:14px}
  .ab-intro p{font-size:14px}
  .ab-ind-title h2{font-size:30px}
  .ab-innovation{padding:80px 0}
  .ab-adv-title h3{font-size:22px}
}

/* ---------- Services page (services.html) ----------
   Reuses the About hero, eyebrow, intro text and button spacing (ab-*),
   the home service cards (.card) and the shared CTA and footer. */
.module.sv-mb-15{margin-bottom:15px}
.module.sv-mb-6{margin-bottom:6px}
.module.sv-mt-22{margin-top:22px}
.sv-typing{font-family:"Baloo 2",display;font-size:72px;font-weight:600;line-height:1.2em;color:var(--green)}
.sv-typing .typed-cursor{color:var(--green)}

/* from good to great: parallax banner with a 70% heading */
.sv-transform{padding:200px 0;background-color:#fff}
.heading-module.sv-w70{max-width:70%}

/* four service groups: title, intro, cards in rows of three, link to the service page */
.sv-group{padding:50px 0}
.sv-title h3{font-family:"Baloo 2",display;font-size:42px;font-weight:600;line-height:1em;color:#fff}
.btn-link.btn-service{font-size:22px;padding:.3em 0}
.btn-link.btn-service:hover{padding:.3em 0;background-color:transparent;letter-spacing:1px}

@media (max-width:980px){
  .btn-link.btn-service{font-size:20px}
}

@media (max-width:767px){
  .sv-typing{font-size:40px}
  .sv-transform{padding:80px 0}  /* spacing review 2026-11-06: 80px top and bottom on every phone banner */
  .heading-module.sv-w70{max-width:70%}
  .btn-link.btn-service{font-size:14px}
}

/* ---------- About: Industries "Deck" (approved redesign, 2026-11-06) ----------
   Twelve photo cards in a stack beside the sector list. js/industries.js adds
   .is-live (list states, drag, dots) and, on desktop, .ind--pin (the section is
   pinned and each scroll step flips a card). The nth-child poses below are the
   first frame, and what shows without the script. */
.ind{padding:111px 0 110px;overflow:hidden}
.ind-filters{position:absolute;width:0;height:0;overflow:hidden}
.row.ind-row{display:grid;grid-template-columns:38% 1fr;column-gap:6%;align-items:center}
.ind .module.ind-eyebrow{margin-bottom:14px}
.ind-eyebrow h6{font-family:"Roboto Mono",monospace;font-size:16px;font-weight:500;line-height:1.4em;letter-spacing:1px;color:#fff;padding-bottom:0}
.ind .module.ab-ind-title{margin-bottom:10px}
.ind .module.ab-ind-lead{margin-bottom:26px}

/* one brand hue per sector: card accents and the duotone filter */
.ind-violet{--h:#8139ff;--duo:url(#ind-duo-violet)}
.ind-blue{--h:#4b78ed;--duo:url(#ind-duo-blue)}
.ind-green{--h:#30dc74;--duo:url(#ind-duo-green)}
.ind-coral{--h:#ff6a3d;--duo:url(#ind-duo-coral)}
.ind-magenta{--h:#d6287f;--duo:url(#ind-duo-magenta)}

/* sector list with a progress line */
.ind-list{position:relative;margin:0;padding:0 0 0 22px;list-style:none}
.ind-list::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.1)}
.ind-fill{position:absolute;left:0;top:6px;width:2px;height:0;background:linear-gradient(var(--purple),var(--h,var(--purple)))}
.ind-list li,.ind-btn{display:grid;grid-template-columns:34px 1fr;align-items:center}
.ind-list li{position:relative;font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:15px;font-weight:500;line-height:32px;color:rgba(255,255,255,.75)}
.ind-n{font-family:"Roboto Mono",monospace;font-size:11px;color:#7a7f93;transition:color .3s}
.is-live .ind-list li{display:block;color:rgba(255,255,255,.4);transition:color .3s}
.ind-btn{width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:left;cursor:pointer}
.ind-btn:hover{color:#fff}
.ind-btn:focus-visible{outline:2px solid var(--h);outline-offset:3px;border-radius:4px}
.is-live .ind-list li.is-past{color:rgba(255,255,255,.68)}
.is-live .ind-list li.is-on{color:#fff}
.ind-list li.is-on .ind-name{font-weight:600}
.ind-list li.is-on .ind-n{color:var(--h)}
.ind-list li.is-on::before{content:"";position:absolute;left:-25px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--h);box-shadow:0 0 0 5px color-mix(in srgb,var(--h) 25%,transparent)}

/* the deck: cards are stacked absolutely inside a card-sized box */
.ind-stage{position:relative}
.ind-deck{position:relative;width:min(430px,72%);aspect-ratio:43/56;margin:90px auto 0;container-type:inline-size;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ind-card{position:absolute;inset:0;margin:0;border-radius:26px;transform-origin:50% 100%;will-change:transform,opacity}
.ind-card-in{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#141a27;box-shadow:0 40px 90px rgba(0,0,0,.55);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ind-card-in::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(10,14,23,.35),transparent 25%,transparent 50%,rgba(10,14,23,.9));pointer-events:none}
.ind-card-in::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.ind-img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:var(--duo);-webkit-user-drag:none;pointer-events:none}
.ind-img.ind-idle{filter:url(#ind-duo-idle);will-change:opacity}
/* the Health and Personal Care photo is one quarter of a four-photo collage */
.ind-img.ind-crop{left:50%;top:-115%;width:auto;height:217%;object-fit:fill;transform:translateX(-24%)}
.ind-pill{position:absolute;top:24px;left:26px;z-index:2;font-family:"Roboto Mono",monospace;font-size:12px;font-weight:500;line-height:1;letter-spacing:1.5px;color:#fff;background:rgba(10,14,23,.6);border-radius:30px;padding:8px 13px}
.ind-go{position:absolute;top:20px;right:22px;z-index:2;width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .3s}
.ind-go svg{width:20px;height:20px;fill:none;stroke:#0a0e17;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ind-go:hover{transform:scale(1.08)}
.ind-go:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ind-card figcaption{position:absolute;left:30px;right:30px;bottom:32px;z-index:2}
.ind-card figcaption small{display:block;font-family:"Roboto Mono",monospace;font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb,var(--h) 55%,#fff)}
.ind-card figcaption b{display:block;margin-top:8px;font-family:"Baloo 2",display;font-size:clamp(24px,10.2cqw,44px);font-weight:600;line-height:1.04;color:#fff}
.ind-card figcaption::after{content:"";display:block;width:64px;height:3px;margin-top:16px;border-radius:3px;background:var(--h)}
.ind-card:nth-child(1){z-index:100;transform:rotate(-2deg)}
.ind-card:nth-child(2){z-index:90;transform:translate(5.6%,-5%) scale(.93) rotate(3deg);opacity:.88}
.ind-card:nth-child(3){z-index:80;transform:translate(11.2%,-10%) scale(.86) rotate(6deg);opacity:.76}
.ind-card:nth-child(4){z-index:70;transform:translate(16.8%,-15%) scale(.79) rotate(9deg);opacity:.35}
.ind-card:nth-child(n+5){visibility:hidden;opacity:0}
.ind-card:nth-child(1) .ind-idle{opacity:0}
.is-dragging .ind-deck{cursor:grabbing}
.is-live .ind-deck{cursor:grab}

/* under the deck: hint and quote (desktop), counter and dots (tablet, phone) */
.ind-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:34px}
.ind-hint{display:none;align-items:center;gap:12px;margin:0;padding:0;white-space:nowrap;font-family:"Roboto Mono",monospace;font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#9aa0b4}
.ind-mouse{position:relative;flex:none;width:24px;height:38px;border:1px solid rgba(255,255,255,.35);border-radius:13px}
.ind-mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:ind-wheel 1.8s ease-in-out infinite}
@keyframes ind-wheel{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(9px);opacity:0}}
.is-live .ind-hint{display:flex}
.ind:not(.ind--pin) .ind-mouse{display:none}
@media (prefers-reduced-motion:reduce){.ind-mouse::after{animation:none}}
.ind-quote{flex:0 1 300px;max-width:300px;margin:0 0 0 auto;padding:0 0 0 18px;border-left:3px solid;border-image:linear-gradient(var(--purple),var(--green)) 1}
.ind-quote p{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:17px;font-weight:500;line-height:1.45;color:rgba(255,255,255,.78);padding:0}
.ind-nav{display:none;align-items:center;justify-content:space-between;gap:16px;width:min(430px,100%);margin:26px auto 0;font-family:"Roboto Mono",monospace;font-size:13px;font-weight:500;color:#9aa0b4}
.ind-count b{color:#fff;font-weight:500}
.ind-dots{display:flex;align-items:center}
.ind-dot{width:16px;height:24px;margin:0;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;transition:width .3s}
.ind-dot::before{content:"";width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.25);transition:width .3s,background-color .3s}
.ind-dot.is-on{width:30px}
.ind-dot.is-on::before{width:22px;background:var(--h)}
.ind-dot:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:4px}
.ind-swipe{letter-spacing:1px;text-transform:uppercase}

/* desktop pin: the section fills the screen under the fixed header (--ind-a is that height) and scales with it */
.ind.ind--pin{--ind-a:calc(100vh - var(--ind-top,0px));height:var(--ind-a);padding:0;display:flex;align-items:center}
.ind--pin .row.ind-row{padding:0}
.ind--pin .ab-ind-title h2{font-size:clamp(32px,calc(var(--ind-a) * .056),54px)}
.ind--pin .ab-ind-lead h5,.ind--pin .ab-ind-lead h5 span{font-size:clamp(15px,calc(var(--ind-a) * .02),18px);line-height:1.55}
.ind--pin .module.ab-ind-lead{margin-bottom:clamp(12px,calc(var(--ind-a) * .024),26px)}
.ind--pin .ind-list li{line-height:clamp(22px,calc(var(--ind-a) * .036),32px)}
.ind--pin .ind-deck{width:min(430px,72%,calc((var(--ind-a) - 250px) * .768));margin-top:clamp(50px,calc(var(--ind-a) * .09),90px)}
.ind--pin .ind-foot{margin-top:clamp(18px,calc(var(--ind-a) * .035),34px)}

@media (min-width:981px) and (max-width:1365px){
  .row.ind-row{grid-template-columns:47.25% 1fr;column-gap:5.5%}
  .ind-deck{width:min(430px,80%)}
}
@media (max-width:980px){
  .ind{padding:80px 0 70px}
  .row.ind-row{grid-template-columns:1fr;row-gap:20px}
  .ind-list{display:grid;grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:40px;padding-left:0}
  .ind-list::before,.ind-fill,.ind-list li.is-on::before{display:none}
  .ind-deck{width:min(400px,70%);margin-top:80px}
  .ind-foot{flex-direction:column;align-items:center;gap:0;margin-top:30px}
  .ind-hint,.is-live .ind-hint{display:none}
  .ind-nav{display:flex;flex-wrap:wrap;row-gap:6px}
  .ind-dots{order:-1;width:100%;justify-content:center}
  .ind-dot{flex:0 0 24px;width:24px}
  .ind-dot.is-on{flex-basis:34px;width:34px}
  .ind-quote{flex:none;max-width:520px;margin-left:0}
}
@media (max-width:767px){
  .ind{padding:80px 0 60px}
  .ab-ind-lead h5 span{font-size:15px}
  .ind-list{display:none}
  .ind-deck{width:min(300px,84%);margin-top:50px;transform:translateX(-7%)}   /* the stack behind leans right */
  .ind-card{border-radius:20px}
  .ind-pill{top:18px;left:18px;font-size:11px;padding:7px 11px}
  .ind-go{top:14px;right:14px;width:42px;height:42px}
  .ind-go svg{width:17px;height:17px}
  .ind-card figcaption{left:22px;right:22px;bottom:24px}
  .ind-card figcaption small{font-size:11px}
  .ind-nav{width:100%;font-size:12px}
  .ind-dot::before{width:5px;height:5px}
  .ind-dot.is-on::before{width:18px}
  .ind-quote p{font-size:15px}
}

/* ---------- About: advantages "Spotlight panels" (approved redesign, 2026-11-06) ----------
   One brand colour only (purple). js/advantages.js adds .is-live: four tall panels
   on desktop, one open and wide; an accordion below 981px. Without the script the
   cards keep the original 2 x 2 layout. */
.ab-advantages.adv{padding:50px 0}
.adv-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:24px}
.adv-top .module.ab-adv-title{margin-bottom:0}
.adv-meta{display:none;margin:0 0 12px;gap:18px;font:500 14px/1 "Roboto Mono",monospace;letter-spacing:1.5px;color:#7a7f93;text-transform:uppercase;white-space:nowrap}
.adv-meta b{font-weight:500;color:#fff}
.adv svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* without the script: the original cards */
.adv:not(.is-live) .adv-panels{display:grid;grid-template-columns:1fr 1fr;column-gap:5.5%;row-gap:58px;margin-top:40px}
.adv:not(.is-live) .adv-panel{background-color:var(--card);border-radius:20px;padding:40px}
.adv:not(.is-live) .adv-tab,.adv:not(.is-live) .adv-big,.adv:not(.is-live) .adv-count{display:none}
.adv:not(.is-live) .adv-body h4{margin:0;font-family:"Baloo 2",display;font-size:30px;font-weight:600;line-height:1.1em;color:var(--purple)}
.adv:not(.is-live) .adv-body p{margin:0;font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:1.8em;color:#fff}

/* shared panel parts */
.adv.is-live .adv-panel{position:relative;border-radius:22px;background-color:var(--card);overflow:hidden;isolation:isolate}
.adv.is-live .adv-panel::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(120% 90% at 100% 100%,rgba(129,57,255,.12),rgba(129,57,255,0) 60%),#1d2230}
.adv.is-live .adv-panel.is-open::before{opacity:1}
.adv-tab{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.adv-tab:focus-visible{outline:2px solid var(--purple);outline-offset:-4px;border-radius:22px}
.adv-n,.adv-count{font:500 13px/1 "Roboto Mono",monospace;letter-spacing:1px;color:#7a7f93}
.adv-count{color:#fff}
.adv-ic{width:22px;height:22px;stroke-width:1.7;color:var(--purple)}
.adv-name{font-family:"Baloo 2",display;font-weight:600;color:#cfd3e2;white-space:nowrap;transition:color .3s ease}
.adv-plus{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);transition:border-color .3s ease,background-color .3s ease,transform .4s ease}
.adv-plus::before,.adv-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:#cfd3e2;border-radius:1px}
.adv-plus::after{transform:rotate(90deg)}
.adv-tab:hover .adv-name{color:#fff}
.adv-tab:hover .adv-plus{border-color:var(--purple);background-color:rgba(129,57,255,.18)}
.adv-big{color:var(--purple);stroke-width:.45;opacity:.45}
.adv-body h4{margin:0;font-family:"Baloo 2",display;font-weight:600;line-height:1.05;color:#fff}
.adv-body p{margin:0;font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-weight:500;color:#e6e8f0}

/* desktop: panels in a row */
@media (min-width:981px){
  .adv.is-live .adv-meta{display:flex}
  .adv.is-live .adv-panels{display:flex;gap:16px;height:470px;margin-top:20px;container-type:inline-size}
  .adv.is-live .adv-panel{flex:1 1 0;min-width:0;transition:flex-grow .8s cubic-bezier(.65,0,.25,1)}
  .adv.is-live .adv-panel.is-open{flex-grow:3.3}
  .adv.is-live .adv-tab{position:absolute;top:0;right:0;bottom:0;left:0;height:100%}
  .adv.is-live .adv-tab > *{position:absolute;transition:opacity .3s ease .35s,color .3s ease,border-color .3s ease,background-color .3s ease,transform .4s ease}
  .adv.is-live .adv-n{top:28px;left:28px}
  .adv.is-live .adv-ic{top:24px;right:26px}
  .adv.is-live .adv-tab:hover .adv-ic{transform:scale(1.15)}
  .adv.is-live .adv-name{left:28px;bottom:30px;font-size:30px;line-height:1;writing-mode:vertical-rl;transform:rotate(180deg)}
  .adv.is-live .adv-plus{right:24px;bottom:26px}
  .adv.is-live .is-open .adv-tab{cursor:default}
  .adv.is-live .is-open .adv-tab > *{opacity:0;transition-delay:0s}
  /* the open text is laid out at its final width so it never reflows while the panel grows */
  .adv.is-live .adv-body{position:absolute;left:0;bottom:0;height:100%;width:calc((100cqw - 48px) / 6.3 * 3.3);box-sizing:border-box;padding:44px;
    display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;
    opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
  .adv.is-live .is-open .adv-body{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .35s,transform .7s cubic-bezier(.2,.7,.2,1) .35s,visibility 0s}
  .adv.is-live .adv-big{position:absolute;right:44px;top:44px;width:clamp(120px,15cqw,175px);height:auto;aspect-ratio:1}
  .adv.is-live .adv-count{position:absolute;top:28px;left:28px}
  .adv.is-live .adv-body h4{font-size:clamp(32px,4.5cqw,52px);margin-bottom:16px}
  .adv.is-live .adv-body p{font-size:clamp(15px,1.5cqw,17px);line-height:1.75;max-width:470px}
}

/* tablet and phone: accordion */
@media (max-width:980px){
  .ab-advantages.adv{padding:50px 0}
  .adv:not(.is-live) .adv-panels{grid-template-columns:1fr;row-gap:30px}
  .adv.is-live .adv-panels{display:grid;gap:10px;margin-top:22px}
  .adv.is-live .adv-panel{border-radius:16px}
  .adv.is-live .adv-tab{display:grid;grid-template-columns:34px 1fr 30px;align-items:center;gap:10px;padding:18px}
  .adv.is-live .adv-tab:focus-visible{border-radius:16px}
  .adv.is-live .adv-ic{display:none}
  .adv.is-live .adv-n{font-size:11px}
  .adv.is-live .adv-name{font-size:20px;line-height:1.2;white-space:normal}
  .adv.is-live .adv-plus{width:28px;height:28px}
  .adv.is-live .is-open .adv-n,.adv.is-live .is-open .adv-name{color:#fff}
  .adv.is-live .is-open .adv-name{font-size:26px}
  .adv.is-live .is-open .adv-plus{transform:rotate(45deg);border-color:rgba(129,57,255,.6)}
  .adv.is-live .is-open .adv-tab{cursor:default}
  .adv.is-live .adv-body{position:relative;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.65,0,.25,1)}
  .adv.is-live .is-open .adv-body{grid-template-rows:1fr}
  .adv.is-live .adv-body > p{min-height:0;overflow:hidden;padding:0 20px 0 62px;opacity:0;visibility:hidden;transition:opacity .3s ease,padding .5s cubic-bezier(.65,0,.25,1),visibility 0s linear .5s}
  .adv.is-live .is-open .adv-body > p{padding-bottom:26px;opacity:1;visibility:visible;transition:opacity .5s ease .2s,padding .5s cubic-bezier(.65,0,.25,1),visibility 0s}
  .adv.is-live .adv-body h4,.adv.is-live .adv-count{display:none}
  .adv.is-live .adv-body p{font-size:15px;line-height:1.8}
  .adv.is-live .adv-big{position:absolute;left:21px;top:3px;width:22px;height:22px;stroke-width:1.6;opacity:0;transition:opacity .5s ease}
  .adv.is-live .is-open .adv-big{opacity:1;transition-delay:.25s}
}

@media (max-width:767px){
  .adv:not(.is-live) .adv-panel{padding:30px 20px}
  .adv:not(.is-live) .adv-body h4{font-size:22px}
  .adv:not(.is-live) .adv-body p{font-size:14px}
  .adv.is-live .adv-tab{grid-template-columns:28px 1fr 28px;padding:16px}
  .adv.is-live .is-open .adv-name{font-size:22px}
  .adv.is-live .adv-body > p{padding-left:54px;padding-right:16px}
  .adv.is-live .adv-body p{font-size:14px}
  .adv.is-live .adv-big{left:18px;width:20px;height:20px}
}

@media (prefers-reduced-motion:reduce){
  .adv.is-live .adv-panel,.adv.is-live .adv-panel::before,.adv.is-live .adv-body,.adv.is-live .adv-tab > *,.adv.is-live .adv-body > p,.adv.is-live .adv-big{transition:none !important}
}

/* ---------- Page heroes (.abh): fingerprint and scroll drift (2026-11-06) ----------
   Reuses the home .hfp fingerprint (main.js lights it). fx.js sets --abh-p from 0 to 1 while the
   hero scrolls away. (The purple lines under key phrases were removed at the user's request.) */
.abh{--abh-x:230px;--abh-y:0px;--abh-s:1}
.abh .row{z-index:1;transform:translate3d(0,calc(var(--abh-p,0) * -60px),0);opacity:calc(1 - var(--abh-p,0) * .7)}
.abh .hfp-lit{opacity:.24}
.abh .hfp-art{transform:translate(var(--abh-x),var(--abh-y)) rotate(calc(var(--abh-p,0) * -8deg)) scale(calc(var(--abh-s) + var(--abh-p,0) * .08))}
.abh .ab-intro{max-width:800px}
@media (max-width:980px){.abh{--abh-x:200px}}
@media (max-width:767px){.abh{--abh-x:320px;--abh-y:-30px;--abh-s:.72}}

/* ---------- Card grids: even gaps (2026-11-06) ----------
   The same gap across and down: the services page rows (.row-equal) and the home service cards
   when they show as a grid (tablet, phone, and desktop without the stacked layout). */
:root{--card-gap:32px}
@media (max-width:980px){:root{--card-gap:20px}}
@media (max-width:767px){:root{--card-gap:16px}}
.sv-group .row-equal,.section-5:not(.svc-mode) .row:has(> .card){column-gap:var(--card-gap);row-gap:var(--card-gap)}
.sv-group .row-equal > .card,.section-5:not(.svc-mode) .row > .card{flex:1 1 0;width:auto;margin-right:0;margin-bottom:0}
.sv-group .row-equal:has(+ .row-equal),.section-5:not(.svc-mode) .row:has(> .card):has(+ .row > .card){padding-bottom:0}
.sv-group .row-equal + .row-equal,.section-5:not(.svc-mode) .row:has(> .card) + .row:has(> .card){padding-top:var(--card-gap)}
@media (max-width:980px){
  .sv-group .row-equal > .card,.section-5:not(.svc-mode) .row > .card{flex:none;width:100%}
}

/* ---------- Services page cards: "Spotlight" (concept C, approved 2026-11-06) ----------
   A number in each card's corner (CSS counter). js/fx.js adds .is-spot to each group: the card
   under the pointer gets .is-hot (lifts, lighter, white text, a purple light inside it that follows
   the pointer via --gx/--gy), the others dim while the group has .is-hovering, and the title
   letters near the pointer catch the light (--k). On touch screens the card in the middle of the
   screen is lit. (The group-wide light behind the cards was removed at the user's request.) */
.sv-group{counter-reset:svc-card}
.sv-group .card{counter-increment:svc-card}
.sv-group .card::before{content:counter(svc-card,decimal-leading-zero);position:absolute;top:30px;right:32px;font:500 13px/1 "Roboto Mono",monospace;letter-spacing:1px;color:#5d6479;transition:color .3s ease}
.sv-group .card-title{padding-right:34px}
.sv-group.is-spot .card{transition:transform .5s cubic-bezier(.2,.7,.2,1),background-color .4s ease,opacity .4s ease,box-shadow .5s ease}
.sv-group.is-spot .card::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease}
.sv-group.is-spot .card-text p{color:rgba(255,255,255,.72);transition:color .4s ease}
.sv-group.is-spot .card.is-hot{transform:translateY(-8px) scale(1.015);background-color:rgba(40,47,67,.97);box-shadow:0 44px 80px -40px rgba(129,57,255,.75)}
.sv-group.is-spot .card.is-hot::after{opacity:1;background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),rgba(129,57,255,.3),rgba(129,57,255,0) 62%)}
.sv-group.is-spot .card.is-hot .card-text p{color:#fff}
.sv-group.is-spot .card.is-hot::before{color:#d9c8ff}
.sv-group.is-hovering .card:not(.is-hot){opacity:.55}
.sv-char{color:color-mix(in srgb,#efe6ff calc(var(--k,0) * 100%),var(--purple));text-shadow:0 0 calc(var(--k,0) * 18px) rgba(150,100,255,calc(var(--k,0) * .9))}
@media (prefers-reduced-motion:reduce){.sv-group .card:hover{background-color:rgba(40,47,67,.97)}}

/* ---------- Services: sticky group bar (idea C, approved 2026-11-06) ----------
   js/svc-bar.js adds the bar and sets its top to the header's lower edge; .is-shown slides it in
   while the visitor is inside the service groups. .page-line is the page's scroll position, under
   the header or under the bar. The group intros are limited to 800px. */
.sv-group .ab-intro{max-width:800px}
.gbar{position:fixed;left:0;right:0;top:0;z-index:99990;background:rgba(14,18,28,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 20px 40px -24px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear .45s}
.gbar.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s}
.gbar-in{width:80%;max-width:1450px;margin:0 auto;height:64px;display:flex;align-items:center;gap:26px}
.gbar-t{font-family:"Baloo 2",display;font-size:22px;font-weight:600;line-height:1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gbar-n{font:500 13px/1 "Roboto Mono",monospace;letter-spacing:1px;color:#9aa0b4;white-space:nowrap}
.gbar-n b,.gbar-n i{font-weight:500;font-style:normal}
.gbar-n b{color:#fff}
.gbar-go:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.gbar-go{flex:none;margin-left:auto;padding:10px 16px;border-radius:30px;background:var(--purple);color:#fff;font:600 13px/1 Poppins,Helvetica,Arial,sans-serif;white-space:nowrap;transition:background-color .3s ease}
.gbar-go:hover{background:#6d2ee6}
.page-line{position:fixed;left:0;right:0;top:0;z-index:99991;height:2px;background:var(--purple);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  opacity:0;transition:opacity .3s ease,top .45s cubic-bezier(.2,.7,.2,1)}
.page-line.is-on{opacity:1}
@media (max-width:980px){
  .gbar-in{width:90%;gap:16px}
}
@media (max-width:767px){
  .gbar-in{height:52px;gap:12px}
  .gbar-t{font-size:17px}
  .gbar-go{display:none}
  .gbar-n{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){.gbar,.gbar.is-shown{transform:none;transition:none}.page-line{transition:none}}

/* ---------- Services: group headers, "chapter numeral" (approved 2026-11-06) ----------
   Each group opens like a chapter: its number in a large outlined numeral, the title and intro,
   then the number of services and the same "Go to the service page" link as at the bottom of
   the group. Fixed side columns keep every group's text on the same left edge; the numeral lines
   up with the title and the count and link with the intro's last line. js/svc-bar.js sets --fill (0 to 1) as the numeral scrolls
   into view, and the purple fill rises inside the outline; without it the numeral is full. */
.sv-head{display:grid;grid-template-columns:180px minmax(0,820px) 260px;justify-content:space-between;column-gap:48px;align-items:end}
.sv-num{position:relative;align-self:start;margin-top:4px;font-family:"Baloo 2",display;font-size:150px;font-weight:600;line-height:.74;letter-spacing:-4px;color:transparent;-webkit-text-stroke:1.5px rgba(129,57,255,.6);-webkit-user-select:none;user-select:none}
.sv-num span{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-text-stroke:0;color:transparent;background:linear-gradient(180deg,#a77bff,var(--purple) 60%,#5f00b2);-webkit-background-clip:text;background-clip:text;clip-path:inset(calc((1 - var(--fill,1)) * 100%) 0 0 0)}
.sv-head .sv-title h3{font-size:50px;line-height:1.05}
.sv-head .module.sv-title{margin-bottom:10px}
.sv-head .ab-intro{max-width:none}
.sv-head .ab-intro,.ap-intro .ab-intro,.ap-close .ab-intro,.sm-text .ab-intro{padding-top:0}  /* spacing review: every section title sits 20px above its intro */
.ap-close .module.sv-title{margin-bottom:10px}
.sv-head .ab-intro p span{font-size:16px;line-height:1.75;color:rgba(255,255,255,.78)}
.sv-head-r{text-align:right;padding-bottom:4px}
/* service pages hold one group, so their header has no numeral */
@media (min-width:1200px){.sv-head.no-num{grid-template-columns:minmax(0,820px) 260px}}
@media (min-width:981px) and (max-width:1199px){
  .sv-head.no-num{grid-template-columns:minmax(0,1fr)}
  .sv-head.no-num .sv-head-r{grid-column:1}
  .sv-head{grid-template-columns:140px minmax(0,1fr);justify-content:stretch;column-gap:40px}
  .sv-num{font-size:120px;letter-spacing:-3px}
  .sv-head-r{grid-column:2;text-align:left;margin-top:22px}
}
.sv-count{margin:0 0 6px;font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:15px;font-weight:500;line-height:1;letter-spacing:.5px;color:#9aa0b4}
.sv-count b{margin-right:8px;font-family:"Baloo 2",display;font-size:52px;font-weight:600;line-height:1;letter-spacing:0;color:#fff;vertical-align:-7px}
@media (max-width:980px){
  .sv-head{grid-template-columns:1fr}
  .sv-num{margin:0 0 18px;font-size:110px;letter-spacing:-3px}
  .sv-head-r{grid-column:auto}
  .sv-head .sv-title h3{font-size:40px}
  .sv-head-r{text-align:left;margin-top:24px}
  .sv-count b{font-size:40px}
}
@media (max-width:767px){
  .sv-num{font-size:96px;letter-spacing:-2px}
  .sv-head .sv-title h3{font-size:34px}
  .sv-head .ab-intro p span{font-size:15px}
  .sv-head-r .btn-service{width:auto;text-align:left}
  .sv-count b{font-size:36px}
}

/* ---------- Service pages (product-design-management, b2b-digital-services, consultancy,
   branding-digital-design; built 2026-11-06) ----------
   They reuse the About hero (.abh), the Services banner (.sv-transform), the group header and cards
   (.sv-group) and the shared CTA. Consultancy adds "Our approach" (the home 10X beside five
   numbered steps); every page ends with "More services" links to the other pages. */
.sv-approach{padding:50px 0}
.ap-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:80px;align-items:start}
.ap-intro{position:sticky;top:200px}
.ap-intro .module.sv-title{margin-bottom:10px}
.sv-approach .sv-title h3{font-size:34px;line-height:1.2}
.ap-intro .image-10x{margin:30px 0 18px}
.ap-steps{list-style:none;margin:0;padding:0}
.ap-step{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:22px;padding:0 0 44px}
.ap-step:last-child{padding-bottom:0}
.ap-n{font-family:"Baloo 2",display;font-size:48px;font-weight:600;line-height:.9;color:var(--purple)}
.ap-step h3{margin:0 0 10px;font-family:"Baloo 2",display;font-size:28px;font-weight:600;line-height:1.15;color:#fff}
.ap-step p{margin:0;font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:1.75;color:rgba(255,255,255,.78)}
.ap-close{max-width:820px;margin-top:40px}
.sv-approach .ab-intro p span,.sv-more .ab-intro p span{font-size:16px;line-height:1.75}
.sv-more{padding:50px 0}
.sm-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:96px;align-items:center}
.sm-text .module.sv-title{margin-bottom:10px}
@media (max-width:980px){
  .ap-grid{grid-template-columns:1fr}
  .ap-intro{position:static;margin-bottom:40px}
}
@media (max-width:767px){
  .ap-step{grid-template-columns:52px minmax(0,1fr);column-gap:14px;padding-bottom:34px}
  .ap-n{font-size:36px}
  .sv-approach .sv-title h3{font-size:26px}
  .sv-approach .ab-intro p span,.sv-more .ab-intro p span{font-size:15px}
  .sv-more .sv-title h3{font-size:30px}
  .ap-step h3{font-size:22px}
  .ap-step p{font-size:15px}
}

/* ---------- Service pages: "More services" index (concept A, approved 2026-11-06) ----------
   One row per service: number, name, count and arrow. Pointing at a row (or focusing it) draws a
   purple line under it, slides the name in and turns the arrow; the other rows step back.
   js/more-list.js adds the photo that follows the pointer. Touch screens and phones show a small
   photo in each row instead, and the "View all" button moves under the list.
   "View all services" is the site's outline white pill (.dual-buttons .btn-white-outline), like the
   banner buttons (2026-11-07: the user chose to match the other buttons). */
.ml-all-wrap{margin-top:32px}
.ml-go{flex:none;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.32);border-radius:50%;color:#fff;transition:background-color .35s ease,border-color .35s ease}
.ml-go svg{display:block;width:18px;height:18px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ml-go path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ml-list{margin:0;padding:0;list-style:none;border-bottom:1px solid rgba(255,255,255,.14)}
.ml-link{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto 46px;grid-template-areas:"n name c go";column-gap:24px;align-items:center;padding:28px 0;border-top:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;transition:opacity .4s ease}
.ml-link::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--purple);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ml-link:focus-visible{outline:none}
.ml-th{display:none}
.ml-meta{display:contents}
.ml-n{grid-area:n;font:500 13px/1 "Roboto Mono",monospace;letter-spacing:1px;color:#5d6479;transition:color .35s ease}
.ml-name{grid-area:name;font:600 30px/1.1 "Baloo 2",display;color:#fff;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ml-c{grid-area:c;font:500 13px/1 "Roboto Mono",monospace;letter-spacing:1px;color:rgba(255,255,255,.62);white-space:nowrap;transition:color .35s ease}
.ml-link > .ml-go{grid-area:go}
.ml-link:hover::after,.ml-link:focus-visible::after{transform:scaleX(1)}
.ml-link:hover .ml-name,.ml-link:focus-visible .ml-name{transform:translateX(14px)}
.ml-link:hover .ml-n,.ml-link:hover .ml-c,.ml-link:focus-visible .ml-n,.ml-link:focus-visible .ml-c{color:var(--purple)}
.ml-link:hover .ml-go,.ml-link:focus-visible .ml-go{background:var(--purple);border-color:var(--purple)}
.ml-link:hover .ml-go svg,.ml-link:focus-visible .ml-go svg{transform:rotate(45deg)}
@media (hover:hover){
  .ml-list:hover .ml-link{opacity:.38}
  .ml-list:hover .ml-link:hover{opacity:1}
}
/* the photo that follows the pointer (built by js/more-list.js) */
.ml-peek{position:fixed;left:0;top:0;z-index:60;width:250px;height:164px;pointer-events:none;opacity:0;transition:opacity .35s ease;will-change:transform}
.ml-peek.is-on{opacity:1}
.ml-peek-in{position:relative;width:100%;height:100%;overflow:hidden;border-radius:18px;background:#141a27;transform:scale(.86);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ml-peek.is-on .ml-peek-in{transform:scale(1)}
.ml-peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity .35s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.ml-peek img.is-on{opacity:1;transform:scale(1)}
.ml-peek-c{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:100px;background:rgba(10,14,23,.78);font:500 11px/1 "Roboto Mono",monospace;letter-spacing:1px;color:#fff}
@media (min-width:981px) and (max-width:1199px){
  .sm-grid{column-gap:56px}
  .ml-link{grid-template-columns:48px minmax(0,1fr) auto 46px;column-gap:18px}
  .ml-name{font-size:26px}
}
@media (max-width:980px){
  .sm-grid{display:flex;flex-direction:column;align-items:stretch}
  .sm-text{display:contents}
  .ml-list{order:1;margin-top:30px}
  .ml-all-wrap{order:2;margin-top:32px}
}
/* no hover: a small photo in each row, the number and count under the name */
@media (hover:none),(max-width:767px){
  .ml-link{grid-template-columns:64px minmax(0,1fr) 42px;grid-template-areas:"th name go" "th meta go";column-gap:16px;row-gap:6px;padding:18px 0}
  .ml-th{display:block;grid-area:th;width:64px;height:64px;overflow:hidden;border-radius:14px;background:#141a27}
  .ml-th img{display:block;width:100%;height:100%;object-fit:cover}
  .ml-meta{display:block;grid-area:meta;align-self:start}
  .ml-name{align-self:end}
  .ml-c::before{content:"\00b7";margin:0 8px;color:#5d6479}
  .ml-link > .ml-go{width:42px;height:42px}
  .ml-go svg{width:16px;height:16px}
}
@media (max-width:767px){
  .ml-link{grid-template-columns:58px minmax(0,1fr) 38px;column-gap:14px;padding:16px 0}
  .ml-th{width:58px;height:58px}
  .ml-name{font-size:20px}
  .ml-n,.ml-c{font-size:11px}
  .ml-link > .ml-go{width:38px;height:38px}
  .ml-go svg{width:15px;height:15px}
}
@media (prefers-reduced-motion:reduce){
  .ml-link::after,.ml-name,.ml-go svg,.ml-peek-in,.ml-peek img{transition:none}
  .ml-link:hover .ml-name,.ml-link:focus-visible .ml-name{transform:none}
}

/* =========================================================
   Process page (built 2026-11-06 from the live page). It reuses the About hero (.abh), the
   service-page banner (.sv-transform) and the Services cards with their Spotlight (.sv-group);
   the photo collage stays inside its column (approved). Sizes measured on the live page.
   ========================================================= */
.pr-banner-btn{margin-top:32px}
.btn-process.pr-btn-blue{color:var(--blue)}
.btn-process.pr-btn-purple{background-color:var(--purple);color:#fff}
.pr-title h3{padding-bottom:10px;font-family:"Baloo 2",display;font-size:42px;font-weight:600;line-height:1.3em;color:#fff}
.module.pr-title,.module.pr-title-s{margin-bottom:10px}
.pr-intro p{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:1.8em;color:rgba(255,255,255,.7)}
.pr-intro p:not(:last-child){padding-bottom:1em}
.pr-steps{padding:50px 0}
.pr-ways{padding:50px 0 30px}  /* the question list (.ct-qs, Contact section below); the last row keeps 20px inside, so the card sits as far below as on other pages */
/* steps: a white icon in a purple circle beside each title and text */
.pr-list{margin:0;padding:0;list-style:none}
.pr-step{display:flex;align-items:flex-start;gap:15px;margin-bottom:5.82%}
.pr-step:last-child{margin-bottom:50px}
.pr-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background-color:var(--purple);color:#fff}
.pr-ico svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pr-ico svg .f{fill:currentColor;stroke:none}
.pr-step h4{padding-bottom:10px;font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:20px;font-weight:700;line-height:1.4em;color:#fff}
.pr-step p{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:1.8em;color:#fff}
.module.pr-btn{margin-left:55px}
/* the steps stage (direction B, approved 2026-11-07; js/steps.js): one step leads at a time. The others
   dim, a purple line fills down the icons, and the stage draws the leading step's scene over the hero's
   fingerprint lines, with a purple light that follows the pointer. Without the script the first scene
   shows and the steps read as before. */
@property --lx{syntax:"<percentage>";inherits:true;initial-value:66%}
@property --ly{syntax:"<percentage>";inherits:true;initial-value:44%}
.pr-list{position:relative}
.pr-step{position:relative;z-index:1}
.pr-rail{display:none;position:absolute;left:21.5px;width:1px;background:rgba(255,255,255,.14)}
.pr-rail i{position:absolute;left:0;top:0;width:1px;height:0;background:var(--purple);transition:height .6s cubic-bezier(.65,0,.35,1)}
.pr-list.is-live .pr-rail{display:block}
.pr-list.is-pinned .pr-rail i{transition:none}  /* the pin drives it with the scroll */
.pr-ico{position:relative}
.pr-ico::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--navy);opacity:0;transition:opacity .5s ease}
.pr-step-t{transition:opacity .5s ease}
.pr-list.is-live .pr-step{cursor:pointer}
.pr-list.is-live .pr-step:not(.is-on) .pr-step-t{opacity:.5}
.pr-list.is-live .pr-step:not(.is-on) .pr-ico::after{opacity:.55}
.module.pr-stage{position:relative;aspect-ratio:1000/1037;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:20px;background-color:#141a27;transition:--lx 1.2s cubic-bezier(.65,0,.35,1),--ly 1.2s cubic-bezier(.65,0,.35,1)}
.pr-stage.is-pointer{transition:none}
.pr-fp{position:absolute;top:0;left:0;width:100%;height:100%;fill:#fff;opacity:.05}
.pr-fp-lit{fill:var(--purple);opacity:.35;-webkit-mask:radial-gradient(circle at var(--lx) var(--ly),#000,transparent 26%);mask:radial-gradient(circle at var(--lx) var(--ly),#000,transparent 26%)}
.pr-scene{position:absolute;left:0;top:2%;width:100%;height:76%;fill:none;stroke:rgba(255,255,255,.82);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pr-scene:not(.is-on){visibility:hidden}
.pr-scene .p{stroke:var(--purple);stroke-width:2}
.pr-scene .w{stroke:rgba(255,255,255,.32)}
.pr-scene .dl{stroke:rgba(255,255,255,.32);stroke-dasharray:3 5}
.pr-scene .f{fill:var(--purple);stroke:none}
.pr-scene .sf{fill:#141a27;stroke:none}
.pr-scene .cur{fill:#fff;stroke:none}
.pr-scene text{fill:rgba(255,255,255,.7);stroke:none;font-family:"Roboto Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:1.6px}
.pr-meta{position:absolute;left:30px;right:30px;bottom:28px}
.pr-meta p{padding:0}
.pr-n{font-family:"Roboto Mono",monospace;font-size:12px;font-weight:500;line-height:1;letter-spacing:2px;color:#9aa0b4}
.pr-n b{font-weight:500;color:#fff}
.pr-st{margin-top:12px;font-family:"Baloo 2",display;font-size:26px;font-weight:500;line-height:1.1;color:#fff}
.pr-st.is-swap{animation:prSwap .6s cubic-bezier(.65,0,.35,1)}
@keyframes prSwap{from{opacity:0;transform:translateY(10px)}}
.pr-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:18px}
.pr-bar i{position:relative;height:2px;overflow:hidden;background:rgba(255,255,255,.14)}
.pr-bar i::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--purple);transform:scaleX(var(--f,0));transform-origin:0 50%;transition:transform .5s ease}
.pr-bar i:first-child{--f:1}
.pr-stage.is-pinned .pr-bar i::after{transition:none}
/* drawing: the leading scene's lines draw in one after another; a scene that steps back fades first,
   then resets so it draws again next time */
.pr-stage.is-live .pr-scene{visibility:visible;opacity:0;transition:opacity .35s ease}
.pr-stage.is-live .pr-scene.is-on{opacity:1;transition:opacity .2s ease}
.pr-stage.is-live .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 0s linear .35s}
.pr-stage.is-live .is-on .ln{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) var(--d,0s)}
.pr-stage.is-live .fd{opacity:0;transform:translateY(6px);transition:opacity 0s linear .35s,transform 0s linear .35s}
.pr-stage.is-live .is-on .fd{opacity:1;transform:none;transition:opacity .5s ease var(--d,0s),transform .6s cubic-bezier(.65,0,.35,1) var(--d,0s)}
.pr-stage.is-live .is-on .pr-dots circle{animation:prType 1.2s ease-in-out infinite}
.pr-stage.is-live .is-on .pr-dots circle:nth-child(2){animation-delay:.2s}
.pr-stage.is-live .is-on .pr-dots circle:nth-child(3){animation-delay:.4s}
@keyframes prType{0%,100%{opacity:.3}50%{opacity:1}}
@media (max-width:980px){
  .pr-intro p{font-size:15px}
  .pr-step h4{font-size:16px}
  .pr-step p{font-size:15px}
  .row.pr-stage-row{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .pr-stage-row > .col{display:contents}
  .col-1-2 .module.pr-stage{order:-1;position:sticky;top:calc(var(--header-offset,87px) + 12px);z-index:2;aspect-ratio:16/10;margin-bottom:30px}
  .pr-scene{top:4%;height:70%}
  .pr-meta{left:20px;right:20px;bottom:18px}
  .pr-st{display:none}
  .pr-bar{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){
  .pr-rail i,.pr-ico::after,.pr-step-t,.module.pr-stage,.pr-bar i::after,.pr-stage.is-live .pr-scene,.pr-stage.is-live .pr-scene.is-on{transition:none}
  .pr-st.is-swap,.pr-stage.is-live .is-on .pr-dots circle{animation:none}
  .pr-stage.is-live .ln{stroke-dasharray:none;transition:none}
  .pr-stage.is-live .fd{opacity:1;transform:none;transition:none}
}
@media (max-width:767px){
  .pr-banner{padding:80px 0}
  .col-1-2 .module.pr-stage{aspect-ratio:4/3}  /* the scene stays large enough to read on a phone */
  .pr-scene{top:3%;height:76%}
  .pr-title-s h3{font-size:22px}
  .pr-intro p{font-size:14px}
  .pr-step:not(:last-child){margin-bottom:30px}
  .pr-step h4{font-size:14px}
  .pr-step p{font-size:14px}
  .module.pr-btn{margin-left:0}
}

/* =========================================================
   Contact page (built 2026-11-06 from the live page). The hero reuses .abh; the form and the
   contact cards sit in .ct-still rows that do not drift. The banner reuses .sv-transform and
   the questions reuse the toggle script (js/toggles.js, one open at a time).
   ========================================================= */
.abh .row.ct-still{transform:none;opacity:1}
.ct-head-row{padding-bottom:0}
.ct-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ct-note{min-height:0;margin:0;font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82)}
.ct-note.is-error{color:#ff8a8e}
/* contact cards: the even card gaps */
/* the three contact cards are the Services cards as they are (.sv-group .card, with the Spotlight from
   js/fx.js; 2026-11-07). The group wrapper sits inside the hero, so it adds no padding of its own. */
.sv-group.ct-group{padding:0}
/* banner */
.ct-banner-text{margin-bottom:32px}
.ct-banner-text p{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:1.8em;color:#fff}
.btn-white-solid.ct-btn-purple{color:var(--purple)}
/* questions: the site's one question list (js/toggles.js), used for the Contact questions, the Process
   ways of work and the Privacy Policy services. Smoother version approved 2026-11-07 and used everywhere the
   same day: a small quiet number (01–) leads each row and turns purple when open; the answer lines up with
   the question text and gets readable leading. The height eases in and out on one curve, the answer fades
   and rises into place, the arrow turns down in purple, and a purple line draws under the row you point at
   or open */
.ct-faq{padding:50px 0 32px}
.module.ct-faq-title{margin-bottom:10px}
.ct-qs{counter-reset:faq}
.ct-q{position:relative;margin-bottom:2.75%;padding:20px 0;border-bottom:1px solid #d9d9d9}
.ct-q:last-child{margin-bottom:0;border-bottom:0}
.ct-q::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--purple);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.ct-q:hover::after,.ct-q.is-open::after{transform:scaleX(1)}
.ct-q-h{padding-bottom:0;font-family:"Baloo 2",display;font-size:22px;font-weight:500;line-height:1em;color:#fff}
.ct-q-btn{position:relative;display:block;width:100%;margin:0;padding:0 50px 0 44px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ct-q-btn:focus-visible{outline:2px solid var(--purple);outline-offset:6px;border-radius:4px}
.ct-q-btn::before{counter-increment:faq;content:counter(faq,decimal-leading-zero);position:absolute;left:0;top:50%;margin-top:-6px;font:500 12px/1 "Roboto Mono",monospace;letter-spacing:1px;color:#5d6479;transition:color .3s ease}
.ct-q.is-open .ct-q-btn::before{color:var(--purple)}
.ct-q-ic{position:absolute;right:-1px;top:50%;width:18px;height:18px;margin-top:-9px;color:#fff;transition:opacity .3s ease,transform .5s cubic-bezier(.65,0,.35,1),color .3s ease}
.ct-q-ic svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ct-qs:not(.is-ready) .ct-q-ic{opacity:0}  /* without the script every answer shows */
.ct-q:hover .ct-q-ic{transform:translateX(4px)}
.ct-q.is-open .ct-q-ic{transform:rotate(90deg);color:var(--purple)}
.ct-q-body{display:grid;grid-template-rows:1fr}
.ct-q-in{min-height:0;overflow:hidden;padding-left:44px}
.ct-q-in p{padding-top:20px;max-width:900px;font-family:"Open Sans",Arial,sans-serif;font-size:16px;font-weight:500;line-height:1.75;color:rgba(255,255,255,.7)}
.ct-q-in p + p{padding-top:1em}
.ct-q-in > *{opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .45s cubic-bezier(.65,0,.35,1)}
.ct-q.is-open .ct-q-in > *,.ct-qs:not(.is-ready) .ct-q-in > *{opacity:1;transform:none;transition:opacity .45s ease .15s,transform .6s cubic-bezier(.65,0,.35,1) .1s}
.ct-qs.is-ready .ct-q-body{grid-template-rows:0fr;visibility:hidden}
.ct-qs.is-ready .ct-q.is-open .ct-q-body{grid-template-rows:1fr;visibility:visible}
.ct-qs.is-live .ct-q-body{transition:grid-template-rows .6s cubic-bezier(.65,0,.35,1),visibility 0s linear .6s}  /* no closing animation on load */
.ct-qs.is-live .ct-q.is-open .ct-q-body{transition:grid-template-rows .6s cubic-bezier(.65,0,.35,1),visibility 0s}
@media (max-width:980px){
  .ct-banner-text p{font-size:15px}
  .ct-faq{padding:50px 0 30px}
  .ct-q{margin-bottom:10px}
}
@media (max-width:767px){
  .ct-banner-text p{font-size:14px}
  .ct-q-btn,.ct-q-in{padding-left:34px}
}
@media (prefers-reduced-motion:reduce){
  .ct-qs.is-live .ct-q-body,.ct-qs.is-live .ct-q.is-open .ct-q-body,.ct-q::after,.ct-q-ic,
  .ct-q-in > *,.ct-q.is-open .ct-q-in > *,.ct-q-btn::before{transition:none}
}

/* =========================================================
   Privacy Policy page (built 2026-11-06 from the live page). The hero reuses .abh with a still row
   (latest-update chip, print button, contents index of the seven chapters; approved freedom within
   the topic). The text keeps the live sizes; the open accordion box gets normal line spacing
   (it overlaps on live). Print view: black text on white, all boxes open.
   ========================================================= */
.pp-hero{background-image:none}
.pp-hero .ab-intro{max-width:800px}
.pp-meta-row{padding-top:34px}
.pp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.pp-chip{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 "Roboto Mono",monospace;letter-spacing:.5px;color:rgba(255,255,255,.8)}
.pp-chip svg,.pp-print svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pp-chip svg{color:var(--purple)}
.pp-print{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 20px;border:1px solid rgba(255,255,255,.32);border-radius:100px;background:transparent;font:600 13px/1 Poppins,Helvetica,Arial,Lucida,sans-serif;letter-spacing:.3px;text-transform:uppercase;color:#fff;cursor:pointer;transition:border-color .3s ease,background-color .3s ease}
.pp-print:hover,.pp-print:focus-visible{border-color:var(--purple);background-color:rgba(129,57,255,.16);outline:none}
/* the chapter menu: a left column that stays under the header (--pp-top from js/privacy.js) */
.row.pp-layout{display:grid;grid-template-columns:270px minmax(0,1fr);column-gap:80px;align-items:start}
.pp-side{align-self:stretch}
.pp-toc{position:sticky;top:var(--pp-top,136px)}
.pp-toc-label{margin-bottom:16px;font:500 12px/1 "Roboto Mono",monospace;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.pp-toc-a{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;align-items:center;padding:11px 0 11px 18px;border-left:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none}
.pp-toc-a::after{content:"";position:absolute;left:-1px;top:0;width:2px;height:100%;background:var(--purple);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pp-toc-n{font:500 12px/1 "Roboto Mono",monospace;letter-spacing:1px;color:#5d6479;transition:color .3s ease}
.pp-toc-t{font:500 14px/1.45 Poppins,Helvetica,Arial,Lucida,sans-serif;color:rgba(255,255,255,.62);transition:color .3s ease}
.pp-toc-a.is-active::after,.pp-toc-a:hover::after,.pp-toc-a:focus-visible::after{transform:scaleY(1)}
.pp-toc-a.is-active .pp-toc-n,.pp-toc-a:hover .pp-toc-n,.pp-toc-a:focus-visible .pp-toc-n{color:var(--purple)}
.pp-toc-a.is-active .pp-toc-t,.pp-toc-a:hover .pp-toc-t,.pp-toc-a:focus-visible .pp-toc-t{color:#fff}
.pp-toc-a:focus-visible{outline:none}
.pp-progress{margin:22px 0 0 18px;font:500 12px/1 "Roboto Mono",monospace;letter-spacing:1px;color:rgba(255,255,255,.5)}
.pp-progress b{font-weight:500;color:#fff}
@media (min-width:981px) and (max-width:1199px){.row.pp-layout{grid-template-columns:220px minmax(0,1fr);column-gap:48px}}
/* the policy text */
.pp-body{padding:30px 0 4%}
.module.pp-hmod{margin-bottom:10px}
.pp-h:focus{outline:none}
.pp-h{padding-bottom:10px;font-family:"Baloo 2",display;font-size:48px;font-weight:600;line-height:1em;color:#fff;scroll-margin-top:130px}
.pp-text h2{padding-bottom:10px;font-family:"Baloo 2",display;font-size:26px;font-weight:500;line-height:1em;color:#fff}
.pp-text h3,.pp-acc .ct-q-in h3{padding-bottom:10px;font-family:"Baloo 2",display;font-size:22px;font-weight:500;line-height:1em;color:#fff}
.pp-text h4,.pp-acc .ct-q-in h4{padding-bottom:10px;font-family:"Baloo 2",display;font-size:18px;font-weight:500;line-height:1em;color:#fff}
.pp-text p{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:1.8em;color:#fff}
.pp-text p:not(:last-child),.pp-text ul:not(:last-child){padding-bottom:1em}
.pp-owner p{color:rgba(255,255,255,.7)}
.pp-text ul{margin:0;padding-left:16px;list-style:disc}
.pp-text li{font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:26px;color:#fff}
.pp-text strong{font-weight:700;color:#fff}
.pp-text a,.pp-acc .ct-q-in a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.pp-text a:hover,.pp-acc .ct-q-in a:hover{text-decoration:underline}
.pp-text hr{height:0;margin:8px 0;border:1px inset #808080}
/* the four services: the site's question rows (.ct-q*, one open at a time); the answers keep the
   policy's own text style so links and subheadings read like the rest of the page */
.pp-acc .ct-q-in > :first-child{margin-top:20px}
.pp-acc .ct-q-in p{padding-top:0;padding-bottom:1em;font-family:Poppins,Helvetica,Arial,Lucida,sans-serif;font-size:16px;font-weight:500;line-height:1.8em;color:#fff}
.pp-acc .ct-q-in p:last-child{padding-bottom:0}
@media (max-width:980px){
  .pp-text p{font-size:15px;line-height:27px}
  .pp-text li{font-size:15px}
  .pp-body{padding:0 0 50px}
  .row.pp-layout{display:block}
  .pp-toc{position:static;margin-bottom:40px;padding:22px 20px 10px;border:1px solid rgba(255,255,255,.14);border-radius:16px}
  .pp-progress{display:none}
  .pp-acc .ct-q-in p{font-size:15px;line-height:27px}
}
@media (max-width:767px){
  .pp-h{font-size:42px}
  .pp-text p{font-size:14px;line-height:25.2px}
  .pp-acc .ct-q-in p{font-size:14px;line-height:25.2px}
  .pp-text li{font-size:14px}
  .module.pp-hmod{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .pp-toc-a::after,.pp-toc-n,.pp-toc-t{transition:none}
}
@media print{
  #main-header,#top-header,.hfp,.pp-meta,.pp-side,.section-footer,.scroll-top,.page-line,.gbar{display:none!important}
  .row.pp-layout{display:block}
  body,.section,.ab-hero{background:#fff!important;color:#000}
  .ab-hero{padding:0 0 20px}
  .abh .row{transform:none!important;opacity:1!important}
  .row{width:100%}
  .heading-module h1.ab-green{color:#000;font-size:36px}
  .ab-intro p,.ab-intro p span,.pp-h,.pp-text h2,.pp-text h3,.pp-text h4,.pp-text p,.pp-text li,.pp-text strong,.pp-owner p,.pp-acc .ct-q-h,.pp-acc .ct-q-in p,.pp-acc .ct-q-in h4{color:#000!important}
  .pp-h{font-size:26px}
  .pp-acc .ct-q{break-inside:avoid;border-color:#999}
  .pp-acc .ct-q-ic,.pp-acc .ct-q::after{display:none}
  .pp-acc .ct-q-in > *{opacity:1!important;transform:none!important}
  .pp-acc.is-ready .ct-q-body{grid-template-rows:1fr;visibility:visible}
  [data-fx]{visibility:visible!important;opacity:1!important;transform:none!important}
}

/* ---------- Contact: "A note in one sentence" (concept C, approved 2026-11-06) ----------
   The form is one sentence in large type with four blanks. A blank (.ns-b) is an inline grid: a hidden
   copy of its text (data-v, kept by js/contact-form.js) sets its width, so it grows as one types. Empty
   blanks are dashed; filled ones turn solid purple; the service blank opens a small list (.ns-menu). */
.ns-s{max-width:1100px;margin:0;font-family:"Baloo 2",display;font-size:50px;font-weight:600;line-height:1.75;color:#fff}
.ns-b{position:relative;display:inline-grid;align-items:center;height:66px;margin:0 6px;padding:0 24px;vertical-align:middle;border:1.5px dashed rgba(255,255,255,.35);border-radius:100px;font-weight:500;line-height:1;color:#fff;cursor:text;transition:border-color .3s ease,background-color .3s ease}
.ns-b::after{content:attr(data-v);grid-area:1/1;visibility:hidden;white-space:pre;height:0;overflow:hidden}
.ns-b input,.ns-b select,.ns-pick-btn{grid-area:1/1;width:0;min-width:100%;height:100%;margin:0;padding:0;border:0;background:none;font:inherit;line-height:1;color:inherit;outline:none}
.ns-b input{position:relative;top:-.14em}  /* Baloo sits low in a text field; this lines it up with the service blank */
.ns-b input::placeholder{color:rgba(255,255,255,.38);opacity:1}
.ns-b:focus-within{border-style:solid;border-color:var(--purple);background-color:rgba(129,57,255,.12)}
.ns-b.is-filled{border-style:solid;border-color:var(--purple)}
.ns-b.is-invalid{border-style:solid;border-color:#ff5a5f}
.ns-pick{padding-right:58px;cursor:pointer}
.ns-pick select{-webkit-appearance:none;appearance:none;cursor:pointer;color:rgba(255,255,255,.38)}
.ns-pick select:valid{color:#fff}
.ns-pick select option{font:500 16px Poppins,Helvetica,Arial,Lucida,sans-serif;color:#fff;background:#141a27}
.ns-pick.is-enhanced select{display:none}
.ns-pick-btn{text-align:left;cursor:pointer;color:rgba(255,255,255,.38)}
.ns-pick.is-filled .ns-pick-btn{color:#fff}
.ns-chev{position:absolute;right:22px;top:50%;width:22px;height:22px;margin-top:-11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:transform .3s ease}
.ns-pick-btn[aria-expanded="true"] ~ .ns-chev{transform:rotate(180deg)}
.ns-menu{position:absolute;left:0;top:calc(100% + 10px);z-index:30;min-width:380px;margin:0;padding:10px;list-style:none;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#141a27;font:500 16px/1.2 Poppins,Helvetica,Arial,Lucida,sans-serif;outline:none}
.ns-menu li{padding:14px;border-radius:10px;color:rgba(255,255,255,.82);cursor:pointer;white-space:nowrap}
.ns-menu li.is-active,.ns-menu li:hover{background:var(--purple);color:#fff}
.ns-menu li[aria-selected="true"]::after{content:"  ✓"}
.ns-more{max-width:1100px;margin-top:30px}
.ns-more textarea{display:block;width:100%;height:150px;padding:18px;border:1px solid rgba(255,255,255,.32);border-radius:14px;background:transparent;font:500 16px/1.7 Poppins,Helvetica,Arial,Lucida,sans-serif;color:#fff;resize:vertical;outline:none;transition:border-color .3s ease}
.ns-more textarea::placeholder{color:rgba(255,255,255,.38)}
.ns-more textarea:focus{border-color:var(--purple)}
.ns-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:32px}
/* "Send my note" is the site's purple process pill (.btn-process.pr-btn-purple), like "Get in touch!" on
   Process (2026-11-07: the user chose to match the other buttons), with no dimmed state: it always looks like
   that pill. .ns-send stays as the script's hook; sending with blanks left shows "Please fill in …". */
.ns-send:focus-visible,.ns-pick-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ns-note:not(:empty){margin-top:18px}
@media (max-width:980px){
  .ns-s{font-size:38px}
  .ns-b{height:54px;padding:0 18px}
  .ns-pick{padding-right:46px}
  .ns-chev{right:16px}
}
@media (max-width:767px){
  .ns-s{font-size:26px;line-height:1.9}
  .ns-b{height:42px;margin:0 2px;padding:0 14px;border-width:1.2px}
  .ns-pick{padding-right:36px}
  .ns-chev{right:12px;width:16px;height:16px;margin-top:-8px}
  .ns-menu{min-width:260px;font-size:14px}
  .ns-menu li{padding:12px}
}
@media (prefers-reduced-motion:reduce){.ns-b,.ns-chev{transition:none}}

/* Spacing review 2026-11-06: the home services title sits 20px above its intro, like every section title */
.module.services-title{margin-bottom:10px}

/* ---------- Page not found: "Still on the canvas" (direction B, approved 2026-11-08) ----------
   The copy and the Contact page's buttons on the left; a design-tool canvas on the right whose digits are
   layers the visitor drags, nudges and undoes (js/notfound.js). Brand purple is the only accent; no shadows. */
.nf-hero{padding:130px 0 80px}
.nf-row{align-items:center;gap:56px}
.nf-copy{flex:0 0 520px;max-width:520px}
.nf-copy .heading-module h1{font-size:64px;line-height:1.02}
.nf-dot{color:var(--purple)}
.nf-copy .ab-intro{margin:22px 0 30px}
.nf-cv{position:relative;flex:1 1 auto;min-width:0;height:560px;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);border-radius:20px;overflow:hidden;background:#140a2c;font-family:"Roboto Mono",monospace;font-size:12px;color:rgba(255,255,255,.62)}
.nf-bar{display:flex;align-items:center;gap:16px;flex:0 0 46px;padding:0 12px 0 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.nf-bar b{color:#fff;font-weight:500}
.nf-file{margin-right:auto}
.nf-undo{font:inherit;color:#fff;background:none;border:1px solid rgba(255,255,255,.24);border-radius:8px;padding:6px 12px;cursor:pointer}
.nf-undo:hover:not(:disabled),.nf-undo:focus-visible{border-color:var(--purple);background:rgba(129,57,255,.2)}
.nf-undo:disabled{opacity:.4;cursor:default}
.nf-body{flex:1;display:flex;min-height:0}
.nf-layers{flex:0 0 152px;padding:14px 10px;border-right:1px solid rgba(255,255,255,.12);line-height:2.1}
.nf-lh{margin:0 0 2px;padding:0 6px;color:#fff;font-weight:500}
.nf-lh2{margin-top:20px}
.nf-layer{display:block;width:100%;box-sizing:border-box;padding:0 6px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;line-height:inherit;text-align:left;white-space:nowrap}
.nf-in{padding-left:18px}
button.nf-layer{cursor:pointer}
button.nf-layer:hover{color:#fff}
.nf-layer.is-on{background:rgba(129,57,255,.3);color:#fff}
.nf-board{position:relative;flex:1;min-width:0;overflow:hidden;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:22px 22px}
.nf-frame{position:absolute;left:30px;top:26px;margin:0;color:#c9b8ff}
.nf-digits{position:absolute;left:28px;top:70px;display:flex;gap:6px}
.nf-d{display:block;padding:0;border:0;background:none;font:600 186px/.98 "Baloo 2",display;color:#fff;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.nf-d:focus{outline:none}
.nf-d:focus-visible{outline:2px dashed #c9b8ff;outline-offset:8px}
.nf-d.is-drag{cursor:grabbing}
.nf-tilt{transform:translate(4px,12px) rotate(9deg)}
.nf-sel{position:absolute;display:none;pointer-events:none;outline:1.5px solid var(--purple)}
.nf-cv.is-ready .nf-sel.is-on{display:block}
.nf-sel i{position:absolute;width:9px;height:9px;box-sizing:border-box;background:#fff;border:1.5px solid var(--purple)}
.nf-sel .tl,.nf-sel .ml,.nf-sel .bl{left:-5px}.nf-sel .tr,.nf-sel .mr,.nf-sel .br{right:-5px}
.nf-sel .tl,.nf-sel .tm,.nf-sel .tr{top:-5px}.nf-sel .bl,.nf-sel .bm,.nf-sel .br{bottom:-5px}
.nf-sel .tm,.nf-sel .bm{left:calc(50% - 4px)}.nf-sel .ml,.nf-sel .mr{top:calc(50% - 4px)}
.nf-size{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);padding:3px 8px;border-radius:5px;background:var(--purple);color:#fff;font-size:11px;font-style:normal;line-height:1.4;white-space:nowrap}
.nf-note{position:absolute;right:30px;top:26px;margin:0;padding:16px 18px;border:1px solid var(--purple);border-radius:4px;background:rgba(129,57,255,.2);color:#fff;font:500 15px/1.4 Poppins,Helvetica,Arial,sans-serif;transform:rotate(-4deg)}
.nf-cmt{position:absolute;right:28px;bottom:44px;display:flex;align-items:flex-start;gap:10px;max-width:220px;padding:12px 14px;border-radius:16px 16px 16px 4px;background:#fff;color:#1b1530;font:500 13px/1.45 Poppins,Helvetica,Arial,sans-serif;text-decoration:none}
.nf-cmt b{flex:0 0 28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--purple);color:#fff;font-size:11px}
.nf-cmt u{color:var(--purple);font-weight:600;text-decoration:none}
.nf-cmt:hover u,.nf-cmt:focus-visible u{text-decoration:underline}
.nf-cur{position:absolute;display:flex;align-items:flex-start;gap:2px;pointer-events:none}
.nf-cur svg{width:20px;height:22px}
.nf-cur span{margin-top:16px;padding:2px 7px;border-radius:5px;font-size:11px;line-height:1.5}
.nf-c1{left:58%;top:42%;animation:nf-walk 16s ease-in-out infinite}
.nf-c1 path{fill:var(--purple);stroke:#fff;stroke-width:1}
.nf-c1 span{background:var(--purple);color:#fff}
.nf-c2{left:56%;top:62%}
.nf-c2 path{fill:#fff;stroke:#140a2c;stroke-width:1}
.nf-c2 span{background:#fff;color:#140a2c}
.nf-c2.is-live svg{display:none}
.nf-c2.is-live span{margin:14px 0 0 12px}
.nf-c2.is-out{opacity:0}
.nf-status{position:absolute;left:16px;bottom:12px;margin:0;font-size:11px;color:rgba(255,255,255,.42)}
/* Abdullah wanders: the note, the second 4, the comment, the frame label, and back */
@keyframes nf-walk{0%,8%{left:58%;top:42%}20%,30%{left:66%;top:20%}44%,54%{left:60%;top:64%}68%,78%{left:16%;top:6%}92%,100%{left:58%;top:42%}}
/* on phones the board is narrow: a path that keeps clear of the note */
@keyframes nf-walk-s{0%,8%{left:8%;top:46%}20%,30%{left:64%;top:8%}44%,54%{left:10%;top:78%}68%,78%{left:30%;top:60%}92%,100%{left:8%;top:46%}}
@media (prefers-reduced-motion:reduce){.nf-c1{animation:none}}
@media (max-width:1280px){.nf-copy{flex-basis:440px;max-width:440px}.nf-copy .heading-module h1{font-size:56px}.nf-d{font-size:150px}.nf-layers{flex-basis:132px}}
/* below 1180px the canvas moves under the copy, at full width */
@media (max-width:1180px){
  .nf-hero{padding:120px 0 60px}
  .nf-row{flex-direction:column;align-items:stretch;gap:36px}
  .nf-copy{flex:none;max-width:none}
  .nf-cv{flex:none;height:460px}
}
@media (max-width:767px){
  .nf-hero{padding:64px 0 50px}
  .nf-copy .heading-module h1{font-size:42px}
  .nf-layers,.nf-zoom,.nf-edited,.nf-status{display:none}
  .nf-digits{left:18px;top:62px}
  .nf-d{font-size:104px}
  .nf-frame{left:18px;top:20px}
  .nf-cv{height:460px}
  .nf-note{right:14px;top:196px;padding:10px 12px;font-size:12px}
  .nf-c1{left:8%;top:46%;animation-name:nf-walk-s}
  .nf-c2{left:52%;top:70%}
  .nf-cmt{right:14px;bottom:16px;max-width:200px;font-size:12px}
  .nf-size{bottom:-30px}
}

/* Contact: "The note takes flight" — the moment after "Send my note" (direction A, approved 2026-11-08).
   The filled blanks take the ink (.is-ink), the sentence turns into a sheet of paper (.ns-paper) that
   shrinks to the start of a dotted path and folds into a paper plane; the plane flies along the hero's
   rings to hello@innovinto.com (.ns-fly), dropping the words of the note on the way. On the left the
   thank-you, a four-step tracker and the two buttons come in (.ns-sent.is-in). Tapping the plane flies it
   again; tapping the email reopens the note to fix it. Reduced motion shows the last frame at once. */
.ns-b.is-ink{border-style:solid;border-color:var(--purple);background-color:var(--purple)}
.ns-b.is-ink input,.ns-b.is-ink .ns-pick-btn,.ns-b.is-ink select{color:#fff}
.ns.is-folding{opacity:0;transition:opacity .25s ease}
.ns-paper{position:fixed;z-index:60;margin:0;padding:26px 30px;box-sizing:border-box;border-radius:18px;background:#fff;font-family:"Baloo 2",display;font-weight:600;color:#0a0e17;pointer-events:none;transform-origin:50% 50%;opacity:0;transition:opacity .22s ease}
.ns-paper.is-on{opacity:1}
.ns-paper b{display:block;margin-bottom:10px;font:500 12px/1.4 "Roboto Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
.ns-paper span{display:inline-block;padding:0 .35em;border-radius:100px;background:var(--purple);font-weight:500;line-height:1.3;color:#fff}
.ns-sent{display:flex;align-items:flex-start;gap:40px;max-width:1152px}
.ns-sent-copy{flex:0 0 610px;max-width:100%}
.ns-sent-mono{margin:0;font-family:"Roboto Mono",monospace;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.ns-sent-h{margin:16px 0 0;font-family:"Baloo 2",display;font-size:76px;font-weight:600;line-height:1;color:#fff;outline:none}
.ns-sent-p{margin:20px 0 0;font-family:"Baloo 2",display;font-size:30px;font-weight:500;line-height:1.75;color:rgba(255,255,255,.9)}
.ns-sent-mail{display:inline-flex;align-items:center;height:50px;margin:0 4px;padding:0 22px;border:0;border-radius:100px;background:var(--purple);font:inherit;line-height:1;color:#fff;vertical-align:middle;cursor:pointer;transition:background-color .3s ease}
.ns-sent-mail:hover{background-color:#9257ff}
.ns-sent-mail:focus-visible,.ns-sent .btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ns-sent-hint{margin:8px 0 0;font:500 14px/1.6 Poppins,Helvetica,Arial,Lucida,sans-serif;color:rgba(255,255,255,.62)}
.ns-track{display:grid;grid-template-columns:repeat(4,1fr);max-width:600px;margin:36px 0 0;padding:0;list-style:none}
.ns-track li{position:relative;padding-top:30px;font:600 14px/1.4 Poppins,Helvetica,Arial,Lucida,sans-serif;color:#fff}
.ns-track li::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--purple)}
.ns-track li.is-now::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px)}
.ns-track li:last-child::before{display:none}
.ns-track i{position:absolute;left:0;top:0;width:18px;height:18px;box-sizing:border-box;border-radius:50%;background:var(--purple)}
.ns-track li.is-now i{outline:6px solid rgba(129,57,255,.28)}
.ns-sent.is-arrived .ns-track li.is-now i{animation:ns-ping 1.8s ease-out infinite}
.ns-track li.is-next i{border:2px solid rgba(255,255,255,.45);background:#0a0e17}
.ns-track b{display:block;margin-top:4px;font:500 12px/1.4 "Roboto Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@keyframes ns-ping{0%{outline:0 solid rgba(129,57,255,.55)}100%{outline:16px solid rgba(129,57,255,0)}}
.ns-sent-btns{margin-top:40px}
.ns-sent-btns .btn{font-size:14px}
/* the left side comes in line by line */
.ns-sent-copy > *{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.ns-sent.is-in .ns-sent-copy > *{opacity:1;transform:none}
.ns-sent.is-in .ns-sent-copy > :nth-child(2){transition-delay:.12s}
.ns-sent.is-in .ns-sent-copy > :nth-child(3){transition-delay:.26s}
.ns-sent.is-in .ns-sent-copy > :nth-child(4){transition-delay:.4s}
.ns-sent.is-in .ns-sent-copy > :nth-child(5){transition-delay:.55s}
.ns-sent.is-in .ns-sent-copy > :nth-child(6){transition-delay:.75s}
/* the flight */
.ns-fly{flex:1 1 auto;width:100%;max-width:520px;height:600px;margin-top:-40px;overflow:visible}
.ns-fly text{font-family:"Baloo 2",display;font-weight:500}
.ns-dot{fill:var(--purple);opacity:0;transition:opacity .25s ease}
.ns-dot.is-on{opacity:1}
.ns-word{opacity:0;transition:opacity .45s ease}
.ns-word.is-on{opacity:var(--o)}
.ns-word-in{transform-box:fill-box;transform-origin:50% 50%;transform:scale(.55);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.ns-word.is-on .ns-word-in{transform:none}
.ns-inbox{opacity:0;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.85);transition:opacity .3s ease,transform .5s cubic-bezier(.3,1.6,.5,1)}
.ns-inbox.is-on{opacity:1;transform:none}
.ns-tick{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s ease .25s}
.ns-inbox.is-on .ns-tick{stroke-dashoffset:0}
.ns-plane{cursor:pointer;outline:none}
.ns-plane-in{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0) rotate(-120deg);transition:transform .34s cubic-bezier(.3,1.5,.5,1)}
.ns-plane.is-on .ns-plane-in{transform:none}
.ns-ring{fill:transparent;stroke:transparent;stroke-width:2}
.ns-plane:focus-visible .ns-ring{stroke:#fff}
@media (max-width:1100px){
  .ns-sent{flex-direction:column-reverse;gap:0}
  .ns-sent-copy{flex:none}
  .ns-fly{max-width:none;height:320px;margin:-10px 0 10px}
}
@media (max-width:767px){
  .ns-sent-h{font-size:48px}
  .ns-sent-p{font-size:22px;line-height:1.85}
  .ns-sent-mail{height:40px;margin:0 2px;padding:0 16px}
  .ns-track{margin-top:30px}
  .ns-track li{font-size:12px}
  .ns-track b{font-size:10px;letter-spacing:.04em}
  .ns-fly{height:250px}
  .ns-paper{padding:16px 18px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .ns-sent-copy > *,.ns-dot,.ns-word,.ns-word-in,.ns-inbox,.ns-tick,.ns-plane-in,.ns.is-folding{transition:none}
  .ns-sent.is-arrived .ns-track li.is-now i{animation:none}
}

/* Back to top: "Elevator" (direction B, approved 2026-11-08). main.js turns the edge tab into a small lift panel:
   the up button (.scroll-top), the floor you are on (one floor per section of the page, "04 / 07") and a dot
   per floor. The floors open by name on hover or focus, or with a tap on the number on touch screens; choosing
   one goes there. Going up, the counter runs down and says "▲ up". Pages with fewer than three sections keep
   just the up button (.is-plain). */
.lift{position:fixed;right:0;bottom:110px;z-index:99999;display:none;flex-direction:row-reverse;align-items:flex-end;gap:12px}
.lift.is-visible{display:flex;animation:fadeInRight 1s 1 cubic-bezier(.77,0,.175,1)}
.lift.is-hidden{display:flex;opacity:0;animation:fadeOutRight 1s 1 cubic-bezier(.77,0,.175,1);pointer-events:none}
.lift-car{width:60px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-right:0;border-radius:10px 0 0 10px;background:#141a27;text-align:center}
.lift .scroll-top{position:static;display:block;width:100%;height:56px;padding:10px 0;border-radius:0;opacity:1;animation:none;pointer-events:auto}
.lift .scroll-top::before{width:32px;height:32px;margin:2px auto 0}
.lift .scroll-top:focus-visible,.lift button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.lift-num{display:block;width:100%;margin:0;padding:12px 0 8px;border:0;background:none;font:600 22px/1 "Roboto Mono",monospace;color:#fff;cursor:pointer}
.lift-num small{display:block;margin-top:5px;font-size:10px;font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.45)}
.lift-go{display:none;margin:-4px 0 6px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#a98aff}
.lift.is-going .lift-go{display:block}
.lift-dots{display:flex;flex-direction:column;align-items:center;gap:7px;padding:4px 0 14px}
.lift-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:background-color .3s ease,transform .3s ease}
.lift-dots i.is-past{background:rgba(255,255,255,.7)}
.lift-dots i.is-here{background:var(--purple);transform:scale(1.35)}
.lift-list{visibility:hidden;margin:0 0 6px;padding:12px 6px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#141a27;opacity:0;transform:translateX(10px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.lift:hover .lift-list,.lift:focus-within .lift-list,.lift.is-open .lift-list{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease,transform .25s ease}
.lift-list p{margin:2px 12px 8px;font:500 11px/1 "Roboto Mono",monospace;letter-spacing:.1em;color:#a98aff}
.lift-list ol{margin:0;padding:0;list-style:none}
.lift-list button{display:flex;gap:12px;align-items:center;width:100%;padding:7px 12px;border:0;border-radius:8px;background:none;font:500 12px/1 "Roboto Mono",monospace;letter-spacing:.06em;text-align:left;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.62);cursor:pointer}
.lift-list button b{font-weight:500;color:rgba(255,255,255,.4)}
.lift-list button:hover{color:#fff}
.lift-list button[aria-current="true"]{background:rgba(129,57,255,.18);color:#fff}
.lift-list button[aria-current="true"] b{color:#a98aff}
.lift.is-plain .lift-num,.lift.is-plain .lift-dots,.lift.is-plain .lift-list{display:none}
.lift.is-plain .lift-car{border:0;background:var(--purple)}
/* tablet and phone: just the arrow to the top (the user, 2026-11-08: "very simple on mobile") */
@media (max-width:1080px){
  .lift{bottom:96px}
  .lift .lift-num,.lift .lift-dots,.lift .lift-list{display:none}
  .lift .lift-car{border:0;background:var(--purple)}
}
@media (prefers-reduced-motion:reduce){
  .lift.is-visible,.lift.is-hidden{animation:none}
  .lift-list,.lift-dots i{transition:none}
}
@media print{.lift{display:none!important}}