/* Inner pages, same system as the homepage. Loaded after pages.css and graphics.css. */
html{scroll-padding-top:96px;scrollbar-color:#111 #fff}
body{background:#fff;color:#111;isolation:isolate}
.px-drift{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.px-drift i{position:absolute;display:block;width:14px;height:14px;border-radius:2px;background:#d4d4d4;will-change:transform}
.px-drift i:nth-child(6n+1){animation:px-w1 19s ease-in-out infinite alternate}
.px-drift i:nth-child(6n+2){animation:px-w2 26s ease-in-out infinite alternate-reverse}
.px-drift i:nth-child(6n+3){animation:px-w3 22s ease-in-out infinite alternate}
.px-drift i:nth-child(6n+4){background:#c6f54e;animation:px-w4 17s cubic-bezier(.45,0,.2,1) infinite alternate}
.px-drift i:nth-child(6n+5){animation:px-w5 29s ease-in-out infinite alternate-reverse}
.px-drift i:nth-child(6n+6){animation:px-w6 24s ease-in-out infinite alternate}
.px-drift i:nth-child(1){left:7%;top:18%;width:18px;height:18px;animation-delay:-4s}
.px-drift i:nth-child(2){left:22%;top:72%;width:11px;height:11px;animation-delay:-11s}
.px-drift i:nth-child(3){left:31%;top:38%;animation-delay:-7s}
.px-drift i:nth-child(4){left:44%;top:11%;width:13px;height:13px;animation-delay:-2s}
.px-drift i:nth-child(5){left:56%;top:64%;width:22px;height:22px;background:#e4e4e4;animation-delay:-16s}
.px-drift i:nth-child(6){left:68%;top:26%;width:10px;height:10px;animation-delay:-9s}
.px-drift i:nth-child(7){left:81%;top:48%;width:16px;height:16px;animation-delay:-13s}
.px-drift i:nth-child(8){left:90%;top:16%;width:12px;height:12px;animation-delay:-6s}
.px-drift i:nth-child(9){left:14%;top:46%;animation-delay:-18s}
.px-drift i:nth-child(10){left:38%;top:84%;width:15px;height:15px;background:#c6f54e;animation-delay:-3s}
.px-drift i:nth-child(11){left:8%;top:86%;width:20px;height:20px;background:#ececec;animation-delay:-21s}
.px-drift i:nth-child(12){left:73%;top:78%;width:12px;height:12px;animation-delay:-8s}
.px-drift i:nth-child(13){left:52%;top:42%;width:11px;height:11px;animation-delay:-15s}
.px-drift i:nth-child(14){left:86%;top:68%;width:17px;height:17px;animation-delay:-5s}
.px-drift i:nth-child(15){left:26%;top:14%;width:9px;height:9px;animation-delay:-12s}
.px-drift i:nth-child(16){left:63%;top:8%;width:14px;height:14px;background:#c6f54e;animation-delay:-19s}
.px-drift i:nth-child(17){left:47%;top:92%;width:16px;height:16px;animation-delay:-1s}
.px-drift i:nth-child(18){left:92%;top:88%;width:19px;height:19px;background:#e8e8e8;animation-delay:-14s}
.px-drift i:nth-child(19){left:4%;top:32%;width:8px;height:8px;animation-delay:-17s}
.px-drift i:nth-child(20){left:76%;top:36%;width:24px;height:24px;background:#ededed;animation-delay:-8s}
.px-drift i:nth-child(21){left:18%;top:8%;width:10px;height:10px;animation-delay:-22s}
.px-drift i:nth-child(22){left:58%;top:18%;width:12px;height:12px;background:#c6f54e;animation-delay:-6s}
.px-drift i:nth-child(23){left:34%;top:58%;width:9px;height:9px;animation-delay:-19s}
.px-drift i:nth-child(24){left:96%;top:38%;width:15px;height:15px;animation-delay:-11s}
.px-drift i:nth-child(25){left:12%;top:62%;width:13px;height:13px;animation-delay:-3s}
.px-drift i:nth-child(26){left:66%;top:52%;width:8px;height:8px;animation-delay:-15s}
.px-drift i:nth-child(27){left:42%;top:28%;width:11px;height:11px;animation-delay:-9s}
.px-drift i:nth-child(28){left:84%;top:8%;width:20px;height:20px;background:#e2e2e2;animation-delay:-20s}
@keyframes px-w1{0%{transform:translate3d(0,0,0)}32%{transform:translate3d(88px,-130px,0)}68%{transform:translate3d(-64px,-24px,0)}100%{transform:translate3d(36px,150px,0)}}
@keyframes px-w2{0%{transform:translate3d(0,0,0)}38%{transform:translate3d(-120px,70px,0)}72%{transform:translate3d(48px,160px,0)}100%{transform:translate3d(-28px,-100px,0)}}
@keyframes px-w3{0%{transform:translate3d(0,0,0)}28%{transform:translate3d(46px,110px,0)}60%{transform:translate3d(140px,16px,0)}100%{transform:translate3d(-90px,-120px,0)}}
@keyframes px-w4{0%{transform:translate3d(0,0,0)}46%{transform:translate3d(-70px,-150px,0)}100%{transform:translate3d(130px,64px,0)}}
@keyframes px-w5{0%{transform:translate3d(0,0,0)}34%{transform:translate3d(110px,80px,0)}70%{transform:translate3d(-96px,36px,0)}100%{transform:translate3d(18px,-140px,0)}}
@keyframes px-w6{0%{transform:translate3d(0,0,0)}42%{transform:translate3d(-36px,170px,0)}100%{transform:translate3d(96px,-54px,0)}}
.seo-doc{position:relative}
::selection{background:#111;color:#fff}
a:focus-visible,button:focus-visible{outline-color:#111}

.site-nav{position:sticky;top:0;z-index:20;margin:0;padding:18px 4vw;border-bottom:0;background:#fff}
.site-nav img{width:168px}
.site-nav nav{gap:28px}
.site-nav a{font-size:15px}
.site-nav nav a:hover{text-decoration:none;opacity:.55}
.site-nav nav a[aria-current=page]{font-weight:700;text-decoration:none;opacity:1}
.site-nav .nav-action{min-height:44px;padding:0 22px;border-radius:999px;background:#111;color:#fff;font-size:15px;line-height:44px}
.site-nav nav a.nav-action:hover{opacity:1;background:#333;color:#fff}

.seo-doc,.legal-doc{max-width:1120px;padding:28px 6vw 80px}
.seo-hero{padding:28px 0 36px}
h1,h2{font-family:Rounded,Arial,sans-serif;font-weight:700;letter-spacing:-.04em}
h1{font-size:clamp(46px,5.6vw,84px);line-height:.94;margin:0 0 18px}
h2{font-size:clamp(32px,3.4vw,48px);line-height:1.02}
.seo-lead{font-size:18px;line-height:1.5;color:#3a3a3a;max-width:40rem}
.seo-crumb{font-size:14px;color:#666}
.seo-crumb a{text-decoration:none}
.seo-section{padding:36px 0;border-top:1px solid #e6e6e6}
.seo-section p,.seo-list{color:#333}
.seo-grid{gap:28px 24px}
.seo-tile{padding:0 0 8px;border-bottom:0}
.seo-tile h2{font-size:clamp(28px,2.6vw,40px);margin:0 0 10px}
.seo-tile:hover h2{text-decoration:none}
.seo-tile img{width:100%;height:auto;object-fit:cover;object-position:top center;border-radius:28px;margin-bottom:16px;aspect-ratio:16/10}
.btn{border-radius:999px;border:1px solid #111;padding:0 22px;min-height:48px;font-size:15px;background:#fff;color:#111}
.btn:hover{transform:none;background:#f3f3f3}
.btn.primary{background:#111;color:#fff;border-color:#111}
.btn.primary:hover{background:#333;color:#fff}
.seo-cta{background:#111;color:#fff;border-radius:28px;padding:36px 32px}
.seo-cta h2,.seo-cta p,.seo-cta a{color:#fff}
.seo-cta .btn.primary{background:#fff;color:#111;border-color:#fff}
.seo-cta .btn.primary:hover{background:#e6e6e6;color:#111}
.seo-cta .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.seo-cta .btn.ghost:hover{background:#222;color:#fff}
.seo-shot,.seo-doc figure img{border-radius:28px}
.case-devices img,.seo-case-media img{border-radius:28px}
body .graphic-feature,body .case-devices,body .graphic-brand{background:#f3f3f3;border-radius:28px;color:#111}
body .graphic-overview .graphic-feature:nth-child(2){background:#ececec}
body .graphic-feature figcaption,
body .graphic-feature figcaption span,
body .graphic-feature figcaption a{color:#111}
body .seo-doc img.graphic-phone,body .seo-doc img.case-mobile{display:none}
body .graphic-device{padding:0}
body .case-devices{padding:16px}
body .case-devices>img{border-radius:20px;box-shadow:none}
body .seo-doc .graphic-flow,body .seo-doc .graphic-motion{background:#111;color:#fff;border-radius:28px}
body .seo-doc .graphic-flow figcaption,body .seo-doc .graphic-flow figcaption strong,body .seo-doc .graphic-motion,body .seo-doc .graphic-motion strong{color:#fff}
body .seo-doc .graphic-flow figcaption span,body .seo-doc .graphic-flow>p,body .seo-doc .graphic-motion p,body .seo-doc .graphic-motion a{color:#cfcfcf}
body .flow-route>div{background:#222;color:#fff;border:0;border-radius:20px}
body .flow-route>div:nth-of-type(2){background:#fff;color:#111}
body .flow-route span,body .flow-route strong,body .flow-route small{color:inherit}
body .flow-route i{color:#fff}
body .pixel-field span{background:#c6f54e;animation:none}
.scope-table th,.scope-table td{border-bottom:1px solid #e4e4e4}
.contact-lines a{font-family:Rounded,Arial,sans-serif;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;text-decoration:none}
.contact-lines a:hover{text-decoration:underline}
.related a{text-decoration:none;border-bottom:1px solid #111}
.site-footer{padding:36px 4vw 48px;background:#111;color:#cfcfcf}
.site-footer img{width:140px}
.footer-links a,.site-footer button{font-size:14px;color:#cfcfcf;text-decoration:none}
.footer-links a:hover,.site-footer button:hover{color:#fff}
.site-footer p{color:#8d8d8d}
.cookie{z-index:40;border-radius:16px}
.cookie[hidden]{display:none}
.legal-doc h1{font-size:clamp(40px,5vw,64px)}

body .btn,
body .btn.primary,
body .btn.ghost,
body .site-nav .nav-action{
  justify-content:center;
  gap:0;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  box-shadow:none;
  text-align:center;
  line-height:1;
}
body .site-nav .nav-action{min-height:44px;padding:0 22px;background:#111;color:#fff;border-color:#111;font-size:15px}
body .btn.primary{background:#111;color:#fff;border-color:#111}
body .btn.ghost{background:#fff;color:#111;border-color:#111}
body .seo-cta .btn.primary{background:#fff;color:#111;border-color:#fff}
body .seo-cta .btn.ghost{background:transparent;color:#fff;border-color:#fff}
body .btn.primary::after,
body .btn.ghost::after,
body .site-nav .nav-action::after,
body .hero-secondary::after{content:none;display:none;width:0;height:0;flex:none}
body .site-nav .nav-action:hover,
body .btn.primary:hover{background:#333;border-color:#333;color:#fff}
body .seo-cta .btn.primary:hover{background:#e6e6e6;color:#111;border-color:#e6e6e6}
body .btn.ghost:hover{background:#f3f3f3;color:#111;border-color:#111}
body .seo-cta .btn.ghost:hover{background:#222;color:#fff;border-color:#fff}

body aside.cookie{
  left:16px;right:16px;bottom:12px;width:auto;z-index:40;
  display:flex;align-items:center;gap:16px;
  padding:12px 14px 12px 18px;border-radius:16px;
  box-shadow:0 10px 30px #00000024
}
body aside.cookie[hidden]{display:none}
body aside.cookie p{margin:0;flex:1;font-size:14px;line-height:1.4;color:#19221f}
body aside.cookie div{margin:0;flex:none;display:flex;gap:8px}
body aside.cookie button{
  white-space:nowrap;min-height:40px;padding:0 16px;border:0;border-radius:999px;
  background:#111;color:#fff;font-size:14px
}
body aside.cookie button:last-child{background:#f3f3f3;color:#111}

.graphic-brand figcaption{display:none}
.graphic-device{padding:0}
.case-devices{padding:8px}

/* Same blocks as the homepage: gray cards, black work reel, clean frames. */
html{overflow-x:clip}
body{overflow:visible;max-width:100%}
.seo-section{border-top:0;padding:18px 0 28px}
.seo-hero{padding:6vh 0 28px;text-align:center}
.seo-hero .seo-lead{margin-left:auto;margin-right:auto}
.cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.seo-crumb{text-align:center}

.seo-grid:not(:has(img)){gap:12px}
.seo-grid:not(:has(img)) .seo-tile{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:168px;padding:28px 32px;border:0;border-radius:28px;
  background:#f3f3f3;color:#111;transition:background .35s,color .35s
}
.seo-grid:not(:has(img)) .seo-tile h2{margin:0 0 10px;font-size:clamp(28px,2.6vw,40px);color:#111}
.seo-grid:not(:has(img)) .seo-tile p{margin:0;color:#333}
.seo-grid:not(:has(img)) .seo-tile:hover{background:#111;color:#fff}
.seo-grid:not(:has(img)) .seo-tile:hover h2,
.seo-grid:not(:has(img)) .seo-tile:hover p{color:#fff;text-decoration:none}

.seo-section:has(.seo-grid img){
  background:#111;color:#fff;border:0;
  width:auto;margin-left:-6vw;margin-right:-6vw;
  padding:72px 4vw 100px;box-sizing:border-box
}
.seo-grid:has(img){gap:28px 22px;align-items:start}
.seo-grid:has(img) .seo-tile{border:0;padding:0;color:#fff;background:transparent}
.seo-grid:has(img) .seo-tile:nth-child(even){margin-top:72px}
.seo-grid:has(img) .seo-tile h2{color:#fff}
.seo-grid:has(img) .seo-tile p{color:#ececec}
.seo-grid:has(img) .seo-tile img{border-radius:28px;aspect-ratio:16/10;margin-bottom:16px}

body.faq-page .seo-section{
  background:#f3f3f3;border-radius:28px;padding:28px 32px;margin:0 0 12px
}
body.faq-page .seo-section h2{margin-top:0}
body.faq-page .seo-cta{background:#111;color:#fff;margin-top:20px}
body.faq-page .seo-cta h2,body.faq-page .seo-cta p,body.faq-page .seo-cta a{color:#fff}

.scope-table th,.scope-table td{padding:20px 0;border-bottom:1px solid #e6e6e6;font-size:16px;background:transparent}
.scope-table th{font-family:Rounded,Arial,sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#777}
.seo-list li::marker{color:#111}

body .case-devices{background:transparent;padding:0;border-radius:28px;overflow:hidden}
body .case-devices>img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:28px;box-shadow:none}
/* Case poster: a portrait-ish crop of the first screen, shown instead of the wide shot on phones. */
body .case-devices>img.case-poster{display:none}
body .graphic-brand{background:#111;border-radius:28px;padding:64px 32px}
body .graphic-brand img{filter:invert(1);width:min(460px,78%);height:auto;margin:0 auto;display:block}

.related{gap:18px 28px}
.related a{border-bottom:0;text-decoration:none;font-size:16px}
.related a:hover{opacity:.55}
.site-footer .footer-top{align-items:flex-start}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 22px}
.site-footer img{width:140px;height:auto;max-height:36px}
.site-footer::after{content:none;display:none;height:0;margin:0;background:none}
.scope-table{table-layout:fixed;width:100%}
.scope-table th,.scope-table td{white-space:normal;vertical-align:top}
.scope-table th:first-child,.scope-table td:first-child{width:34%;padding-right:28px}
body:has(aside.cookie:not([hidden])){padding-bottom:96px}

@media(max-width:700px){
.site-nav{padding:16px 5vw;flex-direction:row;flex-wrap:wrap;align-items:center}
.site-nav img{width:140px}
.site-nav nav{gap:12px 16px}
.site-nav nav a{font-size:14px}
.site-nav .nav-action{padding:0 16px;line-height:40px;min-height:40px}
h1{font-size:40px}
.legal-doc h1{font-size:36px}
.seo-doc,.legal-doc{padding:16px 5vw 56px}
.seo-tile img,.seo-shot,.seo-doc figure img{border-radius:20px}
.seo-cta{padding:24px 18px;border-radius:20px}
body aside.cookie{flex-direction:column;align-items:stretch}
body .site-nav .nav-action{min-height:40px;padding:0 16px;font-size:14px}
.seo-grid:not(:has(img)) .seo-tile{min-height:0;padding:22px;border-radius:20px}
.seo-grid,.graphic-overview{grid-template-columns:1fr}
.seo-grid:has(img) .seo-tile:nth-child(even){margin-top:0}
.seo-section:has(.seo-grid img){margin-left:-5vw;margin-right:-5vw;padding:56px 5vw 64px}
body .case-devices{display:block;overflow:visible}
body .case-devices>img{height:auto;max-width:100%}
body.faq-page .seo-section{padding:22px;border-radius:20px}
body .case-devices>img{aspect-ratio:auto;object-fit:contain;background:#f3f3f3}
body .case-devices.has-poster>img:first-child{display:none}
body .case-devices>img.case-poster{display:block;width:100%;height:auto;object-fit:unset;background:transparent}
}
@media(max-width:900px){
.seo-grid,.graphic-overview{grid-template-columns:1fr}
.seo-grid:has(img) .seo-tile:nth-child(even){margin-top:0}
}
body .graphic-brand img{border-radius:0;object-fit:contain;object-position:center;max-height:none;height:auto}
@media(max-width:700px){.px-drift i{width:10px;height:10px}.px-drift i:nth-child(5),.px-drift i:nth-child(11),.px-drift i:nth-child(18){width:14px;height:14px}}
.px-drift.is-live i:nth-child(n){animation:none}
@media(prefers-reduced-motion:reduce){.px-drift i:nth-child(n){animation:none}}

/* Visual pass 25.09.2026 */
/* The later .seo-section padding reset stripped the dark call-to-action card of its inner padding. */
.seo-section.seo-cta{padding:36px 32px}
.seo-cta .seo-list,.seo-cta .seo-list li{color:#d7d7d7}
.seo-cta .seo-list strong{color:#fff}
/* Keep the footer at the bottom on short pages such as 404. */
body.seo-page>main{min-height:calc(100svh - 360px)}
/* Long e-mail must wrap on narrow phones. */
.contact-lines a{overflow-wrap:anywhere}
@media(max-width:900px){
.seo-section.seo-cta{padding:28px 22px}
.contact-lines a{font-size:clamp(20px,6.4vw,28px)}
}
/* Work screenshots fade and settle in (class set by pages.js, so without JS they show at once). */
html.px-js .px-img{opacity:0;scale:1.06;transition:opacity .8s ease,scale 1.4s cubic-bezier(.16,1,.3,1)}
html.px-js .px-img.is-shown{opacity:1;scale:1}
@media(prefers-reduced-motion:reduce){html.px-js .px-img{opacity:1;scale:1;transition:none}}
/* Case feature cards with small interface mock-ups (demo numbers). */
.case-features{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:8px 0 0}
.case-feature{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:28px;background:#f3f3f3}
.case-feature h3{margin:0;font-family:Rounded,Arial,sans-serif;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;color:#111}
.case-feature>p{margin:0;color:#333;line-height:1.5}
.case-feature ul{margin:0;padding-left:1.2em;color:#333;line-height:1.5}
.case-feature li{margin:0 0 6px}
.mock{min-width:0;overflow-x:auto;padding:16px;border-radius:18px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);font-size:13px;color:#2b2f2e}
.mock-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.mock-kpi{padding:12px 14px;border-radius:12px;background:#fbeeee}
.mock-kpi span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9b4b4b}
.mock-kpi b{display:block;margin-top:4px;font-size:clamp(20px,2vw,26px);color:#b23b3b}
.mock table{width:100%;border-collapse:collapse}
.mock th{padding:6px 6px;font-size:11px;font-weight:600;color:#7a7f7d;text-align:left;border-bottom:1px solid #ececec}
.mock td{padding:7px 6px;border-bottom:1px solid #f1f1f1;white-space:nowrap}
.mock td.n,.mock th.n{text-align:right}
.mock td.loss{color:#b23b3b;font-weight:600}
.mock td.order{font-weight:700;color:#111}
.mock td.order span{display:inline-block;min-width:34px;padding:2px 8px;border-radius:999px;background:#fdf1d8;color:#8a5a00;text-align:center}
.mock-note{margin:10px 0 0;font-size:11px;color:#8a8f8d}
@media(max-width:900px){.case-features{grid-template-columns:minmax(0,1fr)}.mock{font-size:12px}.case-feature{padding:20px}.mock{overflow-x:auto}}
/* Real (anonymized) screenshots inside case feature cards. */
.case-shot{margin:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.08)}
.case-shot img{display:block;width:100%;height:auto}
/* "In progress" label on portfolio tiles. */
.tile-badge{display:inline-block;margin-left:10px;padding:4px 10px;border-radius:999px;background:#c6f54e;color:#19221f;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;letter-spacing:0;vertical-align:middle}