@font-face{
font-family:Mono;
src:url('../fonts/JetBrainsMono-Regular.woff2')}
@font-face{
font-family:Barlow;
src:url('../fonts/BarlowCondensed-Bold.woff2');
font-weight:700}

:root{
--ink:#162125;
--paper:#edf2f0;
--panel:#f9fbfa;
--line:#b8c8c4;
--cyan:#00c9d1;
--cyan-deep:#056f78;
--dark:#111b20;
--muted:#526267}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.shell{
width:min(1120px,calc(100% - 40px));
margin:auto}
.skip-link{
position:absolute;
left:-999px}
.skip-link:focus{
left:12px;
top:12px;
z-index:20;
background:#fff;
padding:9px;
color:#000}
.site-header{
position:sticky;
top:0;
z-index:10;
background:rgba(237,242,240,.94);
border-bottom:1px solid var(--line);
backdrop-filter:blur(12px)}
.nav{
min-height:64px;
display:flex;
align-items:center;
gap:20px}
.brand{
font-weight:700;
text-decoration:none;
color:var(--ink);
letter-spacing:-.04em}
.brand-glyph,.brand b{
display:inline-grid;
place-items:center;
width:28px;
height:28px;
margin-right:7px;
background:var(--dark);
color:var(--cyan);
font:11px Mono}
.brand-word span,.brand span{
color:var(--cyan-deep)}
.nav-links,.links{
display:flex;
align-items:center;
gap:18px;
margin-left:auto}
.nav a,.footer-links a{
color:inherit;
text-decoration:none}
.nav-links a:not(.nav-cta),.links a{
font-size:13px}
.nav a[aria-current=page]{
color:var(--cyan-deep);
text-decoration:underline;
text-underline-offset:6px}
.nav-cta,.button{
background:var(--dark);
color:#fff!important;
padding:9px 13px;
text-decoration:none;
display:inline-flex;
gap:8px;
align-items:center;
border:1px solid var(--dark)}
.menu-button,.menu{
display:none;
background:none;
border:1px solid var(--line);
padding:8px 10px;
font:12px Mono;
color:var(--ink)}
.motion-toggle{
border:1px solid var(--line);
background:transparent;
padding:7px 9px;
font:11px Mono;
color:var(--ink);
white-space:nowrap}
.page-hero{
padding:76px 0 48px;
max-width:820px;
margin-left:max(20px,calc((100% - 1120px)/2))}
.page-hero h1{
font:700 clamp(46px,7vw,86px)/.91 Barlow,Impact,sans-serif;
letter-spacing:-.035em;
margin:10px 0 20px;
text-wrap:balance}
.page-hero>p:last-child{
max-width:650px;
font-size:19px;
color:var(--muted)}
.breadcrumbs,.kicker,.eyebrow{
font:11px/1.3 Mono;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--cyan-deep)}
.breadcrumbs{
display:flex;
gap:8px}
.breadcrumbs a{
color:inherit}
.section{
padding:56px 0;
border-top:1px solid var(--line)}
.muted-section{
background:#dce7e4}
.service-index-grid,.editorial-split,.faq-layout,.form-layout{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:42px}
.service-index-grid{
grid-template-columns:repeat(3,1fr)}
.service-index-item{
border-top:3px solid var(--cyan-deep);
padding:18px 0}
.service-index-item.offset{
margin-top:42px}
.section h2{
font:700 clamp(30px,4vw,48px)/.96 Barlow,Impact,sans-serif;
letter-spacing:-.02em;
margin:8px 0 15px}
.section h3{
font:700 26px/1 Barlow,sans-serif;
margin:8px 0}
.text-link{
color:var(--cyan-deep);
font:13px Mono;
text-decoration:none}
.stacked-list article{
padding:0 0 20px;
margin-bottom:18px;
border-bottom:1px solid var(--line)}
.stacked-copy p{
font-size:18px}
.faq-layout header{
max-width:360px}
.faq-list details{
border-top:1px solid var(--line);
padding:16px 0}
.faq-list summary{
font-weight:700;
cursor:pointer}
.site-footer{
padding:38px 0;
background:var(--dark);
color:#e9f1ef}
.footer-layout{
display:flex;
gap:40px;
justify-content:space-between}
.footer-brand p{
color:#b6c8c5;
max-width:260px}
.footer-links{
display:flex;
flex-wrap:wrap;
align-content:flex-start;
justify-content:flex-end;
gap:10px 20px;
max-width:480px;
font-size:14px}
.compact-cta{
border:0}
.tony-profile{
display:grid;
grid-template-columns:1fr 2fr;
gap:50px;
border-top:3px solid var(--cyan-deep);
padding-top:24px}
.tony-profile h2{
font-size:64px}
.case-grid,.use-case-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px}
.case-card,.use-case-card{
background:var(--panel);
padding:22px;
border:1px solid var(--line)}
.case-card img{
display:none}
.lead-form{
background:var(--panel);
padding:24px;
border:1px solid var(--line)}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px}
.form-group{
display:grid;
gap:5px;
margin-bottom:14px}
.form-group label{
font:12px Mono}
.form-group input,.form-group select,.form-group textarea{
font:inherit;
padding:10px;
border:1px solid var(--line);
background:white;
color:var(--ink)}
.form-group textarea{
min-height:130px}
.form-note,.form-status{
font-size:13px;
color:var(--muted)}
.legal-content{
max-width:760px}
.legal-content h2{
margin-top:36px;
font:700 30px/1 Barlow,sans-serif}
.diagram{
width:min(1120px,calc(100% - 40px));
margin:0 auto 56px;
background:#d9e8e5;
border:1px solid var(--line);
padding:18px;
overflow:hidden}
.diagram figcaption{
font:11px Mono;
letter-spacing:.1em;
color:var(--cyan-deep);
margin-bottom:14px;
text-transform:uppercase}
.route{
display:grid;
grid-template-columns:1fr 28px 1fr 28px 1fr;
align-items:center;
min-height:105px}
.route .node{
background:var(--dark);
color:#eff;
min-height:70px;
padding:14px;
display:grid;
align-content:center;
font-size:14px}
.route .node small{
font:10px Mono;
color:var(--cyan)}
.route .arrow{
height:2px;
background:var(--cyan-deep);
position:relative}
.route .arrow:after{
content:'›';
position:absolute;
right:-1px;
top:-16px;
color:var(--cyan-deep);
font-size:28px}
.route .exception{
border-color:#b24e36;
background:#fff1ed;
color:#54271d}
.route .layer{
display:grid;
gap:5px}
.route .layer span{
border:1px solid var(--cyan-deep);
padding:7px 10px;
background:#f7fbfa;
font:11px Mono}
.diagram[data-kind=consult] .node:nth-child(3),.diagram[data-kind=automation] .node:nth-child(3),.diagram[data-kind=custom] .layer{
animation:pulse 3.4s ease-in-out infinite}
.diagram[data-kind=automation] .node:nth-child(5){
animation:exception 4s ease-in-out infinite}
@keyframes pulse{
50%{
transform:translateY(-4px);
box-shadow:0 7px 0 rgba(0,201,209,.25)}
}
@keyframes exception{
35%,55%{
background:#fff1ed;
border-color:#b24e36;
color:#54271d}
}
@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
animation:none!important;
transition:none!important}
html{
scroll-behavior:auto}
}
body.motion-paused .diagram *{
animation-play-state:paused!important}

@media(max-width:760px){
.shell{
width:min(100% - 28px,1120px)}
.nav{
min-height:58px;
gap:9px}
.preview{
display:none}
.menu-button,.menu{
display:block;
margin-left:auto}
.has-js .nav-links,.has-js .links{
display:none;
position:absolute;
top:58px;
left:0;
right:0;
margin:0;
padding:16px 14px;
background:var(--paper);
border-bottom:1px solid var(--line);
flex-direction:column;
align-items:flex-start}
.has-js .nav-links.open,.has-js .links.open{
display:flex}
.motion-toggle{
margin-left:0}
.page-hero{
padding:48px 14px 34px;
margin:0}
.page-hero>p:last-child{
font-size:17px}
.service-index-grid,.editorial-split,.faq-layout,.form-layout,.tony-profile,.case-grid,.use-case-grid{
grid-template-columns:1fr;
gap:25px}
.service-index-item.offset{
margin-top:0}
.footer-layout{
display:block}
.footer-links{
justify-content:flex-start;
margin-top:22px}
.form-layout .form-container{
order:-1}
.form-row{
grid-template-columns:1fr}
.route{
grid-template-columns:1fr;
gap:6px}
.route .arrow{
height:20px;
width:2px;
margin-left:20px}
.route .arrow:after{
right:-7px;
top:4px;
transform:rotate(90deg)}
.tony-profile h2{
font-size:50px}
}

.semantic-thumb{
display:grid;
place-items:center;
min-height:82px;
margin-bottom:18px;
border:1px solid var(--cyan-deep);
background:repeating-linear-gradient(90deg,#e9f4f2 0 10px,#dcebe8 10px 11px);
font:10px Mono;
color:var(--cyan-deep);
text-transform:uppercase;
letter-spacing:.08em}

.diagram .node,.diagram .layer{
border:1px solid transparent}
.diagram[data-kind=consult] .node:nth-child(3),.diagram[data-kind=automation] .node:nth-child(3),.diagram[data-kind=custom] .layer,.diagram[data-kind=automation] .node:nth-child(5){
animation:none}
.diagram[data-kind] .node:nth-child(1){
animation:route-node 4.8s linear infinite}
.diagram[data-kind] .node:nth-child(3),.diagram[data-kind=custom] .layer{
animation:route-node 4.8s 1.6s linear infinite}
.diagram[data-kind] .node:nth-child(5){
animation:route-node 4.8s 3.2s linear infinite}
.diagram[data-kind=automation] .node:nth-child(5){
animation:exception-route 4.8s 3.2s linear infinite}
@keyframes route-node{
0%,20%,100%{
border-color:transparent;
box-shadow:none;
transform:none}
6%,16%{
border-color:var(--cyan);
box-shadow:0 0 0 4px rgba(0,201,209,.15);
transform:translateY(-2px)}
}
@keyframes exception-route{
0%,20%,100%{
border-color:transparent;
box-shadow:none;
transform:none}
6%,16%{
border-color:#b24e36;
background:#fff1ed;
color:#54271d;
box-shadow:0 0 0 4px rgba(178,78,54,.12);
transform:translateY(-2px)}
}

.project-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px}
.project-card{
background:var(--panel);
border:1px solid var(--line);
padding:22px;
display:grid;
gap:18px}
.project-card.project-featured{
grid-column:span 2;
grid-template-columns:minmax(280px,.9fr) 1.1fr;
align-items:center}
.project-card h2{
font:700 clamp(28px,3vw,42px)/.96 Barlow,sans-serif;
margin:6px 0 12px}
.project-tags{
display:flex;
flex-wrap:wrap;
gap:7px;
padding:0;
list-style:none}
.project-tags li{
font:10px Mono;
border:1px solid var(--line);
padding:5px 7px}
.work-map{
margin:0;
display:grid;
grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;
gap:4px;
align-items:center;
min-height:142px;
background:#dcebe8;
border:1px solid var(--cyan-deep);
padding:17px}
.work-map figcaption{
grid-column:1/-1;
font:10px Mono;
text-transform:uppercase;
letter-spacing:.09em;
color:var(--cyan-deep)}
.work-map span{
display:grid;
place-items:center;
min-height:53px;
padding:7px;
background:var(--dark);
color:#eff;
font-size:12px;
text-align:center;
line-height:1.2}
.work-map i{
font-style:normal;
color:var(--cyan-deep);
font-size:18px;
text-align:center}
.service-detail{
margin-top:0;
margin-bottom:0;
border-top:0}
.service-diagram-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px}
.service-diagram-grid div{
display:grid;
gap:8px;
padding:16px;
background:var(--panel);
border-left:3px solid var(--cyan-deep)}
.service-diagram-grid b{
font:700 22px/1 Barlow,sans-serif}
.service-diagram-grid span{
font:12px Mono;
color:var(--muted)}
.use-case-list{
display:grid;
gap:0}
.use-case-list article{
display:grid;
grid-template-columns:58px minmax(0,1fr) 35px;
gap:22px;
padding:24px 0;
border-top:1px solid var(--line);
align-items:start}
.use-case-list article>span{
font:13px Mono;
color:var(--cyan-deep)}
.use-case-list h2{
margin:0 0 9px}
.use-case-list p{
max-width:720px;
margin:0}
.use-case-list a{
font-size:24px;
color:var(--cyan-deep);
text-decoration:none}
.answer-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1px;
background:var(--line);
border:1px solid var(--line)}
.answer-grid article{
background:var(--panel);
padding:22px}
.legal-page,.legal-content{
max-width:760px;
margin-left:max(20px,calc((100% - 1120px)/2));
padding-bottom:50px}
.legal-page h1{
font:700 clamp(45px,6vw,72px)/.95 Barlow,sans-serif}
.site-footer .brand{
color:#fff}
.site-footer .brand-word span{
color:#62e7e4}
.site-footer .brand-glyph{
background:#d8ffff;
color:#102025}
.site-footer a:hover{
text-decoration:underline;
text-underline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
outline:3px solid var(--cyan);
outline-offset:3px}
.demo-notice{
margin:0 0 18px;
padding:11px 12px;
border-left:3px solid var(--cyan-deep);
background:#e2f0ed;
font-size:13px}
.lead-form button:disabled{
opacity:.55;
cursor:not-allowed}

@media(max-width:760px){
.project-grid,.project-card.project-featured,.service-diagram-grid,.answer-grid{
grid-template-columns:1fr}
.project-card.project-featured{
grid-column:auto}
.work-map{
grid-template-columns:1fr;
gap:5px}
.work-map i{
transform:rotate(90deg);
height:12px}
.use-case-list article{
grid-template-columns:35px minmax(0,1fr)}
.use-case-list article>a{
grid-column:2}
.site-footer .nav-links{
display:flex;
flex-wrap:wrap;
margin:12px 0 0}
.site-footer .menu-button{
display:none}
}

/* Browser state classes are added only by progressive enhancement. Static reading remains complete. */
html.is-paused *,html.is-paused *::before,html.is-paused *::after,html.page-hidden *,html.page-hidden *::before,html.page-hidden *::after,.offscreen *,.offscreen *::before,.offscreen *::after{
animation-play-state:paused!important}

@media(max-width:1000px){
html:not(.has-js) .menu-button{
display:none}
html:not(.has-js) .nav{
flex-wrap:wrap;
padding:10px 0}
html:not(.has-js) .nav-links{
order:3;
width:100%;
margin:0;
flex-wrap:wrap;
gap:9px 15px}
html:not(.has-js) .nav-cta{
margin-left:auto}
.has-js .nav-links{
display:none;
position:absolute;
top:58px;
left:0;
right:0;
margin:0;
padding:16px 14px;
background:var(--paper);
border-bottom:1px solid var(--line);
flex-direction:column;
align-items:flex-start}
.has-js .nav-links.open{
display:flex}
.has-js .menu-button{
display:block;
margin-left:auto}
.has-js .motion-toggle{
margin-left:0}
}

@media(prefers-reduced-motion:no-preference){
.has-js .diagram[data-kind] .node:nth-child(1){
animation:route-node 4.8s linear infinite}
.has-js .diagram[data-kind] .node:nth-child(3),.has-js .diagram[data-kind=custom] .layer{
animation:route-node 4.8s 1.6s linear infinite}
.has-js .diagram[data-kind] .node:nth-child(5){
animation:route-node 4.8s 3.2s linear infinite}
.has-js .diagram[data-kind=automation] .node:nth-child(5){
animation:exception-route 4.8s 3.2s linear infinite}
}

html:not(.has-js) .diagram *{
animation:none!important}


/* Flow emphasis traces the reading direction;
 diagrams retain their complete text. */
[id]{
scroll-margin-top:calc(var(--header-height,64px) + 20px)}

.brand-glyph{
color:#b8f6f2!important}
.site-footer .brand-glyph{
color:#102025!important}
.site-footer .brand-word{
color:#eefafa}

html.is-paused{
scroll-behavior:auto}

.nav-links{
top:100%!important}
.menu-button,.motion-toggle{
min-height:40px}
.skip-link{
position:fixed}

.form-group{
min-width:0}
.form-group input,.form-group select,.form-group textarea{
min-width:0;
width:100%}

.work-map span{
overflow-wrap:anywhere;
border:1px solid transparent}

.mini-flow{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:6px}
.mini-flow li{
font-size:13px;
border-top:1px solid var(--line);
padding:8px 0 2px}
.mini-flow li::before{
content:'↳';
margin-right:8px;
color:var(--cyan-deep)}

.exception-branch{
display:flex;
align-items:center;
gap:14px;
margin:12px 0 0 36%;
max-width:430px}
.exception-branch>span{
font-size:30px;
color:var(--cyan-deep)}
.exception-branch .node{
background:#fff1ed;
color:#54271d;
padding:13px 18px;
display:grid;
border-left:2px solid #a65036}
.exception-branch small{
font:10px Mono;
margin-bottom:6px}

@media(prefers-reduced-motion:no-preference){

.has-js .work-map span{
animation:work-step 6s linear infinite}
.has-js .work-map span:nth-of-type(2){
animation-delay:1.5s}
.has-js .work-map span:nth-of-type(3){
animation-delay:3s}
.has-js .work-map span:nth-of-type(4){
animation-delay:4.5s}

.has-js .mini-flow li{
animation:mini-step 6s linear infinite}
.has-js .mini-flow li:nth-child(2){
animation-delay:2s}
.has-js .mini-flow li:nth-child(3){
animation-delay:4s}

.has-js .exception-branch .node{
animation:branch-step 6s linear infinite}

}

@keyframes work-step{
0%,24%,100%{
border-color:transparent}
5%,20%{
border-color:#00c9d1;
box-shadow:inset 0 -3px #00c9d1}
}

@keyframes mini-step{
0%,30%,100%{
background:transparent}
6%,25%{
background:#c4eeeb}
}

@keyframes branch-step{
0%,65%,100%{
box-shadow:none}
75%,90%{
box-shadow:0 0 0 3px #d39c87}
}

@media(max-width:760px){
.exception-branch{
margin-left:20px}
.project-card{
padding:18px}
.work-map span{
min-height:40px}
.work-map{
padding:14px}
.page-hero{
padding-top:36px}
}